// Shared gameplay engine for Quick drills, Brain Ride and the landscape prototype.
const GP = () => window.GGPrefs || {};
const gmix = (c, p, base = 'transparent') => `color-mix(in srgb, ${c} ${p}%, ${base})`;
const PRAISE = ['Nice!', 'Spot on', 'Great catch', 'Correct'];
// Trial runner: spoken countdown → cue → response window → kind feedback.
function useTrials({ count, isTarget, baseMs, onCue, leadMs, onDone, labels, countdown = true, tapMode = false, showRT = false }) {
const [st, setSt] = React.useState({ phase: countdown ? 'countdown' : 'trial', i: 0, fb: null, ready: false, paused: false, streak: 0 });
const stRef = React.useRef(st); stRef.current = st;
const pr = React.useRef(); pr.current = { count, isTarget, onCue, leadMs, onDone, labels, tapMode, showRT };
const readyAt = React.useRef(0);
const S = React.useRef({ correct: 0, total: 0, streak: 0, best: 0 });
const win = React.useRef(baseMs);
const tm = React.useRef([]); const fbT = React.useRef(null); const cueClean = React.useRef(null);
const clear = () => { tm.current.forEach(clearTimeout); tm.current = []; if (cueClean.current) { cueClean.current(); cueClean.current = null; } };
const answerRef = React.useRef();
answerRef.current = chose => {
const s = stRef.current; if (s.phase !== 'trial' || !s.ready || s.paused) return;
clear();
const p = pr.current; const tgt = p.isTarget(s.i);
if (chose === null && p.tapMode) chose = false;
const rt = (Date.now() - readyAt.current) / 1000;
const k = chose === null ? 'none' : chose === tgt ? 'correct' : 'wrong';
const R = S.current; R.total++;
if (k === 'correct') { R.correct++; R.streak++; R.best = Math.max(R.best, R.streak); } else R.streak = 0;
window.GGData.feedback(k);
const fb = { k, t: k === 'correct' ? (p.showRT && chose ? rt.toFixed(2) + 's' : p.tapMode && !tgt ? 'Nice hold' : PRAISE[R.correct % PRAISE.length]) : k === 'none' ? 'No rush — next one coming' : p.tapMode ? (tgt ? 'Almost — tap for that one' : 'Almost — hold off on that one') : `Almost — that one was ${tgt ? p.labels.yes : p.labels.no}` };
setSt(x => ({ ...x, phase: 'feedback', fb, ready: false, streak: R.streak, score: R.correct }));
fbT.current = setTimeout(() => {
if (s.i + 1 >= p.count) { setSt(x => ({ ...x, phase: 'done' })); p.onDone({ correct: R.correct, total: R.total, best: R.best }); }
else setSt(x => ({ ...x, phase: 'trial', i: x.i + 1, fb: null }));
}, k === 'correct' ? 700 : 1400);
};
const answer = React.useCallback(c => answerRef.current(c), []);
React.useEffect(() => {
if (st.phase !== 'trial' || st.paused) return;
const p = pr.current;
const c = p.onCue && p.onCue(st.i); if (typeof c === 'function') cueClean.current = c;
const lead = p.leadMs ? p.leadMs(st.i) : 0;
tm.current.push(setTimeout(() => { readyAt.current = Date.now(); setSt(x => ({ ...x, ready: true })); }, lead));
tm.current.push(setTimeout(() => answerRef.current(null), lead + win.current));
return clear;
}, [st.phase, st.i, st.paused]);
const pause = React.useCallback(() => { clear(); window.GGData.hush(); setSt(x => (x.phase === 'done' || x.paused ? x : { ...x, paused: true, ready: false })); }, []);
const resume = React.useCallback(() => setSt(x => ({ ...x, paused: false })), []);
const start = React.useCallback(() => setSt(x => ({ ...x, phase: 'trial' })), []);
React.useEffect(() => () => { clear(); clearTimeout(fbT.current); }, []);
return { ...st, answer, pause, resume, start, windowMs: win.current, running: st.phase === 'trial' && st.ready && !st.paused };
}
// One half of the screen = one answer. Fires on touch-down so a bumpy tap still counts.
function AnswerZone({ target, color, label, sub, lit, marker, interactive = true, onAnswer, align = 'end' }) {
const { Icon } = window.GG;
const p = GP(); const hc = p.highContrast; const lg = p.largeText;
const [down, setDown] = React.useState(false);
const on = lit || down;
const bg = hc ? (target ? (on ? '#fff' : color) : (on ? '#333' : '#000'))
: target ? (on ? color : `linear-gradient(180deg, ${gmix(color, 10, '#0c0e14')} 0%, ${gmix(color, 30, '#0c0e14')} 100%)`) : (on ? '#2a2c3a' : 'var(--surface-card)');
const txt = target && (hc || on) ? '#050608' : '#fff';
return (
{ if (!interactive) return; setDown(true); onAnswer && onAnswer(!!target); }}
onPointerUp={() => setDown(false)} onPointerLeave={() => setDown(false)}
style={{ position: 'relative', flex: 1, minWidth: 0, borderRadius: 28, display: 'flex', flexDirection: 'column', justifyContent: align === 'center' ? 'center' : 'flex-end', alignItems: 'center', gap: 4, padding: align === 'center' ? '0 8px' : '0 8px 26px', boxSizing: 'border-box',
cursor: interactive ? 'pointer' : 'default', userSelect: 'none', WebkitUserSelect: 'none', touchAction: 'manipulation', textAlign: 'center', background: bg, color: txt,
border: hc ? `3px solid ${target ? color : '#fff'}` : `2px solid ${target ? color : 'var(--gg-line-strong)'}`,
boxShadow: !hc && target ? `0 0 ${on ? 40 : 20}px ${gmix(color, on ? 55 : 25)}` : 'none', transform: on ? 'scale(0.985)' : 'none', transition: 'all 140ms var(--ease)' }}>
{marker && {label}
{sub && {sub} }
);
}
function CueCard({ cue, cueSize = 140, caption, fb, color, running, windowMs, runKey, forceVisual, style }) {
const { ResponseWindow, Icon } = window.GG;
const p = GP(); const hc = p.highContrast; const lg = p.largeText;
const hide = false;
const fbc = !fb ? color : fb.k === 'correct' ? 'var(--gg-domain-composure)' : fb.k === 'wrong' ? 'var(--gg-domain-speed)' : fb.k === 'demo' ? color : '#fff';
return (
{hide ? Listen
{fb ? {fb.t}
: caption && !hide ? {caption} : null}
);
}
// Portrait stage: both halves of the screen are answers; the cue floats over the top (taps pass through).
function TrialStage({ color, cue, cueSize, caption, no, yes, noSub, yesSub, onAnswer, fb, running, windowMs, runKey, lit, marker, interactive = true, forceVisual }) {
return (
);
}
function TapStage({ color, cue, cueSize, caption, yes, onAnswer, fb, running, windowMs, runKey, lit, marker, interactive = true, forceVisual }) {
return (
onAnswer && onAnswer(true)} />
);
}
function Stage(props) { return props.mode === 'tap' ? close
Get ready
{title}
{rule &&
{rule}
}
{n || volume_up }
);
}
// Portrait gameplay chrome: exit button, title, one optional right-hand readout.
function GameFrame({ T, color, title, right, rule, onEnd, children }) {
const lg = GP().largeText;
return (
{ window.GGData.hush(); onEnd(); }} />
{title}
{right}
{rule &&
{rule}
}
{children}
{T.phase === 'countdown' && !T.paused &&
);
}
// Practice Demo: reads the rule, then plays example rounds on a loop until the rider taps "Got it". Toggle skips demos everywhere.
function PracticeDemo({ Frame, title, color, rule, no, yes, trials, onPlay, onBack, mode: kind = 'lr' }) {
const tapMode = kind === 'tap';
const { BackButton, Toggle, Button, Icon } = window.GG;
const { speak, tone, haptic, hush } = window.GGData;
const p = GP(); const lg = p.largeText;
const [k, setK] = React.useState(0);
const mode = 'demo';
const [started, setStarted] = React.useState(false);
React.useEffect(() => { say(rule); const id = setTimeout(() => setStarted(true), Math.min(4000, 1200 + String(rule).length * 55)); return () => clearTimeout(id); }, []);
const [lit, setLit] = React.useState(null);
const [fb, setFb] = React.useState(null);
const lock = React.useRef(false);
const t = trials[k % trials.length];
const say = x => speak(String(x).replace(/→/g, ','), p.voice !== false);
React.useEffect(() => {
const ts = [];
setLit(null);
if (!started) return;
if (mode === 'demo') {
setFb(t.caption ? null : { k: 'demo', t: 'Listen…' });
t.spoken && say(t.spoken); t.tone ? tone(...t.tone) : tone(540, 'sine', 0.08);
ts.push(setTimeout(() => { setLit(t.isTrue ? 'yes' : tapMode ? null : 'no'); haptic(t.isTrue ? 'correct' : 'tap'); tone(t.isTrue ? 740 : 520, 'triangle', 0.1); setFb({ k: 'demo', t: t.explain }); say(t.explain); }, 1500));
ts.push(setTimeout(() => { setK(x => x + 1); }, 4400));
} else {
lock.current = false;
setFb(k === trials.length ? { k: 'demo', t: 'Your turn — try one!' } : null);
if (k === trials.length) say('Your turn. Try one.');
const lead = k === trials.length ? 1300 : 200;
ts.push(setTimeout(() => { t.spoken && say(t.spoken); t.tone ? tone(...t.tone) : tone(540, 'sine', 0.08); }, lead));
if (tapMode) ts.push(setTimeout(() => tryIt(false), lead + 3500));
}
return () => ts.forEach(clearTimeout);
}, [k, started]);
const tryIt = chose => {
if (mode !== 'you' || lock.current) return; lock.current = true;
const ok = chose === t.isTrue;
haptic(ok ? 'correct' : 'wrong'); ok ? tone(880, 'sine', 0.15) : tone(240, 'triangle', 0.25);
setFb({ k: ok ? 'correct' : 'wrong', t: ok ? (tapMode && !t.isTrue ? 'Nice hold — you got it!' : 'Nice — you got it!') : tapMode ? (t.isTrue ? 'Almost — tap for that one' : 'Almost — hold off on that one') : `Almost — that one was ${t.isTrue ? (t.yes || yes) : (t.no || no)}` });
setTimeout(() => setK(x => x + 1), 1500);
};
return (
{ hush(); onBack(); }} />
Skip Practice Demos p.set && p.set({ skipRobot: v })} label="Skip Practice Demos" />
{mode === 'demo' ? 'Practice Demo · watch how it works' : 'Your turn · practice, not scored'}
{title}
{rule}
{ hush(); onPlay(); }}>Got it, let's play for real
);
}
function PlainFrame({ children }) {
const { PhoneShell } = window.GG;
const hc = GP().highContrast;
return (
{!hc && {children}
);
}
// Generic gameplay shell: optional background layer, respects high contrast. portrait forces portrait padding.
function Shell({ bg, layer, portrait, children }) {
const { PhoneShell } = window.GG;
const hc = GP().highContrast;
return (
{!hc && layer}
{children}
);
}
function HydrationCard({ final }) {
const { Icon } = window.GG;
const lg = GP().largeText;
return (
Take a sip of water
{final ? 'Then ease into a 2-minute easy spin to cool down.' : 'Keep pedaling easy while the next drill loads.'}
);
}
Object.assign(window, { GP, useTrials, AnswerZone, CueCard, TrialStage, TapStage, Stage, ExitButton, Countdown, GameFrame, PracticeDemo, PlainFrame, Shell, HydrationCard });