{t("fair.how_title")}

{t("fair.how_desc")}

{t("fair.step1")}

{t("fair.step2")}

{t("fair.step3")}

)} {tab==="seeds" && (

{t("fair.how_title")}

{t("fair.how_desc")}

{t("fair.active_seed")} {if(!useNonce)setNewSeed(e.target.value)}} readOnly={useNonce}/>

{t("fair.seed_hash")}

{seedHash||t("common.loading")}

)} {tab==="verify" && } ); } function HistoryDrawer({ onClose, clientSeed }) { const [rounds, setRounds] = useState([]); const [loading, setLoading] = useState(true); const [expanded, setExpanded] = useState(null); const [verifyResults, setVerifyResults] = useState({}); useEffect(()=>{api("/api/v1/history?limit=50").then(d=>{setRounds(d.rounds||[]);setLoading(false)}).catch(()=>setLoading(false))},[]); const doVerify = async (r, i) => { // /history nests dice_count under game_data; r.dice_count itself is // always undefined, so sending it directly produced a silent 400 in // the backend and the Verified panel rendered with stale dice from // whatever verify previously succeeded. Read the right field, and // surface a real error instead of swallowing the rejection. const diceCount = (r.game_data && r.game_data.dice_count) || r.dice_count || 1; const clientSeedUsed = r.client_seed || clientSeed; try { const result = await api("/api/v1/verify", {method:"POST", body:{ server_seed: r.server_seed, client_seed: clientSeedUsed, nonce: 0, dice_count: diceCount }}); setVerifyResults(prev => ({...prev, [i]: result})); } catch(e) { setVerifyResults(prev => ({...prev, [i]: { error: e.message || t("verify.failed") }})); } }; const HistDice = ({win,push}) => ; const ChevDown = () => ; const ChevUp = () => ; return ( {loading ? (

{t("common.loading")}

) : rounds.length === 0 ? (

{t("history.empty")}

) : (

{rounds.map((r, i) => { const isWin = r.outcome === "win" || r.outcome === "cashout"; const isPush = r.outcome === "tie"; const isExp = expanded === i; const vr = verifyResults[i]; const gd = r.game_data || {}; const dc = r.dice_count || gd.dice_count || 1; const rolls = r.rolls || gd.step || 1; const mult = r.multiplier || gd.multiplier || "0.00"; const profit = +(r.profit || 0); const cost = +(r.total_cost || 0); return (

setExpanded(isExp?null:i)}>

{dc} {dc===1?t("history.die"):t("history.dice")} ${cost.toFixed(2)} - {rolls} {rolls>1?t("history.rolls"):t("history.roll")}

{mult} X {isPush ? t("history.push") : isWin ? "$ "+profit.toFixed(2) : "- $ "+Math.abs(profit).toFixed(2)}

{isExp ? : }

{isExp && (

e.stopPropagation()}>

{t("history.server_seed")} {r.server_seed || "—"}

{t("fair.seed_hash")} {r.seed_hash || "—"}

{!vr ? ( ) : vr.error ? ( ) : ( <>

{t("verify.verified_title")}

{t("verify.verified_sub")}

{t("verify.dealer")} [{(vr.dealer_dice||[]).join(", ")}]

= {vr.dealer_total}

{t("verify.player")} [{(vr.player_dice||[]).join(", ")}]

= {vr.player_total}

)}

); })}

)} ); } function InfoDrawer({ onClose, odds, config }) { const o1=odds["1"]||{},o2=odds["2"]||{},o3=odds["3"]||{}; const DiceIcon = () => ; const RiskLow = () => ; const RiskMed = () => ; const RiskHigh = () => ; return (

{/* Intro */}

{t("htp.intro")}

{/* Place Your Bet and Roll */}

{t("htp.card1_title")}

{/* Cashout preview */}

{t("htp.preview_cashout_btn")}

{t("htp.cashout")} {t("htp.cashout_desc")}

{t("htp.payout_chip", {mult: o3.multiplier||"1.15"})}

{/* Double preview */}

{t("htp.preview_double_btn")}

{t("htp.double")} {t("htp.double_desc")}

{t("htp.roll_again")}

{/* Stats table */}

{t("htp.min_bet")} $ {config.min_bet||"0.10"}

{t("htp.max_bet")} $ {(+config.max_bet||100).toFixed(2)}

{t("htp.rtp")} 96.5 %

{/* Warning */}

{t("htp.warning_pre")}{t("htp.warning_red")}{t("htp.warning_post")}

{/* Risk Levels */}

{t("htp.risk_levels")}

{/* Low risk - 3 dice */}

{o3.multiplier||"1.15"}x {t("htp.low")}

{/* Medium risk - 2 dice */}

{o2.multiplier||"1.92"}x {t("htp.medium")}

{/* High risk - 1 die */}

{o1.multiplier||"9.67"}x {t("htp.high")}

{/* Provably Fair footer */}

{t("htp.footer_pre")}{t("drawer.provably_fair")}{t("htp.footer_post")}

); } /* ── Free Round Modals ── */ function FreeRoundWelcomeModal({ total, betAmount, currencySymbol, onStart }) { return (

e.stopPropagation()}>

{t("fr.welcome_title")}

{t("fr.welcome_received_pre")}{t("fr.free_rounds_n", {n: total})}

{t("fr.bet_amount_pre")}{currencySymbol}{betAmount || "—"}{t("fr.per_round")}

); } function FreeRoundCompleteModal({ total, winnings, currencySymbol, onContinue }) { const isPositive = winnings >= 0; return (

e.stopPropagation()}>

{t("fr.complete_title")}

{t("fr.played_pre")}{t("fr.rounds_n", {n: total})}

{t("fr.total_winnings")} {isPositive?"+":""}{currencySymbol}{Math.abs(winnings).toFixed(2)}

); } function FreeRoundCounter({ used, total, winnings }) { return (

{t("fr.counter", {used, total})} {t("fr.total_win_label")} ${winnings.toFixed(2)}

); } /* ── Main Game ── */ function Game() { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [balance, setBalance] = useState("0.00"); const [currency, setCurrency] = useState("USD"); // Currency symbol — the session currency comes from the API (/state // d.currency) and can be any ISO code or crypto ticker the operator // runs. Map the common ones to a glyph; fall back to the code itself // with a trailing space (e.g. "USDT 10.00") so an unmapped currency // still renders sensibly rather than guessing a wrong symbol. // Declared up here (not in the render body) so the bet/double handlers // below can build toast strings with it. const currSymbol = CURRENCY_SYMBOLS[currency] || (currency ? currency + " " : "$"); const [odds, setOdds] = useState({}); const [config, setConfig] = useState({}); const [seedHash, setSeedHash] = useState(""); const [clientSeed, setClientSeed] = useState(""); const [useNonce, setUseNonce] = useState(false); const [clientNonce, setClientNonce] = useState(0); // Bet + dice-count persist in localStorage so they survive refresh / // tab close. Clamped against the merchant's live min_bet/max_bet once // /state lands (the persisted value might be outside a new merchant's // range). Free-round entry still resets to 10 (campaign bet is fixed // server-side anyway; that path overrides what the player chose). const [bet, setBet] = useState(() => { if (typeof localStorage === "undefined") return 1; try { const saved = JSON.parse(localStorage.getItem("dice_bet_data")); if (saved && saved.bet > 0) return saved.bet; } catch(e) {} return 1; }); const [dc, setDc] = useState(() => { if (typeof localStorage === "undefined") return 2; const v = +localStorage.getItem("dice_dc"); return v >= 1 && v <= 3 ? v : 2; }); useEffect(() => { try { localStorage.setItem("dice_bet_data", JSON.stringify({ bet })); } catch(e){} }, [bet]); useEffect(() => { try { localStorage.setItem("dice_dc", String(dc)); } catch(e){} }, [dc]); // Keep pDice's length in lockstep with dc (handles the dc selector // changing mid-session). The setPDice has its own dep on prev so it // no-ops when length already matches and never thrashes the dice // graphics for a "same length" change. // Pre-size pDice to match dc so the ZdogDiceGroup never sees its // dice.length grow mid-roll. If we let pDice start [1] (length 1) and // grow to dc on the first /bet response, then setRolling(true) fires // ROLLING with the OLD length, only marks die 0 as rolling, and the // values-arriving effect can't assign a target to dice >= 1 (their // d.phase stays "idle"; the React `rolling` is still true so the // snap branch is also gated). Those slots silently freeze at face 1. const [rolling, setRolling] = useState(false); const [rollSeq, setRollSeq] = useState(0); const [phase, setPhase] = useState("idle"); const [dDice, setDDice] = useState([1,1]); // Initial length must match the persisted dc — read localStorage here // (not via the useState init for dc above, which already resolved that) // so the very first render already has the right number of player dice. const [pDice, setPDice] = useState(() => { if (typeof localStorage === "undefined") return [1, 1]; const v = +localStorage.getItem("dice_dc"); const n = v >= 1 && v <= 3 ? v : 2; return new Array(n).fill(1); }); const [result, setResult] = useState(null); const resultTimerRef = React.useRef(null); const clearResultLater = () => { if(resultTimerRef.current) clearTimeout(resultTimerRef.current); resultTimerRef.current = setTimeout(()=>{ setResult(null); resultTimerRef.current=null; }, 2000); }; const [recentResults, setRecentResults] = useState([]); // Resize pDice if the dc selector changes between rolls. Same reason // as the lazy-init above — ZdogDiceGroup's rolling-start snapshots // dice.length, so the array MUST already be sized to dc before the // next setRolling(true), or the new slot is left forever at face 1. useEffect(() => { setPDice(prev => prev.length === dc ? prev : new Array(dc).fill(1)); }, [dc]); /* Sequential round state — the double/cashout chain lives on the backend. roundId is the active round; pot is the server-reported pot at stake. */ const [doubleMode, setDoubleMode] = useState(false); const [pot, setPot] = useState(0); const [roundId, setRoundId] = useState(""); const [originalBet, setOriginalBet] = useState(0); const [doubleDc, setDoubleDc] = useState(1); const [currentStep, setCurrentStep] = useState(0); /* Free Rounds state */ const [freeRoundsTotal, setFreeRoundsTotal] = useState(0); const [freeRoundsUsed, setFreeRoundsUsed] = useState(0); const [freeRoundsActive, setFreeRoundsActive] = useState(false); const [freeRoundsWinnings, setFreeRoundsWinnings] = useState(0); const [freeRoundsBet, setFreeRoundsBet] = useState(""); const [showFreeRoundWelcome, setShowFreeRoundWelcome] = useState(false); const [showFreeRoundComplete, setShowFreeRoundComplete] = useState(false); const [freeRoundsEnded, setFreeRoundsEnded] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false); const [drawerTab, setDrawerTab] = useState("fair"); const [showMuted, setShowMuted] = useState(SFX.isMuted()); const [showMenu, setShowMenu] = useState(false); const [cashoutAlert, setCashoutAlert] = useState(null); const [insufficientToast, setInsufficientToast] = useState(false); const [roundToast, setRoundToast] = useState(null); useEffect(() => { (async () => { const minLoadTime = new Promise(r => setTimeout(r, 2500)); try { await bootstrapDemo(); const d = await api("/api/v1/state"); const gameOdds = (d.game_data && d.game_data.odds) || d.odds || {}; setBalance(d.balance); setCurrency(d.currency); setOdds(gameOdds); setConfig(d.config); setSeedHash(d.next_seed_hash); setClientSeed(d.client_seed); // Clamp the localStorage-restored bet to this merchant's range — // if it persisted from a different merchant (or admin tightened // limits), snap it to the boundary instead of letting the player // submit an out-of-range bet that the backend will reject. if (d.config) { const mn = +d.config.min_bet || 0.1; const mx = +d.config.max_bet || 100; setBet(b => (b < mn ? mn : b > mx ? mx : b)); } // Seed the recent-results dot strip from server-side history so // a refresh / new tab doesn't make the strip look empty. Strip // shows up to 5 most recent rounds, newest first. Best-effort: // if /history fails, we just start with [] and add live rolls // as the player plays. try { const h = await api("/api/v1/history?limit=5"); const rs = (h && h.rounds) || []; // Newest-first; outcome derived from game_data.roll_outcome // when present, falling back to profit (positive=win, // negative=lose, zero=tie/push) so sequential cashouts that // surface as "cashout" still colour the dot green. const outcomes = rs.map(r => { const ro = r.game_data && r.game_data.roll_outcome; if (ro === "win" || ro === "tie" || ro === "lose") return ro; const p = +r.profit; if (p > 0) return "win"; if (p < 0) return "lose"; return "tie"; }).slice(0, 5); setRecentResults(outcomes); } catch(e) {} await minLoadTime; setLoading(false); // Resume an in-progress round if the backend reports one for this // player + game. Without this a player who closed the browser // mid-chain has no way to reach their pot — it sits invisible // until the active round expires and gets forfeited. A new bet // can't start while a round is open anyway, so do this before // the free-round welcome (which would offer to start one). if (d.active_round_id) { const rs = await fetchRoundState(d.active_round_id); if (rs && rs.game_data) { const gd = rs.game_data; const rolls = gd.rolls || []; const last = rolls.length ? rolls[rolls.length - 1] : null; // Opening-tie on resume: don't drop the player into the // cashout-button UI for their own stake. Auto-settle and // continue session init like the round never existed. Only // do this for paid rounds — free-round resumes still need // the badge to keep counting down. if (last && last.outcome === "tie" && rolls.length === 1 && !d.active_round_is_free) { try { const c = await api(`/api/v1/round/${d.active_round_id}/cashout`, {method:"POST", body:{}}); if (c.balance) setBalance(c.balance); // Round closed cleanly — fall through to the rest of // session init (free-round welcome, etc.). } catch(e) { // Auto-cashout failed; drop the player into the manual // cashout UI rather than losing their stake silently. if (last) { setDDice(last.dealer_dice || [1,1]); setPDice(last.player_dice || [1]); setResult(last.outcome); } const restoredDc = +(gd.dice_count || 1); setRoundId(d.active_round_id); setPot(+(gd.pot || 0)); setOriginalBet(+(gd.bet_amount || 0)); setDoubleDc(restoredDc); setDc(restoredDc); setDoubleMode(true); setPhase("result"); return; } // Skip the rest of resume; let session init continue. } else { if (last) { setDDice(last.dealer_dice || [1,1]); setPDice(last.player_dice || [1]); setResult(last.outcome); } const restoredDc = +(gd.dice_count || 1); setRoundId(d.active_round_id); setPot(+(gd.pot || 0)); setOriginalBet(+(gd.bet_amount || 0)); setDoubleDc(restoredDc); setDc(restoredDc); setDoubleMode(true); setPhase("result"); // If the open round was acquired from a free-round grant, keep // the FREE ROUND counter/indicators alive on resume — the // money flow already routes correctly, this is the UI badge. // Only flip into free-round mode if grants actually remain // playable; a leaked active_round whose grant is already // fully consumed would otherwise wedge us into free-round // mode and pop a bogus 0/0 completion modal on the next bet. if (d.active_round_is_free) { const fr = await fetchFreeRounds(); setFreeRoundsTotal(fr.total); setFreeRoundsUsed(fr.used); setFreeRoundsBet(fr.betAmount); if (fr.left > 0) setFreeRoundsActive(true); } return; // skip the free-round welcome; the open round must be settled first } } } // Free rounds come from the backend grant ledger, not a URL param. // If the player has active grants, offer them — on every viewport // (the old innerWidth gate left mobile players unable to start). const fr = await fetchFreeRounds(); if (fr.left > 0) { setFreeRoundsTotal(fr.total); setFreeRoundsUsed(fr.used); setFreeRoundsBet(fr.betAmount); setShowFreeRoundWelcome(true); } } catch(e) { _sessionToken = ""; window.history.replaceState({}, "", window.location.pathname); try { await bootstrapDemo(); const d = await api("/api/v1/state"); const gameOdds = (d.game_data && d.game_data.odds) || d.odds || {}; setBalance(d.balance); setCurrency(d.currency); setOdds(gameOdds); setConfig(d.config); setSeedHash(d.next_seed_hash); setClientSeed(d.client_seed); await minLoadTime; setLoading(false); } catch(e2) { setError(e2.message); setLoading(false); } } })(); }, []); const minBet=+(config.min_bet||.1), maxBet=+(config.max_bet||100); const betSteps = [0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1,2,3,4,5,6,7,8,9,10,15,20,25,30,35,40,45,50,100].filter(v=>v>=minBet&&v<=maxBet); const stepBet = (dir) => { const idx = betSteps.findIndex(s => s >= bet); if (dir > 0) { const next = idx < 0 ? betSteps.length-1 : Math.min(idx + 1, betSteps.length - 1); setBet(betSteps[next]); } else { const prev = idx <= 0 ? 0 : idx - (betSteps[idx] === bet ? 1 : 0); setBet(betSteps[Math.max(0, prev)]); } }; const [editingBet, setEditingBet] = useState(false); // dicedouble has no side bet; total == bet. Kept as a name so the // canRoll/insufficientBalance/optimistic-debit sites stay readable. const total = bet; const canRoll = (+balance>=total || freeRoundsActive) && total>0 && phase==="idle" && !showFreeRoundComplete && !freeRoundsEnded; const insufficientBalance = +balance < total && !freeRoundsActive && phase==="idle"; const stepChips = useMemo(() => { if (!doubleMode || !doubleDc) return []; const baseMult = +(odds[String(doubleDc)]?.multiplier || 1); const maxRounds = { 1: 4, 2: 13, 3: 30 }[doubleDc] || 30; const chips = []; for (let s = 1; s <= maxRounds; s++) { chips.push({ step: s, mult: Math.pow(baseMult, s) }); } return chips; }, [doubleMode, doubleDc, odds]); const stepTrackRef = React.useRef(null); useEffect(() => { if (!stepTrackRef.current || !currentStep) return; const el = stepTrackRef.current.children[currentStep - 1]; if (el) el.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }); }, [currentStep]); // Mouse drag-to-scroll for step tracker (desktop) useEffect(() => { const el = stepTrackRef.current; if (!el) return; let isDown = false, startX, scrollLeft; const onDown = (e) => { isDown = true; el.style.cursor = 'grabbing'; startX = e.pageX - el.offsetLeft; scrollLeft = el.scrollLeft; }; const onUp = () => { isDown = false; el.style.cursor = 'grab'; }; const onMove = (e) => { if (!isDown) return; e.preventDefault(); el.scrollLeft = scrollLeft - (e.pageX - el.offsetLeft - startX); }; el.addEventListener('mousedown', onDown); window.addEventListener('mouseup', onUp); window.addEventListener('mousemove', onMove); return () => { el.removeEventListener('mousedown', onDown); window.removeEventListener('mouseup', onUp); window.removeEventListener('mousemove', onMove); }; }, [doubleMode]); const toastTimerRef = React.useRef(null); const showRoundToast = useCallback((type, text) => { if(toastTimerRef.current) clearTimeout(toastTimerRef.current); setRoundToast({ type, text }); toastTimerRef.current = setTimeout(() => { setRoundToast(null); toastTimerRef.current=null; }, 2000); }, []); const handleRoll = useCallback(async()=>{ if(!canRoll) return; SFX.roll(); if(resultTimerRef.current){clearTimeout(resultTimerRef.current);resultTimerRef.current=null;} if(toastTimerRef.current){clearTimeout(toastTimerRef.current);toastTimerRef.current=null;} setRolling(true); setPhase("rolling"); setResult(null); setRoundToast(null); setCashoutAlert(null); // Optimistic debit for snappy feedback — a free round costs nothing. if (!freeRoundsActive) setBalance(b => (+(+b - total).toFixed(2)).toString()); try { if (useNonce) { await api("/api/v1/client-seed", {method:"POST", body:{client_seed: clientSeed + "-" + clientNonce}}); setClientNonce(n => n + 1); } // Dice Duel is sequential: /bet plays the opening duel. A loss is // terminal; a win or tie leaves the round open for double/cashout. const d = await api("/api/v1/bet",{method:"POST",body:{ dice_count:dc, amount:bet.toFixed(2) }}); const gd = d.game_data || {}; setDDice(gd.dealer_dice||[1,1]); setPDice(gd.player_dice||[1]); setRollSeq(s => s + 1); await waitForAllDiceLanded(); setRolling(false); const rollOutcome = gd.roll_outcome || d.outcome; setPhase("result"); setResult(rollOutcome); if(d.next_seed_hash) setSeedHash(d.next_seed_hash); if(rollOutcome==="win")SFX.win(); else if(rollOutcome==="tie")SFX.tie(); else SFX.lose(); setRecentResults(prev => [rollOutcome, ...prev].slice(0, 5)); setBalance(d.balance); /* Free rounds play as plain single duels — settle the round at once, no double/cashout chain. The engine auto-settles free- round opens server-side, so /bet usually arrives finished with the cashout's payout already in game_data. The fallback /cashout call covers the case where the backend left the round open (e.g. a tie release returns the slot and stays non-terminal). */ if (freeRoundsActive) { let won = 0; const freeBet = +freeRoundsBet || 0; if (d.finished) { // gd.payout is the gross (includes stake); net win is // payout - bet. Matches the engine's net-mode credit math. const payout = +((gd && gd.payout) || 0); won = Math.max(0, payout - freeBet); } else if (d.round_id) { try { const c = await api(`/api/v1/round/${d.round_id}/cashout`, {method:"POST", body:{}}); if (c.balance) setBalance(c.balance); const payout = +((c.game_data && c.game_data.payout) || 0); won = Math.max(0, payout - freeBet); } catch(e) {} } setFreeRoundsWinnings(w => w + won); fetchFreeRounds().then(fr => { setFreeRoundsUsed(Math.max(0, freeRoundsTotal - fr.left)); if (fr.left <= 0) { setFreeRoundsEnded(true); if (freeRoundsTotal > 0) { // Real completion — celebrate. setTimeout(()=>{ setShowFreeRoundComplete(true); }, 1500); } else { // Stale free-round mode (resumed a leaked active_round // whose grant is already consumed). Drop the flag // silently — no "0 rounds / $0.00" modal that obscures // the rest of the UI. setFreeRoundsActive(false); setFreeRoundsBet(""); } } }); // Phase idle immediately so Roll button is active — result stays visible briefly setPhase("idle"); clearResultLater(); return; } /* Real money — opening tie auto-cashes out (push). The player isn't offered a "Cashout $X.XX (push)" button to return their own stake; we settle the round server-side and bring them back to a fresh Roll. Subsequent ties (mid-chain, after at least one win) still leave the round open since there's a real pot to defend. */ if (!d.finished && d.round_id && rollOutcome === "tie") { try { const c = await api(`/api/v1/round/${d.round_id}/cashout`, {method:"POST", body:{}}); if (c.balance) setBalance(c.balance); } catch(err) { // Auto-cashout failed — fall back to leaving the round open // so the player can retry manually rather than losing the // stake to a frontend network blip. setRoundId(d.round_id); setPot(+(gd.pot||0)); setOriginalBet(bet); setDoubleDc(dc); setCurrentStep(gd.step || 1); setDoubleMode(true); return; } showRoundToast("tie", t("toast.pot_kept", {amount: currSymbol+bet.toFixed(2)})); setPhase("idle"); clearResultLater(); return; } /* Real money: a win leaves the round open — the player can double (re-stake the whole pot) or cash out. */ if (!d.finished && d.round_id) { setRoundId(d.round_id); setPot(+(gd.pot||0)); setOriginalBet(bet); setDoubleDc(dc); setCurrentStep(gd.step || 1); setDoubleMode(true); return; } /* Terminal on the opening roll — a loss, or a rare roll-1 cap win. */ if (rollOutcome === "lose") showRoundToast("lose", t("toast.pot_lost", {amount: currSymbol+bet.toFixed(2)})); else showRoundToast("win", t("toast.pot_raised", {amount: currSymbol+(+(gd.payout||0)).toFixed(2)})); setPhase("idle"); clearResultLater(); } catch(e) { setRolling(false); setPhase("idle"); alert(e.message); } },[canRoll,dc,bet,total,freeRoundsActive,freeRoundsTotal,useNonce,clientSeed,clientNonce]); // Declared after handleRoll so the useCallback dep [..., handleRoll] is // evaluated against the real value, not a TDZ/hoisted-undefined. const tryRoll = useCallback(() => { if (canRoll) { handleRoll(); return; } if (insufficientBalance) { setInsufficientToast(true); setTimeout(() => setInsufficientToast(false), 2000); } }, [canRoll, insufficientBalance, handleRoll]); const handleDouble = useCallback(async () => { if (!doubleMode || phase !== "result" || !roundId) return; // Doubling requires at least one win in the chain — an opening tie is // a push, not a foothold to gamble from. The backend enforces this // too; the client gate keeps the keyboard shortcut and any stray // click from triggering a guaranteed-failing /action. if (pot <= originalBet) return; SFX.roll(); if(resultTimerRef.current){clearTimeout(resultTimerRef.current);resultTimerRef.current=null;} if(toastTimerRef.current){clearTimeout(toastTimerRef.current);toastTimerRef.current=null;} setRolling(true); setPhase("rolling"); setResult(null); setRoundToast(null); setCashoutAlert(null); try { // A "double" is one Action on the open round — another duel staking // the whole pot. The backend caps the pot at 1000x the opening bet // and auto-cashes out if a win would exceed it. const d = await api(`/api/v1/round/${roundId}/action`, { method:"POST", body:{} }); const gd = d.game_data || {}; setDDice(gd.dealer_dice||[1,1]); setPDice(gd.player_dice||[1]); setRollSeq(s => s + 1); await waitForAllDiceLanded(); setRolling(false); const rollOutcome = gd.roll_outcome || d.outcome; setResult(rollOutcome); setRecentResults(prev => [rollOutcome, ...prev].slice(0, 5)); if (rollOutcome === "win") SFX.win(); else if (rollOutcome === "tie") SFX.tie(); else SFX.lose(); if (!d.finished) { // Win or tie — the pot rides, the round stays open. setPot(+(gd.pot||0)); setCurrentStep(gd.step || currentStep + 1); setPhase("result"); return; } // Terminal: a loss (pot gone) or the 1000x cap auto-cashout. setBalance(d.balance); if (rollOutcome === "lose") { showRoundToast("lose", t("toast.pot_lost", {amount: currSymbol+originalBet.toFixed(2)})); } else { const payout = +(gd.payout||0); setCashoutAlert({ amount: payout, mult: originalBet>0 ? +(payout/originalBet).toFixed(2) : 0, streak: (gd.step||1)-1, big: true }); } setRoundId(""); setPot(0); setDoubleMode(false); setOriginalBet(0); setCurrentStep(0); setPhase("idle"); clearResultLater(); } catch(e) { // The round is untouched on the backend — the winnings remain in the // open round. Surface the error and stay in double mode. setRolling(false); setPhase("result"); alert(e.message); } }, [doubleMode, phase, roundId, originalBet, pot, currentStep]); const handleCashout = useCallback(async () => { if (!doubleMode || phase !== "result" || !roundId) return; // Defer the SFX until we know whether this cashout is an actual win // or a push (opening-tie → pot == bet). A push playing the win sound // and showing "WIN! 1.00x $bet" is the long-standing UX bug — the // celebration UI used to fire on every cashout regardless of payout. try { const d = await api(`/api/v1/round/${roundId}/cashout`, { method:"POST", body:{} }); const gd = d.game_data || {}; const payout = +(gd.payout || pot || 0); // The pot is paid by the backend — the balance already reflects it. setBalance(d.balance); const isPush = originalBet > 0 && payout <= originalBet; if (isPush) { SFX.tie(); showRoundToast("tie", t("toast.push_plain")); } else { SFX.win(); setCashoutAlert({ amount: payout, mult: originalBet > 0 ? +(payout/originalBet).toFixed(2) : 0, streak: (gd.step||1)-1 }); } setRoundId(""); setPot(0); setDoubleMode(false); setOriginalBet(0); setCurrentStep(0); setPhase("idle"); setResult(null); } catch(e) { // Cashout failed — the round is still open on the backend. Stay in // double mode so the player can retry; do NOT discard roundId/pot, // or the active round becomes invisible and the pot gets forfeited // when it expires. alert(e.message); } }, [doubleMode, phase, roundId, pot, originalBet]); useEffect(()=>{ const h=e=>{ if(e.repeat) return; if(e.code==="Space"){ e.preventDefault(); if(doubleMode && phase==="result") handleDouble(); else if(phase==="idle") tryRoll(); } if(e.code==="KeyC" && doubleMode && phase==="result"){ e.preventDefault(); handleCashout(); } }; window.addEventListener("keydown",h); return()=>window.removeEventListener("keydown",h); },[phase,tryRoll,handleDouble,handleCashout,doubleMode]); if(loading) return (

{t("loading.text")}

); if(error) return

