How hkoado/ootv2-game works
OTTv2 is a browser-based 9×9 strategy game for two seated players, with spectators following rooms in real time. The principal flow is: players create or join a room, the host approves the opponent, each team places its pieces in timed setup, then players take turns moving and capturing until a win condition is met; the interface shows the board, player counts, history and result. The README describes real-time room sync and spectator support; source excerpts show game rules and state handling, but do not expose every sync transport detail.
Main entry points: App.jsx App coordinator · usePlayRoom.js Room state hook · Board.jsx Interactive board · rules.js Move and win rules
Components 21
Player experience
- App coordinator
src/App.jsx - Lobby
src/components/Lobby.jsx - Room header
src/components/Header.jsx - Game result
src/components/GameOverModal.jsx - Rules guide
src/components/RulesModal.jsx
Rooms and sync
- Room state hook
src/sync/usePlayRoom.js - playhtml sync
- PartyKit service
- PeerJS connections
- BroadcastChannel fallback
Game stages
- Interactive board
src/components/Board.jsx - Board squares
src/components/Square.jsx - Piece display
src/components/Piece.jsx - Timed setup
src/components/SetupPanel.jsx - Player status
src/components/PlayerCard.jsx - Move history
src/components/MoveHistory.jsx - Piece icons
src/components/PieceIcons.jsx
Game engine
- Game state machine
src/game/gameState.js - Move and win rules
src/game/rules.js - Board and piece constants
src/game/constants.js
Other components
- Players and spectators
Connections 26
- Players and spectators → Lobby: create or join
- Lobby → App coordinator: requests room
- App coordinator → Room state hook: coordinates room
- Room state hook → playhtml sync: syncs state
- playhtml sync → PartyKit service: uses infrastructure
- Room state hook → PeerJS connections: connects peers
- Room state hook → BroadcastChannel fallback: falls back
- Room state hook → Game state machine: creates and updates
- Game state machine → Move and win rules: validates moves and wins
- Move and win rules → Board and piece constants: reads rules data
- Game state machine → Board and piece constants: reads game definitions
- App coordinator → Lobby: renders
- App coordinator → Room header: renders
- App coordinator → Interactive board: renders and handles actions
- App coordinator → Timed setup: renders and handles setup
- App coordinator → Player status: renders
- App coordinator → Move history: renders
- App coordinator → Game result: shows result
- Room header → Rules guide: opens rules
- Interactive board → Move and win rules: gets valid moves
- Interactive board → Board squares: renders squares
- Interactive board → Piece display: renders pieces
- Timed setup → Piece icons: renders piece icons
- Player status → Move and win rules: counts remaining pieces
- Players and spectators → Interactive board: selects and moves
- Players and spectators → Timed setup: places pieces