);
}
// Format an ISO yyyy-mm-dd → { label: 'JUN 3', dow: 'WED' } using UTC getters so
// the displayed date matches the UTC daily anchor regardless of local timezone.
function fmtISODate(iso) {
try {
const d = new Date(iso + 'T00:00:00Z');
if (!Number.isFinite(d.getTime())) return { label: iso || '', dow: '' };
const MON = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
const DOW = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
return { label: MON[d.getUTCMonth()] + ' ' + d.getUTCDate(), dow: DOW[d.getUTCDay()] };
} catch (_) { return { label: iso || '', dow: '' }; }
}
function ModeCard({ kind, label, sub, color, locked, badge, onClick }) {
return (
);
}
function HeartRow({ lives, max = 3 }) {
return (
{Array.from({ length: max }).map((_, i) => {
const alive = i < lives;
return (
);
})}
);
}
// ── Screens ────────────────────────────────────────────────────
// Daily-reminder row — surfaces when the browser supports Web Push and the
// user hasn't subscribed yet (or is iOS-pre-install). Tap routes through
// window.HFPush; failures fall back to a friendly explainer.
function DailyReminderRow({ deviceId, getDeviceId, fullAccess }) {
const [state, setState] = React.useState(() => {
if (typeof window === 'undefined' || !window.HFPush) return 'unsupported';
if (!window.HFPush.isSupported()) return 'unsupported';
if (window.HFPush.needsInstallFirst()) return 'install_first';
const p = window.HFPush.permission();
if (p === 'denied') return 'blocked';
if (p === 'granted') return 'maybe_active';
return 'available';
});
const [busy, setBusy] = React.useState(false);
const [hint, setHint] = React.useState(null);
React.useEffect(() => {
let cancelled = false;
if (state !== 'maybe_active') return;
(async () => {
try {
const sub = await window.HFPush.currentSubscription();
if (!cancelled) setState(sub ? 'active' : 'available');
} catch { if (!cancelled) setState('available'); }
})();
return () => { cancelled = true; };
}, [state]);
const onEnable = async () => {
setBusy(true);
setHint(null);
const id = deviceId || (typeof getDeviceId === 'function' ? getDeviceId() : null);
const r = await window.HFPush.subscribe(id);
setBusy(false);
if (r.ok) { setState('active'); setHint('You\'ll get a daily ping when the Mix refreshes.'); return; }
if (r.error === 'install_first') {
setState('install_first');
} else if (/denied|NotAllowed/i.test(r.error)) {
setState('blocked');
setHint('Permission blocked — flip it in Settings → Notifications → Hitfothit.');
} else {
setHint('Could not enable reminders: ' + (r.error || 'unknown'));
}
};
const onDisable = async () => {
setBusy(true); setHint(null);
const r = await window.HFPush.unsubscribe();
setBusy(false);
if (r.ok) { setState('available'); setHint('Reminders off.'); }
else setHint('Could not turn off: ' + (r.error || 'unknown'));
};
if (state === 'unsupported') {
// Show a brief explainer instead of disappearing — if the user expected
// a reminder UI, this tells them why it's not here (iOS Safari < 16.4,
// private-mode, in-app browser, etc.).
return (
🔔 Daily reminder needs Safari + iOS 16.4 or Chrome / Firefox. Open in your default browser to enable.
);
}
// Active = settings noise on a play screen — collapse to one thin row.
// (The dev-only TEST push stays, tucked into the same row.)
if (state === 'active') {
const miniBtn = {
padding: '5px 9px', border: `2px solid ${R.ink}`, background: R.paper,
fontSize: 10, fontWeight: 900, letterSpacing: '.1em', cursor: 'pointer',
fontFamily: 'inherit', color: R.ink, textTransform: 'uppercase',
};
return (
🔔 Daily ping on
{fullAccess === true && (
)}
{hint &&
{hint}
}
);
}
let label = '🔔 Daily reminder';
let sub = '';
let action = null;
if (state === 'install_first') {
sub = 'Add Hitfothit to Home Screen first (Share → Add to Home). iOS needs that before it can ping you.';
} else if (state === 'blocked') {
sub = 'Notifications blocked. iOS: Settings → Notifications → Hitfothit. Or System Settings on macOS.';
} else if (state === 'available' || state === 'maybe_active') {
sub = 'Get pinged each day so you don\'t miss the streak.';
action = {busy ? 'ENABLING…' : 'ENABLE →'};
}
return (
{/* Prominent LEADERBOARD hero (purple) — your standing, taps into the
board. Shown from the very first visit so new players can browse
who's best before playing. PERSONAL BEST reconciles the local
daily highscore with the best recorded daily-day. */}
{(() => {
const lh = SH ? SH.getStats() : null;
const personalBest = Math.max((lh && lh.bestDailyDay) || 0, stats.highscores.daily || 0);
const lbToday = playedToday ? (stats.daily.bestToday || 0) : 0;
const games = (lh && lh.games) || stats.plays || 0;
return (
);
})()}
{/* 01 — DAILY MIX hero. Yellow, big number, leaderboard CTA. */}
{/* 02 / 03 / 04 — three equal index-card tiles (design handoff: home
dir A "Catalogue"): Decade Drill · Endless · Category. Corner
number watermark, kicker, emoji, name, sub. Colours cycle the
shared palette at index 1/2/3 (blue / yellow / green). */}
{/* Always rendered — the component decides what to show based on
isSupported / install state. Previously gated on !firstTime, which
hid the entire UI from anyone who'd just installed the PWA and
opened solo for the first time. */}
{firstTime
? <>No account, no email. Scores live on this device only.
: <>Plays: {stats.plays} · Deck: {deckCount} tracks · Stats local to this device.}
);
}
// Build version footer — fetched from /api/version, links to the /version
// page. Silent if the endpoint isn't reachable (old server).
function VersionTag() {
const [v, setV] = React.useState(null);
React.useEffect(() => {
let cancelled = false;
fetch('/api/version').then((r) => r.json()).then((j) => { if (!cancelled) setV(j); }).catch(() => {});
return () => { cancelled = true; };
}, []);
if (!v) return null;
return (
v{v.version} · {v.shortCommit}
);
}
function SPDecade({ deck, onPick, onBack }) {
const counts = React.useMemo(() => {
const m = {};
DECADES.forEach((d) => { m[d] = deck.filter((s) => decadeOf(s.year) === d).length; });
return m;
}, [deck]);
return (
);
}
// Three 12×18 meter cells; filled count = difficulty rank (1/2/3) in the
// difficulty's colour. Shared by the picker rows.
function DiffMeter({ bars, color }) {
return (
{[0, 1, 2].map((i) => (
))}
);
}
// Endless difficulty picker — sits between home and the run (design handoff:
// EndlessDifficulty dir A "Meter list"). Tapping a row locks the difficulty
// and starts the run immediately.
function SPEndlessDifficulty({ onPick, onBack }) {
return (
💀 3 lives · keep going until you miss three. Each guess inside the window survives.
{DIFFS.map((d) => (
))}
);
}
function SPIntro({ mode, decade, endlessDiff, best, onContinue }) {
const d = diffByKey(endlessDiff);
const meta = {
daily: { title: "TODAY'S MIX", sub: 'Daily', rules: ['10 songs', 'Same set for everyone', 'Resets at midnight'], color: R.yellow },
endless: { title: 'ENDLESS', sub: `Survival · ${d.name}`, rules: ['3 lives', `Stay within ${d.win.toLowerCase()} to survive`, 'Score = songs survived'], color: d.color },
drill: { title: `${decade || '90s'} DRILL`, sub: 'Practice', rules: ['10 songs from one era', 'No lives, just score', 'Beat your best'], color: R.blue },
}[mode] || { title: '', sub: '', rules: [], color: R.paper2 };
React.useEffect(() => {
const t = setTimeout(() => onContinue(), 2200);
return () => clearTimeout(t);
}, []);
return (
);
// Endless game over — the score IS the survived count; show the window and
// the per-difficulty best instead of points/avg (design handoff:
// EndlessGameOver). New-best deaths keep both messages via endBanner.
if (mode === 'endless') {
const d = diffByKey(diffKey);
return (
{isNewHi && }
Endless · {d.name}{isNewHi ? 'NEW BEST' : 'OUT OF LIVES'}
{banner}
SONGS SURVIVED
{score}
{d.win} window · best on {d.name.toLowerCase()}: {best || score}
{nameSign}
PLAY AGAIN
HOME
);
}
return (
{isNewHi && }
Run end{dead ? 'OUT OF LIVES' : (isNewHi ? 'NEW HIGH' : 'COMPLETE')}
{/* Inline name prompt — keeps leaderboard names from being all 'anon'.
Pushes immediately on blur via /api/solo/name so the latest row,
and the rename-aware leaderboard subquery, both reflect the change. */}
{nameSign}
{MODES[mode]?.daily && onShare && SHARE TODAY →}
PLAY AGAIN
HOME
);
}
// ── LEADERBOARD — tabbed All-time (global social board + your PB) / By day ──
// Replaces the old combined SPHighscores. "All-time" is the global, anonymous,
// device-keyed board (reuses the fetchLeaderboard helper + the SHOW-AS name
// input from the old screen). "By day" is YOUR personal daily history from the
// SoloHistory store (daily mode only).
function SPLeaderboard({ stats, onBack, onStats, onShare }) {
// Default to the daily "By day" view — your own daily history shows first,
// the All-time global board sits behind the second tab.
const [tab, setTab] = React.useState('day');
// All-time tab — segmented mode toggle drives both the PB hero and the
// fetched global board. Default DAILY. Endless splits further into a
// per-difficulty sub-board, category into a per-category one (the server
// filters by difficulty / playlist_slug respectively).
const [selMode, setSelMode] = React.useState('daily');
const [endlessDiff, setEndlessDiff] = React.useState('medium');
const [selCategory, setSelCategory] = React.useState('hitforhit');
const [globalRows, setGlobalRows] = React.useState([]);
const [globalLoading, setGlobalLoading] = React.useState(false);
const [name, setName] = React.useState(() => getDeviceName());
const myId = getDeviceId();
const selCat = SP.categoryByKey(selCategory) || SP.CATEGORIES[0];
// Fetch on every mode change regardless of tab — the global board now shows
// on BOTH the All-time and By day tabs.
React.useEffect(() => {
let cancel = false;
setGlobalLoading(true);
const opts = { limit: 10, me: myId };
if (selMode === 'endless') opts.difficulty = endlessDiff;
if (selMode === 'category') opts.playlistSlug = selCat.slug;
fetchLeaderboard(selMode, opts).then((r) => {
if (!cancel) { setGlobalRows(r); setGlobalLoading(false); }
});
return () => { cancel = true; };
}, [selMode, endlessDiff, selCategory]);
// Today's chart — the global DAILY board filtered to the current UTC day,
// so the By-day tab answers "who's best TODAY?" (ranked, you highlighted).
const [todayRows, setTodayRows] = React.useState([]);
const [todayLoading, setTodayLoading] = React.useState(true);
React.useEffect(() => {
let cancel = false;
fetchLeaderboard('daily', { limit: 10, date: todayUTC(), me: myId }).then((r) => {
if (!cancel) { setTodayRows(r); setTodayLoading(false); }
});
return () => { cancel = true; };
}, []);
// SHOW-AS rename: persist locally + push to the latest play row (so prior
// rows pick up the rename via the leaderboard subquery), like the old screen.
const onNameBlur = () => { const n = (name || '').trim(); setDeviceName(n); if (n) pushName(n); };
// By day tab — your personal daily history.
const days = SH ? SH.getDailyDays() : [];
const today = todayUTC();
const todayRow = days.find((d) => d.date === today) || null;
const restDays = days.filter((d) => d.date !== today);
// Daily personal-best reconciles the local highscore blob with the best
// recorded daily-day so it matches the home card's number; endless reads
// the per-difficulty best; category the local best run (hits of 10);
// drill the local highscore directly.
const bestDailyDay = SH ? (SH.getStats().bestDailyDay || 0) : 0;
const personalBest = selMode === 'daily'
? Math.max(stats.highscores.daily || 0, bestDailyDay)
: selMode === 'endless'
? ((stats.endless && stats.endless[endlessDiff]) || 0)
: selMode === 'category'
? ((stats.categories && stats.categories[selCategory]) || 0)
: (stats.highscores[selMode] || 0);
// Ranked board list — shared by the all-time board and today's chart.
// Score bars scale to each list's own leader; `me` rows get the pink edge.
const boardList = (rows, loading, emptyText) => {
const top = rows.length ? (rows[0].score || 1) : 1;
return (
GLOBAL · TOP 10 · {selMode.toUpperCase()}{boardQualifier}
{boardList(globalRows, globalLoading, 'No plays yet — be the first.')}
{showAsSign()}
);
return (
STATS} />
{tab === 'all' ? (
{/* Mode toggle for the global board + PB hero. */}
{/* Endless splits into per-difficulty boards — scores on EASY and
HARD aren't comparable (the windows differ). */}
{selMode === 'endless' && (
)}
{/* Category picks its board per category — emoji chip row in the
same inverted-active style as Segmented, wrapping over rows. */}
{selMode === 'category' && (
)}
{/* PERSONAL BEST hero — your local best for the selected mode.
Note: the category PB is your best run (hits of 10, local),
while the global category board ranks graded points — both
metrics already coexist on the end screen. */}
PERSONAL BEST · {selMode === 'category' ? `${selCat.name.toUpperCase()} · BEST RUN` : selMode.toUpperCase() + (selMode === 'endless' ? ` · ${endlessDiff.toUpperCase()}` : '')}
{personalBest}{selMode === 'category' && /10}
{globalBoard()}
) : (
{/* TODAY card — green when daily was played today, else muted. */}
{todayRow ? (
TODAY · {fmtISODate(todayRow.date).label}
STREAK {stats.daily.streak}🔥
{todayRow.score}
{/* Share today's run again — not only from the end screen. */}
{onShare && (
)}
) : (
No daily run today yet — play the Daily mix to log it here.
)}
{/* TODAY'S CHART — who's best THIS day. Global daily board filtered
to today's date, ranked 1..10, you highlighted. Crown banner when
you're sitting on top. */}
)}
{boardList(todayRows, todayLoading, 'No plays yet today — be the first.')}
{/* DAY BY DAY — newest-first list of your recorded daily days. */}
DAY BY DAY
{restDays.length === 0 ? (
No days recorded yet — your daily runs will pile up here.
) : (
{restDays.map((d) => {
const f = fmtISODate(d.date);
return (
{f.label}
{f.dow}
{d.score}
);
})}
)}
{/* Name sign — how you appear on the charts. */}
{showAsSign()}
)}
{/* Footer legend — colour key shared by every accuracy strip. */}
EXACT
WITHIN 2
OFF
);
}
// One labelled stat row: colour chip (emoji) · label + sub · big monospace
// value. The "Best per mode" groups are built from these (design handoff:
// BestPerMode).
function StatLine({ icon, label, valueLabel, value, color }) {
return (
Stats live on this device only. No account, no email.
);
}
// Spoiler-free counts (ex/cl/of) come from the caller — either the live run
// history (end screen) or today's stored daily row (leaderboard share).
function SPShare({ score, ex, cl, of, mode, onBack, onHome }) {
const [copied, setCopied] = React.useState(false);
const [linkCopied, setLinkCopied] = React.useState(false);
// Share only exists for the Daily Mix now — the Eurovision daily became a
// plain category. Date is the UTC daily anchor; URL is a real click-through.
const label = 'DAILY';
const date = todayUTC();
const url = (typeof location !== 'undefined' ? location.origin : 'https://hitforhit.stens.app');
// Reads as an invite to someone who's never played — pitch the game first
// ("hear a song, guess the year"), then the score, then the challenge.
const mixName = 'Daily Mix';
const text = `🎵 Hitfothit — hear a song, guess the year it came out!\nI scored ${score} pts on today's ${mixName} (${ex} exact, ${cl} close).\nThink you can beat me? Try it here:\n${url}`;
const copy = () => {
try {
navigator.clipboard?.writeText(text);
setCopied(true);
setTimeout(() => setCopied(false), 1600);
} catch (_) {}
};
// Native share sheet on iOS — falls back to clipboard.
const nativeShare = () => {
if (navigator.share) {
navigator.share({ text, title: 'Hitfothit · ' + label }).catch(() => {});
} else {
copy();
}
};
return (
HITFOTHIT · {label}
{date}
{score} pts
{ex} exact · {cl} within 2 · {of} off
🎵 Hear a song, guess the year it came out.
Think you can beat me? Tap the link to try today's {label.toLowerCase()} mix.
No song titles. No years. Spoiler-free. Friends can tap the link to try the same {label.toLowerCase()}.