// 777 Strike — root app, slot game state machine.
const { useState, useEffect, useRef, useMemo } = React;
const { IOSDevice } = window;
const { Reel, PaytableStrip, Icons, CrownBgPattern, GreenPill, SpinDisc, WinNumber, CoinRain,
SidebarMenu, StakeModal, AutoplayModal, SplashOverlay, PaytableScreen, LobbyScreen,
buildStrip, SYMBOL_PX, SYMBOL_ORDER, LogoBadge } = window;
const SYM = window.SYMBOLS;
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "emerald",
"outcome": "random",
"bonus_enabled": true,
"reel_speed": 1.0,
"frame": "iphone"
}/*EDITMODE-END*/;
const THEMES = {
emerald: {
name: 'Emerald',
bg1: '#0e3a22', bg2: '#14502e', bg3: '#197a3e',
btnA: '#1a6e3e', btnB: '#0d4827',
accent: '#f4c243',
},
noir: {
name: 'Noir Gold',
bg1: '#0a0a14', bg2: '#1a1a2e', bg3: '#2a2a4a',
btnA: '#3a3a5e', btnB: '#1a1a2e',
accent: '#f4c243',
},
ruby: {
name: 'Ruby',
bg1: '#3a0a10', bg2: '#6a1424', bg3: '#8a1f2e',
btnA: '#7a2a3a', btnB: '#4a0a14',
accent: '#f4c243',
},
};
// Convert a server spin result into the {stripIndex, highlight} board the Reel
// component renders. The server is the source of truth — this is pure mapping.
function boardFromServerResult(result) {
const rows = [[], [], [], [], []];
for (const w of (result.wins || [])) {
for (const { reel, row } of (w.rows || [])) {
if (!rows[reel].includes(row)) rows[reel].push(row);
}
}
return result.reelStops.map((stripIndex, i) => ({ stripIndex, highlight: rows[i] }));
}
// Classify a spin's "win type" for the UI overlay variants.
function classifyWin(result) {
if (result.bonus && result.bonus.triggered) return 'bonus-trigger';
if (result.totalWin <= 0) return null;
if (result.totalWin >= result.stake * 20) return 'big';
return 'normal';
}
function SlotGame({ tweaks, setTweak, inFrame }) {
const theme = THEMES[tweaks.theme] || THEMES.emerald;
const [balance, setBalance] = useState(0);
const [stake, setStake] = useState(1.00);
const [spinning, setSpinning] = useState(false);
const [showWin, setShowWin] = useState(null); // amount or null
const [winType, setWinType] = useState(null); // 'normal' | 'big' | 'bonus-trigger'
const [board, setBoard] = useState(null); // current displayed board
const [screen, setScreen] = useState('splash'); // 'splash' | 'main'
const [overlay, setOverlay] = useState(null); // 'paytable' | 'lobby' | null
const [modal, setModal] = useState(null); // 'stake' | 'auto' | 'menu' | null
const [sound, setSound] = useState(true);
const [turbo, setTurbo] = useState(false);
const [splashSlide, setSplashSlide] = useState(0);
const [autoCount, setAutoCount] = useState(25);
const [autoRemaining, setAutoRemaining] = useState(0);
const [freeSpinsRemaining, setFreeSpinsRemaining] = useState(0);
const [freeSpinsBank, setFreeSpinsBank] = useState(0);
const [spinNonce, setSpinNonce] = useState(0);
const [inFreeSpins, setInFreeSpins] = useState(false);
const [serverConfig, setServerConfig] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
// Reels come from the server (sent on /init); fall back to local buildStrip
// for the very first paint before init resolves.
const reels = useMemo(() => {
if (!serverConfig) return Array.from({ length: 5 }, (_, i) => buildStrip(i + 1));
const base = serverConfig.reels.base;
return [base[1], base[2], base[3], base[4], base[5]];
}, [serverConfig]);
// Fetch config + balance + restore active bonus session on mount.
useEffect(() => {
let cancelled = false;
(async () => {
// client.js may not have run yet under exotic script-ordering — poll briefly.
for (let i = 0; i < 40 && !window.GameAPI && !cancelled; i++) {
await new Promise(r => setTimeout(r, 50));
}
if (cancelled) return;
if (!window.GameAPI) { setErrorMsg('Client script failed to load — refresh'); return; }
try {
const cfg = await window.GameAPI.ready;
if (cancelled) return;
setServerConfig(cfg);
setBalance(cfg.player?.balance ?? 0);
const resume = await window.GameAPI.resume();
if (cancelled) return;
if (resume.activeBonus) {
setInFreeSpins(true);
setFreeSpinsRemaining(resume.activeBonus.spinsRemaining);
setFreeSpinsBank(resume.activeBonus.accumulatedWin);
setStake(resume.activeBonus.baseStake);
}
} catch (err) {
if (!cancelled) setErrorMsg(`Connect to server failed — ${err.message || 'refresh'}`);
}
})();
return () => { cancelled = true; };
}, []);
// Initialize board placeholder (random middle row) while waiting for first spin.
useEffect(() => {
if (!board && reels.length) {
setBoard(reels.map(s => ({ stripIndex: Math.floor(Math.random() * s.length), highlight: [] })));
}
}, [board, reels]);
// Spin animation timing.
const baseDuration = 1600;
const speedMul = tweaks.reel_speed || 1.0;
const turboMul = turbo ? 0.4 : 1.0;
const spinDur = baseDuration / speedMul * turboMul;
// Server-driven spin. Animation runs in parallel with the network round-trip;
// we await both before settling. All outcome decisions come from the server.
async function spin() {
if (spinning) return;
if (!serverConfig) return;
const inBonus = inFreeSpins && freeSpinsRemaining > 0;
if (!inBonus && balance < stake) return;
setShowWin(null);
setSpinning(true);
setSpinNonce(n => n + 1);
setErrorMsg(null);
// Optimistic balance debit for base spins so the UI feels snappy;
// server response will reconcile.
const previousBalance = balance;
if (!inBonus) setBalance(b => b - stake);
const animationDelay = 4 * 120 + spinDur + 100;
const start = Date.now();
let result;
try {
result = inBonus
? await window.GameAPI.bonusSpin()
: await window.GameAPI.spin(stake);
} catch (err) {
// Roll back optimistic debit; restore previous board.
setBalance(previousBalance);
setSpinning(false);
setErrorMsg(err.message || 'spin failed');
return;
}
const elapsed = Date.now() - start;
const remaining = Math.max(0, animationDelay - elapsed);
setTimeout(() => {
setSpinning(false);
setBoard(boardFromServerResult(result));
setBalance(result.balance);
const winType = classifyWin(result);
setWinType(winType);
if (result.totalWin > 0) {
setShowWin(result.totalWin);
if (inBonus) setFreeSpinsBank(b => b + result.totalWin);
}
// Drive bonus state from the server response.
if (result.bonus && result.bonus.triggered && !inBonus) {
// Base game triggered Free Spins.
setTimeout(() => {
setInFreeSpins(true);
setFreeSpinsRemaining(result.bonus.spinsAwarded);
setFreeSpinsBank(0);
}, 1400);
} else if (inBonus && result.bonus) {
setFreeSpinsRemaining(result.bonus.spinsRemaining);
if (result.bonus.exhausted) {
setTimeout(() => setInFreeSpins(false), 2000);
}
}
if (result.totalWin > 0) {
setTimeout(() => setShowWin(null), winType === 'big' ? 3000 : 2000);
}
}, remaining);
}
// Autoplay
useEffect(() => {
if (autoRemaining > 0 && !spinning && screen === 'main') {
const t = setTimeout(() => {
spin();
setAutoRemaining(n => n - 1);
}, 600);
return () => clearTimeout(t);
}
}, [autoRemaining, spinning, screen]);
// Auto-spin during free spins
useEffect(() => {
if (freeSpinsRemaining > 0 && !spinning && screen === 'main' && inFreeSpins) {
const t = setTimeout(() => spin(), 1200);
return () => clearTimeout(t);
}
}, [freeSpinsRemaining, spinning, screen, inFreeSpins]);
// ── Render ──
const bgStyle = {
background: `linear-gradient(180deg, ${theme.bg1} 0%, ${theme.bg2} 40%, ${theme.bg3} 100%)`,
};
// Reels area
const reelsBlock = (
{reels.map((strip, i) => (
))}
{/* Win line overlay */}
{!spinning && winType === 'normal' && board && board.every(r => r.highlight.includes(1)) && (
)}
{/* Win number overlay (smaller, normal wins) */}
{showWin !== null && winType === 'normal' && (
)}
);
// Header (balance + sound + menu).
const header = (
BALANCE
{balance.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
);
// Logo + paytable strip row.
const logoRow = (
setOverlay('paytable')}/>
);
// Bottom controls.
const bottomControls = (
);
// Footer: PAYS | HELP | 777 STRIKE | ID.
const footer = (
setOverlay('paytable')} style={{ textDecoration: 'underline', cursor: 'pointer', fontWeight: 700 }}>PAYS
|
HELP
|
777 STRIKE
|
ID: 97973988
);
// Bottom nav.
const bottomNav = (
{[
{ icon: 'home', label: 'Red Tiger' },
{ icon: 'dice', label: 'Games' },
{ icon: 'news', label: 'Posts' },
{ icon: 'menuBottom', label: 'Menu' },
].map((it, i) => {
const Icon = Icons[it.icon];
return (
);
})}
);
// Free spins HUD strip.
const freeSpinsHud = inFreeSpins ? (
FREE SPINS
{freeSpinsRemaining}
TOTAL WIN
{freeSpinsBank.toFixed(2)}
) : null;
// Big win overlay (full takeover).
const bigWinOverlay = winType === 'big' && showWin !== null ? (
BIG WIN
{showWin.toFixed(2)}
{(showWin / stake).toFixed(0)}x YOUR STAKE
) : null;
// Bonus trigger overlay.
const bonusTriggerOverlay = winType === 'bonus-trigger' && !spinning && !inFreeSpins ? (
10 FREE SPINS
AWARDED · GET READY!
) : null;
return (
{header}
{/* spacer above logo+reels */}
{logoRow}
{reelsBlock}
{freeSpinsHud}
{/* spacer below reels */}
{bottomControls}
{footer}
{bottomNav}
{screen === 'splash' && (
setSplashSlide(s => (s - 1 + 3) % 3)}
onNext={() => setSplashSlide(s => (s + 1) % 3)}
onPlay={() => setScreen('main')}
/>
)}
{overlay === 'paytable' && setOverlay(null)}/>}
{overlay === 'lobby' && setOverlay(null)}/>}
setModal(null)}
onNav={(t) => { setModal(null); setOverlay(t); }}
sound={sound}
onSound={() => setSound(s => !s)}
/>
setModal(null)}
/>
{ setAutoRemaining(autoCount); setModal(null); }}
onClose={() => setModal(null)}
/>
{bigWinOverlay}
{bonusTriggerOverlay}
{errorMsg && (
{errorMsg}
)}
);
}
// Tweaks panel.
function MyTweaks({ tweaks, setTweak }) {
const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle, TweakSlider } = window;
return (
setTweak('theme', v)}
/>
setTweak('frame', v)}
/>
setTweak('outcome', v)}
/>
setTweak('bonus_enabled', v)}
/>
setTweak('reel_speed', v)}
/>
);
}
function App() {
const { useTweaks } = window;
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const useFrame = tweaks.frame === 'iphone';
const game = (
);
return (
{useFrame ? (
) : (
{game}
)}