// Fun Stats screen — opens from Final, breaks down sniper / lost-in-time / wildest miss / // bullseyes / decade champs / accuracy chart / safest / boldest. Ported from the design at // design/hitster/project/e2e-screens.jsx (FunStats + computeFunStats + FunStatsChart). (() => { const R = window.R; const { Tag, Btn, RisoStamp, Screen, risoTex } = window; function decadeOf(year) { if (!Number.isFinite(year)) return '?'; const d = Math.floor(year / 10) * 10; return `${String(d).slice(2)}s`; } // history = [{ song: { title, year }, guesses: [{ id, name, color, guess, dist, points }] }] function computeFunStats(history) { if (!history?.length) return null; const byPlayer = {}; history.forEach(({ song, guesses }) => { guesses.forEach((g) => { if (!byPlayer[g.name]) byPlayer[g.name] = { name: g.name, color: g.color, dists: [], guesses: [], rounds: [], decadeDists: {}, }; // Skip if this player didn't guess this round (no value) if (g.guess == null || !Number.isFinite(g.dist)) return; byPlayer[g.name].dists.push(g.dist); byPlayer[g.name].guesses.push(g.guess); byPlayer[g.name].rounds.push({ song, guess: g.guess, dist: g.dist }); const dec = decadeOf(song.year); if (!byPlayer[g.name].decadeDists[dec]) byPlayer[g.name].decadeDists[dec] = []; byPlayer[g.name].decadeDists[dec].push(g.dist); }); }); const players = Object.values(byPlayer).filter(p => p.dists.length > 0); if (players.length === 0) return null; const avg = (arr) => arr.length ? arr.reduce((a, b) => a + b, 0) / arr.length : 0; const withAvg = players.map((p) => ({ ...p, avg: avg(p.dists) })); const sniper = withAvg.slice().sort((a, b) => a.avg - b.avg)[0]; const lost = withAvg.slice().sort((a, b) => b.avg - a.avg)[0]; // Wildest miss let wildest = { dist: -1 }; history.forEach(({ song, guesses }) => { guesses.forEach((g) => { if (Number.isFinite(g.dist) && g.dist > wildest.dist) { wildest = { name: g.name, dist: g.dist, song: song.title, actual: song.year, guess: g.guess }; } }); }); const bullseyes = []; history.forEach(({ song, guesses }) => { guesses.forEach((g) => { if (g.dist === 0) bullseyes.push({ name: g.name, year: song.year, song: song.title }); }); }); const decades = {}; history.forEach(({ song }) => { const d = decadeOf(song.year); decades[d] = (decades[d] || 0) + 1; }); const decadeChamps = Object.keys(decades).sort().map((d) => { const ranked = players.map((p) => ({ name: p.name, dist: p.decadeDists[d] ? avg(p.decadeDists[d]) : Infinity, })).sort((a, b) => a.dist - b.dist); if (!ranked[0] || ranked[0].dist === Infinity) return null; return { decade: d, name: ranked[0].name, dist: Math.round(ranked[0].dist), songs: decades[d] }; }).filter(Boolean); const safest = players.map((p) => { const counts = {}; p.guesses.forEach((y) => { counts[y] = (counts[y] || 0) + 1; }); const top = Object.entries(counts).sort((a, b) => b[1] - a[1])[0]; return { name: p.name, year: top ? top[0] : '—', repeats: top ? top[1] : 0 }; }).sort((a, b) => b.repeats - a.repeats)[0]; const boldest = players.map((p) => ({ name: p.name, spread: p.guesses.length ? Math.max(...p.guesses) - Math.min(...p.guesses) : 0, })).sort((a, b) => b.spread - a.spread)[0]; return { sniper, lost, wildest, bullseyes, decadeChamps, safest, boldest }; } function FunStatsChart({ history }) { const W = 280, H = 90, PAD = 6; const series = {}; history.forEach(({ guesses }, ri) => { guesses.forEach((g) => { if (g.guess == null || !Number.isFinite(g.dist)) return; if (!series[g.name]) series[g.name] = { name: g.name, color: g.color, points: [] }; series[g.name].points.push({ r: ri, dist: g.dist }); }); }); const lines = Object.values(series); const allDists = lines.flatMap((l) => l.points.map((p) => p.dist)); const maxDist = Math.max(8, ...allDists); const xAt = (r) => PAD + (r * (W - PAD * 2)) / Math.max(1, history.length - 1 || 1); const yAt = (d) => PAD + (d / maxDist) * (H - PAD * 2); return (
{lines.map((l) => ( `${xAt(p.r)},${yAt(p.dist)}`).join(' ')} /> {l.points.map((p, i) => ( ))} ))}
{lines.map((l) => (
{l.name}
))}
↑ FARTHER · ↓ CLOSER
); } function FunStats({ history, onBack, onNewGame }) { const stats = React.useMemo(() => computeFunStats(history), [history]); if (!stats || !history || history.length === 0) { return (
Fun stats ← BACK
No round history yet — play a few rounds and come back.
); } const cardBase = { padding: '12px 14px', border: `2px solid ${R.ink}`, background: R.paper2, boxShadow: `3px 3px 0 ${R.ink}`, }; return (
The breakdown ← BACK
🎯 SNIPER
{stats.sniper.name.toUpperCase()}
{stats.sniper.avg.toFixed(1)} yr avg
Closest overall — guessed nearest to the truth across all rounds.
🌫 LOST IN TIME
{stats.lost.name.toUpperCase()}
{stats.lost.avg.toFixed(1)} yr avg
Farthest from the truth on average. Need a history book.
💥 WILDEST MISS
{stats.wildest.name} · {stats.wildest.dist} yrs off
"{stats.wildest.song}" · {stats.wildest.actual} → guessed {stats.wildest.guess}
{stats.bullseyes.length > 0 && (
🎯 BULLSEYES · EXACT YEAR
{stats.bullseyes.map((b, i) => (
{b.name} · {b.year}
))}
)} {stats.decadeChamps.length > 0 && (
🏆 DECADE CHAMPS
{stats.decadeChamps.map((d, i) => (
{d.decade}
{d.name}
{d.dist}yr off · {d.songs}sg
))}
)}
📈 ACCURACY BY ROUND
🧊 SAFEST
{stats.safest.name}
guessed {stats.safest.year} most
🔥 BOLDEST
{stats.boldest.name}
widest year spread
← BACK
{onNewGame && (
NEW GAME
)}
); } window.FunStats = FunStats; window.computeFunStats = computeFunStats; })();