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

updated the 404 whos that pokemon mechanism

Browse Source
This commit is contained in:
zach
2026-02-23 07:53:57 -05:00
parent bdcf90b0d9
commit dfc2e9eaf5
8 changed files with 130 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/404/glow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 116 KiB

BIN
public/404/lines.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 454 KiB

68
src/assets/css/main.scss
View File

@@ -9,6 +9,44 @@
@media (min-width: 768px) {
max-width: 95vw;
}
display: grid;
place-items: center;
//background: #d3d9b3;
}
.circle {
position: relative;
width: calc(var(--radius) * 2);
height: calc(var(--radius) * 2);
margin: 50px auto;
}
:root {
--total: 11; /* How many items */
--radius: 80px; /* Circle size */
}
.circle-item {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -30px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
display: grid;
place-items: center;
/* This is where the magic happens */
--angle: calc(360deg / var(--total) * var(--i));
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
transform:
rotate(var(--angle)) /* Rotate to position */
translateX(var(--radius)) /* Move away from center */
rotate(calc(-1 * var(--angle))); /* Rotate back */
}
// ----------------------
@@ -45,11 +83,6 @@
cursor: default;
}
canvas {
max-width: 100%;
height: 300px;
}
// ----------------------
// Navigation Tabs
// ----------------------
@@ -117,6 +150,10 @@ $tiers: (
}
}
.price-area {
max-height: 75px;
}
.card-image {
aspect-ratio: 23 / 32;
object-fit: cover;
@@ -131,6 +168,27 @@ $tiers: (
margin-top: -0.25rem;
}
.masked-image {
z-index: 1000;
opacity: 100%;
mix-blend-mode: normal;
}
.starburst {
opacity: 10%;
mix-blend-mode: lighten;
object-fit: cover;
background-size: cover;
}
.whos-that-pokemon {
width: 100%;
z-index: 998;
opacity: 10%;
mix-blend-mode: lighten;
aspect-ratio: 1/1;
}
.energy-icon svg,
.rarity-icon-large svg,
.set-icon svg {

52
src/components/SetIcon.astro
View File

@@ -41,33 +41,31 @@ 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,
"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,
"ASC": ascended_heroes,
"AOR": ancient_origins,
"AQ": aquapolis,
"AR": arceus,
"ASR": astral_radiance,
"BS2": base_set_2,
"BST": battle_styles,
"BLW": black_and_white,
"BCR": boundaries_crossed,
"BKP": breakpoint,
"BKT": breakthrough,
"BRS": brilliant_stars,
"BUS": burning_shadows,
"CL": call_of_legends,
"CEL": celebrations,
"CPA": champions_path,
"CES": celestial_storm,
"CIN": crimson_invasion,
"DAA": darkness_ablaze,
"CRE": chilling_reign,
"CEC": cosmic_eclipse,
"DEX": dark_explorers,
"DET": detective_pikachu,
"DP": diamond_and_pearl,
"DCR": double_crisis,
"Dragon Majesty": dragon_majesty,
"Neo Genesis": neo_genesis,
"Jungle": jungle,

30
src/pages/404.astro
View File

@@ -2,7 +2,10 @@
import Layout from '../layouts/Main.astro';
import StickyFilter from '../components/StickyFilter.astro';
const randomNumber = Math.floor(Math.random() * 1000) + 1;
const searchParams = Astro.url.searchParams;
const query = searchParams.get('q') || '*';
const randomNumber = Math.floor(Math.random() * 1025) + 1;
---
<Layout>
@@ -14,23 +17,26 @@ const randomNumber = Math.floor(Math.random() * 1000) + 1;
</style>
<div class="container">
<div class="row col-10 mx-auto mt-5">
<div class="col-12 col-md-6">
<div class="col-12 col-md-5">
<h1 class="mb-4 mt-0">404 - Page Not Found</h1>
<h4 class="my-4">Sorry, the page you are looking for does not exist.</h4>
<p class="copy-big my-4">Return to the <a href="/">home page</a> or search for another Pokémon.</p>
</div>
<div class="col-12 col-md-5 offset-md-1">
<div class="alert alert-warning border" role="alert">
<h4 class="alert-heading">A wild Pokémon appeared!</h4>
</div>
<img src={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} class="img-fluid" alt="">
<div class="alert alert-warning border" role="alert">
<div class="col-12 col-md-6 offset-md-1 row">
<div class="alert alert-warning border col-12" role="alert">
<h4 class="alert-heading">Who's that Pokémon?</h4>
<p class="mb-0">Click to reveal.</p>
</div>
<div class="mx-auto position-relative overflow-hidden d-flex">
<img class="whos-that-pokemon position-absolute" src="/404/lines.gif">
<div class="mx-auto d-flex flex-col-reverse flex-lg-row">
<div class="ratio ratio-1x1 relative">
<img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png">
<img class="m-auto position-absolute w-75 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle" src={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} alt="">
</div>
</div>
</div>
</div>
<img src={`https://www.pokemon.com/static-assets/content-assets/cms2/img/pokedex/full/${randomNumber}.png`} class="img-fluid masked-image" alt="">
<div>Click to reveal Pokémon!</div>
</div>
</div>
</div>

15
src/pages/index.astro
View File

@@ -1,11 +1,26 @@
---
import Welcome from '../components/Welcome.astro';
import Layout from '../layouts/Layout.astro';
import Image from 'astro/components/Image.astro';
import '/src/assets/css/main.scss';
// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
---
<Layout>
<div class="circle float-start ms-5">
<Image class="circle-item rounded-shadow" style="--i: 0" src="/src/svg/energy/grass.svg?raw" alt="Grass Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 1" src="/src/svg/energy/fire.svg?raw" alt="Fire Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 2" src="/src/svg/energy/water.svg?raw" alt="Water Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 3" src="/src/svg/energy/electric.svg?raw" alt="Electric Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 4" src="/src/svg/energy/psychic.svg?raw" alt="Psychic Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 5" src="/src/svg/energy/fighting.svg?raw" alt="Fighting Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 6" src="/src/svg/energy/dark.svg?raw" alt="Dark Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 7" src="/src/svg/energy/steel.svg?raw" alt="Steel Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 8" src="/src/svg/energy/colorless.svg?raw" alt="Colorless Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 9" src="/src/svg/energy/fairy.svg?raw" alt="Fairy Energy" width={25} height={25}></Image>
<Image class="circle-item rounded-shadow" style="--i: 10" src="/src/svg/energy/dragon.svg?raw" alt="Dragon Energy" width={25} height={25}></Image>
</div>
<Welcome />
</Layout>

12
src/pages/partials/card-modal.astro
View File

@@ -74,7 +74,7 @@ function timeAgo(date: any) {
<div class="row g-4">
<div class="col-sm-12 col-md-3">
<p class="text-secondary">{card?.set?.setName}</p>
<div class="position-relative d-inline-block"><img src={`/cards/${card?.productId}.jpg`} class="card-image img-fluid rounded" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setName} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
<div class="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?.setCode} /></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="p text-secondary">{card?.Artist}</div>
</div>
@@ -94,19 +94,19 @@ function timeAgo(date: any) {
<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="mt-2 col-12 col-md-3 row row-cols-3 row-cols-md-1">
<div class="col dark-callout rounded mb-1 py-2">
<div class="col dark-callout price-area rounded mb-1 py-2">
<p class="h6">Market Price</p>
<p class="py-0 mb-1">${nearMintPrice}</p>
</div>
<div class="col dark-callout rounded mb-1 py-2">
<div class="col dark-callout price-area rounded mb-1 py-2">
<p class="h6">Lowest List</p>
<p class="py-0 mb-1">${nearMint?.lowestPrice}</p>
</div>
<div class="col dark-callout rounded mb-1 py-2">
<div class="col dark-callout price-area rounded mb-1 py-2">
<p class="h6">Highest List</p>
<p class="py-0 mb-1">${nearMint?.highestPrice}</p>
</div>
<div class="col-12 alert alert-success mb-1 py-2">
<div class="col-12 alert alert-success mb-1 py-2 d-none">
<p class="h6">Low Volatility</p>
</div>
</div>
@@ -248,7 +248,7 @@ function timeAgo(date: any) {
</div>
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
<a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
<a class="btn btn-secondary mb-2 w-100" href={`https://www.ebay.com/sch/i.html?_nkw=${card?.productUrlName}+${card?.number}&LH_Sold=1&Graded=No&_dcat=183454${card?.productId}`} target="_blank"><span set:html={ebay} /></a>
<a class="btn btn-secondary mb-2 w-100" href={`https://www.ebay.com/sch/i.html?_nkw=${card?.productUrlName}+${card?.set?.setUrlName}+${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: {timeAgo(calculatedAt)}</small></div>

4
src/pages/partials/cards.astro
View File

@@ -29,7 +29,9 @@ const pokemon = await db.query.cards.findMany({
// format price to 2 decimal places (or 0 if price >=100) and adds a $ sign, if the price is null it returns "–"
const formatPrice = (price:any) => {
if (price === null) return "–";
if (price === null) {
return "—";
}
price = Number(price);
if (price > 99.99) return `$${Math.round(price)}`;
return `$${price.toFixed(2)}`;