{t("common.error", {msg: error})}

; const idle = phase==="idle"; return (<> {/* ── Header ── */}

{/* Desktop: visible buttons left */}

{/* Mobile: history button left */}

{recentResults.slice(0, 5).map((r, i) => { const fill = r === "lose" ? "#F43F5E" : r === "tie" ? "#FFD106" : "#4ADE80"; const dotClass = r === "lose" ? " m-header-dot--loss" : r === "tie" ? " m-header-dot--push" : ""; return ( ); })}

{/* Desktop: history button right */} {/* Mobile: 3-dot menu */}

{showMenu && (<>

setShowMenu(false)}/>

)}

{/* ── Mobile Brand Logo (hidden on desktop) ── */} {/* ── Arena (all sizes) ── */}

{/* ── Mobile Free Round Counter ── */} {freeRoundsActive && (

)} {/* ── Action Footer (unified card) ── */}

{/* Action buttons */}

{doubleMode ? (<> {(() => { const canDouble = pot > originalBet; const nextPot = canDouble ? (pot * +(odds[String(doubleDc)]?.multiplier || 1)).toFixed(2) : "0"; return ( ); })()} ) : ( )}

{/* Middle section: risk tabs (idle) or step tracker (in-game) */}

{doubleMode ? (

{stepChips.map(chip => { const isDone = chip.step < currentStep; const isActive = chip.step === currentStep; const isNext = chip.step === currentStep + 1; return ( ); })}

) : ( [ {d:3, mult:(odds["3"]||{}).multiplier||"1.69", bars:[{c:"#22C55E"},{c:"#404040"},{c:"#404040"}]}, {d:2, mult:(odds["2"]||{}).multiplier||"2.60", bars:[{c:"#FFD106"},{c:"#FFD106"},{c:"#404040"}]}, {d:1, mult:(odds["1"]||{}).multiplier||"10.50", bars:[{c:"#F43F5E"},{c:"#F43F5E"},{c:"#F43F5E"}]}, ].map(opt => ( )) )}

