🤖

); } if (player.avatarUrl) { return ( {player.displayName}

); } return (

{player.displayName?.slice(0, 1).toUpperCase() || '?'}

); }; return (

{/* 🏆 HEADS UP DISPLAY */}

FACE-OFF ARENA

{/* Player X */}

{renderAvatar(playerX, 48, true)} {playerX.displayName}

{/* VS Badge */}

{/* Player O */}

{renderAvatar(playerO, 48, true)} {playerO.displayName}

{/* Turn Indicator */}

{winner === 'draw' ? "IT'S A DRAW!" : winner ? `WINNER: ${winner === 'X' ? playerX.displayName : playerO.displayName}` : myTurn ? "👉 YOUR TURN!" : `⏳ WAITING FOR ${currentPlayer.displayName}...`}

{/* 🕹️ TOUCH GRID AREA */}

{/* Winning Line Overlay */} {winningLine && ( )} {(board || []).map((cell, i) => { const isWinner = winningLine?.includes(i); const cellOwner = cell === 'X' ? playerX : (cell === 'O' ? playerO : null); const isInteractable = !cell && !winner && myTurn; return ( ); })}

{/* 🦶 FOOTER ACTIONS */}

{winner ? ( ) : (

{!isMultiplayer ? ( ) : ( Room: {(members || []).length} Player{(members || []).length !== 1 ? 's' : ''} )}

)}

); }