// quixo-screens.jsx — non-board screens. // // Home, Win/Lose modal, Settings, History, Onboarding cards. // All read from a single `theme` object so the same components compose into // any of the three direction artboards. Mirrors the sibling Quarto app. const Q = window.QuixoBoardKit; const QCube = window.QuixoCube; // ───────────────────────────────────────────────────────────── // HOME SCREEN // ───────────────────────────────────────────────────────────── function HomeScreen({ theme, onPlay, symbols, onSettings, onHistory, onLearn, resumable = false, onResume, stats, isLight, onToggleLight }) { const liveStats = stats || [ { k: 'Played', v: '0' }, { k: 'Won', v: '0' }, { k: 'Streak', v: '0' }, ]; return (
{/* decorative cubes in the corner */}
{/* Eyebrow + light/dark toggle */}
Quixo · est. 1995
{onToggleLight && ( )}
{/* Title */}
Quixo.
The strategy game where every move pushes a whole row of the board.
{/* Quick stats */}
{liveStats.map((s, i, arr) => (
{s.v}
{s.k}
))}
{/* Primary actions */}
{resumable && ( )}
onPlay('learn'))} /> onPlay('history'))} />
onPlay('settings'))} />
{/* Bottom strip */}
Gigamic classics · № 3 {theme.name}
); } function SecondaryBtn({ theme, label, onClick, badge }) { return ( ); } // ───────────────────────────────────────────────────────────── // WIN / LOSE / DRAW MODAL // ───────────────────────────────────────────────────────────── function ResultModal({ state, theme, symbols, onAgain, onMenu }) { if (state.phase !== 'ended') return null; const E = window.QuixoEngine; const won = state.winner === 'you'; const draw = state.winner === 'draw'; const lost = state.winner === 'ai'; const attr = E.lineName(state.winLine); // ── LOSS: keep the board (and its red pulsing line) fully visible. ── // A slim action strip anchors to the bottom instead of a blocking modal. if (lost) { return (
{state.winLine ? `Pavlov lined up five circles in ${state.moveCount} moves. Study it above.` : 'You conceded the match.'}
); } return (
{/* Decorative line of brass */}
{won ? '— five in a row —' : '— stalemate —'}
{won ? 'Quixo!' : 'Drawn.'}
{won ? `Five crosses along ${attr} in ${state.moveCount} moves.` : 'Neither side could line up five.'}
{/* The winning five */} {won && (
{[0, 1, 2, 3, 4].map(i => (
))}
)}
); } // ───────────────────────────────────────────────────────────── // SETTINGS // ───────────────────────────────────────────────────────────── function SettingsScreen({ theme, onBack, settings, onChange }) { const ctrl = !!settings; const get = (k, fallback) => ctrl ? settings[k] : fallback; const set = (k, v) => ctrl && onChange && onChange(k, v); return (
Settings
set('theme', v)} /> set('symbols', v)} /> set('difficulty', v)} /> set('animSpeed', v)} /> set('assists', v)} /> set('haptics', v)} /> ctrl && onChange && onChange('__clearHistory', true)} /> ctrl && onChange && onChange('__reset', true)} />
Quixo · v0.1
); } function SetSegment({ theme, label, value, options, onChange }) { const current = options.find(o => o.value === value); const labelText = current ? current.label : ''; return (
{label}
{labelText}
{options.map((opt) => { const active = opt.value === value; return ( ); })}
); } function SetGroup({ theme, label, children }) { return (
{label}
{children}
); } function SetToggle({ theme, label, on, onChange }) { const toggle = () => onChange && onChange(!on); return (
{label}
); } function SetButton({ theme, label, onClick, danger = false }) { return ( ); } // ───────────────────────────────────────────────────────────── // HISTORY / MATCHES // ───────────────────────────────────────────────────────────── function HistoryScreen({ theme, symbols, onBack, history }) { const matches = Array.isArray(history) ? history : []; const wins = matches.filter(m => m.result === 'won').length; const losses = matches.filter(m => m.result === 'lost').length; const draws = matches.filter(m => m.result === 'draw').length; const ago = (when) => { if (!when) return ''; const dt = Date.now() - when; const h = dt / 3600e3; if (h < 1) return Math.max(1, Math.round(dt / 60e3)) + 'm'; if (h < 24) return Math.round(h) + 'h'; if (h < 24 * 7) return Math.round(h / 24) + 'd'; return Math.round(h / 24 / 7) + 'w'; }; return (
Matches
{/* Stats strip */}
{[ { k: 'won', v: wins, c: theme.success }, { k: 'lost', v: losses, c: theme.danger }, { k: 'drawn', v: draws, c: theme.textDim }, ].map((s, i, arr) => (
{s.v}
{s.k}
))}
Recent
{/* Match list */}
{matches.length === 0 && (
No matches yet.
Win one against Pavlov.
)} {matches.map((m, i) => (
{/* Result chip */}
{m.result === 'won' ? 'W' : m.result === 'lost' ? 'L' : 'D'}
{m.opp}
{m.moves} moves · {m.attr || '—'}
{ago(m.when)}
))}
); } // ───────────────────────────────────────────────────────────── // ONBOARDING — single card, 3 dots // ───────────────────────────────────────────────────────────── function OnboardingScreen({ theme, symbols, step = 1, onNext, onSkip }) { const steps = [ { title: 'Twenty-five cubes.', sub: 'All blank at the start. On your turn, take any cube from the edge of the board that is blank or already shows your cross. Never one of theirs.', art: , }, { title: 'Push, don\u2019t place.', sub: 'Your cube turns to a cross and goes back in from a different end of its row or column — sliding the whole line one square.', art: , }, { title: 'Five in a row wins.', sub: 'Across, down or diagonally. But careful — if your push lines up five circles, Pavlov wins on the spot. Even if it lines up your five too.', art: , }, ]; const s = steps[Math.max(0, Math.min(steps.length - 1, step - 1))]; return (
How to play · {step}/3
{s.art}
{s.title}
{s.sub}
{/* dots */}
{[1, 2, 3].map(i => (
))}
); } function CubeRow({ theme, cubes, symbols, caption }) { return (
{cubes.map((v, i) => 4 ? 46 : 52} symbols={symbols} />)}
{caption && (
{caption}
)}
); } // A row mid-push: the lifted cross re-enters from the right, the line slides. function PushArt({ theme, symbols }) { return (
←
the row slides one square
); } window.QuixoScreens = { HomeScreen, ResultModal, SettingsScreen, HistoryScreen, OnboardingScreen, };