/* global React, ReactDOM, SlotReel */ /* eslint-disable */ const PREFS_KEY = 'slotMachinePrefs'; const SESSION_KEY = 'slotMachineSession'; const BET_OPTIONS = [1, 5, 25, 100]; const SPIN_DURATION = 1100; const REEL_STAGGER = 250; const TOTAL_SPIN = SPIN_DURATION + REEL_STAGGER * 2 + 200; const CELL_PX = 160; const PAYTABLE_CELL_PX = 36; const HISTORY_CELL_PX = 28; const MAX_HISTORY = 14; function loadPrefs() { try { const raw = JSON.parse(localStorage.getItem(PREFS_KEY) || 'null'); if (raw && typeof raw === 'object') { const themeId = ['classic', 'lucky', 'mythic'].indexOf(raw.themeId) >= 0 ? raw.themeId : 'classic'; const bet = BET_OPTIONS.indexOf(Number(raw.bet)) >= 0 ? Number(raw.bet) : 5; return { themeId: themeId, bet: bet }; } } catch (e) {} return { themeId: 'classic', bet: 5 }; } function freshSession() { return { spins: 0, wagered: 0, won: 0, biggest: 0, hits: 0, jackpots: 0, streak: 0, // positive = consecutive wins, negative = consecutive losses bestStreak: 0, worstStreak: 0, startedAt: Date.now(), history: [] // newest first }; } function loadSession() { try { const raw = JSON.parse(localStorage.getItem(SESSION_KEY) || 'null'); if (raw && typeof raw === 'object' && typeof raw.spins === 'number') { return Object.assign(freshSession(), raw); } } catch (e) {} return freshSession(); } function saveSession(s) { try { localStorage.setItem(SESSION_KEY, JSON.stringify(s)); } catch (e) {} } function fmtUsd(n) { const sign = n < 0 ? '-' : ''; return sign + '$' + Math.abs(n).toLocaleString(); } function fmtSignedUsd(n) { if (n === 0) return '$0'; return (n > 0 ? '+$' : '-$') + Math.abs(n).toLocaleString(); } function relativeTime(ts, now) { const ms = Math.max(0, now - ts); if (ms < 60000) return Math.max(1, Math.round(ms / 1000)) + 's'; if (ms < 3600000) return Math.round(ms / 60000) + 'm'; return Math.round(ms / 3600000) + 'h'; } function SlotApp() { const ENGINE = window.SLOT_ENGINE; const THEMES = window.SLOT_THEMES; const initial = loadPrefs(); const [themeId, setThemeId] = React.useState(initial.themeId); const [bet, setBet] = React.useState(initial.bet); const [bankroll, setBankroll] = React.useState(window.CASINO_BANKROLL.read()); const [stops, setStops] = React.useState([0, 7, 14]); const [spinning, setSpinning] = React.useState(false); const [lastResult, setLastResult] = React.useState(null); const [session, setSession] = React.useState(loadSession); const [, setNowTick] = React.useState(0); React.useEffect(function () { localStorage.setItem(PREFS_KEY, JSON.stringify({ themeId: themeId, bet: bet })); }, [themeId, bet]); React.useEffect(function () { saveSession(session); }, [session]); // Re-render every 30s so "12s ago"/"3m ago" labels tick along. React.useEffect(function () { const id = setInterval(function () { setNowTick(function (n) { return n + 1; }); }, 30000); return function () { clearInterval(id); }; }, []); const theme = THEMES.find(function (t) { return t.id === themeId; }) || THEMES[0]; const canSpin = !spinning && bankroll >= bet; function spin() { if (!canSpin) return; const postBet = bankroll - bet; window.CASINO_BANKROLL.write(postBet); setBankroll(postBet); setLastResult(null); const newStops = [ENGINE.spinReel(), ENGINE.spinReel(), ENGINE.spinReel()]; const result = ENGINE.evaluatePayout(newStops, bet); setStops(newStops); setSpinning(true); setTimeout(function () { setSpinning(false); let postBalance = postBet; if (result.win > 0) { const post = window.CASINO_BANKROLL.read() + result.win; window.CASINO_BANKROLL.write(post); setBankroll(post); postBalance = post; } if (window.CASINO_STATS) { window.CASINO_STATS.recordEvent('slotMachine', { won: result.win > 0, payout: Math.max(0, result.win), rare: result.kind === 'jackpot' ? 'slotJackpot' : null, }); window.CASINO_STATS.recordPeak(postBalance); } setLastResult(result); // Record session stats + history setSession(function (prev) { const won = result.win > 0; const prevStreak = prev.streak; const nextStreak = won ? (prevStreak >= 0 ? prevStreak + 1 : 1) : (prevStreak <= 0 ? prevStreak - 1 : -1); const newEntry = { ts: Date.now(), bet: bet, win: result.win, kind: result.kind, symbols: result.symbols, themeRow: theme.spriteRow }; const history = [newEntry].concat(prev.history).slice(0, MAX_HISTORY); return { spins: prev.spins + 1, wagered: prev.wagered + bet, won: prev.won + result.win, biggest: Math.max(prev.biggest, result.win), hits: prev.hits + (won ? 1 : 0), jackpots: prev.jackpots + (result.kind === 'jackpot' ? 1 : 0), streak: nextStreak, bestStreak: Math.max(prev.bestStreak, nextStreak), worstStreak: Math.min(prev.worstStreak, nextStreak), startedAt: prev.startedAt, history: history }; }); }, TOTAL_SPIN); } function resetSession() { setSession(freshSession()); setLastResult(null); } // Build the paytable rows for the current theme. Highest payout first. const paytableRows = [5, 4, 3, 2, 1, 0].map(function (i) { return { symIdx: i, label: theme.symbolNames[i], mult: ENGINE.PAYOUTS[i], isWild: i === ENGINE.WILD }; }); const net = session.won - session.wagered; const hitRate = session.spins > 0 ? Math.round((session.hits / session.spins) * 100) : 0; const avgWin = session.hits > 0 ? Math.round(session.won / session.hits) : 0; const now = Date.now(); return (
‹ Casino

Slot Machine {theme.name}

${bankroll.toLocaleString()}
Cash out · profile
{THEMES.map(function (t) { const active = t.id === themeId; return ( ); })}
{[0, 1, 2].map(function (i) { return ( ); })}
{lastResult && lastResult.win > 0 && (
{lastResult.kind === 'jackpot' ? 'JACKPOT' : 'WIN'} +${lastResult.win.toLocaleString()}
)} {lastResult && lastResult.win === 0 && (
no match — try again
)}
Bet
{BET_OPTIONS.map(function (b) { const active = b === bet; return ( ); })}
Pays · 3-of-a-kind on the line · Wild substitutes for any symbol · RTP ~93.6%
{paytableRows.map(function (row) { return (
{row.label} ×{row.mult}
); })}
); } ReactDOM.render(React.createElement(SlotApp), document.getElementById('root'));