{/* Desktop Free Round Counter — above bet bar */} {freeRoundsActive && (

)} {/* Bet input bar */}

{currSymbol}

{(+balance).toLocaleString("en-US",{minimumFractionDigits:2})}

{freeRoundsActive ? ( {t("label.free_round")} ) : (<>

{t("label.bet")} {editingBet ? ( {const v=+e.target.value;if(!isNaN(v)&&v>=minBet&&v<=maxBet)setBet(rc(v));else if(v>maxBet)setBet(maxBet);else setBet(minBet);setEditingBet(false)}} onKeyDown={(e)=>{if(e.key==="Enter")e.target.blur()}}/> ) : ( {if(idle&&!doubleMode)setEditingBet(true)}}>${bet.toFixed(2)} )}

)}

{/* ── Cashout Alert ── */} {/* ── Drawers ── */} {drawerOpen && drawerTab==="fair" && setDrawerOpen(false)} seedHash={seedHash} clientSeed={clientSeed} onSetSeed={s=>setClientSeed(s)} onRefreshSeed={h=>setSeedHash(h)} useNonce={useNonce} onToggleNonce={v=>{setUseNonce(v);if(v)setClientNonce(0)}} clientNonce={clientNonce}/>} {drawerOpen && drawerTab==="history" && setDrawerOpen(false)} clientSeed={clientSeed}/>} {drawerOpen && drawerTab==="info" && setDrawerOpen(false)} odds={odds} config={config}/>} {/* Free Round Modals */} {showFreeRoundWelcome && ( { setShowFreeRoundWelcome(false); setFreeRoundsActive(true); setBet(10); setDc(2); }}/> )} {showFreeRoundComplete && ( { setShowFreeRoundComplete(false); setFreeRoundsEnded(false); setFreeRoundsActive(false); setFreeRoundsTotal(0); setFreeRoundsUsed(0); setFreeRoundsWinnings(0); setFreeRoundsBet(""); }}/> )} ); } // Load the active locale (and the English fallback) before first render so // t() is synchronous everywhere in the tree. loadLocale().finally(() => { ReactDOM.render(React.createElement(Game), document.getElementById("root")); });

{title}

{t("fr.welcome_title")}

{t("fr.complete_title")}