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

sliding modals, view transitions, accessibility, etc, etc

Browse Source
This commit is contained in:
zach
2026-03-11 15:21:43 -04:00
parent 7482cb9e9c
commit 3d46a48a7d
20 changed files with 708 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/pages/404.astro
View File

@@ -1,10 +1,10 @@
---
export const prerender = false;
import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
export const prerender = false;
import pokedexList from '../data/pokedex.json';
import Footer from '../components/Footer.astro';
import pokedexList from '../data/pokedex.json';
const searchParams = Astro.url.searchParams;
const query = searchParams.get('q') || '*';
@@ -21,13 +21,13 @@ const pokemon = pokedexList.find(p => p["#"] === randomNumber);
// If not found (rare), fallback
const pokemonName = pokemon?.Name || "Unknown Pokémon";
---
<Layout>
<Layout title="404 - Page Not Found">
<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>
<h1 class="mb-4">404<br/>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>.
@@ -40,14 +40,20 @@ const pokemonName = pokemon?.Name || "Unknown Pokémon";
</div>
<div class="p-0 ratio ratio-1x1 position-relative overflow-hidden d-flex justify-items-center">
<img class="whos-that-pokemon position-absolute h-100" src="/404/lines.gif">
<img class="whos-that-pokemon position-absolute h-100" src="/404/lines.gif" alt="" />
<div class="d-flex flex-col-reverse flex-lg-row">
<div class="">
<img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png">
<div class="d-flex flex-column-reverse flex-lg-row">
<div>
<img class="w-100 starburst top-0 bottom-0 left-0 right-0" src="/404/glow.png" alt="" />
<!-- ✨ 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} onclick="dataLayer.push({'event': '404reveal','pokemonName': this.getAttribute('data-name')});"/>
<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={pokedexImage}
alt={pokemonName}
data-name={pokemonName}
role="button"
tabindex="0"
/>
</div>
</div>
</div>
@@ -57,16 +63,44 @@ const pokemonName = pokemon?.Name || "Unknown Pokémon";
<h3 id="pokemon-name" class="opacity-0 transition-opacity">???</h3>
</div>
</div>
<script>
const img = document.querySelector('.masked-image');
const nameEl = document.querySelector('#pokemon-name');
<script>
const img = document.querySelector('.masked-image') as HTMLImageElement | null;
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');
function revealPokemon() {
if (!img || !nameEl) return;
const doReveal = () => {
img.classList.remove('masked-image');
nameEl.textContent = img.dataset.name || "Unknown Pokémon";
nameEl.classList.remove('opacity-0');
dataLayer.push({ event: '404reveal', pokemonName: img.dataset.name });
};
if (!document.startViewTransition) {
doReveal();
return;
}
img.style.viewTransitionName = 'pokemon-reveal';
document.startViewTransition(() => {
doReveal();
}).finished.then(() => {
img.style.viewTransitionName = '';
});
</script>
}
img?.addEventListener('click', revealPokemon);
img?.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
revealPokemon();
}
});
</script>
</div>
<Footer slot="footer" />
</Layout>

96
src/pages/contact.astro
View File

@@ -1,42 +1,92 @@
---
export const prerender = false;
import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
import Footer from '../components/Footer.astro';
export const prerender = false;
---
<Layout>
<Layout title="Contact Us">
<NavBar slot="navbar">
<NavItems slot="navItems" />
</NavBar>
<div class="row mb-4" slot="page">
<h1>Contact Us</h1>
<div class="row mb-4" slot="page">
<div class="col-12">
<h1>Contact Us</h1>
</div>
<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>
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc4F7VZjZ6ImWnNRqzMLyAWnyGQdEC3Nr2xtbzugewky239kg/formResponse" method="POST" id="contactForm" target="hidden-iframe">
<!-- 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>
<!-- Honeypot field to deter spam -->
<div style="display:none" aria-hidden="true">
<label for="honeypot">Leave this field blank</label>
<input type="text" id="honeypot" name="honeypot" tabindex="-1" autocomplete="off" />
</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>
<!-- 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>
<!-- Submit button -->
<button type="submit" class="btn btn-light">Submit</button>
<!-- 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" id="submitBtn">Submit</button>
</form>
<!-- Hidden iframe absorbs the Google Forms redirect -->
<iframe name="hidden-iframe" style="display:none" aria-hidden="true"></iframe>
<!-- Success message (hidden until submission) -->
<div id="successMsg" class="alert alert-success mt-3 d-none" role="alert">
Thanks for reaching out! We'll get back to you soon.
</div>
</div>
</div>
<Footer slot="footer" />
</Layout>
<script>
const form = document.getElementById('contactForm') as HTMLFormElement | null;
const submitBtn = document.getElementById('submitBtn') as HTMLButtonElement | null;
const successMsg = document.getElementById('successMsg');
const honeypot = document.getElementById('honeypot') as HTMLInputElement | null;
const iframe = document.querySelector('iframe[name="hidden-iframe"]') as HTMLIFrameElement | null;
form?.addEventListener('submit', (e) => {
// Honeypot check — bail silently if filled in by a bot
if (honeypot?.value) {
e.preventDefault();
return;
}
if (!submitBtn || !successMsg) return;
submitBtn.disabled = true;
submitBtn.textContent = 'Sending...';
});
// iframe load fires after Google Forms redirects into it — treat as success
iframe?.addEventListener('load', () => {
if (!form || !submitBtn || !successMsg) return;
// Ignore the initial empty load before any submission
if (!submitBtn.disabled) return;
form.reset();
form.classList.add('d-none');
successMsg.classList.remove('d-none');
dataLayer.push({ event: 'contact_form_submit' });
});
</script>

