+ {/* Top bar */}
+
+
+ {config.mode === 'classic' ? 'CLASSIC' : 'FULL BOARD'} · Connect {config.board.connectN}
+
+
+ Round {round}/{config.totalRounds}
+
+
+
+ {/* Current turn indicator */}
+ {phase === 'playing' && currentPlayer && (
+
+ {currentPlayer.type === 'bot' ? '🤖' : '👤'} {currentPlayer.name}'s Turn
+
+ )}
+
+ {/* Round/Match end overlay */}
+ {isRoundOver && (
+
+ {isDraw ? (
+
It's a Draw!
+ ) : winner ? (
+
p.id === winner)?.color ?? '#17171F',
+ margin: '0 0 8px',
+ }}>
+ 🎉 {config.players.find(p => p.id === winner)?.name} Wins!
+
+ ) : null}
+
+
+ {phase === 'roundEnd' && (
+
+ )}
+ {phase === 'matchEnd' && (
+
+
+ Match Over!
+
+
+
+ )}
+
+
+ )}
+
+ {/* Board */}
+
+
+ {/* Scoreboard */}
+
+ {config.players.map(player => (
+
+
+
+ {player.name}
+
+
+ {scores[player.id] ?? 0}
+
+
+ ))}
+
+
+ {/* Menu button */}
+ {phase === 'playing' && (
+
+ )}
+
+
Game Setup
+
+ {/* Board size */}
+
+
+
+ {[4, 5, 6].map(n => (
+
+ ))}
+
+
+
+ {/* Game mode */}
+
+
+
+ {(['classic', 'fullboard'] as GameMode[]).map(mode => (
+
+ ))}
+
+
+
+ {/* Rounds */}
+
+
+
+ {[1, 3, 5].map(r => (
+
+ ))}
+
+
+
+ {/* Player count */}
+
+
+
+ {[2, 3, 4].map(c => (
+
+ ))}
+
+
+
+ {/* Player config */}
+ {config.players.map((player, idx) => (
+
+
+ {player.name}
+
+
+ {player.type === 'bot' && (
+
+ {(['easy', 'medium', 'hard'] as BotDifficulty[]).map(d => (
+
+ ))}
+
+ )}
+
+ ))}
+
+ {/* Action buttons */}
+
+
+
+
+
+ {/* Logo */}
+
+
+ ConnectX
+
+
+ Drop. Connect. Win.
+
+
+
+ {/* Main menu cards */}
+
+ setPhase('lobby')}
+ />
+ {
+ // Pre-configure for bot match and go to lobby
+ const store = useGameStore.getState();
+ store.updateConfig({
+ players: [
+ { id: 1, name: 'Player 1', type: 'human', color: '#FF6FAF' },
+ { id: 2, name: 'Bot', type: 'bot', botDifficulty: 'medium', color: '#64E0C6' },
+ ],
+ });
+ setPhase('lobby');
+ }}
+ />
+ {}}
+ />
+
+