feat(ui): add dynamic game board selection and hide board until match join

Added renderGameBoard() resolver for dynamic board rendering

Board now hidden before match join

Game auto-selected based on metadata.game from Player matchmaking

Updated header to use dynamic game name

Removed hardcoded Battleship board

src/App.tsx

@@ -5,6 +5,7 @@ import Player from "./Player";
 import { PlayerModel } from "./models/player";
 
 import TicTacToeBoard from "./games/tictactoe/TicTacToeBoard";
+import BattleShipBoard from "./games/battleship/BattleShipBoard";
 
 export default function App() {
   // setting up a 2D game boards
@@ -13,9 +14,44 @@ export default function App() {
   const [winner, setWinner] = useState<string | null>(null);
   const [gameOver, setGameOver] = useState<boolean | null>(null);
   const [players, setPlayers] = useState<PlayerModel[]>([]);
+  const [metadata, setMetadata] = useState<Record<string, any>>({});
 
   const { sendMatchData, onMatchData, matchId, session } = useNakama();
 
+  function renderGameBoard() {
+    if (!matchId || !metadata?.game) return null;
+
+    switch (metadata.game) {
+      case "tictactoe":
+        return (
+          <TicTacToeBoard
+            boards={boards}
+            turn={turn}
+            winner={winner}
+            gameOver={gameOver}
+            players={players}
+            myUserId={session?.user_id ?? null}
+            onCellClick={handleCellClick}
+          />
+        );
+
+      case "battleship":
+        return (
+          <BattleShipBoard
+            boards={boards}
+            turn={turn}
+            winner={winner}
+            gameOver={gameOver}
+            players={players}
+            myUserId={session?.user_id ?? null}
+            metadata={metadata}
+          />
+        );
+
+      default:
+        return <div>Unknown game: {metadata.game}</div>;
+    }
+  }
   // ------------------------------------------
   // MATCH DATA CALLBACK (from Player component)
   // ------------------------------------------
@@ -39,6 +75,7 @@ export default function App() {
         setWinner(null);
       }
       setPlayers(state.players || []);
+      setMetadata(state.metadata || {});
     }
   }
 
@@ -86,7 +123,7 @@ export default function App() {
           letterSpacing: "1px",
         }}
       >
-        Tic Tac Toe
+        Games
       </header>
 
       {/* ---------------- MAIN CONTENT (scrolls) ---------------- */}
@@ -113,15 +150,7 @@ export default function App() {
             minWidth: "300px",
           }}
         >
-          <TicTacToeBoard
-            boards={boards}
-            turn={turn}
-            winner={winner}
-            gameOver={gameOver}
-            players={players}
-            myUserId={session?.user_id ?? null}
-            onCellClick={handleCellClick}
-          />
+          {renderGameBoard()}
         </div>
       </motion.div>
     </div>

src/games/battleship/BattleShipBoard.tsx

@@ -39,7 +39,6 @@ export default function BattleShipBoard({
   const myIndex = players.findIndex((p) => p.user_id === myUserId);
   const oppIndex = myIndex === 0 ? 1 : 0;
 
-  console.log(metadata, "metadata");
   const phase = metadata["phase"] ?? "lobby";
   const isMyTurn = phase === "battle" && turn === myIndex;
 
@@ -68,8 +67,10 @@ export default function BattleShipBoard({
   function handleShoot(r: number, c: number) {
     sendMatchData(matchId!, 1, {
       action: "shoot",
-      row: r,
-      col: c,
+      data: {
+        row: r,
+        col: c,
+      }
     });
   }