// game-flip.jsx — coin flip · 99% RTP / 1% house edge
// True 50/50 coin with a 1% commission baked into the win payout (1.98× return
// instead of 2×). Net effect: RTP = 0.5 * 1.98 = 99%.
const { useState: useStateF, useEffect: useEffectF, useRef: useRefF } = React;
function FlipPage({ palette: M, wallet, fairness, onConnect, heroVariant }) {
const [pick, setPick] = useStateF('H');
const { bet, setBet, betStr, setBetStr } = useBetInput(0.1);
const [spinning, setSpinning] = useStateF(false);
const [result, setResult] = useStateF(null);
const [history, setHistory] = useStateF([]);
const [displaySide, setDisplaySide] = useStateF('H'); // visual side shown when idle/post-spin
const [error, setError] = useBetError();
// Synchronous re-entry lock — closes the race where two clicks fire before
// setSpinning(true) commits (audit HIGH-9). React state lags one render
// behind any setter; a ref is read+written immediately on the call stack.
const busyRef = useRefF(false);
const WIN_PROB = 0.50;
const MIN_BET = coinMinBet(wallet.activeCoin);
// Per-coin max (30 SOL ≈ 5052.6 USDC/USDT).
const MAX_BET_SOL = 30;
const maxBet = maxBetForCoin(MAX_BET_SOL, wallet.activeCoin);
// Clamp the bet into [MIN_BET, maxBet] when switching coins so USDC/USDT
// (1-unit floor) don't leave the 0.1 SOL default below the minimum.
useEffectF(() => {
if (bet < MIN_BET) setBet(MIN_BET);
else if (bet > maxBet) setBet(maxBet);
}, [wallet.activeCoin]); // eslint-disable-line
async function flip() {
if (busyRef.current) return;
if (spinning) return;
if (!wallet.canPlay) { onConnect(); return; }
const bag = wallet.balance[wallet.activeCoin] || 0;
if (bet < MIN_BET) {
setError(`minimum bet is ${MIN_BET} ${wallet.activeCoin}`);
return;
}
if (bet > maxBet) {
setError(`max bet on coin flip is ${maxBet.toFixed(2)} ${wallet.activeCoin}`);
return;
}
if (bet > bag) {
setError(`bet ${bet.toFixed(3)} ${wallet.activeCoin} exceeds bag (${bag.toFixed(3)} ${wallet.activeCoin} available)`);
return;
}
busyRef.current = true;
setError(null);
setResult(null);
if (!wallet.debit(wallet.activeCoin, bet)) {
busyRef.current = false;
setError(`bag changed under the bet -- try again`);
return;
}
// §5.62: flip is server-resolved. The Worker owns RNG + outcome and
// writes /plays as admin. Browser sends bet/pick/clientSeed; gets back
// {landed, userWins, payout, hex, nonce, serverHash}. The old browser
// fairness.roll('flip') + hashToFloats path is gone for this game.
let server;
try {
server = await callServerGame('/play/flip', {
bet,
pick: pick === 'H' ? 'heads' : 'tails',
clientSeed: fairness.clientSeed,
coin: wallet.activeCoin,
user: wallet.username,
});
} catch (err) {
// Round didn't happen — refund the bet and surface the error.
wallet.credit(wallet.activeCoin, bet, 'flip-refund-' + Date.now());
busyRef.current = false;
setError('server error: ' + (err && err.message ? err.message : String(err)));
return;
}
const userWins = !!server.userWins;
const landed = server.landed === 'heads' ? 'H' : 'T';
const payout = Number(server.payout) || 0;
const serverHex = String(server.hex || '');
const nonce = Number(server.nonce) || 0;
// Set the visual target side FIRST so the spin animation chosen below uses
// the correct keyframes (coinFlipH lands heads-up; coinFlipT lands tails-up).
// Then trigger the spin. Both updates batch into one React 18 render so the
// prior idle frame doesn't flicker the wrong face.
setDisplaySide(landed);
setSpinning(true);
playHitSound();
await new Promise(res => setTimeout(res, 2400));
if (userWins) wallet.credit(wallet.activeCoin, payout, serverHex);
wallet.logPlay({ game:'Flip', side: landed, pick, bet, payout, win: userWins, coin: wallet.activeCoin, hex: serverHex.slice(0,16), nonce });
// NOTE: no logPlayServer call here — the Worker wrote /plays as admin
// (Firebase rules step3 reject browser writes for game === 'Flip').
const out = { win: userWins, side: landed, mult: 1.98, payout, hex: serverHex.slice(0,16), nonce };
setResult(out);
setHistory(h => [{ side:landed, win:userWins }, ...h].slice(0,28));
setSpinning(false);
busyRef.current = false;
playOutcomeSound(userWins);
}
return (
COIN FLIP
~/games/flip/
99% RTP · 1% edge · 50/50 odds · 1.98× payout · max bet {maxBet.toFixed(2)} {wallet.activeCoin} (max win {(maxBet*1.98).toFixed(2)})
setError(null)} palette={M}/>
{/* Bet panel */}
{/* Greyout the entire bet panel while spinning — side, bet input,
quick buttons, ½/2×/max, payout, and RUN IT all locked until
the coin resolves so the player can't change anything mid-flip. */}
{history.length === 0 && no flips yet}
{history.map((h,i)=>{
// Color by SIDE — heads always green, tails always red.
// Win = filled cell, loss = outlined cell, so the win/loss
// distinction is still visible at a glance.
const sideColor = h.side === 'H' ? M.green : M.red;
return (
{h.side}
);
})}
);
}
function btnSecondary(M) {
return { flex:1, background:M.bg, color:M.green, border:`1px solid ${M.green}`, fontFamily:'inherit', fontSize:14, padding:'4px 0', cursor:'pointer' };
}
// Flip stats — derived from wallet.history filtered to game==='Flip' and the
// user's active coin. Re-computed on every render of the flip page; cheap.
function FlipStatsPanel({ palette: M, wallet }) {
const coin = wallet.activeCoin;
const flips = (wallet.history || []).filter(h => h.game === 'Flip' && h.coin === coin);
const total = flips.length;
const wins = flips.filter(f => f.win).length;
const winRate = total ? (wins / total) * 100 : 0;
const wagered = flips.reduce((s, f) => s + (f.bet || 0), 0);
const netPL = flips.reduce((s, f) => s + ((f.payout || 0) - (f.bet || 0)), 0);
const bestWin = flips.reduce((m, f) => Math.max(m, (f.payout || 0) - (f.bet || 0)), 0);
// Longest run of consecutive wins (order in history doesn't affect max-run-length).
let longestStreak = 0, runLen = 0;
for (const f of flips) {
if (f.win) { runLen++; if (runLen > longestStreak) longestStreak = runLen; }
else runLen = 0;
}
// Win/loss amounts use 2 decimals everywhere on this page.
const dp = 2;
const fmt = n => `${n>=0?'+':''}${n.toFixed(dp)} ${coin}`;
const fmtAbs = n => `${n.toFixed(dp)} ${coin}`;
const tile = (label, value, color) => (
{/* Halo lives INSIDE the rotating container so it stays attached to
the coin in 3D — tilts and foreshortens with it. Centered glow
(no offset) so no directional dark border ever appears. The
border-radius:50% keeps the box-shadow source circular even when
3D-projected. translateZ(-1px) puts it just behind the faces so
the SVG art stays in front. */}
{/* Heads face (front, 0deg) */}
{/* Tails face (back, rotated 180 around X) */}
);
}
// Shared face — flat orange disc, thick black outline.
// Big HEADS / TAILS dominates the face; "RUN!" branding sits as a small accent.
// Centering: dominantBaseline="central" anchors at the visual mid-line, and we
// drop letterSpacing on multi-char text because text-anchor:middle does NOT
// compensate for trailing letterSpacing (would shift text right of center).
function CoinFaceShared({ side, M }) {
const label = side === 'H' ? 'HEADS' : 'TAILS';
return (
);
}
function CoinFaceHeads({ M }) {
return (