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

Merge branch 'cardModal_styling'

Browse Source
This commit is contained in:
zach
2026-02-20 09:23:11 -05:00
parent 1ed2c4fcfe dfa6fac344
commit 65bf7a6acc
158 changed files with 277 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Card.astro
View File

@@ -3,9 +3,8 @@
import { isConditionalExpression } from 'typescript';
import { client } from '../db/typesense.ts';
import { db } from '../db';
import RarityIcon from './RarityIcon.astro';
import EnergyIcon from './EnergyIcon.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({
@@ -39,7 +38,8 @@ const formatPrice = (price:any) => {
const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
---
{pokemon.map((card) => (
<div class="col tcg-card" data-bs-toggle="modal" data-bs-target="#cardModal">
<div data-bs-toggle="modal" data-bs-target="#cardModal">
<div class="col tcg-card">
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
<div class="row row-cols-5 gx-1 price-row mb-2">
{card.prices
@@ -59,7 +59,8 @@ const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Play
<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>
<RarityIcon rarity={card.rarityName} />
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
</div>
</div>
</div>
))}

2
src/components/CardGrid.astro
View File

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

23
src/components/CardModal.astro
View File

@@ -1,6 +1,9 @@
---
import Card from '../components/Card.astro';
import ebay from "/vendors/ebay.svg?raw";
import EnergyIcon from './EnergyIcon.astro';
import RarityIcon from './RarityIcon.astro';
import SetIcon from './SetIcon.astro';
---
<!-- Modal -->
@@ -8,7 +11,9 @@ import ebay from "/vendors/ebay.svg?raw";
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
<div class="modal-content">
<div class="modal-header border-0">
<h4 class="card-title">Card title | <span class="text-secondary">Card Number</span> Energy</h4>
<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>
</div>
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body pt-0">
@@ -16,11 +21,10 @@ import ebay from "/vendors/ebay.svg?raw";
<div class="card mb-2 border-0">
<div class="row g-4">
<div class="col-sm-12 col-md-3">
<h6 class="text-secondary">Set name | Set Symbol</h6>
<img src="/cards/noImage.webp" class="card-image img-fluid rounded" alt="...">
<h6 class="text-secondary">Neo Genesis</h6>
<div class="position-relative d-inline-block"><img src="/cards/88072.jpg" class="card-image img-fluid rounded" alt="..."><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set="Neo Genesis" /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy="Electric" /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity="Common" /></span></div>
<div class="d-flex flex-row justify-content-between mt-2">
<div>Illustrator</div>
<div>Rarity</div>
<div class="h6 text-secondary">Naoyo Kimura</div>
</div>
</div>
<div class="col-sm-12 col-md-7">
@@ -31,12 +35,13 @@ import ebay from "/vendors/ebay.svg?raw";
<button class="nav-link mp" id="nav-mp" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false"><span class="d-none d-md-inline">Moderately Played</span><span class="d-md-none">MP</span></button>
<button class="nav-link hp" id="nav-hp" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false"><span class="d-none d-md-inline">Heavily Played</span><span class="d-md-none">HP</span></button>
<button class="nav-link dmg" id="nav-dmg" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-md-inline">Damaged</span><span class="d-md-none">DMG</span></button>
<button class="nav-link vendor" id="nav-vendor" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
</div>
</nav>
<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 flex-row flex-md-column flex-wrap flex-md-nowrap mt-2 col-sm-4 col-md-3">
<div class="d-inline-flex justify-content-sm-evenly flex-row flex-md-column flex-wrap flex-md-nowrap mt-2 col-sm-4 col-md-3">
<div class="dark-callout rounded p-2 mb-2">
<h6>Market Price</h6>
<p></p>
@@ -59,7 +64,9 @@ import ebay from "/vendors/ebay.svg?raw";
</div>
</div>
<div class="d-flex flex-column mt-2 col-xs-8 col-md-9">
<div class="dark-callout rounded p-2 pb-0 h-100">
<h6>Placeholder for graph</h6>
</div>
</div>
</div>
</div>
@@ -169,7 +176,7 @@ import ebay from "/vendors/ebay.svg?raw";
</div>
</div>
</div>
<div class="col-sm-12 col-md-2">
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
<button type="button" class="btn btn-secondary mb-2 w-100"><img src="/vendors/tcgplayer.webp"> TCGPlayer</button>
<button type="button" class="btn btn-secondary mb-2 w-100"><span set:html={ebay} /></button>
</div>

2
src/components/EnergyIcon.astro
View File

@@ -30,4 +30,4 @@ const energyMap = {
const svg = energyMap[energy as keyof typeof energyMap] ?? "";
---
<div class="energy-icon ps-2" set:html={svg}></div>
<div class="energy-icon shadow-filter" set:html={svg}></div>

2
src/components/RarityIcon.astro
View File

@@ -44,4 +44,4 @@ const rarityMap = {
const svg = rarityMap[rarity as keyof typeof rarityMap] ?? "";
---
<div class="rarity-icon ps-2" set:html={svg}></div>
<div class="rarity-icon shadow-filter" set:html={svg}></div>

67
src/components/SetIcon.astro Normal file
View File

@@ -0,0 +1,67 @@
---
import ancient_origins from "/src/svg/set/ancient_origins.svg?raw";
import aquapolis from "/src/svg/set/aquapolis.svg?raw";
import arceus from "/src/svg/set/arceus.svg?raw";
import astral_radiance from "/src/svg/set/astral_radiance.svg?raw";
import base_set_2 from "/src/svg/set/base_set_2.svg?raw";
import battle_styles from "/src/svg/set/battle_styles.svg?raw";
import best_of_game from "/src/svg/set/best_of_game.svg?raw";
import black_and_white from "/src/svg/set/black_and_white.svg?raw";
import boundaries_crossed from "/src/svg/set/boundaries_crossed.svg?raw";
import box_topper from "/src/svg/set/box_topper.svg?raw";
import breakpoint from "/src/svg/set/breakpoint.svg?raw";
import breakthrough from "/src/svg/set/breakthrough.svg?raw";
import brilliant_stars from "/src/svg/set/brilliant_stars.svg?raw";
import burning_shadows from "/src/svg/set/burning_shadows.svg?raw";
import call_of_legends from "/src/svg/set/call_of_legends.svg?raw";
import celebrations from "/src/svg/set/celebrations.svg?raw";
import champions_path from "/src/svg/set/champions_path.svg?raw";
import celestial_storm from "/src/svg/set/celestial_storm.svg?raw";
import crimson_invasion from "/src/svg/set/crimson_invasion.svg?raw";
import darkness_ablaze from "/src/svg/set/darkness_ablaze.svg?raw";
import chilling_reign from "/src/svg/set/chilling_reign.svg?raw";
import cosmic_eclipse from "/src/svg/set/cosmic_eclipse.svg?raw";
import dark_explorers from "/src/svg/set/dark_explorers.svg?raw";
import detective_pikachu from "/src/svg/set/detective_pikachu.svg?raw";
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";
const { set } = Astro.props;
const setMap = {
"Ancient Origins": ancient_origins,
"Aquapolis": aquapolis,
"Arceus": arceus,
"Astral Radiance": astral_radiance,
"Base Set 2": base_set_2,
"Battle Styles": battle_styles,
"Best of Game": best_of_game,
"Black and White": black_and_white,
"Boundaries Crossed": boundaries_crossed,
"Box Topper": box_topper,
"Breakpoint": breakpoint,
"Breakthrough": breakthrough,
"Brilliant Stars": brilliant_stars,
"Burning Shadows": burning_shadows,
"Call of Legends": call_of_legends,
"Celebrations": celebrations,
"Champions Path": champions_path,
"Celestial Storm": celestial_storm,
"Crimson Invasion": crimson_invasion,
"Darkness Ablaze": darkness_ablaze,
"Chilling Reign": chilling_reign,
"Cosmic Eclipse": cosmic_eclipse,
"Dark Explorers": dark_explorers,
"Detective Pikachu": detective_pikachu,
"Diamond and Pearl": diamond_and_pearl,
"Double Crisis": double_crisis,
"Dragon Majesty": dragon_majesty,
"Neo Genesis": neo_genesis,
};
const svg = setMap[set as keyof typeof setMap] ?? "";
---
<div class="set-icon shadow-filter" set:html={svg}></div>