404 page created with random pokemon encounter. Add sample data to latest sales table and set up NM prices inside modal
This commit is contained in:
zach
19
package-lock.json
generated
19
package-lock.json
generated
@@ -11,6 +11,7 @@
|
|||||||
"astro": "^5.17.1",
|
"astro": "^5.17.1",
|
||||||
"bootstrap": "^5.3.8",
|
"bootstrap": "^5.3.8",
|
||||||
"chalk": "^5.6.2",
|
"chalk": "^5.6.2",
|
||||||
|
"chart.js": "^4.5.1",
|
||||||
"dotenv": "^17.2.4",
|
"dotenv": "^17.2.4",
|
||||||
"drizzle-orm": "^1.0.0-beta.15-859cf75",
|
"drizzle-orm": "^1.0.0-beta.15-859cf75",
|
||||||
"mysql2": "^3.16.3",
|
"mysql2": "^3.16.3",
|
||||||
@@ -1365,6 +1366,12 @@
|
|||||||
"node": ">=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": {
|
"node_modules/@oslojs/encoding": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@oslojs/encoding/-/encoding-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@oslojs/encoding/-/encoding-1.1.0.tgz",
|
||||||
@@ -2722,6 +2729,18 @@
|
|||||||
"url": "https://github.com/sponsors/wooorm"
|
"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": {
|
"node_modules/chokidar": {
|
||||||
"version": "5.0.0",
|
"version": "5.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz",
|
||||||
|
|||||||
@@ -12,6 +12,7 @@
|
|||||||
"astro": "^5.17.1",
|
"astro": "^5.17.1",
|
||||||
"bootstrap": "^5.3.8",
|
"bootstrap": "^5.3.8",
|
||||||
"chalk": "^5.6.2",
|
"chalk": "^5.6.2",
|
||||||
|
"chart.js": "^4.5.1",
|
||||||
"dotenv": "^17.2.4",
|
"dotenv": "^17.2.4",
|
||||||
"drizzle-orm": "^1.0.0-beta.15-859cf75",
|
"drizzle-orm": "^1.0.0-beta.15-859cf75",
|
||||||
"mysql2": "^3.16.3",
|
"mysql2": "^3.16.3",
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
@import 'bootstrap/scss/images';
|
@import 'bootstrap/scss/images';
|
||||||
@import 'bootstrap/scss/nav';
|
@import 'bootstrap/scss/nav';
|
||||||
// @import 'bootstrap/scss/accordion';
|
// @import 'bootstrap/scss/accordion';
|
||||||
// @import 'bootstrap/scss/alert';
|
@import 'bootstrap/scss/alert';
|
||||||
// @import 'bootstrap/scss/badge';
|
// @import 'bootstrap/scss/badge';
|
||||||
// @import 'bootstrap/scss/breadcrumb';
|
// @import 'bootstrap/scss/breadcrumb';
|
||||||
// @import 'bootstrap/scss/button-group';
|
// @import 'bootstrap/scss/button-group';
|
||||||
@@ -39,7 +39,7 @@
|
|||||||
// @import 'bootstrap/scss/popover';
|
// @import 'bootstrap/scss/popover';
|
||||||
// @import 'bootstrap/scss/progress';
|
// @import 'bootstrap/scss/progress';
|
||||||
// @import 'bootstrap/scss/spinners';
|
// @import 'bootstrap/scss/spinners';
|
||||||
// @import 'bootstrap/scss/tables';
|
@import 'bootstrap/scss/tables';
|
||||||
// @import 'bootstrap/scss/toasts';
|
// @import 'bootstrap/scss/toasts';
|
||||||
// @import 'bootstrap/scss/tooltip';
|
// @import 'bootstrap/scss/tooltip';
|
||||||
@import 'bootstrap/scss/transitions';
|
@import 'bootstrap/scss/transitions';
|
||||||
|
|||||||
@@ -28,151 +28,133 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ----------------------
|
// ----------------------
|
||||||
// Card
|
// Cards & Modal
|
||||||
// ----------------------
|
// ----------------------
|
||||||
|
|
||||||
.tcg-card {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-xl {
|
.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 {
|
.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 {
|
.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);
|
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 {
|
.card-image {
|
||||||
aspect-ratio: 23/32;
|
aspect-ratio: 23 / 32;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Icon sizes
|
||||||
.small-icon svg {
|
.small-icon svg {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 16px;
|
max-height: 16px;
|
||||||
margin-top: -0.25rem;
|
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-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;
|
margin-bottom: -0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.energy-icon svg {
|
||||||
margin-right: -0.25rem;
|
margin-right: -0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.set-icon svg {
|
.set-icon svg {
|
||||||
width: 2.5rem;
|
|
||||||
margin-bottom: -0.25rem;
|
|
||||||
margin-left: -0.25rem;
|
margin-left: -0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow-filter {
|
.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 {
|
.price-label {
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -215,29 +196,24 @@
|
|||||||
@media (min-width: 1600px) {
|
@media (min-width: 1600px) {
|
||||||
font-size: 1rem;
|
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) {
|
@media (max-width: 768px) {
|
||||||
.search-box,
|
.search-box,
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import RarityIcon from './RarityIcon.astro';
|
|||||||
const { query } = Astro.props;
|
const { query } = Astro.props;
|
||||||
const searchResults = await client.collections('cards').documents().search({
|
const searchResults = await client.collections('cards').documents().search({
|
||||||
q: query,
|
q: query,
|
||||||
query_by: 'productLineName,productName,setName,number,rarityName,Artist',
|
query_by: 'productLineName,productName,setName,number,rarityName',
|
||||||
per_page: 250,
|
per_page: 250,
|
||||||
});
|
});
|
||||||
const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
|
const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
|
||||||
@@ -38,9 +38,10 @@ const formatPrice = (price:any) => {
|
|||||||
const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
|
const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
|
||||||
---
|
---
|
||||||
{pokemon.map((card) => (
|
{pokemon.map((card) => (
|
||||||
<div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" 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">
|
<div class="row row-cols-5 gx-1 price-row mb-2">
|
||||||
{card.prices
|
{card.prices
|
||||||
.slice()
|
.slice()
|
||||||
@@ -49,7 +50,7 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
|
|||||||
arr.findIndex(p => p.condition === price.condition) === index
|
arr.findIndex(p => p.condition === price.condition) === index
|
||||||
)
|
)
|
||||||
.map((price) => (
|
.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('')}
|
{price.condition.split(' ').map((w) => w[0]).join('')}
|
||||||
<br />${formatPrice(price.marketPrice)}
|
<br />${formatPrice(price.marketPrice)}
|
||||||
</div>
|
</div>
|
||||||
@@ -57,10 +58,9 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
|
|||||||
</div>
|
</div>
|
||||||
<div class="h5 my-0">{card.productName}</div>
|
<div class="h5 my-0">{card.productName}</div>
|
||||||
<div class="d-flex flex-row lh-1 mt-1">
|
<div class="d-flex flex-row lh-1 mt-1">
|
||||||
<div class="copy-small 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>
|
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
---
|
---
|
||||||
import grass from "/src/svg/energy/grass.svg?raw";
|
import grass from "/src/svg/energy/grass.svg?raw";
|
||||||
import fairy from "/src/svg/energy/fairy.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 dragon from "/src/svg/energy/dragon.svg?raw";
|
||||||
import fire from "/src/svg/energy/fire.svg?raw";
|
import fire from "/src/svg/energy/fire.svg?raw";
|
||||||
import water from "/src/svg/energy/water.svg?raw";
|
import water from "/src/svg/energy/water.svg?raw";
|
||||||
@@ -16,7 +16,7 @@ const { energy } = Astro.props;
|
|||||||
const energyMap = {
|
const energyMap = {
|
||||||
"Grass": grass,
|
"Grass": grass,
|
||||||
"Fairy": fairy,
|
"Fairy": fairy,
|
||||||
"Dark": dark,
|
"Darkness": darkness,
|
||||||
"Dragon": dragon,
|
"Dragon": dragon,
|
||||||
"Fire": fire,
|
"Fire": fire,
|
||||||
"Water": water,
|
"Water": water,
|
||||||
|
|||||||
@@ -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 double_crisis from "/src/svg/set/double_crisis.svg?raw";
|
||||||
import dragon_majesty from "/src/svg/set/dragon_majesty.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 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 { set } = Astro.props;
|
||||||
|
|
||||||
const setMap = {
|
const setMap = {
|
||||||
|
"ME: Ascended Heroes": ascended_heroes,
|
||||||
"Ancient Origins": ancient_origins,
|
"Ancient Origins": ancient_origins,
|
||||||
"Aquapolis": aquapolis,
|
"Aquapolis": aquapolis,
|
||||||
"Arceus": arceus,
|
"Arceus": arceus,
|
||||||
@@ -59,6 +70,15 @@ const setMap = {
|
|||||||
"Double Crisis": double_crisis,
|
"Double Crisis": double_crisis,
|
||||||
"Dragon Majesty": dragon_majesty,
|
"Dragon Majesty": dragon_majesty,
|
||||||
"Neo Genesis": neo_genesis,
|
"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] ?? "";
|
const svg = setMap[set as keyof typeof setMap] ?? "";
|
||||||
|
|||||||
26
src/pages/404.astro
Normal file
26
src/pages/404.astro
Normal file
@@ -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>
|
||||||
@@ -1,6 +1,15 @@
|
|||||||
---
|
---
|
||||||
import ebay from "/vendors/ebay.svg?raw";
|
import ebay from "/vendors/ebay.svg?raw";
|
||||||
|
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 { db } from '../../db/index.ts';
|
||||||
|
import { privateDecrypt } from "node:crypto";
|
||||||
|
|
||||||
|
import latestSales from '../../sampleData/latestsales.json';
|
||||||
|
import chartdata from '../../sampleData/chartdata.json';
|
||||||
|
|
||||||
|
const priceData = chartdata;
|
||||||
|
|
||||||
export const partial = true;
|
export const partial = true;
|
||||||
export const prerender = false;
|
export const prerender = false;
|
||||||
@@ -18,12 +27,43 @@ const card = await db.query.cards.findFirst({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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-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-content">
|
||||||
<div class="modal-header border-0">
|
<div class="modal-header border-0">
|
||||||
<h4 class="card-title">{card?.productName} | <span class="text-secondary">{card?.number}</span> {card?.energyType}</h4>
|
<div class="container-fluid">
|
||||||
|
<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>
|
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body pt-0">
|
<div class="modal-body pt-0">
|
||||||
@@ -31,10 +71,10 @@ const card = await db.query.cards.findFirst({
|
|||||||
<div class="card mb-2 border-0">
|
<div class="card mb-2 border-0">
|
||||||
<div class="row g-4">
|
<div class="row g-4">
|
||||||
<div class="col-sm-12 col-md-3">
|
<div class="col-sm-12 col-md-3">
|
||||||
<h6 class="text-secondary">Set name | Set Symbol</h6>
|
<p class="text-secondary">{card?.set?.setName}</p>
|
||||||
<img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt="...">
|
<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="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>
|
</div>
|
||||||
<div class="col-sm-12 col-md-7">
|
<div class="col-sm-12 col-md-7">
|
||||||
@@ -51,31 +91,49 @@ const card = await db.query.cards.findFirst({
|
|||||||
<div class="tab-content" id="nav-tabContent">
|
<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="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="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>
|
||||||
<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>
|
||||||
<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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -187,11 +245,11 @@ const card = await db.query.cards.findFirst({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
|
<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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
318
src/sampleData/chartdata.json
Normal file
318
src/sampleData/chartdata.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
52
src/sampleData/latestsales.json
Normal file
52
src/sampleData/latestsales.json
Normal file
@@ -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"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -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>
|
||||||
|
Before Width: | Height: | Size: 142 B After Width: | Height: | Size: 415 B |
@@ -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>
|
||||||
|
Before Width: | Height: | Size: 454 B After Width: | Height: | Size: 569 B |
@@ -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>
|
||||||
|
Before Width: | Height: | Size: 454 B After Width: | Height: | Size: 569 B |
@@ -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>
|
||||||
|
Before Width: | Height: | Size: 204 B After Width: | Height: | Size: 502 B |
1
src/svg/set/ascended_heroes.svg
Normal file
1
src/svg/set/ascended_heroes.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
Reference in New Issue
Block a user