From 68bed6ff8e5e2b678096f7f510e2e66221c478b6 Mon Sep 17 00:00:00 2001 From: zach Date: Mon, 9 Mar 2026 12:00:29 -0400 Subject: [PATCH] new border pattern for each condition on modal, added icon display for 1st edition on both card/card modal --- src/assets/css/main.scss | 24 +++++++++++++++++-- src/components/FirstEditionIcon.astro | 13 ++++++++++ src/pages/partials/card-modal.astro | 34 +++++++++++++++++---------- src/pages/partials/cards.astro | 5 ++-- src/svg/edition/firstEdition.svg | 1 + 5 files changed, 60 insertions(+), 17 deletions(-) create mode 100644 src/components/FirstEditionIcon.astro create mode 100644 src/svg/edition/firstEdition.svg diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 30de49b..25cbdac 100644 --- a/src/assets/css/main.scss +++ b/src/assets/css/main.scss @@ -220,7 +220,7 @@ $tiers: ( color: rgba(255, 255, 255, 0.87); } } - } + } } /* -------------------------------------------------- @@ -250,6 +250,12 @@ $tiers: ( margin-top: -0.25rem; } +.medium-icon svg { + width: 100%; + max-height: 32px; + margin-left: -0.25rem; +} + /* Black silhouette overlay */ .masked-image { z-index: 1000; @@ -272,7 +278,7 @@ $tiers: ( /* SVG sizes */ .energy-icon svg, .rarity-icon-large svg, -.set-icon svg { +.set-icon svg, .edition-icon svg { width: 2.5rem; z-index: 999; } @@ -355,6 +361,20 @@ $tiers: ( ); } +$tiers: ( + nm: rgba(156, 204, 102, 1), + lp: rgba(211, 225, 86, 1), + mp: rgba(255, 238, 87, 1), + hp: rgba(255, 201, 41, 1), + dmg: rgba(255, 167, 36, 1) +); + +@each $name, $color in $tiers { + .nav-#{$name} div.alert-secondary { + border-left: 3px solid $color; + } +} + .inventory-button { margin-bottom: -2rem; margin-right: -0.25rem; diff --git a/src/components/FirstEditionIcon.astro b/src/components/FirstEditionIcon.astro new file mode 100644 index 0000000..6565e39 --- /dev/null +++ b/src/components/FirstEditionIcon.astro @@ -0,0 +1,13 @@ +--- +import first from "/src/svg/edition/firstEdition.svg?raw"; + +const { edition } = Astro.props; + +const editionMap = { + "1st Edition Holofoil": first, +}; + +const svg = editionMap[edition as keyof typeof editionMap] ?? ""; +--- + +
diff --git a/src/pages/partials/card-modal.astro b/src/pages/partials/card-modal.astro index e4bb130..c2b0722 100644 --- a/src/pages/partials/card-modal.astro +++ b/src/pages/partials/card-modal.astro @@ -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) => {
-
{card?.productName}
+
{card?.productName}
{card?.set?.setCode}
Illustrator: {card?.Artist}
@@ -184,7 +192,7 @@ const ebaySearchUrl = (card: any) => {
Volatility
-

{attributes?.volatility}

+

{attributes?.volatility}

diff --git a/src/pages/partials/cards.astro b/src/pages/partials/cards.astro index ed37eaa..865855f 100644 --- a/src/pages/partials/cards.astro +++ b/src/pages/partials/cards.astro @@ -1,6 +1,7 @@ --- import { client } from '../../db/typesense'; import RarityIcon from '../../components/RarityIcon.astro'; +import FirstEditionIcon from "../../components/FirstEditionIcon.astro"; export const prerender = false; import * as util from 'util'; @@ -220,8 +221,8 @@ const facets = searchResults.results.slice(1).map((result: any) => {
+/-
-
- {card.productName} +
+
{card.productName}
{conditionOrder.map((condition) => ( diff --git a/src/svg/edition/firstEdition.svg b/src/svg/edition/firstEdition.svg new file mode 100644 index 0000000..f90f397 --- /dev/null +++ b/src/svg/edition/firstEdition.svg @@ -0,0 +1 @@ + \ No newline at end of file