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

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

Browse Source
This commit is contained in:
zach
2026-02-21 16:26:34 -05:00
parent 5f58d518ca
commit 2bc388b662
16 changed files with 693 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Card.astro
View File

@@ -9,7 +9,7 @@ import RarityIcon from './RarityIcon.astro';
const { query } = Astro.props;
const searchResults = await client.collections('cards').documents().search({
q: query,
query_by: 'productLineName,productName,setName,number,rarityName,Artist',
query_by: 'productLineName,productName,setName,number,rarityName',
per_page: 250,
});
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"];
---
{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 tcg-card">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
<div class="col">
<div hx-get={`/partials/card-modal?productId=${card.productId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
</div>
<div class="row row-cols-5 gx-1 price-row mb-2">
{card.prices
.slice()
@@ -49,7 +50,7 @@ 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>
@@ -57,10 +58,9 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
</div>
<div class="h5 my-0">{card.productName}</div>
<div class="d-flex flex-row lh-1 mt-1">
<div class="copy-small flex-grow-1">{card.set?.setCode}</div>
<div class="copy-small">{card.number}</div>
<div class="text-secondary flex-grow-1">{card.set?.setCode}</div>
<div class="text-secondary">{card.number}</div>
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
</div>
</div>
</div>
))}