hiding game mode for now as there's no different game modes for either tictactoe or battleship

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
+          {renderGameBoard()}
-            boards={boards}
-            turn={turn}
-            winner={winner}
-            gameOver={gameOver}
-            players={players}
-            myUserId={session?.user_id ?? null}
-            onCellClick={handleCellClick}
-          />
         </div>
       </motion.div>
     </div>

src/Player.tsx

@@ -179,23 +179,23 @@ export default function Player({
               <option value="battleship">Battleship</option>
             </select>
 
-            <select
+            {/*<select*/}
-              value={selectedMode}
+            {/*  value={selectedMode}*/}
-              disabled={isQueueing}
+            {/*  disabled={isQueueing}*/}
-              onChange={(e) => setSelectedMode(e.target.value)}
+            {/*  onChange={(e) => setSelectedMode(e.target.value)}*/}
-              style={{
+            {/*  style={{*/}
-                padding: "8px",
+            {/*    padding: "8px",*/}
-                margin: "10px 0 16px",
+            {/*    margin: "10px 0 16px",*/}
-                width: "60%",
+            {/*    width: "60%",*/}
-                borderRadius: "10px",
+            {/*    borderRadius: "10px",*/}
-                background: "#222",
+            {/*    background: "#222",*/}
-                color: "white",
+            {/*    color: "white",*/}
-                border: "1px solid #333",
+            {/*    border: "1px solid #333",*/}
-              }}
+            {/*  }}*/}
-            >
+            {/*>*/}
-              <option value="classic">Classic</option>
+            {/*  <option value="classic">Classic</option>*/}
-              <option value="blitz">Blitz</option>
+            {/*  <option value="blitz">Blitz</option>*/}
-            </select>
+            {/*</select>*/}
 
             {!isQueueing && (
               <motion.button

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",
+      data: {
         row: r,
         col: c,
+      }
     });
   }