RUMBLE

{isSolo ? 'SOLO ARENA' : 'MULTIPLAYER ARENA'}

{/* Leaderboard */}

LEADERBOARD

{(() => { const sorted = [...(activePlayers || [])].slice(0, 6).sort((a, b) => { const sa = scores[a.id]?.wins ?? (isSolo && !hasPlayed && a.id === user.id ? 1 : 0); const sb = scores[b.id]?.wins ?? (isSolo && !hasPlayed && b.id === user.id ? 1 : 0); return sb - sa; }); return (sorted || []).map((p, idx) => { const pScore = scores[p.id] || (isSolo && !hasPlayed && p.id === user.id ? { wins: 1, streak: 1, maxStreak: 1 } : { wins: 0, streak: 0, maxStreak: 0 }); const medal = idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : ''; return (

p.handle && p.id !== 'ai' && openProfile && openProfile(p.handle)} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '8px 4px', borderBottom: idx < (sorted || []).length - 1 ? '1px solid rgba(0,255,255,0.1)' : 'none', cursor: p.handle && p.id !== 'ai' ? 'pointer' : 'default' }} >

{medal || `#${idx + 1}`} {p.avatarUrl ? (

) : ( {p.id === 'ai' ? '🤖' : '👤'} )} {(p.displayName || p.name || 'Player').split(' ')[0]} {p.handle && p.id !== 'ai' && ( @{p.handle} )}

{pScore.streak >= 2 && ( 🔥{pScore.streak} )} 0 ? '#FFFF00' : '#fff', minWidth: 28, textAlign: 'right' }} className={pScore.wins > 0 ? 'glow-text' : ''}> {pScore.wins} W

); }); })()}

{/* Arena */}

{!isRevealing && !isCountingDown && (

{iHaveChosen ? 'AWAITING OPPONENTS...' : 'CHOOSE YOUR WEAPON'}

{Object.entries(WEAPONS || {}).map(([key, data]) => { const isSelected = currentRound.choices?.[user.id] === key; const opacity = iHaveChosen ? (isSelected ? 1 : 0.3) : 1; return ( ); })}

{iHaveChosen && isMultiplayer && (

)}

)} {isCountingDown && (

{timeRemaining}

GET READY

)} {isRevealing && (

{isRoundDraw ? 'DRAW!' : ((roundWinners || []).includes(user.id) ? 'YOU WIN!' : 'DEFEAT')}

{Object.entries(currentRound.choices || {}).map(([uid, weapon]) => { const player = getPlayer(uid); const isWinner = (roundWinners || []).includes(uid); const isLoser = !isDraw && !isWinner; const wData = WEAPONS[weapon]; return (

player.handle && openProfile && openProfile(player.handle)} className={`y3k-border ${isWinner ? 'winner-card' : ''} ${isLoser ? 'loser-card' : ''}`} style={{ padding: '16px', borderRadius: 20, display: 'flex', flexDirection: 'column', alignItems: 'center', minWidth: 100, background: isWinner ? 'rgba(255,255,0,0.1)' : 'rgba(10,10,26,0.8)', cursor: player.handle ? 'pointer' : 'default' }} >

{wData.icon}

{player.avatarUrl ? (

) : ( {uid === 'ai' ? '🤖' : '👤'} )} {player.displayName.split(' ')[0]}

); })}

)}

{/* Bottom Actions / History */}

{isRevealing && ( )}

RECENT RUMBLES

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

No matches played yet.

) : ( (history || []).map((h, i) => { const myChoice = h.choices[user.id]; const myWin = (h.winners || []).includes(user.id); const draw = (h.winners || []).length === 0; return (

{myWin ? '🏆' : (draw ? '🤝' : '❌')}

{h.isDemo && DEMO} {myWin ? 'Victory' : (draw ? 'Draw' : 'Defeat')}

{myChoice ? WEAPONS[myChoice]?.icon : '➖'} vs {Object.entries(h.choices || {}).filter(([uid]) => uid !== user.id).map(([uid, w]) => WEAPONS[w]?.icon).join(' ')}

); }) )}

); }