53
src/pages/index.astro
View File

@@ -1,22 +1,24 @@
---
export const prerender = false;
import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
import Footer from '../components/Footer.astro';
export const prerender = false;
import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/components'
---
<Layout>
<Layout title="Rigid's App Thing">
<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">
<h1>Rigid's App Thing</h1>
<p class="text-secondary">(working title)</p>
</div>
<div class="col-12 col-md-6 mb-2">
<h4 class="mt-3">Welcome!</h4>
<h2 class="mt-3">Welcome!</h2>
<p class="mt-2">
You've been selected to participate in the closed beta! This single page web application is meant to elevate condition/variant data for the Pokemon TCG. In future iterations, we will add vendor inventory/collection management features, as well.</p>
You've been selected to participate in the closed beta! This single page web application is meant to elevate condition/variant data for the Pokemon TCG. In future iterations, we will add vendor inventory/collection management features, as well.
</p>
<p class="my-2">
After the closed beta is complete, the app will move into a more open beta. 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!
@@ -25,30 +27,21 @@ import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/co
<a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards</a>
</Show>
</div>
<div class="col-12 col-md-6 d-flex flex-row gap-5 justify-content-end">
<div>
<Show when="signed-out">
<!-- Using Bootstrap btn classes -->
<SignInButton asChild mode="modal">
<button class="btn btn-success">
Sign In
</button>
</SignInButton>
<SignUpButton asChild mode="modal">
<button class="btn btn-dark">
Request Access
</button>
</SignUpButton>
</Show>
</div>
<div>
<Show when="signed-in">
<SignOutButton asChild mode="modal">
<button class="btn btn-danger">
Sign Out
</button>
</SignOutButton>
</Show>
<div class="col-12 col-md-6 d-flex justify-content-end align-items-start mt-3">
<div class="d-flex gap-3">
<Show when="signed-out">
<SignInButton asChild mode="modal">
<button class="btn btn-success">Sign In</button>
</SignInButton>
<SignUpButton asChild mode="modal">
<button class="btn btn-dark">Request Access</button>
</SignUpButton>
</Show>
<Show when="signed-in">
<SignOutButton asChild>
<button class="btn btn-danger">Sign Out</button>
</SignOutButton>
</Show>
</div>
</div>
</div>

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

