); } return (

); }; const renderWinLine = () => { if (!winLine || (winLine || []).length !== 3) return null; const getPos = (idx) => ({ col: idx % 3, row: Math.floor(idx / 3) }); const start = getPos(winLine[0]); const end = getPos(winLine[2]); const sx = (start.col * 33.33) + 16.66; const sy = (start.row * 33.33) + 16.66; const ex = (end.col * 33.33) + 16.66; const ey = (end.row * 33.33) + 16.66; const color = winner === 'X' ? '#00D4FF' : '#BD00FF'; return ( ); }; return (

{/* Ambient background orbs */}

{/* Floating particles */} {(particles || []).map(p => (

))} {/* Header */}

AETHER GRID

{aiMode ? 'VS AETHERMIND' : 'NEURAL LINK'}

{/* Score display */}

X • {getPlayerName('X')}

{scores?.x ?? 0}

{scores?.draws ?? 0}

O • {getPlayerName('O')}

{scores?.o ?? 0}

{/* Status text */}

{aiThinking && ⚡} {statusText} {isMyTurn && !gameOver && !aiThinking && ▸}

{/* Game Board */}

{/* Board glow */}

{/* Grid container */}

{renderWinLine()} {(board ?? []).map((cell, i) => (

handleCellClick(i)} onPointerEnter={() => setHoverCell(i)} onPointerLeave={() => setHoverCell(null)} > {/* Hover ghost */} {!cell && hoverCell === i && isMyTurn && !gameOver && (

{xIsNext ? 'X' : 'O'}

)} {renderSymbol(cell, i)} {/* Cell shimmer effect */} {cell && (

)}

))}

{/* Victory / Draw Overlay */} {(showVictory || showDraw) && (

{showVictory ? '👑' : '🌀'}

{showVictory ? (winner === mySymbol || (aiMode && winner === 'X') ? 'VICTORY' : 'DEFEAT') : 'STALEMATE'}

{showVictory ? `${getPlayerName(winner)} dominates the Aether` : 'The quantum field is balanced' }

)} {/* Bottom controls */}

{gameOver && !showVictory && !showDraw && ( )}

{/* Member avatars for multiplayer */} {isMultiplayer && (memberList ?? []).length > 1 && (

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

m?.handle && openProfile(m.handle)} style={{ width: 36, height: 36, borderRadius: '50%', background: m?.avatarUrl ? `url(${m.avatarUrl}) center/cover` : 'linear-gradient(135deg, #00D4FF, #BD00FF)', border: m?.id === user?.id ? '2px solid #39FF14' : '2px solid rgba(255,255,255,0.15)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, boxShadow: m?.id === user?.id ? '0 0 10px rgba(57, 255, 20, 0.3)' : 'none', transition: 'all 0.2s ease' }} > {!m?.avatarUrl && 👤}

))}

)}

); }