404 page created with random pokemon encounter. Add sample data to latest sales table and set up NM prices inside modal

.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",
@@ -100,6 +101,7 @@
       "resolved": "https://registry.npmjs.org/@azure-rest/core-client/-/core-client-2.5.1.tgz",
       "integrity": "sha512-EHaOXW0RYDKS5CFffnixdyRPak5ytiCtU7uXDcP/uiY+A6jFRwNGzzJBiznkCzvi5EYpY+YWinieqHb0oY916A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
         "@azure/core-auth": "^1.10.0",
@@ -117,6 +119,7 @@
       "resolved": "https://registry.npmjs.org/@azure/abort-controller/-/abort-controller-2.1.2.tgz",
       "integrity": "sha512-nBrLsEWm4J2u5LpAPjxADTlq3trDgVZZXHNKabeXZtpq3d3AbN/KGO82R87rdDz5/lYB024rtEf10/q0urNgsA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -129,6 +132,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-auth/-/core-auth-1.10.1.tgz",
       "integrity": "sha512-ykRMW8PjVAn+RS6ww5cmK9U2CyH9p4Q88YJwvUslfuMmN98w/2rdGRLPqJYObapBCdzBVeDgYWdJnFPFb7qzpg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
         "@azure/core-util": "^1.13.0",
@@ -162,6 +166,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-http-compat/-/core-http-compat-2.3.2.tgz",
       "integrity": "sha512-Tf6ltdKzOJEgxZeWLCjMxrxbodB/ZeCbzzA1A2qHbhzAjzjHoBVSUeSl/baT/oHAxhc4qdqVaDKnc2+iE932gw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2"
       },
@@ -178,6 +183,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-lro/-/core-lro-2.7.2.tgz",
       "integrity": "sha512-0YIpccoX8m/k00O7mDDMdJpbr6mf1yWo2dfmxt5A8XVZVVMz2SSKaEbMCeJRvgQ0IaSlqhjT47p4hVIRRy90xw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.0.0",
         "@azure/core-util": "^1.2.0",
@@ -193,6 +199,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-paging/-/core-paging-1.6.2.tgz",
       "integrity": "sha512-YKWi9YuCU04B55h25cnOYZHxXYtEvQEbKST5vqRga7hWY9ydd3FZHdeQF8pyh+acWZvppw13M/LMGx0LABUVMA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -224,6 +231,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-tracing/-/core-tracing-1.3.1.tgz",
       "integrity": "sha512-9MWKevR7Hz8kNzzPLfX4EAtGM2b8mr50HPDBvio96bURP/9C+HjdH3sBlLSNNrvRAr5/k/svoH457gB5IKpmwQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -236,6 +244,7 @@
       "resolved": "https://registry.npmjs.org/@azure/core-util/-/core-util-1.13.1.tgz",
       "integrity": "sha512-XPArKLzsvl0Hf0CaGyKHUyVgF7oDnhKoP85Xv6M4StF/1AhfORhZudHtOyf2s+FcbuQ9dPRAjB8J2KvRRMUK2A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.1.2",
         "@typespec/ts-http-runtime": "^0.3.0",
@@ -273,6 +282,7 @@
       "resolved": "https://registry.npmjs.org/@azure/keyvault-common/-/keyvault-common-2.0.0.tgz",
       "integrity": "sha512-wRLVaroQtOqfg60cxkzUkGKrKMsCP6uYXAOomOIysSMyt1/YM0eUn9LqieAWM8DLcU4+07Fio2YGpPeqUbpP9w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/abort-controller": "^2.0.0",
         "@azure/core-auth": "^1.3.0",
@@ -292,6 +302,7 @@
       "resolved": "https://registry.npmjs.org/@azure/keyvault-keys/-/keyvault-keys-4.10.0.tgz",
       "integrity": "sha512-eDT7iXoBTRZ2n3fLiftuGJFD+yjkiB1GNqzU2KbY1TLYeXeSPVTVgn2eJ5vmRTZ11978jy2Kg2wI7xa9Tyr8ag==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure-rest/core-client": "^2.3.3",
         "@azure/abort-controller": "^2.1.2",
