0 ? -18 : 0, position: 'relative', zIndex: index, animation: 'slideIn 0.3s ease-out forwards', animationDelay: animDelay + 's', transform: 'translateY(-10px)', opacity: 0, transition: 'transform 0.3s ease', }}> {isHidden ? (

🂠

) : ( <>

{card?.rank}

{card?.suit}

)}

); }; const ConfettiPieces = () => { if (!showConfetti) return null; const pieces = Array.from({ length: 30 }, (_, i) => ({ left: Math.random() * 100, delay: Math.random() * 0.5, duration: 1.5 + Math.random() * 1.5, color: ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7'][Math.floor(Math.random() * 6)], size: 4 + Math.random() * 6, })); return (

{(pieces || []).map((p, i) => (

7 ? '50%' : 1, backgroundColor: p.color, animation: `confettiFall ${p.duration}s ease-in ${p.delay}s forwards`, }} /> ))}

); }; const styles = ` @keyframes slideIn { from { transform: translateY(-20px) rotate(-5deg); opacity: 0; } to { transform: translateY(0) rotate(0deg); opacity: 1; } } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } } @keyframes chipBounce { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } 50% { box-shadow: 0 0 20px 4px rgba(212, 175, 55, 0.4); } } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes messagePopIn { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } `; const bg = '#F5F0E8'; const cardBg = '#FFFFFF'; const textPrimary = '#2c3e50'; const textSecondary = '#8a8578'; const feltGreen = '#2d6a1e'; const feltGreenLight = '#3a8528'; const accent = '#D4AF37'; const accentDark = '#b8962e'; return (

{/* Header */}

Blackjack

High Roller Lounge

{/* Chip Balance */}

🪙 {chips} chips {chipAnim && (

{chipAnim}

)} {newHighScore && (

NEW HIGH!

)}

{/* Members Row */}

{(memberList || []).map(m => (

m?.handle && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px', background: cardBg, borderRadius: 20, border: '1px solid #ece8e0', cursor: 'pointer', flexShrink: 0, minWidth: 'fit-content', }}>

{!m?.avatarUrl && }

{m?.displayName || 'Player'}

))}

{/* Game Table */}

{/* Felt pattern overlay */}

{/* Dealer Section */}

Dealer {((dealerHand || []).length > 0 && (revealDealer || gameState === 'done')) && ( {handValue(dealerHand)} )} {((dealerHand || []).length > 0 && !revealDealer && gameState === 'playing') && ( {cardValue(dealerHand[0])} )}

{DEMO_MSG ? (

{[{ suit: '♠', rank: 'K', id: 'd1' }, { suit: '♥', rank: '8', id: 'd2' }].map((c, i) => renderCard(c, i, false, 2))}

) : ( (dealerHand ?? []).map((c, i) => renderCard(c, i, i === 1 && !revealDealer && gameState === 'playing', (dealerHand || []).length)) )}

{/* Center Message */}

{DEMO_MSG && (

Player Wins!

Demo hand • Tap Deal to play

)} {message && (

{messageType === 'blackjack' && '✨ '}{message}{messageType === 'blackjack' && ' ✨'}

{gameState === 'done' && (

Bet: {BET_AMOUNT} chips

{(messageType === 'win' || messageType === 'blackjack') && ( )}

)}

)} {gameState === 'playing' && !message && (

Bet: {BET_AMOUNT} 🪙

)}

{/* Player Section */}

You {(playerHand || []).length > 0 && ( {handValue(playerHand)} )}

{DEMO_MSG ? (

{[{ suit: '♦', rank: 'Q', id: 'p1' }, { suit: '♣', rank: '10', id: 'p2' }].map((c, i) => renderCard(c, i, false, 2))}

) : ( (playerHand ?? []).map((c, i) => renderCard(c, i, false, (playerHand || []).length)) )}

{/* Action Buttons */}

{(gameState === 'idle' || gameState === 'done') && ( )} {gameState === 'playing' && (

)}

{/* Leaderboard Bottom Sheet */} {showLeaderboard && (

setShowLeaderboard(false)} style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(4px)', }} />

High Rollers

Best chip counts

{(scores || []).length === 0 ? (

🎰

No high scores yet.

Win big to claim the top spot!

) : ( (scores || []).map((s, i) => { const isMe = s?._user?.id === user?.id; const medals = ['🥇', '🥈', '🥉']; return (

s?._user?.handle && openProfile(s._user.handle)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '12px 0', borderBottom: i < (scores || []).length - 1 ? '1px solid #ece8e0' : 'none', cursor: s?._user?.handle ? 'pointer' : 'default', animation: isMe && newHighScore ? 'pulseGlow 1.5s ease infinite' : 'none', borderRadius: isMe && newHighScore ? 12 : 0, paddingLeft: isMe && newHighScore ? 8 : 0, paddingRight: isMe && newHighScore ? 8 : 0, }}>

{i < 3 ? medals[i] : (i + 1)}

{!s?._user?.profileImageUrl && }

{isMe ? 'You' : (s?._user?.displayName || 'Player')}

🪙 {s?.score ?? 0}

); }) )}

)} {/* Mini Leaderboard Preview */} {!showLeaderboard && (scores || []).length > 0 && (

setShowLeaderboard(true)} style={{ marginTop: 8, padding: '10px 16px', background: cardBg, borderRadius: 14, border: '1px solid #ece8e0', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'space-between', }}>

🏆 Top: {scores[0]?._user?.id === user?.id ? 'You' : (scores[0]?._user?.displayName || 'Player')} 🪙 {scores[0]?.score ?? 0}

›

)}

); }

🏆 High Rollers

High Rollers