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

re-did 404 images and added mapping, re-did menu/search components for auth, removed unneeded files and cleaned up css

Browse Source
This commit is contained in:
zach
2026-02-26 18:08:08 -05:00
parent 187da306f0
commit d149312f3d
1046 changed files with 4594 additions and 1042 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/pages/404.astro
View File

@@ -1,46 +1,76 @@
---
import Layout from '../layouts/Main.astro';
import PokedexHeader from '../components/PokedexHeader.astro';
import Image from 'astro/components/Image.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
export const prerender = false;
import pokedexList from '../data/pokedex.json';
const searchParams = Astro.url.searchParams;
const query = searchParams.get('q') || '*';
const randomNumber = String(Math.floor(Math.random() * 151) + 1).padStart(4, "0");
const pokedexImage = `/404/pokedex/${randomNumber}.svg?raw`;
---
// Get random # (0001–1025)
const randomNumber = String(Math.floor(Math.random() * 1025) + 1).padStart(4, "0");
// Image path
const pokedexImage = `/404/pokedex/${randomNumber}.png`;
// Find Pokémon from JSON
const pokemon = pokedexList.find(p => p["#"] === randomNumber);
// If not found (rare), fallback
const pokemonName = pokemon?.Name || "Unknown Pokémon";
---
<Layout>
<PokedexHeader />
<div class="container pokedex-page">
<div class="row col-10 mx-auto mt-5">
<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 <a href="/pokemon">Pokémon</a>.</p>
<NavBar slot="navbar">
<NavItems slot="navItems" />
</NavBar>
<div class="row mb-4" slot="page">
<div class="col-12 col-md-6">
<h1 class="mb-4">404 - Page Not Found</h1>
<h4>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 <a href="/pokemon">Pokémon</a>.
</p>
</div>
<div class="col-12 col-md-6 offset-md-1 row">
<div class="alert alert-warning border col-12" role="alert">
<div class="col-12 col-md-4 offset-md-2">
<div class="alert alert-warning border p-2" role="alert">
<h4 class="alert-heading">Who's that Pokémon?</h4>
<p class="mb-0">Click to reveal.</p>
<p class="mb-0">Click the image to reveal.</p>
</div>
<div class="p-0 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">
<Image 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={pokedexImage} alt="Who is that Pokémon?" width={100} height={100}></Image>
<!-- ✨ Name is placed in a data attribute for later use -->
<img
class="m-auto position-absolute w-50 top-0 left-25 bottom-10 right-0 d-block img-fluid masked-image top-50 start-50 translate-middle"
src={pokedexImage}
alt={pokemonName}
data-name={pokemonName}
/>
</div>
</div>
</div>
<!-- Pokémon name reveal -->
<div class="col-12 text-center mt-3">
<h3 id="pokemon-name" class="opacity-0 transition-opacity">???</h3>
</div>
</div>
</div>
</div>
<script>
const maskedImage = document.querySelector('.masked-image');
maskedImage?.addEventListener('click', () => {
maskedImage.classList.remove('masked-image');
<script>
const img = document.querySelector('.masked-image');
const nameEl = document.querySelector('#pokemon-name');
img?.addEventListener('click', () => {
img.classList.remove('masked-image');
nameEl.textContent = img.dataset.name || "Unknown Pokémon";
nameEl.classList.remove('opacity-0');
});
</script>
</script>
</div>
</Layout>

40
src/pages/contact.astro Normal file
View File

@@ -0,0 +1,40 @@
---
import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
export const prerender = false;
---
<Layout>
<NavBar slot="navbar">
<NavItems slot="navItems" />
</NavBar>
<div class="row mb-4" slot="page">
<h1>Contact Us</h1>
<div class="col-12 col-md-8 col-lg-6">
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc4F7VZjZ6ImWnNRqzMLyAWnyGQdEC3Nr2xtbzugewky239kg/formResponse" method="POST" id="contactForm">
<!-- Name input -->
<div class="mb-3">
<label for="name" class="form-label">Full Name</label>
<input type="text" class="form-control" id="name" name="entry.563494744" required>
</div>
<!-- Email address input -->
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" name="entry.577942868" aria-describedby="emailHelp" required>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
<!-- Message textarea -->
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" name="entry.1640055664" rows="4" required></textarea>
</div>
<!-- Submit button -->
<button type="submit" class="btn btn-light">Submit</button>
</form>
</div>
</div>
</Layout>

28
src/pages/index.astro
View File

@@ -1,7 +1,31 @@
---
import Layout from '../layouts/Main.astro';
import PokedexHeader from '../components/PokedexHeader.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
export const prerender = false;
import { Waitlist as WaitlistAstro } from '@clerk/astro/components'
---
<Layout>
<PokedexHeader />
<NavBar slot="navbar">
<NavItems slot="navItems" />
</NavBar>
<div class="row mb-4" slot="page">
<h1>Rigid's App Thing</h1>
<h5 class="text-secondary">(working title)</h5>
<div class="col-12 col-md-7">
<h4 class="mt-3">Welcome!</h4>
<p class="mt-2">
This single-page web applictation is currently in a closed beta. Access to the beta will be limited, and the selection process will be highly curated. You are welcome to request access - if you do not get into the beta, don't worry, after the beta is complete, the app will be available to all users.</p>
</p>
<p class="my-2">
If you would like to join the waitlist, please enter your email address. You will receive an email with instructions on how to access the app when it becomes available.
</p>
<p class="my-2">
If you aren't interested in joining the waitlist, that is okay too! Feel free to play "Who's that Pokémon?" with the random Pokémon generator <a href="/404">here</a>. Refresh the page to see a new Pokémon!
</p>
</div>
<div class="col-12 col-md-4 offset-md-1 mx-2">
<WaitlistAstro />
</div>
</div>
</Layout>

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

@@ -6,11 +6,6 @@ import RarityIcon from '../../components/RarityIcon.astro';
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 prerender = false;
@@ -121,7 +116,7 @@ const ebaySearchUrl = (card: any) => {
<p class="text-secondary">{card?.set?.setName}</p>
<div class="position-relative"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-3" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/noImage.webp'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><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 class="p text-secondary">Illustrator: {card?.Artist}</div>
</div>
</div>
<div class="col-sm-12 col-md-7">
@@ -193,7 +188,7 @@ const ebaySearchUrl = (card: any) => {
<a class="btn btn-secondary mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><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>
<div class="text-end my-0"><small class="text-body-secondary">Prices last changed: {timeAgo(calculatedAt)}</small></div>
</div>
</div>
</div>

23
src/pages/pokemon.astro
View File

@@ -1,24 +1,15 @@
---
import Layout from '../layouts/Main.astro';
import Search from '../components/Search.astro';
import CardGrid from "../components/CardGrid.astro";
import PokedexHeader from '../components/PokedexHeader.astro';
import StickyFilter from '../components/StickyFilter.astro';
import NavBar from '../components/NavBar.astro';
import NavItems from '../components/NavItems.astro';
export const prerender = false;
---
<Layout>
<PokedexHeader>
<StickyFilter />
</PokedexHeader>
<div class="container">
<CardGrid />
<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
<div class="modal-content">
</div>
</div>
</div>
</div>
<NavBar slot="navbar">
<Search slot="searchInput" />
</NavBar>
<CardGrid slot="page" />
</Layout>