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

ads placement - tbd

Browse Source
This commit is contained in:
Zach Harding
2026-04-05 10:17:43 -04:00
parent 17465b13c1
commit 5cdf9b1772
6 changed files with 125 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/CardGrid.astro
View File

@@ -1,5 +1,6 @@
---
import BackToTop from "./BackToTop.astro"
import LeftSidebarDesktop from "./LeftSidebarDesktop.astro"
---
<div class="row mb-4">
<div class="col-md-2">
@@ -13,6 +14,7 @@ import BackToTop from "./BackToTop.astro"
<div id="facetContainer"></div>
</div>
</div>
<LeftSidebarDesktop />
</div>
<div class="col-sm-12 col-md-10 mt-0">
<div class="d-flex flex-column gap-1 flex-md-row align-items-center mb-3 w-100 justify-content-start">
@@ -388,5 +390,11 @@ import BackToTop from "./BackToTop.astro"
currentCardId = null;
updateNavButtons(null);
});
// ── AdSense re-init on infinite scroll ───────────────────────────────────
document.addEventListener('htmx:afterSwap', () => {
(window.adsbygoogle = window.adsbygoogle || []).push({});
});
})();
</script>

7
src/components/LeftSidebarDesktop.astro Normal file
View File

@@ -0,0 +1,7 @@
<div class="d-none d-xl-block sticky-top mt-5" style="top: 70px;">
<ins class="adsbygoogle"
style="display:block"
data-ad-format="autorelaxed"
data-ad-client="ca-pub-1140571217687341"
data-ad-slot="8889263515"></ins>
</div>

2
src/layouts/Main.astro
View File

@@ -42,5 +42,7 @@ const { title } = Astro.props;
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script src="../assets/js/main.js"></script>
<script>import '../assets/js/priceChart.js';</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1140571217687341" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</body>
</html>

32
src/pages/index.astro
View File

@@ -4,7 +4,7 @@ import Layout from '../layouts/Main.astro';
import NavItems from '../components/NavItems.astro';
import NavBar from '../components/NavBar.astro';
import Footer from '../components/Footer.astro';
import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/components'
import { Show, SignInButton, SignUpButton, SignOutButton, GoogleOneTap, UserAvatar, UserButton, UserProfile } from '@clerk/astro/components'
---
<Layout title="Rigid's App Thing">
<NavBar slot="navbar">
@@ -16,31 +16,41 @@ import { Show, SignInButton, SignUpButton, SignOutButton } from '@clerk/astro/co
<p class="text-secondary">(working title)</p>
</div>
<div class="col-12 col-md-6 mb-2">
<h2 class="mt-3">Welcome!</h2>
<h2 class="mt-3">The Pokémon card tracker you actually want.</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.
Browse real market prices and condition data across 70,000+ cards! No more
juggling multiple tabs or guessing what your cards are worth.
</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!
We're now open to everyone. Create a free account to get started —
collection and inventory management tools are coming soon as part of a
premium plan.
</p>
<Show when="signed-in">
<a href="/pokemon" class="btn btn-warning mt-2">Take me to the cards</a>
<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 justify-content-end align-items-start mt-3">
<div class="d-flex gap-3">
<div class="d-flex gap-3 mx-auto">
<Show when="signed-out">
<SignInButton asChild mode="modal">
<button class="btn btn-success">Sign In</button>
</SignInButton>
<div class="card border p-5 w-100">
<SignUpButton asChild mode="modal">
<button class="btn btn-dark">Request Access</button>
<button class="btn btn-success w-100 mb-2">Create free account</button>
</SignUpButton>
<SignInButton asChild mode="modal">
<p class="text-center text-secondary my-2">Already have an account?</p>
<button class="btn btn-outline-light w-100">Sign in</button>
</SignInButton>
<p class="text-center h6 text-light mt-2 mb-0">Free to join!</p>
</div>
<GoogleOneTap />
</Show>
<Show when="signed-in">
<div class="w-100">
<SignOutButton asChild>
<button class="btn btn-danger">Sign Out</button>
<button class="btn btn-danger mt-2 ms-auto float-end">Sign Out</button>
</SignOutButton>
</div>
</Show>
</div>
</div>

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