@@ -315,6 +326,7 @@
       "resolved": "https://registry.npmjs.org/@azure/logger/-/logger-1.3.0.tgz",
       "integrity": "sha512-fCqPIfOcLE+CGqGPd66c8bZpwAji98tZ4JI9i/mlTNTlsIWslCfpg48s/ypyLxZTump5sypjrKn2/kY7q8oAbA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typespec/ts-http-runtime": "^0.3.0",
         "tslib": "^2.6.2"
@@ -328,6 +340,7 @@
       "resolved": "https://registry.npmjs.org/@azure/msal-browser/-/msal-browser-4.28.2.tgz",
       "integrity": "sha512-6vYUMvs6kJxJgxaCmHn/F8VxjLHNh7i9wzfwPGf8kyBJ8Gg2yvBXx175Uev8LdrD1F5C4o7qHa2CC4IrhGE1XQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/msal-common": "15.14.2"
       },
@@ -340,6 +353,7 @@
       "resolved": "https://registry.npmjs.org/@azure/msal-common/-/msal-common-15.14.2.tgz",
       "integrity": "sha512-n8RBJEUmd5QotoqbZfd+eGBkzuFI1KX6jw2b3WcpSyGjwmzoeI/Jb99opIBPHpb8y312NB+B6+FGi2ZVSR8yfA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -349,6 +363,7 @@
       "resolved": "https://registry.npmjs.org/@azure/msal-node/-/msal-node-3.8.7.tgz",
       "integrity": "sha512-a+Xnrae+uwLnlw68bplS1X4kuJ9F/7K6afuMFyRkNIskhjgDezl5Fhrx+1pmAlDmC0VaaAxjRQMp1OmcqVwkIg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/msal-common": "15.14.2",
         "jsonwebtoken": "^9.0.0",
@@ -1335,7 +1350,8 @@
       "version": "5.7.0",
       "resolved": "https://registry.npmjs.org/@js-joda/core/-/core-5.7.0.tgz",
       "integrity": "sha512-WBu4ULVVxySLLzK1Ppq+OdfP+adRS4ntmDQT915rzDJ++i95gc2jZkM5B6LWEAwN3lGXpfie3yPABozdD3K3Vg==",
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/@js-temporal/polyfill": {
       "version": "0.5.1",
@@ -1350,6 +1366,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",
@@ -1657,7 +1679,6 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
       "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -2087,7 +2108,8 @@
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/@tediousjs/connection-string/-/connection-string-0.5.0.tgz",
       "integrity": "sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/bootstrap": {
       "version": "5.2.10",
@@ -2164,7 +2186,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.1.tgz",
       "integrity": "sha512-CPrnr8voK8vC6eEtyRzvMpgp3VyVRhgclonE7qYi6P9sXwYb59ucfrnmFBTaP0yUi8Gk4yZg/LlTJULGxvTNsg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.16.0"
       }
@@ -2174,6 +2195,7 @@
       "resolved": "https://registry.npmjs.org/@types/readable-stream/-/readable-stream-4.0.23.tgz",
       "integrity": "sha512-wwXrtQvbMHxCbBgjHaMGEmImFTQxxpfMOR/ZoQnXxB1woqkUbdLGFDgauo00Py9IudiaqSeiBiulSV9i6XIPig==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*"
       }
@@ -2189,6 +2211,7 @@
       "resolved": "https://registry.npmjs.org/@typespec/ts-http-runtime/-/ts-http-runtime-0.3.3.tgz",
       "integrity": "sha512-91fp6CAAJSRtH5ja95T1FHSKa8aPW9/Zw6cta81jlZTUw/+Vq8jM/AfF/14h2b71wwR84JUTW/3Y8QPhDAawFA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "http-proxy-agent": "^7.0.0",
         "https-proxy-agent": "^7.0.0",
@@ -2209,6 +2232,7 @@
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
       "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "event-target-shim": "^5.0.0"
       },
@@ -2233,6 +2257,7 @@
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.4.tgz",
       "integrity": "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 14"
       }
@@ -2516,13 +2541,15 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/bl": {
       "version": "6.1.6",
       "resolved": "https://registry.npmjs.org/bl/-/bl-6.1.6.tgz",
       "integrity": "sha512-jLsPgN/YSvPUg9UX0Kd73CXpm2Psg9FxMeCSXnk3WBO3CMT10JMwijubhGfHCnFu6TPn1ei3b975dxv7K2pWVg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/readable-stream": "^4.0.0",
         "buffer": "^6.0.3",
