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

@@ -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}