/* Arcade SPA — boot menu, game, cheat-sheet, history, results, settings. */ const HISTORY_KEY = 'cuttle.arcade.history.v1'; const NAME_KEY = 'cuttle.arcade.lastName.v1'; const SETTINGS_KEY = 'cuttle.arcade.settings.v1'; const SEEN_INTRO_KEY = 'cuttle.arcade.seenIntro.v1'; const NEXT_DEALER_KEY = 'cuttle.arcade.nextDealer.v1'; const NAME_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789.-_ '; const DEFAULT_SETTINGS = { cardHints: true, aiDifficulty: 'EASY' }; // Read the dealer for the next game (1 = AI deals / player goes first; // 0 = player deals / AI goes first), then flip and persist for the round // after. Called at the start of every new game so dealer alternates across // rematches and across page reloads. Default is 1 (matches engine default). function consumeNextDealer() { let d = 1; try { const raw = localStorage.getItem(NEXT_DEALER_KEY); if (raw === '0') d = 0; } catch {} try { localStorage.setItem(NEXT_DEALER_KEY, d === 0 ? '1' : '0'); } catch {} return d; } function loadHistory() { try { return JSON.parse(localStorage.getItem(HISTORY_KEY) || '[]'); } catch { return []; } } function saveHistory(h) { localStorage.setItem(HISTORY_KEY, JSON.stringify(h.slice(-200))); } function loadLastName() { const v = localStorage.getItem(NAME_KEY); return (v && v.length === 3 && [...v].every(c => NAME_CHARS.includes(c))) ? v : 'AAA'; } function loadSettings() { try { const raw = JSON.parse(localStorage.getItem(SETTINGS_KEY) || 'null'); return { ...DEFAULT_SETTINGS, ...(raw || {}) }; } catch { return { ...DEFAULT_SETTINGS }; } } function saveSettings(s) { localStorage.setItem(SETTINGS_KEY, JSON.stringify(s)); } // ─── MENU / ATTRACT SCREEN ─────────────────────────────────────────────────── function MenuScreen({ onNav, history }) { const wins = history.filter(h => h.winner === 'player').length; const total = history.length; const wr = total ? Math.round(100 * wins / total) : 0; return (
{/* Felt bleed up from bottom — same green as the game table */}
{/* Brass grid — same accent as the table edge, very faint */}
{/* Vertical wood-grain striping */}
{/* Wordmark */}
CUTTLE
─── A COMBAT CARD GAME ───
{/* Center row: player stats | cuttlefish portrait */}
{/* Player stats — pix-panel wood-grain style */}
1P SCORE
{String(wins).padStart(6, '0')}
{total} GAMES
{wr}% WIN RATE
{/* Cuttlefish — brass bezel matching the table's card-panel treatment */}
{/* Buttons */}
{/* Credits */}
BY REMO DIVITO · ART: DRAWSGOOD.ITCH.IO · RULES: RICHARD SIPIE
); } // ─── RULES / CHEAT SHEET ───────────────────────────────────────────────────── function RulesScreen({ onBack }) { // Semantic colour palette — same three colours the table uses for callouts. const cyan = '#5fc8b6', mag = '#ff3b8b', yel = '#ffd23f', dim = 'var(--ink-dim)'; // Card chip — a small playing-card shape with the rank inside, coloured by role. const Chip = ({ rank, color }) => (
{rank} {/* suit pip in corner */}
♠
); const Row = ({ rank, label, body, color }) => (
▸{label}
{body}
); const SectionHead = ({ title, tone }) => (
{title}
); return (
{/* Faint felt stripe at top — mirrors the table */}
HOW TO PLAY
{/* Colour key */}
{[[cyan,'UTILITY'],[mag,'ATTACK'],[yel,'PERMANENT'],[dim,'INERT']].map(([c,lbl]) => (
{lbl}
))}
{/* Objective — wood-panel block matching in-game panels */}
OBJECTIVE
Score 21 POINTS before Cuttlebot. Each turn: DRAW or PLAY one card. Most cards have a special effect. You can also SCUTTLE — cover a lower-rank point card with a higher one to send both to the scrap pile.
{/* Point cards */}
Worth face value on your field — or fired as a one-off (then scrapped).
{/* Face cards */}
Always permanents — stay on your field until removed.
); } // ─── HISTORY / HIGH SCORES ─────────────────────────────────────────────────── function HistoryScreen({ onBack, history, onClear }) { const wins = history.filter(h => h.winner === 'player').length; const losses = history.length - wins; const wr = history.length ? Math.round(100 * wins / history.length) : 0; const sortedByScore = history.slice().sort((a, b) => { if ((b.winner === 'player') !== (a.winner === 'player')) return (b.winner === 'player') - (a.winner === 'player'); if (b.playerScore !== a.playerScore) return b.playerScore - a.playerScore; return a.turns - b.turns; }); return (
{/* Sticky header — same wood-panel chrome as menu/rules/settings */}
HIGH SCORES
{history.length > 0 && }
{/* Summary stats */}
{/* Runs table */}
TOP RUNS
{history.length === 0 ? (
─── NO RECORDS YET. INSERT COIN. ───
) : (
RNK
RESULT
DATE
NAME
YOU
BOT
TURNS
{sortedByScore.slice(0, 20).map((g, i) => (
{String(i + 1).padStart(2, '0')}
{g.winner === 'player' ? 'WIN' : 'LOSS'}
{formatDate(g.endedAt)}
{g.winner === 'player' ? (g.name || 'PLAYER1') : 'CUTTLEBOT'}
{String(g.playerScore).padStart(2, '0')}
{String(g.aiScore).padStart(2, '0')}
{g.turns}
))}
)}
); } function Stat({ label, value, color }) { return (
{label}
{value}
); } function formatDate(ts) { const d = new Date(ts); const now = new Date(); const sameDay = d.toDateString() === now.toDateString(); if (sameDay) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false }); return (d.getMonth()+1) + '/' + d.getDate(); } // ─── SETTINGS ──────────────────────────────────────────────────────────────── function SettingsScreen({ onBack, settings, onChange }) { return (
{/* Sticky header */}
SETTINGS
onChange({ ...settings, cardHints: v })} /> onChange({ ...settings, aiDifficulty: v })} />
); } function SettingRow({ label, desc, value, onChange }) { return (
▸ {label}
{desc}
); } function ChoiceRow({ label, desc, value, options, onChange }) { return (
▸ {label}
{desc}
{options.map((opt) => ( ))}
); } // ─── RESULTS ───────────────────────────────────────────────────────────────── function ResultsScreen({ result, onRematch, onMenu }) { const win = result?.winner === 'player'; // Yellow on win, magenta on loss — mirrors the menu's player/boss bezel pairing. const color = win ? 'var(--accent-2)' : 'var(--magenta)'; // Pick once per result so the face doesn't flip between renders. const endMood = React.useMemo(() => pickAIMood( { winner: win ? 'player' : 'ai', turn: (result?.playerScore ?? 0) * 31 + (result?.aiScore ?? 0) }, ), [win, result?.playerScore, result?.aiScore]); const woodStripe = 'repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 8px, rgba(0,0,0,0.07) 8px 9px), linear-gradient(180deg, var(--bg-panel-2) 0%, var(--bg-panel) 100%)'; return (
{/* Felt bleed up from bottom — same green as the game table / menu */}
{/* Brass-bezelled cuttlefish portrait — colour reflects the outcome */}
{win ? '── ROUND CLEAR ──' : '── GAME OVER ──'}
{win ? 'YOU WIN' : 'YOU LOSE'}
{/* Single wood-panel strip housing P1 / CPU / TURNS with ruled dividers */}
{[ ['P1', result?.playerScore ?? 0, 'var(--accent-2)'], ['CPU', result?.aiScore ?? 0, 'var(--accent)'], ['TURNS', result?.turns ?? 0, 'var(--accent-3)'], ].map(([lbl, val, c], i, arr) => (
{lbl}
{String(val).padStart(2, '0')}
{i < arr.length - 1 &&
} ))}
); } // ─── NAME ENTRY ────────────────────────────────────────────────────────────── function NameEntryScreen({ result, onSubmit }) { const [initials, setInitials] = React.useState(() => loadLastName().split('')); const [pos, setPos] = React.useState(0); const [submitted, setSubmitted] = React.useState(false); const [blink, setBlink] = React.useState(true); React.useEffect(() => { const i = setInterval(() => setBlink(b => !b), 350); return () => clearInterval(i); }, []); function setCharAt(i, ch) { setInitials(prev => { const a = [...prev]; a[i] = ch; return a; }); } function cycleChar(delta) { const cur = initials[pos]; const idx = NAME_CHARS.indexOf(cur); const j = ((idx < 0 ? 0 : idx) + delta + NAME_CHARS.length) % NAME_CHARS.length; setCharAt(pos, NAME_CHARS[j]); } function movePos(delta) { setPos(p => Math.max(0, Math.min(2, p + delta))); } function submit() { if (submitted) return; setSubmitted(true); const name = initials.join(''); localStorage.setItem(NAME_KEY, name); onSubmit(name); } React.useEffect(() => { const onKey = (e) => { if (submitted) return; if (e.key === 'ArrowUp') { e.preventDefault(); cycleChar(1); } else if (e.key === 'ArrowDown') { e.preventDefault(); cycleChar(-1); } else if (e.key === 'ArrowLeft') { e.preventDefault(); movePos(-1); } else if (e.key === 'ArrowRight') { e.preventDefault(); movePos(1); } else if (e.key === 'Enter') { e.preventDefault(); if (pos < 2) movePos(1); else submit(); } else if (e.key === 'Backspace') { e.preventDefault(); setCharAt(pos, ' '); if (pos > 0) movePos(-1); } else if (e.key && e.key.length === 1) { const ch = e.key.toUpperCase(); if (NAME_CHARS.includes(ch)) { e.preventDefault(); setCharAt(pos, ch); if (pos < 2) setPos(p => p + 1); } } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [pos, initials, submitted]); const woodStripe = 'repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 8px, rgba(0,0,0,0.07) 8px 9px), linear-gradient(180deg, var(--bg-panel-2) 0%, var(--bg-panel) 100%)'; return (
── NEW HIGH SCORE ──
ENTER YOUR NAME
{String(result?.playerScore ?? 0).padStart(2, '0')} PTS · {result?.turns ?? 0} TURNS
{initials.map((ch, i) => { const active = i === pos; return (
▲
setPos(i)} style={{ width: 88, height: 118, cursor: 'pointer', background: woodStripe, boxShadow: active ? '0 0 0 3px var(--bg-deep), 0 0 0 6px var(--accent-2), 0 0 24px rgba(255,210,63,0.4)' : '0 0 0 3px var(--bg-deep), 0 0 0 5px var(--line-bright), 6px 6px 0 5px rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'VT323, monospace', fontSize: 88, color: active ? 'var(--accent-2)' : 'var(--ink)', textShadow: active ? '0 0 14px var(--accent-2)' : 'none', lineHeight: 1, transition: 'box-shadow 120ms, color 120ms', userSelect: 'none', }}> {ch === ' ' ? '_' : ch}
▼
); })}
ARROWS TO CHOOSE · TYPE TO SET · ENTER TO CONFIRM
); } // ─── WELCOME / FIRST-TIME RULES POPUP ──────────────────────────────────────── function WelcomePopup({ onClose }) { return (
── BRIEFING ──
CUTTLE
A COMBAT CARD GAME
▸ First to 21 POINTS wins.
▸ Play a card for its points, or its one-off / permanent effect.
▸ Hover any card to see what it does.
FULL RULES VIA THE ? BUTTON · TOP RIGHT
); } // ─── GAME WRAPPER (CRT cabinet chrome around the table) ────────────────────── function GameScreen({ seed, dealer, settings, onSettingsChange, onGameOver, onMenu }) { const [showRules, setShowRules] = React.useState(false); const [showSettings, setShowSettings] = React.useState(false); const [showIntro, setShowIntro] = React.useState(() => { try { return !localStorage.getItem(SEEN_INTRO_KEY); } catch { return false; } }); const { w: vw, h: vh } = useViewport(); const sizes = (window.responsiveSizes || (() => ({ hudH: 56 })))(vw, vh); const hudH = sizes.hudH; function dismissIntro() { try { localStorage.setItem(SEEN_INTRO_KEY, '1'); } catch {} setShowIntro(false); } // Push the AI difficulty into the (singleton) wasm engine adapter whenever // settings change. The adapter holds a process-global default that all // aiChooseAction calls fall back to when no per-call override is supplied. React.useEffect(() => { const d = settings?.aiDifficulty ?? 'EASY'; window.CuttleEngine?.setDifficulty?.(d); }, [settings?.aiDifficulty]); // HUD font shrinks with the bar height so labels still fit on small screens. const hudFont = Math.round(hudH * 0.4); return (
{/* Top arcade HUD bar */}
▸ STAGE 01 · CUTTLEBOT
{showRules && (
setShowRules(false)} />
)} {showIntro && } {showSettings && (
setShowSettings(false)} settings={settings} onChange={onSettingsChange} />
)}
); } // ─── TOO-SMALL GATE ────────────────────────────────────────────────────────── // Below 760×760 even the responsive layout in responsive.mjs can't fit cleanly, // so we replace the whole app with a friendly arcade-style "cabinet too small" // notice. Above 760 the layout scales smoothly to the desktop ceiling at 1050. const MIN_W = 760; const MIN_H = 760; function useViewport() { const [v, setV] = React.useState(() => ({ w: window.innerWidth, h: window.innerHeight })); React.useEffect(() => { const onResize = () => setV({ w: window.innerWidth, h: window.innerHeight }); window.addEventListener('resize', onResize); window.addEventListener('orientationchange', onResize); return () => { window.removeEventListener('resize', onResize); window.removeEventListener('orientationchange', onResize); }; }, []); return v; } function TooSmallGate({ w, h }) { const [show, setShow] = React.useState(true); React.useEffect(() => { const i = setInterval(() => setShow(s => !s), 600); return () => clearInterval(i); }, []); const wOk = w >= MIN_W; const hOk = h >= MIN_H; return (
── CABINET TOO SMALL ──
INSERT BIGGER
SCREEN
This cabinet is calibrated for a viewport of at least
{MIN_W} × {MIN_H}
{/* Current size readout — colour-coded per axis so the player sees which one is too small. */}
YOU {wOk ? '◆' : '✕'} {w}w × {hOk ? '◆' : '✕'} {h}h
▸ Resize this window taller / wider
▸ Maximise the browser, hide the bookmarks bar
▸ Or come back from a desktop monitor
AWAITING LARGER CABINET
); } // ─── App ───────────────────────────────────────────────────────────────────── function App() { const { w, h } = useViewport(); const tooSmall = w < MIN_W || h < MIN_H; const [screen, setScreen] = React.useState('MENU'); const [history, setHistory] = React.useState(loadHistory); const [settings, setSettings] = React.useState(loadSettings); const [result, setResult] = React.useState(null); // ?seed=N in the URL forces a deterministic starting deck — useful for tests // and bug repro. Honoured for both the initial mount and subsequent rematches. const urlSeed = (() => { try { const v = new URL(location.href).searchParams.get('seed'); const n = v == null ? null : Number(v); return Number.isFinite(n) ? n : null; } catch { return null; } })(); const [seed, setSeed] = React.useState(() => urlSeed ?? Math.floor(Math.random() * 1e9)); // Dealer for the current game: 1 = AI deals (player goes first; default), // 0 = player deals (AI goes first). Set freshly on each startGame via the // alternating localStorage counter; placeholder 1 before any game starts. const [dealer, setDealer] = React.useState(1); function nav(s) { setScreen(s); } function startGame() { setSeed(urlSeed ?? Math.floor(Math.random() * 1e9)); setDealer(consumeNextDealer()); setResult(null); setScreen('GAME'); } function onGameOver(r) { setResult(r); if (r.winner === 'player') { setTimeout(() => setScreen('NAME_ENTRY'), 1300); } else { const next = [...history, r]; setHistory(next); saveHistory(next); setTimeout(() => setScreen('RESULTS'), 1300); } } function submitName(name) { const entry = { ...result, name }; const next = [...history, entry]; setHistory(next); saveHistory(next); setResult(entry); setScreen('RESULTS'); } if (tooSmall) return ; return (
{screen === 'MENU' && s === 'GAME' ? startGame() : nav(s)} history={history} />} {screen === 'GAME' && { setSettings(s); saveSettings(s); }} onGameOver={onGameOver} onMenu={() => nav('MENU')} />} {screen === 'RULES' && nav('MENU')} />} {screen === 'HISTORY' && nav('MENU')} history={history} onClear={() => { setHistory([]); saveHistory([]); }} />} {screen === 'SETTINGS' && nav('MENU')} settings={settings} onChange={(s) => { setSettings(s); saveSettings(s); }} />} {screen === 'NAME_ENTRY' && } {screen === 'RESULTS' && nav('MENU')} />}
); } function mount() { ReactDOM.createRoot(document.getElementById('root')).render(); } if (window.CuttleEngine) mount(); else window.addEventListener('cuttle-ready', mount, { once: true });