@@ -2596,6 +2623,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "base64-js": "^1.3.1",
         "ieee754": "^1.2.1"
@@ -2605,13 +2633,15 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/bundle-name": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
       "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "run-applescript": "^7.0.0"
       },
@@ -2699,6 +2729,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",
@@ -2936,6 +2978,7 @@
       "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
       "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "bundle-name": "^4.1.0",
         "default-browser-id": "^5.0.0"
@@ -2952,6 +2995,7 @@
       "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
       "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -2964,6 +3008,7 @@
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
       "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -3352,6 +3397,7 @@
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
       "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "^5.0.1"
       }
@@ -3492,6 +3538,7 @@
       "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
       "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -3507,6 +3554,7 @@
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.8.x"
       }
@@ -3959,6 +4007,7 @@
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
       "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.0",
         "debug": "^4.3.4"
@@ -3972,6 +4021,7 @@
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.6.tgz",
       "integrity": "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "agent-base": "^7.1.2",
         "debug": "4"
@@ -4014,7 +4064,8 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/immutable": {
       "version": "5.1.4",
@@ -4036,7 +4087,8 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "license": "ISC"
+      "license": "ISC",
+      "peer": true
     },
     "node_modules/iron-webcrypto": {
       "version": "1.2.1",
@@ -4151,7 +4203,6 @@
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -4160,7 +4211,8 @@
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/js-md4/-/js-md4-0.3.2.tgz",
       "integrity": "sha512-/GDnfQYsltsjRswQhN9fhv3EMw2sCpUdrdxyWDOUK7eyD++r3gRhzgiQgc/x4MAv2i1iuQ4lxO5mvqM3vj4bwA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/js-yaml": {
       "version": "4.1.1",
@@ -4186,6 +4238,7 @@
       "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
       "integrity": "sha512-MT/xP0CrubFRNLNKvxJ2BYfy53Zkm++5bX9dtuPbqAeQpTVe0MQTFhao8+Cp//EmJp244xt6Drw/GVEGCUj40g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "jws": "^4.0.1",
         "lodash.includes": "^4.3.0",
@@ -4208,6 +4261,7 @@
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-2.0.1.tgz",
       "integrity": "sha512-hRF04fqJIP8Abbkq5NKGN0Bbr3JxlQ+qhZufXVr0DvujKy93ZCbXZMHDL4EOtodSbCWxOqR8MS1tXA5hwqCXDg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "buffer-equal-constant-time": "^1.0.1",
         "ecdsa-sig-formatter": "1.0.11",
@@ -4219,6 +4273,7 @@
       "resolved": "https://registry.npmjs.org/jws/-/jws-4.0.1.tgz",
       "integrity": "sha512-EKI/M/yqPncGUUh44xz0PxSidXFr/+r0pA70+gIYhjv+et7yxM+s29Y+VGDkovRofQem0fs7Uvf4+YmAdyRduA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "jwa": "^2.0.1",
         "safe-buffer": "^5.0.1"
@@ -4237,43 +4292,50 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
       "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isboolean": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
       "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isinteger": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
       "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isnumber": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
       "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isplainobject": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
       "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.isstring": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
       "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/lodash.once": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
       "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/loglevel": {
       "version": "1.9.2",
@@ -5202,6 +5264,7 @@
       "resolved": "https://registry.npmjs.org/mssql/-/mssql-11.0.1.tgz",
       "integrity": "sha512-KlGNsugoT90enKlR8/G36H0kTxPthDhmtNUCwEHvgRza5Cjpjoj+P2X6eMpFUDN7pFrJZsKadL4x990G8RBE1w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@tediousjs/connection-string": "^0.5.0",
         "commander": "^11.0.0",
@@ -5222,6 +5285,7 @@
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
       },
@@ -5234,6 +5298,7 @@
       "resolved": "https://registry.npmjs.org/tedious/-/tedious-18.6.2.tgz",
       "integrity": "sha512-g7jC56o3MzLkE3lHkaFe2ZdOVFBahq5bsB60/M4NYUbocw/MCrS89IOEQUFr+ba6pb8ZHczZ/VqCyYeYq0xBAg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/core-auth": "^1.7.2",
         "@azure/identity": "^4.2.1",
@@ -5255,7 +5320,6 @@
       "resolved": "https://registry.npmjs.org/mysql2/-/mysql2-3.16.3.tgz",
       "integrity": "sha512-+3XhQEt4FEFuvGV0JjIDj4eP2OT/oIj/54dYvqhblnSzlfcxVOuj+cd15Xz6hsG4HU1a+A5+BA9gm0618C4z7A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "aws-ssl-profiles": "^1.1.2",
         "denque": "^2.1.0",
@@ -5305,7 +5369,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/native-duplexpair/-/native-duplexpair-1.0.0.tgz",
       "integrity": "sha512-E7QQoM+3jvNtlmyfqRZ0/U75VFgCls+fSkbml2MpgWkWyz3ox8Y58gNhfuziuQYGNNQAbFZJQck55LHCnCK6CA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/neotraverse": {
       "version": "0.6.18",
@@ -5408,6 +5473,7 @@
       "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
       "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "default-browser": "^5.2.1",
         "define-lazy-prop": "^3.0.0",
@@ -5566,6 +5632,7 @@
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
       "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -5610,6 +5677,7 @@
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-4.7.0.tgz",
       "integrity": "sha512-oIGGmcpTLwPga8Bn6/Z75SVaH1z5dUut2ibSyAMVhmUggWpmDn2dapB0n7f8nwaSiRtepAsfJyfXIO5DCVAODg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "abort-controller": "^3.0.0",
         "buffer": "^6.0.3",
@@ -5865,14 +5933,14 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
       "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/rollup": {
       "version": "4.57.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
       "integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -5917,6 +5985,7 @@
       "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
       "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -5942,7 +6011,8 @@
           "url": "https://feross.org/support"
         }
       ],
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -5955,7 +6025,6 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
       "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -6127,7 +6196,8 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.3.tgz",
       "integrity": "sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==",
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/sqlstring": {
       "version": "2.3.3",
@@ -6143,6 +6213,7 @@
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
@@ -6223,6 +6294,7 @@
       "resolved": "https://registry.npmjs.org/tarn/-/tarn-3.0.2.tgz",
       "integrity": "sha512-51LAVKUSZSVfI05vjPESNc5vwqqZpbXCsU+/+wxlOrUjk2SnFTt97v9ZgQrD4YmxYW1Px6w2KjaDitCfkvgxMQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -6232,6 +6304,7 @@
       "resolved": "https://registry.npmjs.org/tedious/-/tedious-19.2.1.tgz",
       "integrity": "sha512-pk1Q16Yl62iocuQB+RWbg6rFUFkIyzqOFQ6NfysCltRvQqKwfurgj8v/f2X+CKvDhSL4IJ0cCOfCHDg9PWEEYA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@azure/core-auth": "^1.7.2",
         "@azure/identity": "^4.2.1",
@@ -6342,7 +6415,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -6646,6 +6718,7 @@
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -6697,7 +6770,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -6842,6 +6914,7 @@
       "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
       "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "is-wsl": "^3.1.0"
       },
@@ -6911,7 +6984,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

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 = [
+  const productLines = [ "pokemon", "pokemon-japan" ];
-    { 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"] }
-  ];
 
+  // work from the available sets within the product line
   for (const productLine of productLines) {
-    for (const [key, values] of Object.entries(productLine)) {
+    const d = {"algorithm":"sales_dismax","from":0,"size":1,"filters":{"term":{"productLineName":[productLine]}},"settings":{"useFuzzySearch":false}};
-      if (key === "name") continue;
+
-      for (const value of values) {
+    const response = await fetch('https://mp-search-api.tcgplayer.com/v1/search/request?q=&isList=false', {
-        console.log(`Syncing product line "${productLine.name}" with ${key} "${value}"...`);
+      method: 'POST',
-        await syncProductLineEnergyType(productLine.name, key, value);
+      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}...`);
 
-
+    const d = {
-    let 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,7 @@ 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' },
                 ],
                 default_sorting_field: 'productId',
             });
@@ -59,6 +60,7 @@ async function preloadSearchIndex() {
         cardType: card.cardType || "",
         energyType: card.energyType || "",
         number: card.number,
+        Artist: card.Artist || "",
     })), { 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) {
+  @media (min-width: 768px) {
-            max-width: 95vw;
+    max-width: 95vw;
-        }
+  }
-    @media (min-width: 1400px) {
+  @media (min-width: 1400px) {
-            max-width: 90vw;
+    max-width: 90vw;
-        }
+  }
 }
 
 .card-modal {
-    background-color: rgba(1, 11, 18, .8);
+  background-color: rgba(1, 11, 18, 0.8);
-    cursor: default;
+  cursor: default;
 }
 
-.nav-link:hover, .nav-link:focus {
+canvas {
-    color: rgba(255, 255, 255, 0.87);
+  max-width: 100%;
-}
+  height: 300px;
-
-.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);
 }
 
+// ----------------------
+// Navigation Tabs
+// ----------------------
 .nav-link {
-    font-weight: 600;
+  font-weight: 600;
-    color: rgba(255,255,255,67);
+  color: rgba(255, 255, 255, 0.67);
-    transition: margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1), 
+  transition:
-                padding-top 0.2s cubic-bezier(0.5, 0, 0.3, 1), 
+    margin-top 0.2s cubic-bezier(0.5, 0, 0.3, 1),
-                padding-bottom 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 {
+
+  &: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 {
+.nav-tabs {
-    @media (min-width: 768px) {
+  .nav-link.active,
-        background-color: rgba(44, 48, 59, 1);
+  .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 {
+.energy-icon svg,
-  width:2.5rem;
+.rarity-icon-large svg,
+.set-icon svg {
+  width: 2.5rem;
   margin-top: -0.25rem;
-  margin-right: -0.25rem;
 }
 
-.rarity-icon-large svg {
+.rarity-icon-large svg,
-  width: 2.5rem;
+.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:
-  filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
+    drop-shadow(0 5px 5px rgba(0, 0, 0, 0.3))
-          drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));  
+    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
+  &:nth-of-type(n + 2) {
-.price-label:nth-of-type(n + 2) {
+    background-color: hsl(66, 70%, 61%);
-  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

@@ -3,8 +3,8 @@
 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';
+import RarityIcon from './RarityIcon.astro';
 
 const { query } = Astro.props;
 const searchResults = await client.collections('cards').documents().search({
@@ -38,9 +38,10 @@ const formatPrice = (price:any) => {
 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">
-    <div class="col tcg-card">
+        <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'"/>
+            <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()
@@ -49,18 +50,17 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
             arr.findIndex(p => p.condition === price.condition) === index
             )
             .map((price) => (
-            <div class="col price-label ps-xxl-2 ps-1">
+            <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">
+        <div class="d-flex flex-row lh-1 mt-1">
-            <div class="copy-small d-none d-lg-flex flex-grow-1">{card.set?.setCode}</div>
+            <div class="text-secondary flex-grow-1">{card.set?.setCode}</div>
-            <div class="copy-small">{card.number}</div>
+            <div class="text-secondary">{card.number}</div>
             <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
         </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

@@ -11,7 +11,7 @@ const { query } = Astro.props;
                     <input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." value={query} />
                 </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(),
+	setId: int(),
-	shippingCategoryId: int().default(0).notNull(),
+	shippingCategoryId: int(),
 	duplicate: boolean().default(false).notNull(),
 	foilOnly: boolean().default(false).notNull(),
-	maxFulfillableQuantity: int().default(0).notNull(),
+	maxFulfillableQuantity: int(),
-	totalListings: int().default(0).notNull(),
+	totalListings: int(),
-	score: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
+	score: decimal({ precision: 10, scale: 2, mode: 'number' }),
-	lowestPrice: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
+	lowestPrice: decimal({ precision: 10, scale: 2, mode: 'number' }),
-	lowestPriceWithShipping: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
+	lowestPriceWithShipping: decimal({ precision: 10, scale: 2, mode: 'number' }),
-	marketPrice: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
+	marketPrice: decimal({ precision: 10, scale: 2, mode: 'number' }),
-	medianPrice: decimal({ precision: 10, scale: 2, mode: 'number' }).default(0).notNull(),
+	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,26 @@
+---
+import Layout from '../layouts/Main.astro';
+import StickyFilter from '../components/StickyFilter.astro';
+
+const searchParams = Astro.url.searchParams;
+const query = searchParams.get('q') || '*';
+
+const randomNumber = Math.floor(Math.random() * 1000) + 1;
+---
+
+<Layout>
+<StickyFilter query={ query } />
+<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>
+    </div>

src/pages/partials/card-modal.astro

@@ -1,18 +1,68 @@
 ---
-import Card from '../components/Card.astro';
 import ebay from "/vendors/ebay.svg?raw";
-import EnergyIcon from './EnergyIcon.astro';
+import SetIcon from '../../components/SetIcon.astro';
-import RarityIcon from './RarityIcon.astro';
+import EnergyIcon from '../../components/EnergyIcon.astro';
-import SetIcon from './SetIcon.astro';
+import RarityIcon from '../../components/RarityIcon.astro';
----
+import { db } from '../../db/index.ts';
+import { privateDecrypt } from "node:crypto";
 
-<!-- Modal -->
+import latestSales from '../../sampleData/latestsales.json';
-<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
+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);
+
+function timeAgo(date) {
+  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 +71,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>
+                    <p class="text-secondary">{card?.set?.setName}</p>
-                    <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>
+                    <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 +91,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="mt-2 col-12 col-md-3 row row-cols-3 row-cols-md-1">
-                                    <div class="dark-callout rounded p-2 mb-2">
+                                    <div class="col dark-callout rounded mb-1 py-2">
-                                        <h6>Market Price</h6>
+                                        <p class="h6">Market Price</p>
-                                        <p></p>
+                                        <p class="py-0 mb-1">${nearMintPrice}</p>
                                     </div>
-                                    <div class="dark-callout rounded p-2 mb-2">
+                                    <div class="col dark-callout rounded mb-1 py-2">
-                                        <h6>Lowest Price</h6>
+                                        <p class="h6">Lowest List</p>
-                                        <p></p>
+                                        <p class="py-0 mb-1">${nearMint?.lowestPrice}</p>
                                     </div>
-                                    <div class="dark-callout rounded p-2 mb-2">
+                                    <div class="col dark-callout rounded mb-1 py-2">
-                                        <h6>Highest Price</h6>
+                                        <p class="h6">Highest List</p>
-                                        <p></p>
+                                        <p class="py-0 mb-1">${nearMint?.highestPrice}</p>
-                                    </div>
+                                    </div>                                   
-                                    <div class="dark-callout rounded p-2 mb-2">
+                                    <div class="col-12 alert alert-success mb-1 py-2">
-                                        <h6>Volatility</h6>
+                                        <p class="h6">Low Volatility</p>
-                                        <p></p>
-                                    </div>
-                                    <div class="dark-callout rounded p-2 mb-2 flex-fill">
-                                        <h6>Latest Sales</h6>
-                                        <p></p>
                                     </div>
                                 </div>
-                                <div class="d-flex flex-column mt-2 col-xs-8 col-md-9">
+                                <div class="d-flex flex-column mt-2 col-12 col-md-9">
-                                    <div class="dark-callout rounded p-2 pb-0 h-100">
+                                    <div class="dark-callout rounded table-responsive pt-1 ps-2 mb-1">
-                                        <h6>Placeholder for graph</h6>
+                                        <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 +245,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>
+                <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>
-                <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.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/pokemon.astro

@@ -2,7 +2,6 @@
 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;
@@ -21,7 +20,12 @@ const query = searchParams.get('q') || '*';
     <CardGrid>
         <Card slot="Card" query={query}></Card>
     </CardGrid>
-    <CardModal></CardModal>
+
-</div>
+    <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">
+<?xml version="1.0" encoding="UTF-8"?>
-<circle cx="5" cy="5" r="4.5" fill="#1F232D" stroke="white"/>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 10 10">
-</svg>
+  <!-- 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">
+<?xml version="1.0" encoding="UTF-8"?>
-<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 id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 13">
-</svg>
+  <!-- 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">
+<?xml version="1.0" encoding="UTF-8"?>
-<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 id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 14 13">
-</svg>
+  <!-- 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">
+<?xml version="1.0" encoding="UTF-8"?>
-<rect x="7.07104" y="0.707107" width="9" height="9" transform="rotate(45 7.07104 0.707107)" fill="#1F232D" stroke="white"/>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 15 15">
-</svg>
+  <!-- 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>