🎮

SUPER
TIC TAC TOE

Win 3 small boards to win the game. Your move sends your opponent to a specific board!

); } return (

{/* Confetti */} {(confetti || []).map(c => (

))} {/* Header Info */}

✕ {getPlayerName('X')}

{getPlayerName('O')} ○

{/* Status Bar */}

{gameState.gameOver ? ( gameState.winner ? `🏆 ${getPlayerName(gameState.winner)} WINS!` : "🤝 DRAW!" ) : ( gameState.aiThinking ? "🤖 AI is thinking..." : isMyTurn() ? "👉 YOUR TURN" : `⏳ Waiting for ${getPlayerName(gameState.currentPlayer)}` )}

{/* SUPER BOARD */}

{(gameState.boards || []).map((board, bIdx) => { const isPlayable = canPlayOnBoard(bIdx); const winner = gameState.superBoard[bIdx]; const isWiggling = wiggleBoard === bIdx; return (

{/* Sub-Board Overlay for Winner */} {winner && (

{winner === 'D' ? '=' : (winner === 'X' ? '✕' : '○')}

)} {/* Cells */} {(board || []).map((cell, cIdx) => (

handleCellClick(bIdx, cIdx)} style={{ background: cell ? (cell === 'X' ? 'rgba(255, 0, 255, 0.3)' : 'rgba(0, 255, 255, 0.3)') : 'rgba(255,255,255,0.08)', borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20, fontWeight: 900, color: cell === 'X' ? '#FF66FF' : (cell === 'O' ? '#66FFFF' : '#FFF'), textShadow: cell ? (cell === 'X' ? '0 0 10px #FF00FF' : '0 0 10px #00FFFF') : 'none', cursor: isPlayable && !cell ? 'pointer' : 'default', transition: 'all 0.15s ease', border: cell ? (cell === 'X' ? '1px solid rgba(255, 0, 255, 0.4)' : '1px solid rgba(0, 255, 255, 0.4)') : '1px solid transparent', }} onMouseEnter={(e) => { if (isPlayable && !cell) { e.currentTarget.style.background = 'rgba(255, 255, 255, 0.2)'; e.currentTarget.style.transform = 'scale(1.05)'; } }} onMouseLeave={(e) => { if (!cell) { e.currentTarget.style.background = 'rgba(255, 255, 255, 0.08)'; e.currentTarget.style.transform = 'scale(1)'; } }} > {cell === 'X' ? '✕' : (cell === 'O' ? '○' : '')}

))}

); })}

{/* Controls */}

{gameState.gameOver && ( )}

); }

SUPERTIC TAC TOE

SUPER
TIC TAC TOE