updated the 404 whos that pokemon mechanism
This commit is contained in:
zach
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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)}`;
|
||||
|
||||
Reference in New Issue
Block a user