[chore] move cards to htmx post

.gitignore

@@ -28,3 +28,6 @@ public/cards/*
 
 # anything test
 test.*
+
+# any logs
+*.log

package-lock.json

@@ -11,6 +11,7 @@
         "astro": "^5.17.1",
         "bootstrap": "^5.3.8",
         "chalk": "^5.6.2",
+        "chart.js": "^4.5.1",
         "dotenv": "^17.2.4",
         "drizzle-orm": "^1.0.0-beta.15-859cf75",
         "mysql2": "^3.16.3",
@@ -1350,6 +1351,12 @@
         "node": ">=12"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==",
+      "license": "MIT"
+    },
     "node_modules/@oslojs/encoding": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@oslojs/encoding/-/encoding-1.1.0.tgz",
@@ -2699,6 +2706,18 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.5.1",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz",
+      "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/chokidar": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "astro": "^5.17.1",
     "bootstrap": "^5.3.8",
     "chalk": "^5.6.2",
+    "chart.js": "^4.5.1",
     "dotenv": "^17.2.4",
     "drizzle-orm": "^1.0.0-beta.15-859cf75",
     "mysql2": "^3.16.3",

scripts/preload-tcgplayer.ts

@@ -1,31 +1,41 @@
 import 'dotenv/config';
-import { drizzle } from 'drizzle-orm/mysql2';
-import mysql from 'mysql2/promise';
 import * as schema from '../src/db/schema.ts';
+import { db, poolConnection } from '../src/db/index.ts';
+
 import fs from "node:fs/promises";
 import path from "node:path";
-import { eq } from 'drizzle-orm';
 import chalk from 'chalk';
 //import util from 'util';
 
 
 async function syncTcgplayer() {
 
-  const productLines = [
-    { name: "pokemon", energyType: ["Water", "Fire", "Grass", "Lightning", "Psychic", "Fighting", "Darkness", "Metal", "Fairy", "Dragon", "Colorless", "Energy"] },
-    { name: "pokemon-japan", cardType: ["Water", "Fire", "Grass", "Lightning", "Psychic", "Fighting", "Darkness", "Metal", "Fairy", "Dragon", "Colorless", "Energy"] }
-  ];
+  const productLines = [ "pokemon", "pokemon-japan" ];
 
+  // work from the available sets within the product line
   for (const productLine of productLines) {
-    for (const [key, values] of Object.entries(productLine)) {
-      if (key === "name") continue;
-      for (const value of values) {
-        console.log(`Syncing product line "${productLine.name}" with ${key} "${value}"...`);
-        await syncProductLineEnergyType(productLine.name, key, value);
-      }
+    const d = {"algorithm":"sales_dismax","from":0,"size":1,"filters":{"term":{"productLineName":[productLine]}},"settings":{"useFuzzySearch":false}};
+
+    const response = await fetch('https://mp-search-api.tcgplayer.com/v1/search/request?q=&isList=false', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json',},
+      body: JSON.stringify(d),
+    });
+    if (!response.ok) {
+      console.error('Error notifying sync completion:', response.statusText);
+      process.exit(1);
     }
+    const data = await response.json();
+
+    const setNames = data.results[0].aggregations.setName;
+    for (const setName of setNames) {
+      console.log(chalk.blue(`Syncing product line "${productLine}" with setName "${setName.urlValue}"...`));
+      await syncProductLine(productLine, "setName", setName.urlValue);
+    }
+
   }
 
+
   console.log(chalk.green('✓ All TCGPlayer data synchronized successfully!'));
 }
 
@@ -33,6 +43,14 @@ function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }
 
+function cleanProductName(name: string): string {
+  // remove TCGPlayer crap
+  name = name.replace(/ - .*$/, '');
+  name = name.replace(/ \[.*\]/, '');
+  name = name.replace(/ \(.*\)/, '');
+  return name.trim();
+}
+
 async function fileExists(path: string): Promise<boolean> {
   try {
     await fs.access(path);
@@ -42,7 +60,15 @@ async function fileExists(path: string): Promise<boolean> {
   }
 }
 
-async function syncProductLineEnergyType(productLine: string, field: string, fieldValue: string) {
+function getNumberOrNull(value: any): number | null {
+  const number = Number(value); // Attempt to convert the value to a number
+  if (Number.isNaN(number)) {
+    return null; // Return null if the result is NaN
+  }
+  return number; // Otherwise, return the number
+}
+
+async function syncProductLine(productLine: string, field: string, fieldValue: string) {
   let start = 0;
   let size = 50;
   let total = 1000000;
@@ -50,13 +76,12 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
   while (start < total) {
     console.log(` Fetching items ${start} to ${start + size} of ${total}...`);
 
-
-    let d = {
+    const d = {
           "algorithm":"sales_dismax",
           "from":start,
           "size":size,
           "filters":{
-              "term":{"productLineName":[productLine]},
+              "term":{"productLineName":[productLine], [field]:[fieldValue]} ,
               "range":{},
               "match":{}
           },
@@ -83,7 +108,6 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
           },
           "sort":{}
       };
-    d.filters.term[field] = [fieldValue];
 
     //console.log(util.inspect(d, { depth: null }));
     //process.exit(1);
@@ -104,20 +128,30 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
     const data = await response.json();
     total = data.results[0].totalResults;
 
-    //console.log(data);
-
-    const poolConnection = mysql.createPool({
-      uri: process.env.DATABASE_URL,
-    });
-
-    const db = drizzle(poolConnection, { schema, mode: 'default' });
-
     for (const item of data.results[0].results) {
+
+      // Check if productId already exists and skip if it does (to avoid hitting the API too much)
+      if (allProductIds.has(item.productId)) {
+        continue;
+      }
+
       console.log(chalk.blue(` - ${item.productName} (ID: ${item.productId})`));
 
+      // Get product detail
+      const detailResponse = await fetch(`https://mp-search-api.tcgplayer.com/v2/product/${item.productId}/details`, {
+        method: 'GET',
+      });
+      if (!detailResponse.ok) {
+        console.error('Error fetching product details:', detailResponse.statusText);
+        process.exit(1);
+      }
+      const detailData = await detailResponse.json();
+
+
       await db.insert(schema.cards).values({
         productId: item.productId,
-        productName: item.productName,
+        originalProductName: item.productName,
+        productName: cleanProductName(item.productName),
         rarityName: item.rarityName,
         productLineName: item.productLineName,
         productLineUrlName: item.productLineUrlName,
@@ -137,7 +171,7 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
         cardTypeB: item.customAttributes.cardTypeB || null,
         energyType: item.customAttributes.energyType?.[0] || null,
         flavorText: item.customAttributes.flavorText || null,
-        hp: item.customAttributes.hp || 0,
+        hp: getNumberOrNull(item.customAttributes.hp),
         number: item.customAttributes.number || '',
         releaseDate: item.customAttributes.releaseDate ? new Date(item.customAttributes.releaseDate) : null,
         resistance: item.customAttributes.resistance || null,
@@ -150,9 +184,11 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
         maxFulfillableQuantity: item.maxFulfillableQuantity,
         medianPrice: item.medianPrice,
         totalListings: item.totalListings,
+        Artist: detailData.formattedAttributes.Artist || null,
       }).onDuplicateKeyUpdate({
         set: {
-          productName: item.productName,
+          originalProductName: item.productName,
+          productName: cleanProductName(item.productName),
           rarityName: item.rarityName,
           productLineName: item.productLineName,
           productLineUrlName: item.productLineUrlName,
@@ -172,7 +208,7 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
           cardTypeB: item.customAttributes.cardTypeB || null,
           energyType: item.customAttributes.energyType?.[0] || null,
           flavorText: item.customAttributes.flavorText || null,
-          hp: item.customAttributes.hp || 0,
+          hp: getNumberOrNull(item.customAttributes.hp),
           number: item.customAttributes.number || '',
           releaseDate: item.customAttributes.releaseDate ? new Date(item.customAttributes.releaseDate) : null,
           resistance: item.customAttributes.resistance || null,
@@ -185,30 +221,12 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
           maxFulfillableQuantity: item.maxFulfillableQuantity,
           medianPrice: item.medianPrice,
           totalListings: item.totalListings,
+          Artist: detailData.formattedAttributes.Artist || null,
         },
       });
 
-      // before we fetch details, check if the card already exists in the skus table with a recent calculatedAt date. If it does, we can skip fetching details and pricing for this card to reduce API calls.
-      const existingSkus = await db.select().from(schema.skus).where(eq(schema.skus.productId, item.productId));
-      const hasRecentSku = existingSkus.some(sku => sku.calculatedAt && (new Date().getTime() - new Date(sku.calculatedAt).getTime()) < 7 * 24 * 60 * 60 * 1000);
-      if (hasRecentSku) {
-        console.log(chalk.blue('  Skipping details and pricing fetch since we have recent SKU data'));
-        await sleep(100);
-        continue;
-      }
-
-      // Get product detail
-      const detailResponse = await fetch(`https://mp-search-api.tcgplayer.com/v2/product/${item.productId}/details`, {
-        method: 'GET',
-      });
-
-      if (!detailResponse.ok) {
-        console.error('Error fetching product details:', detailResponse.statusText);
-        process.exit(1);
-      }
-
-      const detailData = await detailResponse.json();
 
+      // set is...
       await db.insert(schema.sets).values({
         setId: detailData.setId,
         setCode: detailData.setCode,
@@ -223,33 +241,7 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
       });
 
       // skus are...
-      const skuArray = detailData.skus.map((sku: any) => sku.sku);
-      //console.log(detailData.skus);
-      //console.log(skuArray);
-      // get pricing for skus
-      const skuResponse = await fetch('https://mpgateway.tcgplayer.com/v1/pricepoints/marketprice/skus/search', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ skuIds: skuArray }),
-      });
-      
-      if (!skuResponse.ok) {
-        console.error('Error fetching SKU pricing:', skuResponse.statusText);
-        process.exit(1);
-      }
-
-      const skuData = await skuResponse.json();
-
-      let skuMap = new Map();
-      for (const skuItem of skuData) {
-        skuMap.set(skuItem.skuId, skuItem);
-      }
-
       for (const skuItem of detailData.skus) {
-        const pricing = skuMap.get(skuItem.sku);
-        //console.log(pricing);
 
         await db.insert(schema.skus).values({
           skuId: skuItem.sku,
@@ -257,21 +249,11 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
           condition: skuItem.condition,
           language: skuItem.language,
           variant: skuItem.variant,
-          calculatedAt: pricing?.calculatedAt ? new Date(pricing.calculatedAt) : null,
-          highestPrice: pricing?.highestPrice || null,
-          lowestPrice: pricing?.lowestPrice || null,
-          marketPrice: pricing?.marketPrice || null,
-          priceCount: pricing?.priceCount || 0,
         }).onDuplicateKeyUpdate({
           set: {
             condition: skuItem.condition,
             language: skuItem.language,
             variant: skuItem.variant,
-            calculatedAt: pricing?.calculatedAt ? new Date(pricing.calculatedAt) : null,
-            highestPrice: pricing?.highestPrice || null,
-            lowestPrice: pricing?.lowestPrice || null,
-            marketPrice: pricing?.marketPrice || null,
-            priceCount: pricing?.priceCount || 0,
           },
         });
       }
@@ -284,7 +266,8 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
           const buffer = await imageResponse.arrayBuffer();
           await fs.writeFile(imagePath, Buffer.from(buffer));
         } else {
-          console.error('Error fetching product image:', imageResponse.statusText);
+          console.error(chalk.yellow(`Error fetching ${item.productId}: ${item.productName} image:`, imageResponse.statusText));
+          await fs.appendFile('missing_images.log', `${item.productId}: ${item.productName}\n`, 'utf-8');
         }
       }
 
@@ -293,12 +276,14 @@ async function syncProductLineEnergyType(productLine: string, field: string, fie
 
     }
 
-
-    await poolConnection.end();
-
     start += size;
   }
 }
 
+// clear the log file
+await fs.rm('missing_images.log', { force: true });
 
-syncTcgplayer();
+const allProductIds = new Set(await db.select({ productId: schema.cards.productId }).from(schema.cards).then(rows => rows.map(row => row.productId)));
+
+await syncTcgplayer();
+await poolConnection.end();

scripts/reindex.ts

@@ -8,9 +8,9 @@ async function createCollection(client: Client) {
     // Delete the collection if it already exists to ensure a clean slate
     try {
         const response = await client.collections('cards').delete();
-        console.log(`Collection "cards" deleted successfully:`, response);
+        //console.log(`Collection "cards" deleted successfully:`, response);
     } catch (error) {
-        console.error(`Error deleting collection "cards":`, error);
+        //console.error(`Error deleting collection "cards":`, error);
     }
 
     // Create the collection with the specified schema
@@ -30,6 +30,8 @@ async function createCollection(client: Client) {
                     { name: 'cardType', type: 'string', facet: true },
                     { name: 'energyType', type: 'string', facet: true },
                     { name: 'number', type: 'string' },
+                    { name: 'Artist', type: 'string' },
+                    { name: 'sealed', type: 'bool' },
                 ],
                 default_sorting_field: 'productId',
             });
@@ -59,6 +61,8 @@ async function preloadSearchIndex() {
         cardType: card.cardType || "",
         energyType: card.energyType || "",
         number: card.number,
+        Artist: card.Artist || "",
+        sealed: card.sealed,
     })), { action: 'upsert' });
 
     console.log(chalk.green('Search index preloaded with Pokémon cards.'));

src/assets/css/_bootstrap.scss

@@ -19,7 +19,7 @@
 @import 'bootstrap/scss/images';
 @import 'bootstrap/scss/nav';
 // @import 'bootstrap/scss/accordion';
-// @import 'bootstrap/scss/alert';
+@import 'bootstrap/scss/alert';
 // @import 'bootstrap/scss/badge';
 // @import 'bootstrap/scss/breadcrumb';
 // @import 'bootstrap/scss/button-group';
@@ -32,17 +32,17 @@
 @import 'bootstrap/scss/grid';
 // @import 'bootstrap/scss/list-group';
 @import 'bootstrap/scss/modal';
-// @import 'bootstrap/scss/navbar';
+@import 'bootstrap/scss/navbar';
 // @import 'bootstrap/scss/offcanvas';
 // @import 'bootstrap/scss/pagination';
 // @import 'bootstrap/scss/placeholders';
 // @import 'bootstrap/scss/popover';
 // @import 'bootstrap/scss/progress';
 // @import 'bootstrap/scss/spinners';
-// @import 'bootstrap/scss/tables';
+@import 'bootstrap/scss/tables';
 // @import 'bootstrap/scss/toasts';
 // @import 'bootstrap/scss/tooltip';
-// @import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/transitions';
 
 // Optional helpers
 // @import 'bootstrap/scss/helpers';

src/assets/css/main.scss

@@ -28,151 +28,133 @@
 }
 
 // ----------------------
-// Card
+// Cards & Modal
 // ----------------------
 
-.tcg-card {
-    cursor: pointer;
-}
-
 .modal-xl {
-    @media (min-width: 768px) {
-            max-width: 95vw;
-        }
-    @media (min-width: 1400px) {
-            max-width: 90vw;
-        }
+  @media (min-width: 768px) {
+    max-width: 95vw;
+  }
+  @media (min-width: 1400px) {
+    max-width: 90vw;
+  }
 }
 
 .card-modal {
-    background-color: rgba(1, 11, 18, .8);
-    cursor: default;
+  background-color: rgba(1, 11, 18, 0.8);
+  cursor: default;
 }
 
-.nav-link:hover, .nav-link:focus {
-    color: rgba(255, 255, 255, 0.87);
-}
-
-.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
-    color: rgba(0, 0, 0, .94);
-}
-
-.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
-    border-color: rgba(0, 0, 0, .0);
+canvas {
+  max-width: 100%;
+  height: 300px;
 }
 
+// ----------------------
+// Navigation Tabs
+// ----------------------
 .nav-link {
-    font-weight: 600;
-    color: rgba(255,255,255,67);
-    transition: margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1), 
-                padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1), 
-                padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);
-}
-.nav-link:hover, .nav-link:focus {
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.67);
+  transition:
+    margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
+    padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
+    padding-bottom 0.2s cubic-bezier(0.5, 0, 0.3, 1);
+
+  &:hover,
+  &:focus {
     color: rgba(0, 0, 0, 0.87);
-}
-.nav-link.nm, .nav-link.nm:hover, .nav-link.nm:focus {
-    border-bottom: 3px solid rgba(156, 204, 102, 1);
-}
-.nav-link.nm:hover, .nav-link.nm:focus {
-    background-color: rgba(156, 204, 102, .67);
-}
-.nav-link.nm.active {
-    background-color: rgba(156, 204, 102, 1);
-    border-bottom: 3px solid rgba(156, 204, 102, 1);
-}
-.nav-link.lp, .nav-link.lp:hover, .nav-link.lp:focus {
-    border-bottom: 3px solid rgba(211, 225, 86, 1);
-}
-.nav-link.lp:hover, .nav-link.lp:focus {
-    background-color: rgba(211, 225, 86, .67);
-}
-.nav-link.lp.active {
-    background-color: rgba(211, 225, 86, 1);
-    border-bottom: 3px solid rgba(211, 225, 86, 1);
-}
-.nav-link.mp, .nav-link.mp:hover, .nav-link.mp:focus {
-    border-bottom: 3px solid rgba(255, 238, 87, 1);
-}
-.nav-link.mp:hover, .nav-link.mp:focus {
-    background-color: rgba(255, 238, 87, .67);
-}
-.nav-link.mp.active {
-    background-color: rgba(255, 238, 87, 1);
-    border-bottom: 3px solid rgba(255, 238, 87, 1);
-}
-.nav-link.hp, .nav-link.hp:hover, .nav-link.hp:focus {
-    border-bottom: 3px solid rgba(255, 201, 41, 1);
-}
-.nav-link.hp:hover, .nav-link.hp:focus {
-    background-color: rgba(255, 201, 41, .67);
-}
-.nav-link.hp.active {
-    background-color: rgba(255, 201, 41, 1);
-    border-bottom: 3px solid rgba(255, 201, 41, 1);
-}
-.nav-link.dmg, .nav-link.dmg:hover, .nav-link.dmg:focus {
-    border-bottom: 3px solid rgba(255, 167, 36, 1);
-}
-.nav-link.dmg:hover, .nav-link.dmg:focus {
-    background-color: rgba(255, 167, 36, .67);
-}
-.nav-link.dmg.active {
-    background-color: rgba(255, 167, 36, 1);
-    border-bottom: 3px solid rgba(255, 167, 36, 1);
-}
-.nav-link.vendor, .nav-link.vendor:hover, .nav-link.vendor:focus {
-    border-bottom: 3px solid hsl(262, 47%, 55%);
-}
-.nav-link.vendor:hover, .nav-link.vendor:focus {
-    background-color: hsla(262, 47%, 55%, .67);
-}
-.nav-link.vendor.active {
-    color: rgba(255, 255, 255, 0.87);
-    background-color: hsl(262, 47%, 55%);
-    border-bottom: 3px solid hsl(262, 47%, 55%);
+  }
 }
 
-.dark-callout {
-    @media (min-width: 768px) {
-        background-color: rgba(44, 48, 59, 1);
+.nav-tabs {
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    color: rgba(0, 0, 0, 0.94);
+  }
+
+  .nav-link:hover,
+  .nav-link:focus {
+    border-color: transparent;
+  }
+}
+
+// Tiered Nav-Link Colors
+$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),
+  vendor: hsl(262, 47%, 55%)
+);
+
+@each $name, $color in $tiers {
+  .nav-link.#{$name} {
+    border-bottom: 3px solid $color;
+
+    &:hover,
+    &:focus {
+      background-color: rgba($color, 0.67);
     }
+
+    &.active {
+      background-color: $color;
+      border-bottom-color: $color;
+      @if $name == vendor {
+        color: rgba(255, 255, 255, 0.87);
+      }
+    }
+  }
+}
+
+// ----------------------
+// Misc Components
+// ----------------------
+.dark-callout {
+  @media (min-width: 768px) {
+    background-color: rgba(44, 48, 59, 1);
+  }
 }
 
 .card-image {
-  aspect-ratio: 23/32;
+  aspect-ratio: 23 / 32;
   object-fit: cover;
   z-index: 998;
+  cursor: pointer;
 }
 
+// Icon sizes
 .small-icon svg {
   width: 100%;
   max-height: 16px;
   margin-top: -0.25rem;
 }
 
-.energy-icon svg {
-  width:2.5rem;
+.energy-icon svg,
+.rarity-icon-large svg,
+.set-icon svg {
+  width: 2.5rem;
   margin-top: -0.25rem;
-  margin-right: -0.25rem;
 }
 
-.rarity-icon-large svg {
-  width: 2.5rem;
+.rarity-icon-large svg,
+.set-icon svg {
   margin-bottom: -0.25rem;
+}
+
+.energy-icon svg {
   margin-right: -0.25rem;
 }
 
 .set-icon svg {
-  width: 2.5rem;
-  margin-bottom: -0.25rem;
   margin-left: -0.25rem;
 }
 
 .shadow-filter {
-  //filter: drop-shadow(0 30px 30px #333);
-  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
-          drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));  
+  filter:
+    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
+    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
 }
 
 // ----------------------
@@ -193,7 +175,6 @@
   );
 }
 
-// Base label style
 .price-label {
   font-size: 0.7rem;
   font-weight: 600;
@@ -215,29 +196,24 @@
   @media (min-width: 1600px) {
     font-size: 1rem;
   }
-}
 
-// Your palette tiers
-.price-label:nth-of-type(n + 2) {
-  background-color: hsl(66, 70%, 61%);
+  &:nth-of-type(n + 2) {
+    background-color: hsl(66, 70%, 61%);
+  }
+  &:nth-of-type(n + 3) {
+    background-color: hsl(54, 100%, 67%);
+  }
+  &:nth-of-type(n + 4) {
+    background-color: hsl(45, 100%, 58%);
+  }
+  &:last-of-type {
+    background-color: hsl(36, 100%, 57%);
+    border-radius: 0.33rem;
+  }
 }
 
-.price-label:nth-of-type(n + 3) {
-  background-color: hsl(54, 100%, 67%);
-}
-
-.price-label:nth-of-type(n + 4) {
-  background-color: hsl(45, 100%, 58%);
-}
-
-.price-label:last-of-type {
-  background-color: hsl(36, 100%, 57%);
-  border-radius: 0.33rem;
-}
-
-
 // ----------------------
-// Search Elements
+// Search
 // ----------------------
 @media (max-width: 768px) {
   .search-box,
@@ -250,7 +226,7 @@
 // Sticky Bar
 // ----------------------
 .sticky {
-  background-color: hsl(195, 4%, 22%);
+  background-color: hsl(205, 89%, 4%);
   position: fixed;
   bottom: 0;
   width: 100%;

src/components/Card.astro

@@ -1,66 +0,0 @@
----
-//import { eq } from 'drizzle-orm';
-import { isConditionalExpression } from 'typescript';
-import { client } from '../db/typesense.ts';
-import { db } from '../db';
-import RarityIcon from './RarityIcon.astro';
-//import * as schema from '../db/schema.ts';
-
-const { query } = Astro.props;
-const searchResults = await client.collections('cards').documents().search({
-    q: query,
-    query_by: 'productLineName,productName,setName,number,rarityName',
-    per_page: 250,
-});
-const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
-
-// get pokemon data with prices and set info using searchResults and then query the database for each card to get the prices and set info
-const pokemon = await db.query.cards.findMany({
-    where: { productId: { in: productIds, }, },
-    with: {
-        prices: true,
-        set: true,
-    }
-});
-
-
-const formatPrice = (price:any) => {
-    if (price === null) {
-        return "–";
-    }
-    price = Number(price);
-    if (price >= 99.99) {
-        return `${Math.round(price)}`;
-    }
-    return `${price.toFixed(2)}`;
-};
-
-const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
----
-{pokemon.map((card) => (
-    <div data-bs-toggle="modal" data-bs-target="#cardModal">
-    <div class="col tcg-card">
-        <img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
-        <div class="row row-cols-5 gx-1 price-row mb-2">
-        {card.prices
-            .slice()
-            .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
-            .filter((price, index, arr) =>
-            arr.findIndex(p => p.condition === price.condition) === index
-            )
-            .map((price) => (
-            <div class="col price-label ps-xxl-2 ps-1">
-                {price.condition.split(' ').map((w) => w[0]).join('')}
-                <br />${formatPrice(price.marketPrice)}
-            </div>
-            ))}
-        </div>
-        <div class="h5 my-0">{card.productName}</div>
-        <div class="d-flex flex-row lh-1">
-            <div class="copy-small d-none d-lg-flex flex-grow-1">{card.set?.setCode}</div>
-            <div class="copy-small">{card.number}</div>
-            <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
-        </div>
-    </div>
-    </div>
-))}

src/components/CardGrid.astro

@@ -4,11 +4,10 @@
 
     <div class="row mb-5">
         <div class="col-md-3 display-sm-none">
-            <div class="h5 d-none">Inventory management placeholder</div>
+            <div class="h5">Inventory management placeholder</div>
         </div>
         <div class="col-sm-12 col-md-9 mt-0">
-            <div class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xl-4">
-                <slot name="Card">
+            <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xl-4">
             </div>
         </div>
     </div>

src/components/EnergyIcon.astro

@@ -1,7 +1,7 @@
 ---
 import grass from "/src/svg/energy/grass.svg?raw";
 import fairy from "/src/svg/energy/fairy.svg?raw";
-import dark from "/src/svg/energy/dark.svg?raw";
+import darkness from "/src/svg/energy/dark.svg?raw";
 import dragon from "/src/svg/energy/dragon.svg?raw";
 import fire from "/src/svg/energy/fire.svg?raw";
 import water from "/src/svg/energy/water.svg?raw";
@@ -16,7 +16,7 @@ const { energy } = Astro.props;
 const energyMap = {
   "Grass": grass,
   "Fairy": fairy,
-  "Dark": dark,
+  "Darkness": darkness,
   "Dragon": dragon,
   "Fire": fire,
   "Water": water,

src/components/SetIcon.astro

@@ -27,10 +27,21 @@ import diamond_and_pearl from "/src/svg/set/diamond_and_pearl.svg?raw";
 import double_crisis from "/src/svg/set/double_crisis.svg?raw";
 import dragon_majesty from "/src/svg/set/dragon_majesty.svg?raw";
 import neo_genesis from "/src/svg/set/neo_genesis.svg?raw";
+import jungle from "/src/svg/set/jungle.svg?raw";
+import fossil from "/src/svg/set/fossil.svg?raw";
+import ascended_heroes from "/src/svg/set/ascended_heroes.svg?raw";
+import expedition from "/src/svg/set/expedition.svg?raw";
+import dragonvault from "/src/svg/set/dragon_vault.svg?raw";
+import dragonsexalted from "/src/svg/set/dragons_exalted.svg?raw";
+import ecardsample from "/src/svg/set/e-card_sample_set.svg?raw";
+import emergingpowers from "/src/svg/set/emerging_powers.svg?raw";
+import evolutions from "/src/svg/set/evolutions.svg?raw";
+import evolvingskies from "/src/svg/set/evolving_skies.svg?raw";
 
 const { set } = Astro.props;
 
 const setMap = {
+  "ME: Ascended Heroes": ascended_heroes,
   "Ancient Origins": ancient_origins,
   "Aquapolis": aquapolis,
   "Arceus": arceus,
@@ -59,6 +70,15 @@ const setMap = {
   "Double Crisis": double_crisis,
   "Dragon Majesty": dragon_majesty,
   "Neo Genesis": neo_genesis,
+  "Jungle": jungle,
+  "Fossil": fossil,
+  "Expedition Base Set": expedition,
+  "Dragon Vault": dragonvault,
+  "Dragons Exalted": dragonsexalted,
+  "E-Card Sample": ecardsample,
+  "Emerging Powers": emergingpowers,
+  "Evolutions": evolutions,
+  "SWSH07: Evolving Skies": evolvingskies,
 };
 
 const svg = setMap[set as keyof typeof setMap] ?? "";

src/components/StickyFilter.astro

@@ -1,17 +1,16 @@
 ---
-import '/src/assets/css/main.scss';
-const { query } = Astro.props;
+
 ---
 
 <div class="sticky border-bottom">
     <div class="container">
-        <form method="GET">
+        <form hx-post="/partials/cards" hx-target="#cardGrid" hx-trigger="load, submit">
             <div class="d-flex justify-content-between">
                 <div class="my-2 flex-grow-1 me-2">
-                    <input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." value={query} />
+                    <input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." />
                 </div>
                 <div class="my-2">
-                    <input type="submit" class="btn btn-primary w-100 search-button" value="Search" />
+                    <input type="submit" class="w-100 search-button" value="Search" />
                 </div>
             </div>
         </form>

src/db/schema.ts

@@ -2,6 +2,7 @@ import { mysqlTable, int, varchar, boolean, decimal, datetime, index } from "dri
 
 export const cards = mysqlTable("cards", {
 	productId: int().primaryKey(),
+	originalProductName: varchar({ length: 255 }).default("").notNull(),
 	productName: varchar({ length: 255 }).notNull(),
 	productLineName: varchar({ length: 255 }).default("").notNull(),
 	productLineUrlName: varchar({ length: 255 }).default("").notNull(),
@@ -11,17 +12,17 @@ export const cards = mysqlTable("cards", {
 	rarityName: varchar({ length: 100 }).default("").notNull(),
 	sealed: boolean().default(false).notNull(),
 	sellerListable: boolean().default(false).notNull(),
-	setId: int().default(0).notNull(),
-	shippingCategoryId: int().default(0).notNull(),
+	setId: int(),
+	shippingCategoryId: int(),
 	duplicate: boolean().default(false).notNull(),
 	foilOnly: boolean().default(false).notNull(),
-	maxFulfillableQuantity: int().default(0).notNull(),
-	totalListings: int().default(0).notNull(),
-	score: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
-	lowestPrice: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
-	lowestPriceWithShipping: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
-	marketPrice: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
-	medianPrice: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
+	maxFulfillableQuantity: int(),
+	totalListings: int(),
+	score: decimal({ precision: 10, scale: 2, mode: 'number' }),
+	lowestPrice: decimal({ precision: 10, scale: 2, mode: 'number' }),
+	lowestPriceWithShipping: decimal({ precision: 10, scale: 2, mode: 'number' }),
+	marketPrice: decimal({ precision: 10, scale: 2, mode: 'number' }),
+	medianPrice: decimal({ precision: 10, scale: 2, mode: 'number' }),
 	attack1: varchar({ length: 1024 }),
 	attack2: varchar({ length: 1024 }),
 	attack3: varchar({ length: 1024 }),
@@ -30,13 +31,14 @@ export const cards = mysqlTable("cards", {
 	cardTypeB: varchar({ length: 100 }),
 	energyType: varchar({ length: 100 }),
 	flavorText: varchar({ length: 1000 }),
-	hp: int().default(0).notNull(),
+	hp: int(),
 	number: varchar({ length: 50 }).default("").notNull(),
 	releaseDate: datetime(),
 	resistance: varchar({ length: 100 }),
 	retreatCost: varchar({ length: 100 }),
 	stage: varchar({ length: 100 }),
 	weakness: varchar({ length: 100 }),
+	Artist: varchar({ length: 255 }),
 });
 
 export const sets = mysqlTable("sets", {

src/layouts/Main.astro

@@ -28,5 +28,6 @@ import '/src/assets/css/main.scss';
       // import 'bootstrap/js/dist/toast';
       // import 'bootstrap/js/dist/tooltip';
     </script>
+    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>
   </body>
 </html>

src/pages/404.astro

@@ -0,0 +1,43 @@
+---
+import Layout from '../layouts/Main.astro';
+import StickyFilter from '../components/StickyFilter.astro';
+
+const randomNumber = Math.floor(Math.random() * 1000) + 1;
+---
+
+<Layout>
+<StickyFilter />
+<style>
+    .masked-image {
+        filter: brightness(0);
+    }
+</style>
+<div class="container">
+    <div class="row col-10 mx-auto mt-5">
+        <div class="col-12 col-md-6">
+            <h1 class="mb-4 mt-0">404 - Page Not Found</h1>
+            <h4 class="my-4">Sorry, the page you are looking for does not exist.</h4>
+            <p class="copy-big my-4">Return to the <a href="/">home page</a> or search for another Pokémon.</p>
+        </div>
+        <div class="col-12 col-md-5 offset-md-1">
+            <div class="alert alert-warning border" role="alert">
+                <h4 class="alert-heading">A wild Pokémon appeared!</h4>
+            </div>
+            <img src={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} class="img-fluid" alt="">
+
+            <div class="alert alert-warning border" role="alert">
+                <h4 class="alert-heading">Who's that Pokémon?</h4>
+            </div>
+            <img src={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} class="img-fluid masked-image" alt="">
+
+            <div>Click to reveal Pokémon!</div>
+        </div>
+    </div>
+</div>
+<script>
+    const maskedImage = document.querySelector('.masked-image');
+    maskedImage?.addEventListener('click', () => {
+        maskedImage.classList.remove('masked-image');
+    });
+</script>
+</Layout>

src/pages/partials/card-modal.astro

@@ -1,18 +1,70 @@
 ---
-import Card from '../components/Card.astro';
 import ebay from "/vendors/ebay.svg?raw";
-import EnergyIcon from './EnergyIcon.astro';
-import RarityIcon from './RarityIcon.astro';
-import SetIcon from './SetIcon.astro';
----
+import SetIcon from '../../components/SetIcon.astro';
+import EnergyIcon from '../../components/EnergyIcon.astro';
+import RarityIcon from '../../components/RarityIcon.astro';
+import { db } from '../../db/index.ts';
+import { privateDecrypt } from "node:crypto";
 
-<!-- Modal -->
-<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
+import latestSales from '../../sampleData/latestsales.json';
+import chartdata from '../../sampleData/chartdata.json';
+
+const priceData = chartdata;
+
+export const partial = true;
+export const prerender = false;
+
+const searchParams = Astro.url.searchParams;
+const productId = Number(searchParams.get('productId')) || 0;
+
+
+// query the database for the card with the given productId and return the card data as json
+const card = await db.query.cards.findFirst({
+    where: { productId: Number(productId) },
+    with: {
+        prices: true,
+        set: true,
+    }
+});
+
+const nearMint = await db.query.skus.findFirst({
+    where: {
+        productId: Number(productId),
+    }
+});
+
+const nearMintPrice = nearMint?.marketPrice ?? null;
+
+const calculatedAt = new Date(nearMint?.calculatedAt || 0);
+
+function timeAgo(date: any) {
+  if (date==0) return "never";
+
+  const seconds = Math.floor((Date.now() - date) / 1000);
+
+  const intervals = {
+    year: 31536000,
+    month: 2592000,
+    day: 86400,
+    hour: 3600,
+    minute: 60
+  };
+
+  for (const [unit, value] of Object.entries(intervals)) {
+    const count = Math.floor(seconds / value);
+    if (count >= 1) return `${count} ${unit}${count > 1 ? "s" : ""} ago`;
+  }
+
+  return "just now";
+}
+
+---
+<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
   <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
     <div class="modal-content">
       <div class="modal-header border-0">
         <div class="container-fluid">
-            <span class="h4 card-title w-100 pe-2">Pikachu</span><span class="text-secondary smaller ps-2 border-start">070/111</span>
+        <span class="h4 card-title pe-2">{card?.productName}</span><span class="text-secondary ps-2 border-start">{card?.number}</span><span class="text-secondary ps-2">{nearMint?.variant}</span>
         </div>
         <button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
       </div>        
@@ -21,10 +73,10 @@ import SetIcon from './SetIcon.astro';
             <div class="card mb-2 border-0">
             <div class="row g-4">
                 <div class="col-sm-12 col-md-3">
-                    <h6 class="text-secondary">Neo Genesis</h6>
-                    <div class="position-relative d-inline-block"><img src="/cards/88072.jpg" class="card-image img-fluid rounded" alt="..."><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set="Neo Genesis" /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy="Electric" /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity="Common" /></span></div>
+                    <p class="text-secondary">{card?.set?.setName}</p>
+                    <div class="position-relative d-inline-block"><img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setName} /></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="h6 text-secondary">Naoyo Kimura</div>
+                    <div class="p text-secondary">{card?.Artist}</div>
                     </div>
                     </div>
                 <div class="col-sm-12 col-md-7">
@@ -41,31 +93,49 @@ import SetIcon from './SetIcon.astro';
                     <div class="tab-content" id="nav-tabContent">
                         <div class="tab-pane fade show active" id="nav-nm" role="tabpanel" aria-labelledby="nav-nm" tabindex="0">
                             <div class="row g-2 mt-2">
-                                <div class="d-inline-flex justify-content-sm-evenly flex-row flex-md-column flex-wrap flex-md-nowrap mt-2 col-sm-4 col-md-3">
-                                    <div class="dark-callout rounded p-2 mb-2">
-                                        <h6>Market Price</h6>
-                                        <p></p>
+                                <div class="mt-2 col-12 col-md-3 row row-cols-3 row-cols-md-1">
+                                    <div class="col dark-callout rounded mb-1 py-2">
+                                        <p class="h6">Market Price</p>
+                                        <p class="py-0 mb-1">${nearMintPrice}</p>
                                     </div>
-                                    <div class="dark-callout rounded p-2 mb-2">
-                                        <h6>Lowest Price</h6>
-                                        <p></p>
+                                    <div class="col dark-callout rounded mb-1 py-2">
+                                        <p class="h6">Lowest List</p>
+                                        <p class="py-0 mb-1">${nearMint?.lowestPrice}</p>
                                     </div>
-                                    <div class="dark-callout rounded p-2 mb-2">
-                                        <h6>Highest Price</h6>
-                                        <p></p>
-                                    </div>
-                                    <div class="dark-callout rounded p-2 mb-2">
-                                        <h6>Volatility</h6>
-                                        <p></p>
-                                    </div>
-                                    <div class="dark-callout rounded p-2 mb-2 flex-fill">
-                                        <h6>Latest Sales</h6>
-                                        <p></p>
+                                    <div class="col dark-callout rounded mb-1 py-2">
+                                        <p class="h6">Highest List</p>
+                                        <p class="py-0 mb-1">${nearMint?.highestPrice}</p>
+                                    </div>                                   
+                                    <div class="col-12 alert alert-success mb-1 py-2">
+                                        <p class="h6">Low Volatility</p>
                                     </div>
                                 </div>
-                                <div class="d-flex flex-column mt-2 col-xs-8 col-md-9">
-                                    <div class="dark-callout rounded p-2 pb-0 h-100">
-                                        <h6>Placeholder for graph</h6>
+                                <div class="d-flex flex-column mt-2 col-12 col-md-9">
+                                    <div class="dark-callout rounded table-responsive pt-1 ps-2 mb-1">
+                                        <p class="h6">Latest Sales</p>
+                                        <table class="table small table-dark table-sm table-striped table-hover">
+                                            <thead>
+                                                <tr>
+                                                    <th scope="col">Date</th>
+                                                    <th scope="col">Price</th>
+                                                    <th scope="col">Condition</th>
+                                                    <th scope="col">Title</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {latestSales.data.map(sale => (
+                                                    <tr>
+                                                        <td>{new Date(sale.orderDate).toLocaleDateString()}</td>
+                                                        <td>${sale.purchasePrice}</td>
+                                                        <td>{sale.condition}</td>
+                                                        <td>{sale.title}</td>
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                    </table>
+                                    </div>
+                                    <div class="dark-callout rounded p-2 mb-0 flex-fill">
+                                        <p class="h6">Placeholder for graph</p>
                                     </div>
                                 </div>
                             </div>
@@ -177,11 +247,11 @@ import SetIcon from './SetIcon.astro';
                     </div>
                 </div>
                 <div class="col-sm-12 col-md-2 mt-0 mt-md-5">
-                <button type="button" class="btn btn-secondary mb-2 w-100"><img src="/vendors/tcgplayer.webp"> TCGPlayer</button>
-                <button type="button" class="btn btn-secondary mb-2 w-100"><span set:html={ebay} /></button>
+                <a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
+                <a class="btn btn-secondary mb-2 w-100" href={`https://www.ebay.com/sch/i.html?_nkw=${card?.productUrlName}+${card?.number}&LH_Sold=1&Graded=No&_dcat=183454${card?.productId}`} target="_blank"><span set:html={ebay} /></a>
                 </div>
             </div>
-            <div class="text-end my-0"><small class="text-body-secondary">Prices last updated</small></div>
+            <div class="text-end my-0"><small class="text-body-secondary">Prices last updated: {timeAgo(calculatedAt)}</small></div>
             </div>
         </div>
         </div>

src/pages/partials/cards.astro

@@ -0,0 +1,66 @@
+---
+import { client } from '../../db/typesense.ts';
+import { db } from '../../db';
+import RarityIcon from '../../components/RarityIcon.astro';
+
+export const prerender = false;
+
+// get the query from post request using form data
+const formData = await Astro.request.formData();
+const query = formData.get('q')?.toString() || '';
+
+// use typesense to search for cards matching the query and return the productIds of the results
+const searchResults = await client.collections('cards').documents().search({
+    q: query,
+    filter_by: 'sealed:false',
+    query_by: 'productLineName,productName,setName,number,rarityName',
+    per_page: 250,
+});
+const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
+
+// get pokemon data with prices and set info using searchResults and then query the database for each card to get the prices and set info
+const pokemon = await db.query.cards.findMany({
+    where: { productId: { in: productIds, }, },
+    with: {
+        prices: true,
+        set: true,
+    }
+});
+
+// format price to 2 decimal places (or 0 if price >=100) and adds a $ sign, if the price is null it returns "–"
+const formatPrice = (price:any) => {
+    if (price === null)  return "–";
+    price = Number(price);
+    if (price > 99.99)  return `$${Math.round(price)}`;
+    return `$${price.toFixed(2)}`;
+};
+
+const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
+---
+{pokemon.map((card) => (
+    <div class="col">
+        <div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
+            <img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
+        </div>
+        <div class="row row-cols-5 gx-1 price-row mb-2">
+        {card.prices
+            .slice()
+            .sort((a, b) => conditionOrder.indexOf(a.condition) - conditionOrder.indexOf(b.condition))
+            .filter((price, index, arr) =>
+            arr.findIndex(p => p.condition === price.condition) === index
+            )
+            .map((price) => (
+            <div class="col price-label ps-1">
+                {price.condition.split(' ').map((w) => w[0]).join('')}
+                <br />{formatPrice(price.marketPrice)}
+            </div>
+            ))}
+        </div>
+        <div class="h5 my-0">{card.productName}</div>
+        <div class="d-flex flex-row lh-1 mt-1">
+            <div class="text-secondary flex-grow-1">{card.set?.setCode}</div>
+            <div class="text-secondary">{card.number}</div>
+            <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
+        </div>
+    </div>
+))}

src/pages/pokemon.astro

@@ -1,27 +1,24 @@
 ---
 import Layout from '../layouts/Main.astro';
 import CardGrid from "../components/CardGrid.astro";
-import Card from "../components/Card.astro";
-import CardModal from "../components/CardModal.astro";
 import StickyFilter from '../components/StickyFilter.astro';
 
 export const prerender = false;
 
-// super dirty form retrieval
-// TODO: need to prevent XSS here
-const searchParams = Astro.url.searchParams;
-const query = searchParams.get('q') || '*';
-
 ---
 
 <Layout>
-<StickyFilter query={ query } />
+<StickyFilter />
 <div class="container">
     <h1 class="my-5">Rigid's app thing</h1>
-    <CardGrid>
-        <Card slot="Card" query={query}></Card>
-    </CardGrid>
-    <CardModal></CardModal>
-</div>
+
+    <CardGrid />
+
+    <div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
+            <div class="modal-content">
+            </div>
+        </div>
+    </div>
 </div>
 </Layout>

src/sampleData/chartdata.json

@@ -0,0 +1,318 @@
+{
+    "count": 1,
+    "result": [
+        {
+            "skuId": "4835350",
+            "variant": "Reverse Holofoil",
+            "language": "English",
+            "condition": "Near Mint",
+            "averageDailyQuantitySold": "0",
+            "averageDailyTransactionCount": "0",
+            "totalQuantitySold": "1",
+            "totalTransactionCount": "1",
+            "trendingMarketPricePercentages": {},
+            "buckets": [
+                {
+                    "marketPrice": "95",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-02-21"
+                },
+                {
+                    "marketPrice": "95",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-02-18"
+                },
+                {
+                    "marketPrice": "95",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-02-15"
+                },
+                {
+                    "marketPrice": "95",
+                    "quantitySold": "1",
+                    "lowSalePrice": "95",
+                    "lowSalePriceWithShipping": "99.99",
+                    "highSalePrice": "95",
+                    "highSalePriceWithShipping": "99.99",
+                    "transactionCount": "1",
+                    "bucketStartDate": "2026-02-12"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-02-09"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-02-06"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-02-03"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-31"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-28"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-25"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-22"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-19"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-16"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-13"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-10"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-07"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-04"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2026-01-01"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-29"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-26"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-23"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-20"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-17"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-14"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-11"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-08"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-05"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-12-02"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-11-29"
+                },
+                {
+                    "marketPrice": "0",
+                    "quantitySold": "0",
+                    "lowSalePrice": "0",
+                    "lowSalePriceWithShipping": "0",
+                    "highSalePrice": "0",
+                    "highSalePriceWithShipping": "0",
+                    "transactionCount": "0",
+                    "bucketStartDate": "2025-11-26"
+                }
+            ]
+        }
+    ]
+}

src/sampleData/latestsales.json

@@ -0,0 +1,52 @@
+{
+    "data": [
+        {
+            "condition": "Moderately Played",
+            "variant": "Reverse Holofoil",
+            "language": "English",
+            "quantity": 1,
+            "title": "Scyther - 4/108 (Pokemon League) [1st Place]",
+            "listingType": "ListingWithoutPhotos",
+            "customListingId": "0",
+            "purchasePrice": 90.25,
+            "shippingPrice": 0.0,
+            "orderDate": "2026-02-21T00:20:03.97+00:00"
+        },
+        {
+            "condition": "Near Mint",
+            "variant": "Reverse Holofoil",
+            "language": "English",
+            "quantity": 1,
+            "title": "Scyther - 4/108 (Pokemon League) [1st Place]",
+            "listingType": "ListingWithoutPhotos",
+            "customListingId": "0",
+            "purchasePrice": 95.0,
+            "shippingPrice": 4.99,
+            "orderDate": "2026-02-14T18:45:38.677+00:00"
+        },
+        {
+            "condition": "Lightly Played",
+            "variant": "Reverse Holofoil",
+            "language": "English",
+            "quantity": 1,
+            "title": "Scyther - 4/108 (Pokemon League) [1st Place]",
+            "listingType": "ListingWithoutPhotos",
+            "customListingId": "0",
+            "purchasePrice": 75.0,
+            "shippingPrice": 0.0,
+            "orderDate": "2026-01-18T01:31:47.323+00:00"
+        },
+        {
+            "condition": "Lightly Played",
+            "variant": "Reverse Holofoil",
+            "language": "English",
+            "quantity": 1,
+            "title": "Scyther - 4/108 (Pokemon League) [1st Place]",
+            "listingType": "ListingWithoutPhotos",
+            "customListingId": "0",
+            "purchasePrice": 85.0,
+            "shippingPrice": 1.25,
+            "orderDate": "2026-01-03T20:15:57.477+00:00"
+        }
+    ]
+}

src/svg/rarity/common.svg

@@ -1,3 +1,14 @@
-<svg viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="5" cy="5" r="4.5" fill="#1F232D" stroke="white"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 10">
+  <!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1f232d;
+        stroke: #fff;
+        stroke-width: .7px;
+      }
+    </style>
+  </defs>
+  <circle class="st0" cx="5" cy="5" r="4.5"/>
+</svg>

src/svg/rarity/illustration_rare.svg

@@ -1,3 +1,14 @@
-<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.00035 1.21724L8.56088 4.6818L8.67978 4.94579L8.96793 4.97407L12.7977 5.34995L9.93478 7.8445L9.71062 8.03983L9.77518 8.33005L10.5931 12.007L7.24791 10.1016L7.00047 9.9607L6.75302 10.1016L3.40706 12.007L4.2257 8.33014L4.29034 8.03983L4.06607 7.84447L1.20247 5.34994L5.03207 4.97407L5.32016 4.94579L5.43909 4.68188L7.00035 1.21724Z" fill="#FDC401" stroke="white"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 13">
+  <!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fdc401;
+        stroke: #fff;
+        stroke-width: .7px;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M7,1.2l1.6,3.5v.3c.1,0,.4,0,.4,0l3.8.4-2.9,2.5-.2.2v.3c0,0,.9,3.7.9,3.7l-3.3-1.9h-.2c0-.1-.2,0-.2,0l-3.3,1.9.8-3.7v-.3c0,0-.2-.2-.2-.2l-2.9-2.5,3.8-.4h.3s.1-.3.1-.3l1.6-3.5Z"/>
+</svg>

src/svg/rarity/rare.svg

@@ -1,3 +1,14 @@
-<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.00035 1.21724L8.56088 4.6818L8.67978 4.94579L8.96793 4.97407L12.7977 5.34995L9.93478 7.8445L9.71062 8.03983L9.77518 8.33005L10.5931 12.007L7.24791 10.1016L7.00047 9.9607L6.75302 10.1016L3.40706 12.007L4.2257 8.33014L4.29034 8.03983L4.06607 7.84447L1.20247 5.34994L5.03207 4.97407L5.32016 4.94579L5.43909 4.68188L7.00035 1.21724Z" fill="#1F232D" stroke="white"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 13">
+  <!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1f232d;
+        stroke: #fff;
+        stroke-width: .7px;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M7,1.2l1.6,3.5v.3c.1,0,.4,0,.4,0l3.8.4-2.9,2.5-.2.2v.3c0,0,.9,3.7.9,3.7l-3.3-1.9h-.2c0-.1-.2,0-.2,0l-3.3,1.9.8-3.7v-.3c0,0-.2-.2-.2-.2l-2.9-2.5,3.8-.4h.3s.1-.3.1-.3l1.6-3.5Z"/>
+</svg>

src/svg/rarity/uncommon.svg

@@ -1,3 +1,15 @@
-<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="7.07104" y="0.707107" width="9" height="9" transform="rotate(45 7.07104 0.707107)" fill="#1F232D" stroke="white"/>
-</svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15">
+  <!-- Generator: Adobe Illustrator 30.2.1, SVG Export Plug-In . SVG Version: 2.1.1 Build 1)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #1f232d;
+        stroke: #fff;
+        stroke-miterlimit: 4;
+        stroke-width: .7px;
+      }
+    </style>
+  </defs>
+  <rect class="st0" x="2.6" y="2.6" width="9" height="9" transform="translate(-2.9 7.1) rotate(-45)"/>
+</svg>