@@ -73,31 +73,27 @@ const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Hea
const conditionAttributes = (price: any) => {
const volatility = (() => {
const current = price?.marketPrice;
const market = price?.marketPrice;
const low = price?.lowestPrice;
const high = price?.highestPrice;
const median = price?.medianPrice;
if (current === null || low === null || high === null) return "Indeterminate";
if (market == null || low == null || high == null || Number(market) === 0) {
return "Indeterminate";
}
const range = Number(high) - Number(low);
if (range <= 0) return "Low";
const spreadPct = (Number(high) - Number(low)) / Number(market) * 100;
const position = (Number(current) - Number(low)) / range;
if (position > 0.76) return "High";
if (position > 0.49) return "Medium";
if (spreadPct >= 81) return "High";
if (spreadPct >= 59) return "Medium";
return "Low";
})();
// Updated logic:
// ❗ If High / Medium / Low → never "alert-secondary"
// ❗ If Indeterminate → "alert-secondary"
const volatilityClass = (() => {
switch (volatility) {
case "High": return "alert-danger";
case "Medium": return "alert-warning";
case "Low": return "alert-success";
default: return "alert-secondary"; // Only for Indeterminate
case "High": return "alert-danger";
case "Medium": return "alert-warning";
case "Low": return "alert-success";
default: return "alert-dark"; // Indeterminate
}
})();
@@ -115,6 +111,10 @@ const conditionAttributes = (price: any) => {
const ebaySearchUrl = (card: any) => {
return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&LH_Sold=1&Graded=No&_dcat=183454`;
};
const altSearchUrl = (card: any) => {
return `https://alt.xyz/browse?query=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${encodeURIComponent(card?.number)}&sortBy=newest_first`;
};
---
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
@@ -126,16 +126,6 @@ const ebaySearchUrl = (card: any) => {
<div class="text-light col-auto">{card?.variant}</div>
</div>
<div class="d-flex gap-2 align-items-center">
<button type="button" class="btn btn-sm btn-outline-secondary card-nav-prev d-none" title="Previous card (← or swipe right)" aria-label="Previous card">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="15 18 9 12 15 6"></polyline>
</svg>
</button>
<button type="button" class="btn btn-sm btn-outline-secondary card-nav-next d-none" title="Next card (→ or swipe left)" aria-label="Next card">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"></polyline>
</svg>
</button>
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
</div>
</div>
@@ -178,30 +168,57 @@ const ebaySearchUrl = (card: any) => {
<div class={`tab-pane fade ${attributes?.label} ${attributes?.class}`} id={`${attributes?.label}`} role="tabpanel" tabindex="0">
<div class="d-block gap-1 d-lg-flex">
<div class="d-flex flex-row flex-lg-column gap-1 col-12 col-lg-2 mb-1">
<div class="alert alert-secondary rounded p-2 flex-fill mb-1">
<h6>Market Price</h6>
<p class="pb-0">${price.marketPrice}</p>
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-1">
<h6 class="mb-auto">Market Price</h6>
<p class="mb-0 mt-1">${price.marketPrice}</p>
</div>
<div class="alert alert-secondary rounded p-2 flex-fill mb-1">
<h6>Lowest Price</h6>
<p class="pb-0">${price.lowestPrice}</p>
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-1">
<h6 class="mb-auto">Lowest Price</h6>
<p class="mb-0 mt-1">${price.lowestPrice}</p>
</div>
<div class="alert alert-secondary rounded p-2 flex-fill mb-1">
<h6>Highest Price</h6>
<p class="pb-0">${price.highestPrice}</p>
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-1">
<h6 class="mb-auto">Highest Price</h6>
<p class="mb-0 mt-1">${price.highestPrice}</p>
</div>
<div class={`alert alert-secondary rounded p-2 flex-fill mb-1 ${attributes?.volatilityClass}`}>
<h6>Volatility</h6>
<p class="pb-0 small">{attributes?.volatility}</p>
<div class={`alert alert-secondary rounded p-2 flex-fill d-flex flex-column mb-1 ${attributes?.volatilityClass}`}>
<h6 class="mb-auto">Volatility</h6>
<p class="mb-0 mt-1">{attributes?.volatility}</p>
</div>
</div>
<div class="d-flex flex-column gap-1 col-12 col-lg-10 mb-0 me-2 clearfix">
<div class="alert alert-secondary rounded p-2 mb-1">
<h6>Latest Sales</h6>
<div class="alert alert-dark rounded p-2 mb-1 table-responsive">
<h6>Latest Verified Sales</h6>
<table class="table table-sm mb-0">
<caption class="small">Filtered to remove mismatched language variants</caption>
<thead class="table-dark">
<tr>
<th scope="col">Date</th>
<th scope="col">Title</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="alert alert-secondary rounded p-2 mb-1">
<h6>Placeholder for graph</h6>
</div>
<div class="alert alert-dark rounded p-2 mb-1">
<h6>Market Price History</h6>
<div class="position-relative" style="height: 200px;">
<canvas id={`priceChart-${price.priceId}`} class="price-history-chart" data-card-id={card?.cardId} data-condition={price.condition}></canvas>
</div>
<div class="btn-group btn-group-sm d-flex flex-row gap-1 justify-content-end" role="group" aria-label="Time range">
<button type="button" class="btn btn-dark price-range-btn active" data-range="1m">1M</button>
<button type="button" class="btn btn-dark price-range-btn" data-range="3m">3M</button>
<button type="button" class="btn btn-dark price-range-btn" data-range="6m">6M</button>
<button type="button" class="btn btn-dark price-range-btn" data-range="1y">1Y</button>
<button type="button" class="btn btn-dark price-range-btn" data-range="all">All</button>
</div>
</div>
</div>
</div>
</div>
@@ -214,9 +231,10 @@ const ebaySearchUrl = (card: any) => {
</div>
</div>
</div>
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
<a class="btn btn-outline-light mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> <span class="d-none d-lg-inline">TCGPlayer</span></a>
<a class="btn btn-outline-light mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
<div class="col-sm-12 col-md-2 mt-0 mt-md-5 d-flex flex-row flex-md-column">
<a class="btn btn-dark mb-2 w-100 p-2" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> <span class="d-none d-lg-inline">TCGPlayer</span></a>
<a class="btn btn-dark mb-2 w-100 p-2" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
<a class="btn btn-dark mb-2 w-100 p-2" href={`${altSearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'altClick', 'altUrl': this.getAttribute('href')});"><svg width="48" height="20.16" viewBox="0 0 48 20" fill="none"><path d="M14.2761 19.9996H18.5308L11.6934 0.0712891H7.76953L14.2761 19.9996Z" fill="#ffffff"></path><path d="M6.17778 19.9986H6.14536L3.19643 11.2305L0 19.9988L6.17768 19.9989L6.17778 19.9986Z" fill="#ffffff"></path><path d="M24.7842 0H20.6759V19.9661H34.3427V16.5426H24.7842V0Z" fill="#ffffff"></path><path d="M41.6644 3.42355H47.4981V0H31.5033V3.42355H37.5561V19.9661H41.6644V3.42355Z" fill="#ffffff"></path></svg></a>
</div>
</div>
<div class="text-end my-0"><small class="text-body-tertiary">Prices last changed: {timeAgo(calculatedAt)}</small></div>
@@ -227,324 +245,42 @@ const ebaySearchUrl = (card: any) => {
</div>
<script is:inline>
async function copyImage(img) {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
try {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
// draw the real image pixels
ctx.drawImage(img, 0, 0);
// convert to blob
canvas.toBlob(async (blob) => {
await navigator.clipboard.write([
new ClipboardItem({ "image/png": blob })
]);
console.log("Copied image via canvas.");
});
const blob = await new Promise((resolve, reject) => {
canvas.toBlob(b => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png');
});
await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
showCopyToast('📋 Image copied!', '#198754');
} catch (err) {
console.error('Failed:', err);
showCopyToast('❌ Copy failed', '#dc3545');
}
}
// ===== Card Navigation System =====
// Only declare class if it hasn't been declared yet (prevents HTMX reload errors)
if (typeof window.CardNavigator === 'undefined') {
window.CardNavigator = class CardNavigator {
constructor() {
this.touchStartX = 0;
this.touchEndX = 0;
this.swipeThreshold = 50; // minimum distance in pixels for a swipe
this.loadingMoreCards = false;
this.init();
}
init() {
this.setupEventListeners();
this.updateNavigationButtons();
this.setupScrollObserver();
}
setupScrollObserver() {
// Listen for when new cards are added to the grid
const observer = new MutationObserver(() => {
this.loadingMoreCards = false;
});
const cardGrid = document.getElementById('cardGrid');
if (cardGrid) {
observer.observe(cardGrid, {
childList: true,
subtree: false
});
}
}
setupEventListeners() {
const modal = document.getElementById('cardModal');
if (!modal) return;
// Keyboard navigation
document.addEventListener('keydown', (e) => this.handleKeydown(e));
// Touch/Swipe navigation
modal.addEventListener('touchstart', (e) => this.handleTouchStart(e), false);
modal.addEventListener('touchend', (e) => this.handleTouchEnd(e), false);
// Button navigation
const prevBtn = document.querySelector('.card-nav-prev');
const nextBtn = document.querySelector('.card-nav-next');
if (prevBtn) prevBtn.addEventListener('click', () => this.navigatePrev());
if (nextBtn) nextBtn.addEventListener('click', () => this.navigateNext());
}
handleKeydown(e) {
// Only navigate if the modal is visible
const modal = document.getElementById('cardModal');
if (!modal || !modal.classList.contains('show')) return;
if (e.key === 'ArrowLeft') {
e.preventDefault();
this.navigatePrev();
} else if (e.key === 'ArrowRight') {
e.preventDefault();
this.navigateNext();
}
}
handleTouchStart(e) {
this.touchStartX = e.changedTouches[0].screenX;
}
handleTouchEnd(e) {
this.touchEndX = e.changedTouches[0].screenX;
this.handleSwipe();
}
handleSwipe() {
const diff = this.touchStartX - this.touchEndX;
// Swipe left = show next card
if (diff > this.swipeThreshold) {
this.navigateNext();
}
// Swipe right = show previous card
else if (diff < -this.swipeThreshold) {
this.navigatePrev();
}
}
getVisibleCards() {
// Get all card triggers from the current grid
return Array.from(document.querySelectorAll('[data-card-id]'));
}
getCurrentCardElement() {
const modal = document.getElementById('cardModal');
if (!modal) return null;
const currentCardId = modal.querySelector('.modal-content')?.getAttribute('data-card-id');
return currentCardId ? document.querySelector(`[data-card-id="${currentCardId}"]`) : null;
}
navigatePrev() {
const cards = this.getVisibleCards();
const currentCard = this.getCurrentCardElement();
if (!cards.length || !currentCard) return;
const currentIndex = cards.indexOf(currentCard);
if (currentIndex <= 0) return; // Already at the first card
const prevCard = cards[currentIndex - 1];
this.loadCard(prevCard);
}
navigateNext() {
const cards = this.getVisibleCards();
const currentCard = this.getCurrentCardElement();
if (!cards.length || !currentCard) return;
const currentIndex = cards.indexOf(currentCard);
if (currentIndex >= cards.length - 1) {
// At the last card, try to load more cards via infinite scroll
this.triggerInfiniteScroll();
return;
}
const nextCard = cards[currentIndex + 1];
this.loadCard(nextCard);
}
triggerInfiniteScroll() {
if (this.loadingMoreCards) return; // Already loading
this.loadingMoreCards = true;
// Find the infinite scroll trigger element (the "Loading..." div with hx-trigger="revealed")
const scrollTrigger = document.querySelector('[hx-trigger="revealed"]');
if (scrollTrigger) {
// Trigger HTMX to load more cards
if (typeof htmx !== 'undefined') {
htmx.trigger(scrollTrigger, 'revealed');
} else {
// Fallback: manually call the endpoint
const endpoint = scrollTrigger.getAttribute('hx-post') || scrollTrigger.getAttribute('hx-get');
if (endpoint) {
const formData = new FormData(document.getElementById('searchform'));
const currentCards = this.getVisibleCards();
const start = (currentCards.length - 1) * 20; // Approximate
formData.append('start', start.toString());
fetch(endpoint, {
method: 'POST',
body: formData
})
.then(r => r.text())
.then(html => {
const grid = document.getElementById('cardGrid');
if (grid) {
grid.insertAdjacentHTML('beforeend', html);
this.waitForNewCards();
}
});
}
}
// Wait for new cards to be added and then navigate
this.waitForNewCards();
} else {
this.loadingMoreCards = false;
}
}
waitForNewCards() {
// Wait up to 3 seconds for new cards to load
let attempts = 0;
const checkInterval = setInterval(() => {
attempts++;
const cards = this.getVisibleCards();
const currentCardId = document.querySelector('#cardModal .modal-content')?.getAttribute('data-card-id');
const currentIndex = cards.findIndex(c => c.getAttribute('data-card-id') === currentCardId);
// If we have more cards than before, navigate to the next one
if (currentIndex >= 0 && currentIndex < cards.length - 1) {
clearInterval(checkInterval);
const nextCard = cards[currentIndex + 1];
this.loadingMoreCards = false;
this.loadCard(nextCard);
} else if (attempts > 30) { // 30 * 100ms = 3 seconds
clearInterval(checkInterval);
this.loadingMoreCards = false;
this.updateNavigationButtons();
}
}, 100);
}
loadCard(cardElement) {
const hxGet = cardElement.getAttribute('hx-get');
if (!hxGet) return;
// Check if HTMX is available, if not use fetch
if (typeof htmx !== 'undefined') {
// Use HTMX to load the card
htmx.ajax('GET', hxGet, {
target: '#cardModal',
swap: 'innerHTML',
onLoad: () => {
this.updateNavigationButtons();
// Trigger any analytics event if needed
const cardTitle = cardElement.querySelector('#cardImage')?.getAttribute('alt') || 'Unknown Card';
if (typeof dataLayer !== 'undefined') {
dataLayer.push({
'event': 'virtualPageview',
'pageUrl': hxGet,
'pageTitle': cardTitle,
'previousUrl': '/pokemon'
});
}
}
});
} else {
// Fallback to native fetch if HTMX not available
fetch(hxGet)
.then(response => response.text())
.then(html => {
const modalContent = document.querySelector('#cardModal .modal-dialog');
if (modalContent) {
modalContent.innerHTML = html;
this.updateNavigationButtons();
// Trigger any analytics event if needed
const cardTitle = cardElement.querySelector('#cardImage')?.getAttribute('alt') || 'Unknown Card';
if (typeof dataLayer !== 'undefined') {
dataLayer.push({
'event': 'virtualPageview',
'pageUrl': hxGet,
'pageTitle': cardTitle,
'previousUrl': '/pokemon'
});
}
}
})
.catch(error => console.error('Error loading card:', error));
}
}
updateNavigationButtons() {
const cards = this.getVisibleCards();
const currentCard = this.getCurrentCardElement();
const currentIndex = cards.indexOf(currentCard);
const prevBtn = document.querySelector('.card-nav-prev');
const nextBtn = document.querySelector('.card-nav-next');
if (prevBtn) {
prevBtn.disabled = currentIndex <= 0;
prevBtn.style.opacity = currentIndex <= 0 ? '0.5' : '1';
}
if (nextBtn) {
nextBtn.disabled = currentIndex >= cards.length - 1;
nextBtn.style.opacity = currentIndex >= cards.length - 1 ? '0.5' : '1';
}
}
function showCopyToast(message, color) {
const toast = document.createElement('div');
toast.textContent = message;
toast.style.cssText = `
position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
background: ${color}; color: white; padding: 10px 20px;
border-radius: 8px; font-size: 14px; z-index: 9999;
opacity: 0; transition: opacity 0.2s ease;
pointer-events: none;
`;
document.body.appendChild(toast);
requestAnimationFrame(() => toast.style.opacity = '1');
setTimeout(() => {
toast.style.opacity = '0';
toast.addEventListener('transitionend', () => toast.remove());
}, 2000);
}
} // End of: if (typeof window.CardNavigator === 'undefined')
// Initialize the card navigator when the modal is shown (only setup once)
if (!window.cardNavigatorInitialized) {
window.cardNavigatorInitialized = true;
const modalElement = document.getElementById('cardModal');
if (modalElement) {
modalElement.addEventListener('shown.bs.modal', () => {
if (!window.cardNavigator) {
window.cardNavigator = new window.CardNavigator();
} else {
window.cardNavigator.updateNavigationButtons();
}
});
}
// Also initialize on first load in case the modal is already visible
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', () => {
// Wait a bit for HTMX to load
setTimeout(() => {
if (!window.cardNavigator) {
window.cardNavigator = new window.CardNavigator();
}
}, 100);
});
} else {
// Wait a bit for HTMX to load if already loaded
setTimeout(() => {
if (!window.cardNavigator) {
window.cardNavigator = new window.CardNavigator();
}
}, 100);
}
}
</script>

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

@@ -138,6 +138,7 @@ const facets = searchResults.results.slice(1).map((result: any) => {
});
---
{(start === 0) &&
<div id="facetContainer" hx-swap-oob="true">
@@ -164,8 +165,10 @@ const facets = searchResults.results.slice(1).map((result: any) => {
</div>
))}
</div>
<div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small" hx-swap-oob="true">
<div id="totalResults d-none" class="ms-5 text-secondary" hx-swap-oob="true">
{totalHits} {totalHits === 1 ? ' result' : ' results'}
</div>
<div id="activeFilters" class="d-flex align-items-center small ms-auto" hx-swap-oob="true">
{(Object.entries(filters).length > 0) &&
<span class="me-1">Filtered by:</span>
<ul class="list-group list-group-horizontal">
@@ -179,7 +182,6 @@ const facets = searchResults.results.slice(1).map((result: any) => {
}
</div>
<script define:vars={{ totalHits, filters, facets }} is:inline>
// Filter the facet values to make things like Set easier to find

7
src/pages/pokemon.astro
View File

@@ -1,15 +1,14 @@
---
export const prerender = false;
import Layout from '../layouts/Main.astro';
import Search from '../components/Search.astro';
import CardGrid from "../components/CardGrid.astro";
import NavBar from '../components/NavBar.astro';
export const prerender = false;
---
<Layout>
<Layout title="Card Search">
<NavBar slot="navbar">
<Search slot="searchInput" />
</NavBar>
</NavBar>
<CardGrid slot="page" />
</Layout>