// Yahtzee screens — Home, Setup (mode, difficulty, players), Game, Results. // ─── Hooks ──────────────────────────────────────────────────────────────────── // Tracks whether the viewport is wide enough for a multi-column game layout. function useIsWide(breakpoint = 900) { const get = () => typeof window !== 'undefined' && window.innerWidth >= breakpoint; const [wide, setWide] = React.useState(get); React.useEffect(() => { const onResize = () => setWide(get()); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [breakpoint]); return wide; } // ─── Shared bits ───────────────────────────────────────────────────────────── function PrimaryButton({ children, onClick, accent = '#E26D5C', disabled, style = {}, onPressStart, onPressEnd }) { const handlePointerDown = (e) => { if (disabled) return; e.currentTarget.style.transform = 'scale(0.98)'; onPressStart && onPressStart(); }; const handlePointerEnd = (e) => { e.currentTarget.style.transform = 'scale(1)'; onPressEnd && onPressEnd(); }; return ( ); } function GhostButton({ children, onClick, style = {} }) { return ( ); } function BackBar({ onBack, title, subtitle }) { return (
{subtitle}
{title}
); } // ─── Home ───────────────────────────────────────────────────────────────────── function HomeScreen({ onStart, accent, hasSavedGame, onResume }) { return (
{/* decorative dice scatter */}
◆ Pocket Dice Hall · est. 26

Yahtzee.

Five dice. Thirteen rounds. One scorecard between friends — or a clever computer.

