tmiller/pokemon
1
0
Fork 1
Code Issues 4 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

new border pattern for each condition on modal, added icon display for 1st edition on both card/card modal

Browse Source
This commit is contained in:
zach
2026-03-09 12:00:29 -04:00
parent f5fcd7b3e7
commit 68bed6ff8e
5 changed files with 60 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/pages/partials/card-modal.astro
View File

@@ -5,6 +5,7 @@ import EnergyIcon from '../../components/EnergyIcon.astro';
import RarityIcon from '../../components/RarityIcon.astro';
import { db } from '../../db/index';
import { privateDecrypt } from "node:crypto";
import FirstEditionIcon from "../../components/FirstEditionIcon.astro";
export const partial = true;
export const prerender = false;
@@ -77,7 +78,7 @@ const conditionAttributes = (price: any) => {
const high = price?.highestPrice;
const median = price?.medianPrice;
if (current === null || low === null || high === null) return "—";
if (current === null || low === null || high === null) return "Indeterminate";
const range = Number(high) - Number(low);
if (range <= 0) return "Low";
@@ -88,19 +89,26 @@ const conditionAttributes = (price: any) => {
return "Low";
})();
const volatilityClass =
volatility === "High" ? "alert-danger" :
volatility === "Medium" ? "alert-warning" :
volatility === "Low" ? "alert-success" :
"";
// Updated logic:
// ❗ If High / Medium / Low → never "alert-secondary"
// ❗ If Indeterminate → "alert-secondary"
const volatilityClass = (() => {
switch (volatility) {
case "High": return "alert-danger";
case "Medium": return "alert-warning";
case "Low": return "alert-success";
default: return "alert-secondary"; // Only for Indeterminate
}
})();
const condition: string = price?.condition || "Near Mint";
return {
"Near Mint": { label: "nav-nm", volatility: volatility, volatilityClass: volatilityClass, class:"show active" },
"Lightly Played": { label: "nav-lp", volatility: volatility, volatilityClass: volatilityClass },
"Moderately Played": { label: "nav-mp", volatility: volatility, volatilityClass: volatilityClass },
"Heavily Played": { label: "nav-hp", volatility: volatility, volatilityClass: volatilityClass },
"Damaged": { label: "nav-dmg", volatility: volatility, volatilityClass: volatilityClass},
"Near Mint": { label: "nav-nm", volatility, volatilityClass, class: "show active" },
"Lightly Played": { label: "nav-lp", volatility, volatilityClass },
"Moderately Played": { label: "nav-mp", volatility, volatilityClass },
"Heavily Played": { label: "nav-hp", volatility, volatilityClass },
"Damaged": { label: "nav-dmg", volatility, volatilityClass }
}[condition];
};
@@ -136,7 +144,7 @@ const ebaySearchUrl = (card: any) => {
<div class="card mb-2 border-0">
<div class="row g-4">
<div class="col-sm-12 col-md-3">
<div class="position-relative mt-1"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-4" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/default.jpg'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
<div class="position-relative mt-1"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-4" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/default.jpg'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute top-50 start-0 d-inline"><FirstEditionIcon edition={card?.variant} /></span><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
<div class="d-flex flex-row justify-content-between mt-2">
<div class="p text-secondary">{card?.set?.setCode}</div>
<div class="p text-secondary">Illustrator: {card?.Artist}</div>
@@ -184,7 +192,7 @@ const ebaySearchUrl = (card: any) => {
</div>
<div class={`alert alert-secondary rounded p-2 flex-fill mb-1 ${attributes?.volatilityClass}`}>
<h6>Volatility</h6>
<p class="pb-0">{attributes?.volatility}</p>
<p class="pb-0 small">{attributes?.volatility}</p>
</div>
</div>
<div class="d-flex flex-column gap-1 col-12 col-md-10 mb-0 me-2">