// card-games.jsx — blackjack, video poker, baccarat, hilo, war, dragon tiger
// Helper: staggered card-deal sounds
const dealSounds = (count, interval = 80) => {
try {
if (typeof sounds === 'undefined') return;
for (let i = 0; i < count; i++) {
setTimeout(() => sounds.cardDeal(), i * interval);
}
} catch (e) {}
};
// ═════════════════════════════════════════════════════════════
// BLACKJACK
// ═════════════════════════════════════════════════════════════
function Blackjack({ onBack, onHistory, onRules, onTip }) {
const { balance, settle } = useStore();
const [bet, setBet] = React.useState(null);
const [phase, setPhase] = React.useState('bet');
const [deck, setDeck] = React.useState([]);
const [hands, setHands] = React.useState([[]]); // up to 2 hands when split
const [active, setActive] = React.useState(0);
const [dealer, setDealer] = React.useState([]);
const [revealHole, setRevealHole] = React.useState(false);
const [result, setResult] = React.useState(null);
const [didSplit, setDidSplit] = React.useState(false);
const dealerShown = React.useMemo(() => handTotal(revealHole ? dealer : dealer.slice(0,1)), [dealer, revealHole]);
const cardVal = (c) => c.r === 'A' ? 11 : ['J','Q','K'].includes(c.r) ? 10 : parseInt(c.r);
const canSplit = phase === 'player' && !didSplit
&& hands[active].length === 2
&& cardVal(hands[active][0]) === cardVal(hands[active][1])
&& bet * 2 <= balance + bet; // need enough chips for second bet
const start = () => {
if (!bet || bet > balance) return;
const d = shuffleDeck();
const p = [d.pop(), d.pop()];
const dl = [d.pop(), d.pop()];
setDeck(d); setHands([p]); setActive(0); setDealer(dl); setRevealHole(false);
setResult(null); setDidSplit(false); setPhase('player');
dealSounds(4);
if (handTotal(p) === 21) setTimeout(() => doStand(d, [p], 0, dl, true), 700);
};
const hit = () => {
if (phase !== 'player') return;
const d = [...deck]; const c = d.pop();
const newHands = hands.map((h, i) => i === active ? [...h, c] : h);
setDeck(d); setHands(newHands);
dealSounds(1);
const total = handTotal(newHands[active]);
if (total >= 21) {
// bust or 21 → auto-advance
setTimeout(() => advanceFrom(active, d, newHands, dealer), 600);
}
};
const stand = () => {
advanceFrom(active, deck, hands, dealer);
};
const split = () => {
if (!canSplit) return;
const [a, b] = hands[active];
const d = [...deck];
const h1 = [a, d.pop()];
const h2 = [b, d.pop()];
setDeck(d);
setHands([h1, h2]);
setActive(0);
setDidSplit(true);
dealSounds(2);
};
// Advance from `from` hand: if split and from===0, move to hand 1; else dealer plays.
const advanceFrom = (from, curDeck, curHands, curDealer) => {
if (didSplit && from === 0) {
setActive(1);
// if hand 1 already at 21 or bust (dealt naturally), keep going
if (handTotal(curHands[1]) >= 21) {
setTimeout(() => doStand(curDeck, curHands, 1, curDealer, false), 500);
}
return;
}
doStand(curDeck, curHands, from, curDealer, false);
};
// Dealer plays then settle all hands
const doStand = (curDeck, curHands, fromIdx, curDealer, natural) => {
setPhase('dealer'); setRevealHole(true);
// If all player hands busted, dealer doesn't draw
const allBust = curHands.every(h => handTotal(h) > 21);
let d = [...curDeck];
let dl = [...curDealer];
const settleAll = () => setTimeout(() => finish(curHands, dl, natural), 500);
if (allBust) {
settleAll();
return;
}
const tick = () => {
if (handTotal(dl) < 17) {
const c = d.pop();
dl = [...dl, c];
setDealer(dl); setDeck(d);
dealSounds(1);
setTimeout(tick, 600);
} else {
settleAll();
}
};
setTimeout(tick, 500);
};
const finish = (curHands, dl, natural) => {
const dt = handTotal(dl);
let totalDelta = 0;
const labels = [];
curHands.forEach((p, i) => {
const pt = handTotal(p);
let delta = 0, lbl = '';
if (pt > 21) { delta = -bet; lbl = `bust ${pt}`; }
else if (natural && dt !== 21 && curHands.length === 1) { delta = Math.round(bet * 1.5); lbl = 'blackjack'; }
else if (dt > 21) { delta = bet; lbl = `dealer bust ${dt}`; }
else if (pt > dt) { delta = bet; lbl = `${pt} vs ${dt}`; }
else if (pt < dt) { delta = -bet; lbl = `${pt} vs ${dt}`; }
else { delta = 0; lbl = `push ${pt}`; }
totalDelta += delta;
labels.push(curHands.length > 1 ? `${i === 0 ? '①' : '②'} ${lbl}` : lbl);
});
if (totalDelta !== 0) settle('Blackjack', totalDelta, labels.join(' · '));
setResult({ delta: totalDelta, label: labels.join(' · ') });
setPhase('done');
setRevealHole(true);
};
const newRound = () => {
setPhase('bet'); setHands([[]]); setActive(0); setDealer([]);
setResult(null); setRevealHole(false); setDidSplit(false);
};
const renderHand = (cards, idx) => {
const total = handTotal(cards);
const isActive = phase === 'player' && idx === active && didSplit;
return (
{cards.map((c, i) => (
))}
{didSplit && (
{idx === 0 ? '①' : '②'} {total}
)}
);
};
return (
<>
Dealer
{dealer.length > 0 ? dealerShown : '—'}
{dealer.map((c, i) => (
))}
{result ?
: phase === 'bet' ?
Choose your stake
:
{phase === 'player'
? (didSplit ? `your move · hand ${active + 1}` : 'your move')
: 'dealer playing…'}
}
{hands.map((h, i) => renderHand(h, i))}
You {didSplit && `· ${bet * 2} staked`}
{hands[0].length > 0 ? (didSplit ? `${handTotal(hands[0])} · ${handTotal(hands[1])}` : handTotal(hands[0])) : '—'}
{phase === 'bet' && (
<>
)}
{phase === 'player' && (
)}
{phase === 'dealer' && (
)}
{phase === 'done' && (
)}
);
}
// ═════════════════════════════════════════════════════════════
// VIDEO POKER — Jacks or Better
// ═════════════════════════════════════════════════════════════
const POKER_PAYS = {
'Royal Flush': 250,
'Straight Flush': 50,
'Four of a Kind': 25,
'Full House': 9,
'Flush': 6,
'Straight': 4,
'Three of a Kind': 3,
'Two Pair': 2,
'Pair (J+)': 1,
'—': 0,
};
function evalPoker(hand) {
const ranks = hand.map(c => RANKS.indexOf(c.r));
const suits = hand.map(c => c.s);
const counts = {};
for (const r of ranks) counts[r] = (counts[r] || 0) + 1;
const cs = Object.values(counts).sort((a,b) => b - a);
const flush = suits.every(s => s === suits[0]);
const sorted = [...new Set(ranks)].sort((a, b) => a - b);
let straight = false;
if (sorted.length === 5) {
if (sorted[4] - sorted[0] === 4) straight = true;
if (sorted.join(',') === '0,1,2,3,12') straight = true; // wheel A2345
}
const royal = flush && straight && [...new Set(ranks)].sort((a,b)=>a-b).join(',') === '0,9,10,11,12';
if (royal) return 'Royal Flush';
if (flush && straight) return 'Straight Flush';
if (cs[0] === 4) return 'Four of a Kind';
if (cs[0] === 3 && cs[1] === 2) return 'Full House';
if (flush) return 'Flush';
if (straight) return 'Straight';
if (cs[0] === 3) return 'Three of a Kind';
if (cs[0] === 2 && cs[1] === 2) return 'Two Pair';
if (cs[0] === 2) {
const pairRank = parseInt(Object.keys(counts).find(k => counts[k] === 2));
if (pairRank >= 10 || pairRank === 0) return 'Pair (J+)';
}
return '—';
}
function VideoPoker({ onBack, onHistory, onRules, onTip }) {
const { balance, settle } = useStore();
const [bet, setBet] = React.useState(null);
const [phase, setPhase] = React.useState('bet');
const [deck, setDeck] = React.useState([]);
const [hand, setHand] = React.useState([null, null, null, null, null]);
const [held, setHeld] = React.useState([false, false, false, false, false]);
const [result, setResult] = React.useState(null);
const [flipKey, setFlipKey] = React.useState(0);
const deal = () => {
if (!bet || bet > balance) return;
const d = shuffleDeck();
const h = [d.pop(), d.pop(), d.pop(), d.pop(), d.pop()];
setDeck(d); setHand(h); setHeld([false, false, false, false, false]);
setResult(null); setPhase('hold'); setFlipKey(k => k + 1);
dealSounds(5, 70);
};
const draw = () => {
const d = [...deck];
const h = hand.map((c, i) => held[i] ? c : d.pop());
setDeck(d); setHand(h);
setFlipKey(k => k + 1);
const replacedCount = held.filter((v) => !v).length;
if (replacedCount > 0) dealSounds(replacedCount, 70);
setTimeout(() => {
const cat = evalPoker(h);
const mult = POKER_PAYS[cat];
const ret = bet * mult;
const netDelta = ret - bet;
settle('Video Poker', netDelta, cat);
setResult({ delta: netDelta, label: cat });
setPhase('done');
}, 700);
};
const newRound = () => {
setPhase('bet'); setHand([null,null,null,null,null]); setHeld([false,false,false,false,false]); setResult(null);
};
const toggleHold = (i) => {
if (phase !== 'hold') return;
setHeld((h) => h.map((v, j) => j === i ? !v : v));
};
return (
<>
{hand.map((c, i) => (
toggleHold(i)}
style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, cursor: phase === 'hold' ? 'pointer' : 'default' }}>
{c ? (
) : (
)}
{held[i] ? '· hold ·' : 'tap to hold'}
))}
{result ?
: phase === 'hold' ?
Choose cards to hold
: phase === 'bet' ?
Stake and deal
:
·
}
{Object.entries(POKER_PAYS).filter(([k]) => k !== '—').map(([k, v]) => (
{k}{v}×
))}
{phase === 'bet' && (
<>
)}
{phase === 'hold' && (
)}
{phase === 'done' && (
)}
);
}
// ═════════════════════════════════════════════════════════════
// BACCARAT — Punto Banco
// ═════════════════════════════════════════════════════════════
const baccaratValue = (c) => {
if (c.r === 'A') return 1;
if (['10', 'J', 'Q', 'K'].includes(c.r)) return 0;
return parseInt(c.r);
};
const baccaratTotal = (cards) => cards.reduce((a, c) => a + baccaratValue(c), 0) % 10;
const bankerShouldDraw = (bt, playerThirdValue) => {
const v = playerThirdValue;
if (bt <= 2) return true;
if (bt === 3) return v !== 8;
if (bt === 4) return v >= 2 && v <= 7;
if (bt === 5) return v >= 4 && v <= 7;
if (bt === 6) return v === 6 || v === 7;
return false; // bt = 7
};
function Baccarat({ onBack, onHistory, onRules, onTip }) {
const { balance, settle } = useStore();
const [bet, setBet] = React.useState(null);
const [betType, setBetType] = React.useState(null); // 'player' | 'banker' | 'tie'
const [phase, setPhase] = React.useState('bet'); // bet | dealing | done
const [player, setPlayer] = React.useState([]);
const [banker, setBanker] = React.useState([]);
const [result, setResult] = React.useState(null);
const start = () => {
if (!bet || bet > balance || !betType) return;
setPhase('dealing'); setResult(null);
const d = shuffleDeck();
const p = [d.pop(), d.pop()];
const b = [d.pop(), d.pop()];
// Reveal in standard order: P1, B1, P2, B2
setTimeout(() => { setPlayer([p[0]]); dealSounds(1); }, 200);
setTimeout(() => { setBanker([b[0]]); dealSounds(1); }, 600);
setTimeout(() => { setPlayer([...p]); dealSounds(1); }, 1000);
setTimeout(() => { setBanker([...b]); dealSounds(1); }, 1400);
setTimeout(() => {
const pt = baccaratTotal(p);
const bt = baccaratTotal(b);
// Naturals
if (pt >= 8 || bt >= 8) {
setTimeout(() => finalize(p, b), 500);
return;
}
// Player draws on 0–5, stands on 6–7
if (pt <= 5) {
const playerThird = d.pop();
p.push(playerThird);
setTimeout(() => {
setPlayer([...p]); dealSounds(1);
setTimeout(() => {
const ptv = baccaratValue(playerThird);
if (bankerShouldDraw(bt, ptv)) {
b.push(d.pop());
setBanker([...b]); dealSounds(1);
setTimeout(() => finalize(p, b), 700);
} else {
finalize(p, b);
}
}, 700);
}, 400);
} else {
// Player stood; Banker draws 0–5, stands 6–7
if (bt <= 5) {
b.push(d.pop());
setTimeout(() => {
setBanker([...b]); dealSounds(1);
setTimeout(() => finalize(p, b), 700);
}, 400);
} else {
finalize(p, b);
}
}
}, 1900);
};
const finalize = (p, b) => {
const pt = baccaratTotal(p);
const bt = baccaratTotal(b);
const winner = pt > bt ? 'player' : pt < bt ? 'banker' : 'tie';
let delta = -bet;
if (betType === winner) {
if (winner === 'player') delta = bet;
else if (winner === 'banker') delta = Math.floor(bet * 0.95);
else delta = bet * 8;
} else if (winner === 'tie' && betType !== 'tie') {
// Tie pushes Player and Banker bets
delta = 0;
}
const label = `${pt} vs ${bt} · ${winner}`;
if (delta !== 0) settle('Baccarat', delta, label);
setResult({ delta, label });
setPhase('done');
};
const newRound = () => {
setPhase('bet'); setPlayer([]); setBanker([]); setResult(null); setBetType(null);
};
return (
<>
Banker
{banker.length > 0 ? baccaratTotal(banker) : '—'}
{result ?
: phase === 'bet' ?
Choose side and stake
:
dealing…
}
Player
{player.length > 0 ? baccaratTotal(player) : '—'}
{phase === 'bet' && (
<>
Side
{[
{ id: 'player', label: 'Player', pay: '1 : 1' },
{ id: 'tie', label: 'Tie', pay: '8 : 1' },
{ id: 'banker', label: 'Banker', pay: '0.95 : 1' },
].map((opt) => (
))}
)}
{phase === 'dealing' && (
)}
{phase === 'done' && (
)}
);
}
// ═════════════════════════════════════════════════════════════
// HI-LO
// ═════════════════════════════════════════════════════════════
function HiLo({ onBack, onHistory, onRules, onTip }) {
const { balance, settle } = useStore();
const [bet, setBet] = React.useState(null);
const [phase, setPhase] = React.useState('bet'); // bet | playing | reveal | done
const [deck, setDeck] = React.useState([]);
const [current, setCurrent] = React.useState(null);
const [next, setNext] = React.useState(null);
const [multiplier, setMultiplier] = React.useState(1);
const [streak, setStreak] = React.useState(0);
const [result, setResult] = React.useState(null);
const rankIdx = (r) => RANKS.indexOf(r); // A=0 ... K=12
const probHigher = (cur) => (12 - rankIdx(cur.r)) / 12;
const probLower = (cur) => rankIdx(cur.r) / 12;
const start = () => {
if (!bet || bet > balance) return;
const d = shuffleDeck();
setCurrent(d.pop());
setDeck(d);
setNext(null);
setMultiplier(1);
setStreak(0);
setResult(null);
setPhase('playing');
dealSounds(1);
};
const guess = (direction) => {
if (phase !== 'playing') return;
const d = [...deck];
const card = d.pop();
setNext(card);
setPhase('reveal');
dealSounds(1);
setTimeout(() => {
const curIdx = rankIdx(current.r);
const newIdx = rankIdx(card.r);
const win = direction === 'higher' ? newIdx > curIdx : newIdx < curIdx;
if (win) {
const p = direction === 'higher' ? probHigher(current) : probLower(current);
const stepMult = 0.97 / Math.max(0.0001, p);
const newMult = multiplier * stepMult;
setMultiplier(newMult);
setStreak((s) => s + 1);
setTimeout(() => {
setCurrent(card);
setNext(null);
setDeck(d);
setPhase('playing');
}, 1000);
} else {
const delta = -bet;
settle('Hi-Lo', delta, `bust on ${card.r}${card.s} after ${streak}`);
setResult({ delta, label: `bust at ${streak}×` });
setPhase('done');
}
}, 700);
};
const cashOut = () => {
if (streak === 0) return;
const delta = Math.floor(bet * multiplier - bet);
settle('Hi-Lo', delta, `cash · ${multiplier.toFixed(2)}× · ${streak} hits`);
setResult({ delta, label: `${multiplier.toFixed(2)}× · ${streak} hits` });
setPhase('done');
};
const newRound = () => {
setPhase('bet'); setCurrent(null); setNext(null);
setMultiplier(1); setStreak(0); setResult(null);
};
const canHigher = current ? probHigher(current) > 0 : false;
const canLower = current ? probLower(current) > 0 : false;
return (
<>
{/* Multiplier + streak header (only during play) */}
{phase !== 'bet' && (
{streak === 0 ? 'Stake' : 'Streak'}
{multiplier.toFixed(2)}×
{streak} {streak === 1 ? 'hit' : 'hits'}
)}
{/* Cards */}
{current ? (
) : (
)}
→
{next ? (
) : (
)}
{result ?
: phase === 'bet' ?
Stake and reveal
: phase === 'reveal' ?
·
:
Higher or lower?
}
{phase === 'bet' && (
<>
)}
{phase === 'playing' && (
)}
{phase === 'reveal' && (
)}
{phase === 'done' && (
)}
);
}
// ═════════════════════════════════════════════════════════════
// CASINO WAR — one card vs one card, higher wins
// ═════════════════════════════════════════════════════════════
const warValue = (c) => c.r === 'A' ? 13 : RANKS.indexOf(c.r);
function CasinoWar({ onBack, onHistory, onRules, onTip }) {
const { balance, settle } = useStore();
const [bet, setBet] = React.useState(null);
const [phase, setPhase] = React.useState('bet'); // bet | reveal | done
const [player, setPlayer] = React.useState(null);
const [dealer, setDealer] = React.useState(null);
const [result, setResult] = React.useState(null);
const start = () => {
if (!bet || bet > balance) return;
setPhase('reveal'); setResult(null);
const d = shuffleDeck();
const p = d.pop();
const dl = d.pop();
setTimeout(() => { setPlayer(p); dealSounds(1); }, 250);
setTimeout(() => { setDealer(dl); dealSounds(1); }, 700);
setTimeout(() => {
const pv = warValue(p);
const dv = warValue(dl);
let delta = 0, label = '';
if (pv > dv) { delta = bet; label = `${p.r} vs ${dl.r} · win`; }
else if (pv < dv) { delta = -bet; label = `${p.r} vs ${dl.r} · loss`; }
else { delta = 0; label = `tie · ${p.r}`; }
if (delta !== 0) settle('Casino War', delta, label);
setResult({ delta, label });
setPhase('done');
}, 1300);
};
const newRound = () => {
setPhase('bet'); setPlayer(null); setDealer(null); setResult(null);
};
return (
<>
{result ?
: phase === 'reveal' ?
·
:
Highest card wins
}
{phase === 'bet' && (
<>
)}
{phase === 'reveal' && (
)}
{phase === 'done' && (
)}
);
}
// ═════════════════════════════════════════════════════════════
// DRAGON TIGER — bet on which side draws the higher card
// ═════════════════════════════════════════════════════════════
const dtValue = (c) => {
if (c.r === 'A') return 1;
if (c.r === 'K') return 13;
if (c.r === 'Q') return 12;
if (c.r === 'J') return 11;
return parseInt(c.r);
};
function DragonTiger({ onBack, onHistory, onRules, onTip }) {
const { balance, settle } = useStore();
const [bet, setBet] = React.useState(null);
const [betSide, setBetSide] = React.useState(null); // 'dragon' | 'tiger' | 'tie'
const [phase, setPhase] = React.useState('bet'); // bet | reveal | done
const [dragon, setDragon] = React.useState(null);
const [tiger, setTiger] = React.useState(null);
const [result, setResult] = React.useState(null);
const start = () => {
if (!bet || bet > balance || !betSide) return;
setPhase('reveal'); setResult(null);
const d = shuffleDeck();
const dr = d.pop();
const tg = d.pop();
setTimeout(() => { setDragon(dr); dealSounds(1); }, 250);
setTimeout(() => { setTiger(tg); dealSounds(1); }, 700);
setTimeout(() => {
const dv = dtValue(dr);
const tv = dtValue(tg);
const winner = dv > tv ? 'dragon' : dv < tv ? 'tiger' : 'tie';
let delta = -bet;
if (betSide === winner) {
if (winner === 'tie') delta = bet * 8;
else delta = bet;
} else if (winner === 'tie' && (betSide === 'dragon' || betSide === 'tiger')) {
// Standard: half loss on tie when betting dragon/tiger; here we lose full for simplicity
delta = -Math.floor(bet / 2);
}
const label = `${dr.r} vs ${tg.r} · ${winner}`;
if (delta !== 0) settle('Dragon Tiger', delta, label);
setResult({ delta, label });
setPhase('done');
}, 1300);
};
const newRound = () => {
setPhase('bet'); setDragon(null); setTiger(null); setResult(null); setBetSide(null);
};
return (
<>
{result ?
: phase === 'reveal' ?
·
:
Pick a side
}
{phase === 'bet' && (
<>
Side
{[
{ id: 'dragon', label: 'Dragon', pay: '1 : 1' },
{ id: 'tie', label: 'Tie', pay: '8 : 1' },
{ id: 'tiger', label: 'Tiger', pay: '1 : 1' },
].map((opt) => (
))}
)}
{phase === 'reveal' && (
)}
{phase === 'done' && (
)}
);
}
Object.assign(window, { Blackjack, VideoPoker, Baccarat, HiLo, CasinoWar, DragonTiger });