{hasSavedGame && ( )} New game →
); } // ─── Setup: Mode pick ──────────────────────────────────────────────────────── function ModeCard({ icon, title, sub, onClick, accent, selected }) { return ( ); } function SetupModeScreen({ onPick, onBack, accent }) { return (
onPick('pass')} icon={( )} title="Pass & Play" sub="Take turns on this device. 2–6 players." /> onPick('cpu')} icon={( )} title="vs Computer" sub="Solo round against an AI opponent. Choose difficulty." />
Online · Coming soon
Play strangers around the world
); } // ─── Setup: Difficulty ─────────────────────────────────────────────────────── function DifficultyCard({ label, sub, dots, selected, onClick, accent }) { return ( ); } function SetupDifficultyScreen({ onPick, onBack, accent }) { const [selected, setSelected] = React.useState('normal'); return (
setSelected('easy')} accent={accent} /> setSelected('normal')} accent={accent} /> setSelected('hard')} accent={accent} />
What "{selected}" plays like
{selected === 'easy' && "Cleo will go for upper-section sums and accept what the dice give. Forget the straights."} {selected === 'normal' && "Cleo balances the upper bonus against big plays. Will chase a Yahtzee if it's free."} {selected === 'hard' && "Cleo evaluates expected value at every roll. Sacrifices upper bonus to lock big lower scores. Watch out."}
onPick(selected)} accent={accent} style={{ marginTop: 20 }}> Continue →
); } // ─── Setup: Players ────────────────────────────────────────────────────────── const PLAYER_COLORS = ['#E26D5C', '#2D8A6E', '#C49A35', '#7D5BA6', '#3F6C9E', '#D45D8C']; const SUGGESTED_NAMES = ['Alex', 'Sam', 'Jordan', 'Riley', 'Quinn', 'Morgan']; function PlayerRow({ player, idx, onName, onRemove, canRemove }) { return (
{(player.name?.[0] || `P${idx + 1}`[0]).toUpperCase()}
onName(idx, e.target.value)} placeholder={SUGGESTED_NAMES[idx]} maxLength={14} style={{ all: 'unset', flex: 1, fontFamily: '"Geist", sans-serif', fontSize: 15, fontWeight: 500, color: '#1C1917', }} /> {canRemove && ( )}
); } function SetupPlayersScreen({ mode, difficulty, onStart, onBack, accent }) { const initial = mode === 'cpu' ? [ { name: 'You', color: PLAYER_COLORS[0], isCpu: false }, { name: 'Cleo', color: PLAYER_COLORS[1], isCpu: true }, ] : [ { name: '', color: PLAYER_COLORS[0], isCpu: false }, { name: '', color: PLAYER_COLORS[1], isCpu: false }, ]; const [players, setPlayers] = React.useState(initial); const setName = (i, name) => setPlayers(ps => ps.map((p, idx) => idx === i ? { ...p, name } : p)); const addPlayer = () => { if (players.length >= 6) return; setPlayers(ps => [...ps, { name: '', color: PLAYER_COLORS[ps.length % PLAYER_COLORS.length], isCpu: false }]); }; const removePlayer = (i) => setPlayers(ps => ps.filter((_, idx) => idx !== i)); const canStart = players.every(p => p.name.trim().length > 0) && players.length >= 2; return (
{mode === 'cpu' && (
Difficulty · {difficulty}
)} {players.map((p, idx) => ( 2 && !p.isCpu} /> ))} {mode === 'pass' && players.length < 6 && ( )}
onStart(players)} accent={accent} disabled={!canStart}> Start game
); } // ─── Game screen ───────────────────────────────────────────────────────────── function PlayerChip({ player, isActive, score, accent, compact }) { return (
{player.name[0]?.toUpperCase()}
{score}
{player.isCpu ? 'CPU' : player.name}
); } function RollsIndicator({ used, total = 3, accent }) { return (
{Array.from({ length: total }).map((_, i) => (
))}
); } function GameScreen({ players, currentPlayerIdx, round, dice, rollsUsed, rolling, onRoll, onOpenScore, onToggleHold, onPickCategory, accent, feltColor, onExit, recap, onContinue, }) { const current = players[currentPlayerIdx]; const canRoll = rollsUsed < 3 && !rolling && !recap; const canScore = rollsUsed > 0 && !rolling && !current.isCpu && !recap; const inRecap = !!recap; const recapCatLabel = inRecap ? [...UPPER_CATS, ...LOWER_CATS].find(c => c.key === recap.catKey)?.label : null; // Press-and-hold on Roll button → shake the dice for good-luck flavour. const [shaking, setShaking] = React.useState(false); React.useEffect(() => { if (rolling || inRecap) setShaking(false); }, [rolling, inRecap]); const isWide = useIsWide(900); const flashCatKey = inRecap ? recap.catKey : null; // ── Shared subcomponents (inline) ────────────────────────────────────────── const topBar = (
Round {round}/13
); // Bottom action area — dice tray + rolls + roll button. Same in both layouts, // but constrained to a sensible width on wide screens. const actionArea = (
0 && rollsUsed < 3 && !rolling && !inRecap && !current.isCpu} />
{inRecap ? ( Continue → ) : ( <>
Rolls
{ if (canRoll && !current.isCpu) setShaking(true); }} onPressEnd={() => setShaking(false)} > {shaking ? 'Toss it!' : rollsUsed === 0 ? 'Hold to shake · tap to roll' : rollsUsed >= 3 ? 'No rolls left' : `Roll again · ${3 - rollsUsed} left`} )}
); // The single-player banner used in narrow layout. const narrowBanner = (
{current.name[0]?.toUpperCase()}
{inRecap ? `${current.name} just scored` : current.isCpu ? `${current.name} is thinking…` : `${current.name}'s turn`}
{inRecap ? ( {recap.points > 0 ? ( <>+{recap.points} on {recapCatLabel} ) : ( <>Sacrificed {recapCatLabel} )} ) : ( rollsUsed === 0 ? 'Tap roll to begin' : rollsUsed >= 3 ? 'Last roll — choose a row' : `Roll ${rollsUsed} · hold what works` )}
Total
{grandTotal(current.scores)}
); // The compact turn message used in wide layout (centered above the dice). const wideTurnMessage = (
{inRecap ? `${current.name} just scored` : current.isCpu ? `${current.name} is thinking…` : `${current.name}'s turn`}
{inRecap ? ( {recap.points > 0 ? ( <>+{recap.points} on {recapCatLabel} ) : ( <>Sacrificed {recapCatLabel} )} ) : ( rollsUsed === 0 ? 'Tap roll to begin' : rollsUsed >= 3 ? 'Last roll — choose a row' : `Roll ${rollsUsed} · hold what works` )}
); // ── Wide layout ──────────────────────────────────────────────────────────── if (isWide) { return (
{topBar}
{players.map((p, i) => ( ))}
{wideTurnMessage} {actionArea}
); } // ── Narrow layout (mobile) ───────────────────────────────────────────────── return (
{topBar} {narrowBanner} {actionArea}
); } // One-column player tile for the wide layout. Shows player header (avatar, // name, total) and their scorecard. Inactive players are dimmed and read-only. function PlayerColumn({ player, isActive, dice, accent, canScore, rolling, rollsUsed, onPick, flashCatKey, inRecap }) { return (
{/* Player header */}
{player.name[0]?.toUpperCase()}
{isActive ? (inRecap ? 'Just scored' : 'Now rolling') : 'Waiting'}
{player.name}{player.isCpu ? ' · CPU' : ''}
Total
{grandTotal(player.scores)}
); } // Inline two-column scorecard for the current player. Available rows are // highlighted with the accent; rows that would score zero stay tappable // but muted (you can always sacrifice a row). function InlineScorecard({ dice, scores, accent, canScore, rolling, rollsUsed, onPick, flashCatKey, hideHeader = false, compact = false }) { const suggestions = React.useMemo(() => { const s = {}; [...UPPER_CATS, ...LOWER_CATS].forEach(c => { s[c.key] = scoreFor(c.key, dice); }); return s; }, [dice]); const upper = UPPER_CATS; const lower = LOWER_CATS; const ut = upperTotal(scores); const ub = upperBonus(scores); return (
{!hideHeader && (
Your scorecard {canScore && ( tap a row to score )}
)}
0 ? accent : 'rgba(28,25,23,0.55)', }}> Bonus {ub > 0 ? '✓' : `≥63`} {ut}/63 {' '}+{ub}
)} />
); } function ScorecardColumn({ title, cats, scores, suggestions, canScore, accent, onPick, rolling, footer, flashCatKey }) { return (
{title}
{cats.map(cat => { const filled = scores[cat.key] !== undefined; const pts = suggestions[cat.key]; const isPositive = pts > 0; const isHighlighted = !filled && canScore && isPositive; const isTappable = !filled && canScore; const isFlashed = flashCatKey === cat.key; return ( ); })}
{footer}
); } // ─── Results ───────────────────────────────────────────────────────────────── function ResultsScreen({ players, accent, onPlayAgain, onHome }) { const ranked = [...players] .map((p, i) => ({ ...p, total: grandTotal(p.scores), origIdx: i })) .sort((a, b) => b.total - a.total); const winner = ranked[0]; return (
◆ Final tally
{winner.name}
wins.
{winner.total} points across thirteen rounds. {ranked[1] ? `That's ${winner.total - ranked[1].total} ahead of ${ranked[1].name}.` : ''}
{ranked.map((p, i) => (
{i + 1}
{p.name[0]?.toUpperCase()}
{p.name}{p.isCpu ? ' · CPU' : ''}
Upper {upperTotal(p.scores)} · Lower {lowerTotal(p.scores)} · Bonus {upperBonus(p.scores)}
{p.total}
))}
Play again
); } Object.assign(window, { HomeScreen, SetupModeScreen, SetupDifficultyScreen, SetupPlayersScreen, GameScreen, ResultsScreen, PrimaryButton, GhostButton, });