@@ -51,9 +51,36 @@ const calculatedAt = (() => {
return new Date(Math.max(...dates.map(d => d.getTime())));
})();
// ── Fetch price history + compute volatility ──────────────────────────────
// ── Spread-based volatility (high - low) / low ────────────────────────────
// Log-return volatility was unreliable because marketPrice is a smoothed daily
// value, not transaction-driven. The 30-day high/low spread is a more honest
// proxy for price movement over the period.
const volatilityByCondition: Record<string, { label: string; spread: number }> = {};
for (const price of card?.prices ?? []) {
const condition = price.condition;
const low = Number(price.lowestPrice);
const high = Number(price.highestPrice);
const market = Number(price.marketPrice);
if (!low || !high || !market || market <= 0) {
volatilityByCondition[condition] = { label: '—', spread: 0 };
continue;
}
const spread = (high - low) / market;
const label = spread >= 0.50 ? 'High'
: spread >= 0.25 ? 'Medium'
: 'Low';
volatilityByCondition[condition] = { label, spread: Math.round(spread * 100) / 100 };
}
// ── Price history for chart ───────────────────────────────────────────────
const cardSkus = card?.prices?.length
? await db.select().from(skus).where(eq(skus.cardId, cardId))
? await db.select().from(skus).where(eq(skus.productId, card.productId))
: [];
const skuIds = cardSkus.map(s => s.skuId);
@@ -72,50 +99,6 @@ const historyRows = skuIds.length
.orderBy(priceHistory.calculatedAt)
: [];
// Rolling 30-day cutoff for volatility calculation
const thirtyDaysAgo = new Date(Date.now() - 30 * 86_400_000);
const byCondition: Record<string, number[]> = {};
for (const row of historyRows) {
if (row.marketPrice == null) continue;
if (!row.calculatedAt) continue;
if (new Date(row.calculatedAt) < thirtyDaysAgo) continue;
const price = Number(row.marketPrice);
if (price <= 0) continue;
if (!byCondition[row.condition]) byCondition[row.condition] = [];
byCondition[row.condition].push(price);
}
function computeVolatility(prices: number[]): { label: string; monthlyVol: number } {
if (prices.length < 2) return { label: '—', monthlyVol: 0 };
const returns: number[] = [];
for (let i = 1; i < prices.length; i++) {
const ratio = prices[i] / prices[i - 1];
if (!isFinite(ratio) || ratio <= 0) continue; // skip bad ratios
returns.push(Math.log(ratio));
}
if (returns.length < 2) return { label: '—', monthlyVol: 0 }; // ← key fix
const mean = returns.reduce((a, b) => a + b, 0) / returns.length;
const variance = returns.reduce((sum, r) => sum + (r - mean) ** 2, 0) / (returns.length - 1);
const monthlyVol = Math.sqrt(variance) * Math.sqrt(30);
if (!isFinite(monthlyVol)) return { label: '—', monthlyVol: 0 }; // safety net
const label = monthlyVol >= 0.30 ? 'High'
: monthlyVol >= 0.15 ? 'Medium'
: 'Low';
return { label, monthlyVol: Math.round(monthlyVol * 100) / 100 };
}
const volatilityByCondition: Record<string, { label: string; monthlyVol: number }> = {};
for (const [condition, prices] of Object.entries(byCondition)) {
volatilityByCondition[condition] = computeVolatility(prices);
}
// ── Price history for chart (full history, not windowed) ──────────────────
const priceHistoryForChart = historyRows.map(row => ({
condition: row.condition,
calculatedAt: row.calculatedAt
@@ -124,29 +107,11 @@ const priceHistoryForChart = historyRows.map(row => ({
marketPrice: row.marketPrice,
})).filter(r => r.calculatedAt !== null);
// ── Determine which range buttons to show ────────────────────────────────
const now = Date.now();
const oldestDate = historyRows.length
? Math.min(...historyRows
.filter(r => r.calculatedAt)
.map(r => new Date(r.calculatedAt!).getTime()))
: now;
const dataSpanDays = (now - oldestDate) / 86_400_000;
const showRanges = {
'1m': dataSpanDays >= 1,
'3m': dataSpanDays >= 60,
'6m': dataSpanDays >= 180,
'1y': dataSpanDays >= 365,
'all': dataSpanDays >= 400,
};
const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
const conditionAttributes = (price: any) => {
const condition: string = price?.condition || "Near Mint";
const vol = volatilityByCondition[condition] ?? { label: '—', monthlyVol: 0 };
const vol = volatilityByCondition[condition] ?? { label: '—', spread: 0 };
const volatilityClass = (() => {
switch (vol.label) {
@@ -159,7 +124,7 @@ const conditionAttributes = (price: any) => {
const volatilityDisplay = vol.label === '—'
? '—'
: `${vol.label} (${(vol.monthlyVol * 100).toFixed(0)}%)`;
: `${vol.label} (${(vol.spread * 100).toFixed(0)}%)`;
return {
"Near Mint": { label: "nav-nm", volatility: volatilityDisplay, volatilityClass, class: "show active" },
@@ -199,9 +164,6 @@ const altSearchUrl = (card: any) => {
<!-- Card image column -->
<div class="col-sm-12 col-md-3">
<div class="position-relative mt-1">
<!-- card-image-wrap gives the modal image shimmer effects
without the hover lift/scale that image-grow has in main.scss -->
<div
class="card-image-wrap rounded-4"
data-energy={card?.energyType}
@@ -279,11 +241,11 @@ const altSearchUrl = (card: any) => {
<p class="mb-0 mt-1">${price.marketPrice}</p>
</div>
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-0">
<h6 class="mb-auto">Lowest Price</h6>
<h6 class="mb-auto">Low Price <span class="small p text-secondary">(30 day)</span></h6>
<p class="mb-0 mt-1">${price.lowestPrice}</p>
</div>
<div class="alert alert-dark rounded p-2 flex-fill d-flex flex-column mb-0">
<h6 class="mb-auto">Highest Price</h6>
<h6 class="mb-auto">High Price <span class="small p text-secondary">(30 day)</span></h6>
<p class="mb-0 mt-1">${price.highestPrice}</p>
</div>
<div class={`alert rounded p-2 flex-fill d-flex flex-column mb-0 ${attributes?.volatilityClass}`}>
@@ -298,14 +260,14 @@ const altSearchUrl = (card: any) => {
data-bs-trigger="hover focus click"
data-bs-html="true"
data-bs-title={`
<div class='tooltip-heading fw-bold mb-1'>Monthly Volatility</div>
<div class='tooltip-heading fw-bold mb-1'>30-Day Price Spread</div>
<div class='small'>
<p class="mb-1">
<strong>What this measures:</strong> how much the market price tends to move day-to-day,
scaled up to a monthly expectation.
<strong>What this measures:</strong> how wide the gap between the 30-day low and high is,
relative to the market price.
</p>
<p class="mb-0">
A card with <strong>30% volatility</strong> typically swings ±30% over a month.
A card with <strong>50%+ spread</strong> has seen significant price swings over the past month.
</p>
</div>
`}
@@ -366,11 +328,11 @@ const altSearchUrl = (card: any) => {
</canvas>
</div>
<div class="btn-group btn-group-sm d-flex flex-row gap-1 justify-content-end mt-2" role="group" aria-label="Time range">
{showRanges['1m'] && <button type="button" class="btn btn-dark price-range-btn active" data-range="1m">1M</button>}
{showRanges['3m'] && <button type="button" class="btn btn-dark price-range-btn" data-range="3m">3M</button>}
{showRanges['6m'] && <button type="button" class="btn btn-dark price-range-btn" data-range="6m">6M</button>}
{showRanges['1y'] && <button type="button" class="btn btn-dark price-range-btn" data-range="1y">1Y</button>}
{showRanges['all'] && <button type="button" class="btn btn-dark price-range-btn" data-range="all">All</button>}
<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>

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

@@ -322,13 +322,30 @@ const facets = searchResults.results.slice(1).map((result: any) => {
</div>
)}
{pokemon.map((card:any) => (
<div class="col">
{pokemon.map((card: any, i: number) => (
<>
{i > 0 && i % 10 === 0 && (
<div class="col-12 col-md-8 col-xl-6 col-xxxl-12">
<div class="rounded-4 d-flex flex-row align-items-center justify-content-center bg-body-secondary p-2 h-100" style="min-height: 280px;">
<div class="text-body-tertiary small mb-2 align-self-start ps-1 mt-0 w-100">Sponsored</div>
<ins class="adsbygoogle"
style="display:block"
data-ad-format="fluid"
data-ad-layout-key="-fc+50+9g-c8-9k"
data-ad-client="ca-pub-1140571217687341"
data-ad-slot="1206214613"></ins>
</div>
</div>
)}
<div class="col equal-height-col">
<div class="inventory-button position-relative float-end shadow-filter text-center d-none">
<div class="inventory-label pt-2">+/-</div>
</div>
<div class="card-trigger position-relative" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
<div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
<div class="image-grow rounded-4 card-image h-100" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}>
<img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/>
<span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
<div class="holo-shine"></div>
<div class="holo-glare"></div>
</div>
@@ -347,9 +364,10 @@ const facets = searchResults.results.slice(1).map((result: any) => {
<div class="text-body-tertiary">{card.number}</div>
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
</div>
<div class="text-body-tertiary">{card.variant}</div><span class="d-none">{card.productId}</span>
<div class="text-body-tertiary">{card.variant}</div>
<span class="d-none">{card.productId}</span>
</div>
</>
))}
{start + 20 < totalHits &&
<div hx-post="/partials/cards" hx-trigger="revealed" hx-include="#searchform" hx-target="#cardGrid" hx-swap="beforeend" hx-on--after-request="afterUpdate(event)">