From 2b0af9fd1f394a8ba01d17bbd6a381bad1af96b6 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Wed, 3 Dec 2025 17:36:29 +0530
Subject: [PATCH] feat(tictactoe): migrate to multi-board state structure

- Replaced single `board` state with `boards` map in App.tsx
- Updated state parsing to use `state.boards` instead of `state.board.grid`
- Updated TicTacToeBoard props to accept `boards` instead of `board`
- Safely extracted TicTacToe board using `boards['tictactoe']?.grid ?? null`
- Added loading fallback when board is not yet available
- Updated rendering guards to prevent undefined map errors

This change fully aligns the frontend with the new multi-board MatchState
introduced on the server (supports TicTacToe, Battleship, and future games).
---
 src/App.tsx                            |  8 ++++----
 src/games/tictactoe/TicTacToeBoard.tsx | 11 +++++++----
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 23e4e9d..04ba19e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,8 +7,8 @@ import { PlayerModel } from "./models/player";
 import TicTacToeBoard from "./games/tictactoe/TicTacToeBoard";
 
 export default function App() {
-  // setting up a 2D game board
-  const [board, setBoard] = useState<string[][]>([[]]);
+  // setting up a 2D game boards
+  const [boards, setBoards] = useState<Record<string, { grid: string[][] }>>({});
   const [turn, setTurn] = useState<number>(0);
   const [winner, setWinner] = useState<string | null>(null);
   const [gameOver, setGameOver] = useState<boolean | null>(null);
@@ -26,7 +26,7 @@ export default function App() {
       const state = msg.data;
       console.log("Match state:", state);
 
-      setBoard(state.board.grid);
+      setBoards(state.boards);
       setTurn(state.turn);
       setGameOver(state.game_over);
       if (state.winner >= 0) {
@@ -114,7 +114,7 @@ export default function App() {
           }}
         >
           <TicTacToeBoard
-            board={board}
+            boards={boards}
             turn={turn}
             winner={winner}
             gameOver={gameOver}
diff --git a/src/games/tictactoe/TicTacToeBoard.tsx b/src/games/tictactoe/TicTacToeBoard.tsx
index a77fef0..3f8b4ac 100644
--- a/src/games/tictactoe/TicTacToeBoard.tsx
+++ b/src/games/tictactoe/TicTacToeBoard.tsx
@@ -5,7 +5,7 @@ import getHaiku from "../../utils/haikus";
 import { PlayerModel } from "../../models/player";
 
 interface BoardProps {
-  board: string[][];
+  boards: Record<string, { grid: string[][] }>;
   turn: number;
   winner: string | null;
   gameOver: boolean | null;
@@ -15,7 +15,7 @@ interface BoardProps {
 }
 
 export default function TicTacToeBoard({
-  board,
+  boards,
   turn,
   winner,
   gameOver,
@@ -62,6 +62,7 @@ export default function TicTacToeBoard({
   const nextLineIn = 3600;
   const allLinesStay = 2400;
   const allLinesFade = 1200;
+  const board = boards['tictactoe']?.grid ?? null;
 
   useEffect(() => {
     const totalTime = haiku.length * nextLineIn + allLinesStay + allLinesFade;
@@ -107,7 +108,9 @@ export default function TicTacToeBoard({
           {/* -------------------------
               BOARD
           -------------------------- */}
-          <motion.div
+          {!board && <div style={{ textAlign: "center", marginTop: "14px" }}>Loading...</div>}
+
+          {board && <motion.div
             layout
             style={{
               display: "grid",
@@ -180,7 +183,7 @@ export default function TicTacToeBoard({
                 );
               })
             )}
-          </motion.div>
+          </motion.div>}
 
           {!winner && (
             <div