{/* Header */}

Showdown

{/* Game Arena */}

{/* Opponent Area */}

OPPONENT

{gameState === 'IDLE' ? '🤖' : gameState === 'CHOOSING' ? '⏱️' : botChoice?.emoji}

{/* Center Action Area */}

{gameState === 'RESULT' && (

{resultText}

)} {gameState === 'CHOOSING' && (

)}

{/* Player Area */}

{Object.values(CHOICES || {}).map(choice => (

playGame(choice.id)} style={getChoiceStyle(playerChoice?.id === choice.id)} > {choice.emoji}

))}

CHOOSE YOUR WEAPON

{/* Reset Button Overlay */} {gameState === 'RESULT' && ( )}

{/* Active Members */} {isMultiplayer && (memberList || []).length > 0 && (

In This Room — {(memberList || []).length}

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

(m.handle) && openProfile(m.handle)} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: m.handle ? 'pointer' : 'default', minWidth: 56 }} >

{!m.avatarUrl && (m.displayName || m.name || '?')[0]?.toUpperCase()}

{m.id === user?.id ? 'You' : (m.displayName || m.name || 'Anon')}

))}

)} {/* Live Leaderboard */}

Live Ranks

{(leaderboard || []).length} Warriors

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

No scores yet. Strike first!

) : ( (leaderboard || []).slice(0, 5).map((entry, index) => (

entry._user?.handle && openProfile(entry._user.handle)} style={{ display: 'flex', alignItems: 'center', padding: '10px 14px', background: entry._user?.id === user?.id ? 'rgba(255,0,255,0.1)' : '#1A1A2A', borderRadius: 12, border: entry._user?.id === user?.id ? '1px solid #FF00FF' : '1px solid transparent', cursor: entry._user?.handle ? 'pointer' : 'default' }}>

#{index + 1}

{!entry._user?.profileImageUrl && '👤'}

{entry._user?.displayName || 'Anonymous'} {entry.streak >= 3 && ( 🔥 {entry.streak} WINSTREAK )}

{entry.wins}

)) )}

{/* Recent Activity Feed */} {(recentActivity || []).length > 0 && (

Recent Battles

{(recentActivity || []).slice(0, 8).map((act, i) => { const isWin = (act.outcome || '').includes('WIN') && !(act.outcome || '').includes('BOT'); const isTie = (act.outcome || '').includes('TIE'); return (

act._user?.handle && openProfile(act._user.handle)} style={{ color: '#FF00FF', fontWeight: 'bold', cursor: act._user?.handle ? 'pointer' : 'default' }} > {act._user?.displayName || 'Someone'} threw {act.choice === 'ROCK' ? '✊' : act.choice === 'PAPER' ? '✋' : '✌️'} vs {act.botChoice === 'ROCK' ? '✊' : act.botChoice === 'PAPER' ? '✋' : '✌️'} {isWin ? 'W' : isTie ? 'T' : 'L'}

); })}

)}