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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tictactoe-vite",
-  "version": "v1.0.0",
+  "version": "v1.1.0",
   "private": true,
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -1,21 +1,57 @@
-import { useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { useNakama } from "./providers/NakamaProvider";
-import Board from "./Board";
 import Player from "./Player";
+import { PlayerModel } from "./models/player";
 
-export default function TicTacToe() {
-  const [board, setBoard] = useState<string[][]>([
-    ["", "", ""],
-    ["", "", ""],
-    ["", "", ""]
-  ]);
+import TicTacToeBoard from "./games/tictactoe/TicTacToeBoard";
+import BattleShipBoard from "./games/battleship/BattleShipBoard";
+
+export default function App() {
+  // 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 [players, setPlayers] = useState<string[]>([]);
+  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)
   // ------------------------------------------
@@ -26,10 +62,20 @@ export default function TicTacToe() {
       const state = msg.data;
       console.log("Match state:", state);
 
-      setBoard(state.board);
+      setBoards(state.boards);
       setTurn(state.turn);
-      setWinner(state.winner || null);
+      setGameOver(state.game_over);
+      if (state.winner >= 0) {
+        setWinner(state.players[state.winner].username);
+      // } else if (state.game_over) {
+      //   // Game ended but winner = -1 → draw
+      //   setWinner("draw");
+      } else {
+        // Ongoing game, no winner
+        setWinner(null);
+      }
       setPlayers(state.players || []);
+      setMetadata(state.metadata || {});
     }
   }
 
@@ -50,7 +96,7 @@ export default function TicTacToe() {
   function handleCellClick(row: number, col: number) {
     if (!matchId) return;
 
-    sendMatchData(matchId, 1, { row, col }); // OpMove=1
+    sendMatchData(matchId, 1, {data: {row, col}});
   }
 
   return (
@@ -77,7 +123,7 @@ export default function TicTacToe() {
           letterSpacing: "1px",
         }}
       >
-        Tic Tac Toe
+        Games
       </header>
 
       {/* ---------------- MAIN CONTENT (scrolls) ---------------- */}
@@ -104,14 +150,7 @@ export default function TicTacToe() {
             minWidth: "300px",
           }}
         >
-          <Board
-            board={board}
-            turn={turn}
-            winner={winner}
-            players={players}
-            myUserId={session?.user_id ?? null}
-            onCellClick={handleCellClick}
-          />
+          {renderGameBoard()}
         </div>
       </motion.div>
     </div>

src/Player.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import Leaderboard from "./Leaderboard";
 import { useNakama } from "./providers/NakamaProvider";
 
 export default function Player({
@@ -15,11 +14,13 @@ export default function Player({
     logout,
     onMatchData,
     joinMatchmaker,
+    exitMatchmaker,
   } = useNakama();
 
   const [username, setUsername] = useState(
     localStorage.getItem("username") ?? ""
   );
+  const [selectedGame, setSelectedGame] = useState("tictactoe");
   const [selectedMode, setSelectedMode] = useState("classic");
   const [isQueueing, setIsQueueing] = useState(false);
   const isRegistered = localStorage.getItem("registered") === "yes";
@@ -37,11 +38,18 @@ export default function Player({
   // ------------------------------------------
   // MATCHMAKING
   // ------------------------------------------
-  async function startQueue(selectedMode: string) {
+  async function startQueue(
+    selectedGame: string,
+    selectedMode: string
+  ) {
     setIsQueueing(true);
+    const gameMetadata = {
+      game: selectedGame,
+      mode: selectedMode,
+    }
 
     try {
-      const ticket = await joinMatchmaker(selectedMode);
+      const ticket = await joinMatchmaker(gameMetadata);
       console.log("Queued:", ticket);
     } catch (err) {
       console.error("Matchmaking failed:", err);
@@ -49,10 +57,17 @@ export default function Player({
     }
   }
 
-  function cancelQueue() {
+  async function cancelQueue(
+    selectedGame: string,
+    selectedMode: string
+  ) {
     setIsQueueing(false);
-    // Nakama matchmaker tickets auto-expire by default in your setup.
-    // If you later add manual ticket cancel RPC, call it here.
+
+    const gameMetadata = {
+      game: selectedGame,
+      mode: selectedMode,
+    }
+    await exitMatchmaker(gameMetadata)
   }
 
   useEffect(() => {
@@ -147,9 +162,9 @@ export default function Player({
             </label>
 
             <select
-              value={selectedMode}
+              value={selectedGame}
               disabled={isQueueing}
-              onChange={(e) => setSelectedMode(e.target.value)}
+              onChange={(e) => setSelectedGame(e.target.value)}
               style={{
                 padding: "8px",
                 margin: "10px 0 16px",
@@ -160,14 +175,35 @@ export default function Player({
                 border: "1px solid #333",
               }}
             >
-              <option value="classic">Classic</option>
-              <option value="blitz">Blitz</option>
+              <option value="tictactoe">Tic Tac Toe</option>
+              <option value="battleship">Battleship</option>
             </select>
 
+            {/*<select*/}
+            {/*  value={selectedMode}*/}
+            {/*  disabled={isQueueing}*/}
+            {/*  onChange={(e) => setSelectedMode(e.target.value)}*/}
+            {/*  style={{*/}
+            {/*    padding: "8px",*/}
+            {/*    margin: "10px 0 16px",*/}
+            {/*    width: "60%",*/}
+            {/*    borderRadius: "10px",*/}
+            {/*    background: "#222",*/}
+            {/*    color: "white",*/}
+            {/*    border: "1px solid #333",*/}
+            {/*  }}*/}
+            {/*>*/}
+            {/*  <option value="classic">Classic</option>*/}
+            {/*  <option value="blitz">Blitz</option>*/}
+            {/*</select>*/}
+
             {!isQueueing && (
               <motion.button
                 whileTap={{ scale: 0.95 }}
-                onClick={() => startQueue(selectedMode)}
+                onClick={() => startQueue(
+                  selectedGame,
+                  selectedMode,
+                )}
                 style={{
                   padding: "10px 20px",
                   borderRadius: "12px",
@@ -216,7 +252,10 @@ export default function Player({
 
                 {/* Cancel button */}
                 <button
-                  onClick={cancelQueue}
+                  onClick={() => cancelQueue(
+                    selectedGame,
+                    selectedMode,
+                  )}
                   style={{
                     marginTop: "10px",
                     padding: "6px 12px",
@@ -235,7 +274,6 @@ export default function Player({
             )}
 
             <div style={{ marginTop: "24px" }}>
-              <Leaderboard />
             </div>
 
             <motion.button

src/games/battleship/BattleShipBoard.tsx

@@ -0,0 +1,147 @@
+import React, { useMemo } from "react";
+import { motion } from "framer-motion";
+import { useNakama } from "../../providers/NakamaProvider";
+import { PlayerModel } from "../../models/player";
+
+import PlacementGrid from "./placement/PlacementGrid";
+import ShotGrid from "./battle/ShotGrid";
+
+interface BattleBoardProps {
+  boards: Record<string, { grid: string[][] }>;
+  players: PlayerModel[];
+  myUserId: string | null;
+  turn: number;
+  winner: string | null;
+  gameOver: boolean | null;
+  metadata: Record<string, any>;
+}
+
+const Fleet: Record<string, number> = {
+  carrier: 5,
+  battleship: 4,
+  cruiser: 3,
+  submarine: 3,
+  destroyer: 2,
+};
+const FLEET_ORDER = ["carrier", "battleship", "cruiser", "submarine", "destroyer"];
+
+export default function BattleShipBoard({
+  boards,
+  players,
+  myUserId,
+  turn,
+  winner,
+  gameOver,
+  metadata,
+}: BattleBoardProps) {
+  const { sendMatchData, matchId } = useNakama();
+
+  const myIndex = players.findIndex((p) => p.user_id === myUserId);
+  const oppIndex = myIndex === 0 ? 1 : 0;
+
+  const phase = metadata["phase"] ?? "lobby";
+  const isMyTurn = phase === "battle" && turn === myIndex;
+
+  const myShips = boards[`p${myIndex}_ships`]?.grid ?? [[]];
+  const myShots = boards[`p${myIndex}_shots`] ?.grid ?? [[]];
+
+  const placed = metadata[`p${myIndex}_placed`] ?? 0;
+
+  const nextShip = FLEET_ORDER[placed] || null;
+  const nextShipSize = nextShip ? Fleet[nextShip] : null;
+
+  // ------------------- PLACE SHIP -------------------
+  function handlePlace(ship: string, r: number, c: number, dir: "h" | "v") {
+    sendMatchData(matchId!, 1, {
+      action: "place",
+      data: {
+        ship: ship,
+        row: r,
+        col: c,
+        dir,
+      }
+    });
+  }
+
+  // ------------------- SHOOT -------------------
+  function handleShoot(r: number, c: number) {
+    sendMatchData(matchId!, 1, {
+      action: "shoot",
+      data: {
+        row: r,
+        col: c,
+      }
+    });
+  }
+
+  // ------------------- STATUS LABEL -------------------
+  const status = useMemo(() => {
+    if (phase === "lobby") return `In Lobby`;
+    if (winner !== null) return `Winner: Player ${winner}`;
+    if (gameOver) return "Game over — draw";
+    if (phase === "placement") return `Place your ${nextShip ?? ""}`;
+    if (myIndex === -1) return "Spectating";
+    if (!isMyTurn) return "Opponent’s turn";
+    return "Your turn";
+  }, [winner, gameOver, phase, isMyTurn, myIndex, nextShip]);
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25 }}
+      style={{ textAlign: "center" }}
+    >
+      <h2 style={{ marginBottom: 8 }}>{status}</h2>
+
+      {/* ---------------- PHASE 1: PLACEMENT ---------------- */}
+      {phase === "placement" && nextShip && (
+        <PlacementGrid
+          shipBoard={myShips}
+          shipName={nextShip}
+          shipSize={nextShipSize}
+          onPlace={handlePlace}
+        />
+      )}
+
+      {/* ---------------- PHASE 2: BATTLE ---------------- */}
+      {phase === "battle" && (
+        <>
+          <h3>Your Shots</h3>
+
+          <ShotGrid
+            grid={myShots}
+            isMyTurn={isMyTurn}
+            gameOver={!!gameOver}
+            onShoot={handleShoot}
+          />
+
+          <h3 style={{ marginTop: "18px" }}>Your Ships</h3>
+          <PlacementGrid
+            shipBoard={myShips}
+            shipName="readonly"
+            shipSize={0}
+            onPlace={() => {}}
+          />
+        </>
+      )}
+
+      {/* ---------------- WINNER UI ---------------- */}
+      {winner !== null && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1, scale: [1, 1.05, 1] }}
+          transition={{ repeat: Infinity, duration: 1.4 }}
+          style={{
+            marginTop: 12,
+            fontSize: "20px",
+            fontWeight: "bold",
+            color: "#f1c40f",
+          }}
+        >
+          🎉 Player {winner} Wins! 🎉
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}

src/games/battleship/battle/ShotGrid.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface ShotGridProps {
+  grid: string[][];                // your shots: "", "H", "M"
+  isMyTurn: boolean;               // only clickable on your turn
+  gameOver: boolean;
+  onShoot: (row: number, col: number) => void;
+}
+
+export default function ShotGrid({
+  grid,
+  isMyTurn,
+  gameOver,
+  onShoot,
+}: ShotGridProps) {
+  const rows = grid.length;
+  const cols = grid[0].length;
+
+  function handleClick(r: number, c: number) {
+    if (!isMyTurn || gameOver) return;
+    if (grid[r][c] !== "") return; // can't shoot twice
+    onShoot(r, c);
+  }
+
+  return (
+    <motion.div
+      layout
+      style={{
+        display: "grid",
+        gridTemplateColumns: `repeat(${cols}, 36px)`,
+        gap: "4px",
+        justifyContent: "center",
+        marginTop: "12px",
+      }}
+    >
+      {grid.map((row, r) =>
+        row.map((cell, c) => {
+          const empty = cell === "";
+          const hit = cell === "H";
+          const miss = cell === "M";
+
+          let bg = "#111";
+
+          if (hit) bg = "#e74c3c";     // red for hit
+          if (miss) bg = "#34495e";    // gray for miss
+
+          return (
+            <motion.button
+              key={`${r}-${c}`}
+              whileHover={empty && isMyTurn && !gameOver ? { scale: 1.1 } : {}}
+              whileTap={empty && isMyTurn && !gameOver ? { scale: 0.9 } : {}}
+              onClick={() => handleClick(r, c)}
+              style={{
+                width: 36,
+                height: 36,
+                borderRadius: 4,
+                border: "1px solid #444",
+                background: bg,
+                cursor:
+                  empty && isMyTurn && !gameOver ? "pointer" : "not-allowed",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: "white",
+                fontWeight: 700,
+              }}
+            >
+              <AnimatePresence>
+                {hit && (
+                  <motion.span
+                    key="hit"
+                    initial={{ scale: 0.2, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    exit={{ scale: 0.2, opacity: 0 }}
+                    transition={{ type: "spring", stiffness: 200, damping: 10 }}
+                  >
+                    H
+                  </motion.span>
+                )}
+
+                {miss && (
+                  <motion.span
+                    key="miss"
+                    initial={{ scale: 0.2, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    exit={{ scale: 0.2, opacity: 0 }}
+                    transition={{ type: "spring", stiffness: 200, damping: 10 }}
+                  >
+                    M
+                  </motion.span>
+                )}
+              </AnimatePresence>
+            </motion.button>
+          );
+        })
+      )}
+    </motion.div>
+  );
+}

src/games/battleship/components/ShipSelector.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+interface ShipSelectorProps {
+  remainingShips: string[]; // ex: ["carrier", "battleship", ...]
+  selectedShip: string | null;
+  orientation: "h" | "v";
+  onSelectShip: (ship: string) => void;
+  onToggleOrientation: () => void;
+}
+
+export default function ShipSelector({
+  remainingShips,
+  selectedShip,
+  orientation,
+  onSelectShip,
+  onToggleOrientation,
+}: ShipSelectorProps) {
+  return (
+    <div style={{ marginTop: 12, textAlign: "center" }}>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 0.9 }}
+        style={{
+          marginBottom: 10,
+          fontSize: 16,
+          color: "#ddd",
+        }}
+      >
+        Select ship & orientation
+      </motion.div>
+
+      {/* SHIP BUTTONS */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          gap: "10px",
+          flexWrap: "wrap",
+          marginBottom: 14,
+        }}
+      >
+        {remainingShips.map((ship) => {
+          const active = ship === selectedShip;
+
+          return (
+            <motion.button
+              key={ship}
+              onClick={() => onSelectShip(ship)}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.92 }}
+              style={{
+                padding: "8px 14px",
+                borderRadius: 8,
+                background: active ? "#f1c40f" : "#333",
+                color: active ? "#000" : "#fff",
+                border: "2px solid #444",
+                cursor: "pointer",
+                fontSize: 14,
+              }}
+            >
+              {ship.toUpperCase()}
+            </motion.button>
+          );
+        })}
+      </div>
+
+      {/* ORIENTATION BUTTON */}
+      <motion.button
+        whileHover={{ scale: 1.05 }}
+        whileTap={{ scale: 0.92 }}
+        onClick={onToggleOrientation}
+        style={{
+          padding: "8px 14px",
+          borderRadius: 8,
+          background: "#222",
+          color: "white",
+          border: "2px solid #444",
+          cursor: "pointer",
+          fontSize: 14,
+        }}
+      >
+        Orientation: <strong>{orientation === "h" ? "Horizontal" : "Vertical"}</strong>
+      </motion.button>
+    </div>
+  );
+}

src/games/battleship/components/StatusBar.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+interface StatusBarProps {
+  text: string;
+}
+
+export default function StatusBar({ text }: StatusBarProps) {
+  return (
+    <motion.div
+      key={text}
+      initial={{ opacity: 0, y: -6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25 }}
+      style={{
+        marginBottom: 8,
+        fontSize: "18px",
+        textAlign: "center",
+      }}
+    >
+      {text}
+    </motion.div>
+  );
+}

src/games/battleship/phases/BattlePhase.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+interface BattleProps {
+  myIndex: number;
+  boards: Record<string, { grid: string[][] }>;
+  turn: number;
+  winner: string | null;
+  gameOver: boolean | null;
+  players: any[];
+  myUserId: string | null;
+  onShoot: (row: number, col: number) => void;
+}
+
+export default function BattlePhase({
+  myIndex,
+  boards,
+  turn,
+  winner,
+  gameOver,
+  players,
+  myUserId,
+  onShoot,
+}: BattleProps) {
+  if (myIndex < 0) return <div>Spectating...</div>;
+
+  const myShots = boards[`p${myIndex}_shots`]?.grid;
+  const myShips = boards[`p${myIndex}_ships`]?.grid;
+  const isMyTurn = turn === myIndex;
+  const gameReady = players.length === 2;
+
+  if (!myShots || !myShips) return <div>Loading...</div>;
+
+  const renderShotCell = (cell: string, r: number, c: number) => {
+    const disabled =
+      !isMyTurn ||
+      gameOver ||
+      cell === "H" ||
+      cell === "M"; // can't shoot same cell
+
+    const bg =
+      cell === "H"
+        ? "#e74c3c" // red = hit
+        : cell === "M"
+        ? "#34495e" // blue/gray = miss
+        : "#1c1c1c"; // untouched
+
+    return (
+      <motion.div
+        key={`shot-${r}-${c}`}
+        onClick={() => !disabled && onShoot(r, c)}
+        whileHover={!disabled ? { scale: 1.06 } : {}}
+        whileTap={!disabled ? { scale: 0.85 } : {}}
+        style={{
+          width: 38,
+          height: 38,
+          border: "1px solid #333",
+          background: bg,
+          cursor: disabled ? "not-allowed" : "pointer",
+        }}
+      />
+    );
+  };
+
+  const renderShipCell = (cell: string, r: number, c: number) => {
+    const bg =
+      cell === "S"
+        ? "#2980b9" // ship
+        : cell === "X"
+        ? "#c0392b" // destroyed
+        : "#111"; // water
+
+    return (
+      <motion.div
+        key={`ship-${r}-${c}`}
+        style={{
+          width: 38,
+          height: 38,
+          border: "1px solid #222",
+          background: bg,
+        }}
+      />
+    );
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.25 }}
+      style={{ textAlign: "center" }}
+    >
+      <h2 style={{ marginBottom: 10 }}>
+        {gameOver
+          ? winner === myUserId
+            ? "🎉 Victory! 🎉"
+            : "💥 Defeat 💥"
+          : isMyTurn
+          ? "Your Turn — Fire!"
+          : "Opponent's Turn"}
+      </h2>
+
+      {/* -------------------------
+          TOP SECTION — YOUR SHOTS
+      -------------------------- */}
+      <div style={{ marginBottom: 12, opacity: 0.85 }}>
+        <strong>Your Shots</strong>
+      </div>
+
+      <motion.div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${myShots[0].length}, 38px)`,
+          gap: 4,
+          justifyContent: "center",
+        }}
+      >
+        {myShots.map((row, r) =>
+          row.map((cell, c) => renderShotCell(cell, r, c))
+        )}
+      </motion.div>
+
+      {/* -------------------------
+          BOTTOM SECTION — YOUR FLEET
+      -------------------------- */}
+      <div style={{ marginTop: 28, marginBottom: 12, opacity: 0.85 }}>
+        <strong>Your Fleet Status</strong>
+      </div>
+
+      <motion.div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${myShips[0].length}, 38px)`,
+          gap: 4,
+          justifyContent: "center",
+        }}
+      >
+        {myShips.map((row, r) =>
+          row.map((cell, c) => renderShipCell(cell, r, c))
+        )}
+      </motion.div>
+
+      {winner && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{
+            opacity: 1,
+            scale: [1, 1.06, 1],
+          }}
+          transition={{
+            repeat: Infinity,
+            duration: 1.4,
+            ease: "easeInOut",
+          }}
+          style={{
+            color: "#f1c40f",
+            fontSize: "20px",
+            marginTop: "18px",
+            fontWeight: 700,
+          }}
+        >
+          {winner === players[myIndex].user_id
+            ? "🎉 You Win! 🎉"
+            : "💥 You Lost 💥"}
+        </motion.div>
+      )}
+    </motion.div>
+  );
+}

src/games/battleship/phases/BattleStatus.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+interface BattleStatusProps {
+  phase: string;
+  myIndex: number;
+  turn: number;
+  players: any[];
+  lastHit: boolean | null;
+  winner: string | null;
+  gameOver: boolean | null;
+}
+
+export default function BattleStatus({
+  phase,
+  myIndex,
+  turn,
+  players,
+  lastHit,
+  winner,
+  gameOver,
+}: BattleStatusProps) {
+  const isMyTurn = turn === myIndex;
+
+  // -----------------------------
+  // STATUS TEXT
+  // -----------------------------
+  let statusText = "";
+
+  if (gameOver) {
+    statusText =
+      winner === players[myIndex]?.user_id ? "🎉 Victory!" : "💥 Defeat";
+  } else if (phase === "placement") {
+    statusText = "Place Your Fleet";
+  } else {
+    statusText = isMyTurn ? "Your Turn — FIRE!" : "Opponent’s Turn";
+  }
+
+  // -----------------------------
+  // Last hit/miss indicator
+  // -----------------------------
+  let hitText = null;
+  if (lastHit === true) hitText = "🔥 HIT!";
+  else if (lastHit === false) hitText = "💦 MISS";
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      style={{
+        textAlign: "center",
+        marginBottom: 14,
+        color: "#eee",
+        fontFamily: "sans-serif",
+      }}
+    >
+      {/* MAIN STATUS */}
+      <motion.div
+        key={statusText}
+        initial={{ opacity: 0, y: -4 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.25 }}
+        style={{
+          fontSize: 20,
+          fontWeight: 700,
+          marginBottom: 4,
+        }}
+      >
+        {statusText}
+      </motion.div>
+
+      {/* HIT / MISS FEEDBACK */}
+      <AnimatePresence mode="wait">
+        {hitText && !gameOver && (
+          <motion.div
+            key={hitText}
+            initial={{ opacity: 0, scale: 0.7 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.7 }}
+            transition={{ duration: 0.25 }}
+            style={{
+              color: lastHit ? "#e74c3c" : "#3498db",
+              fontSize: 18,
+              fontWeight: 600,
+              marginTop: 4,
+            }}
+          >
+            {hitText}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* PHASE */}
+      <div style={{ marginTop: 6, opacity: 0.55, fontSize: 14 }}>
+        Phase: <strong>{phase}</strong>
+      </div>
+    </motion.div>
+  );
+}

src/games/battleship/phases/PlacementPhase.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+const fleet = [
+  { name: "carrier", size: 5 },
+  { name: "battleship", size: 4 },
+  { name: "cruiser", size: 3 },
+  { name: "submarine", size: 3 },
+  { name: "destroyer", size: 2 },
+];
+
+interface PlacementProps {
+  myIndex: number;
+  boards: Record<string, { grid: string[][] }>;
+  metadata: Record<string, any>;
+  onPlace: (ship: string, row: number, col: number, dir: string) => void;
+  players: any[];
+}
+
+export default function PlacementPhase({
+  myIndex,
+  boards,
+  metadata,
+  onPlace,
+}: PlacementProps) {
+  const shipBoard = boards[`p${myIndex}_ships`]?.grid;
+  const placedCount = metadata[`p${myIndex}_placed`] ?? 0;
+
+  const [selectedShip, setSelectedShip] = useState<string | null>(null);
+  const [orientation, setOrientation] = useState<"h" | "v">("h");
+  const [hoverPos, setHoverPos] = useState<[number, number] | null>(null);
+
+  if (!shipBoard) return <div>Loading...</div>;
+
+  const remainingShips = fleet.slice(placedCount);
+
+  const current = remainingShips[0];
+  const shipName = current?.name ?? null;
+  const shipSize = current?.size ?? 0;
+
+  const canPlace = (r: number, c: number) => {
+    if (!shipName) return false;
+
+    // bounds
+    if (orientation === "h") {
+      if (c + shipSize > shipBoard[0].length) return false;
+      for (let i = 0; i < shipSize; i++) {
+        if (shipBoard[r][c + i] !== "") return false;
+      }
+    } else {
+      if (r + shipSize > shipBoard.length) return false;
+      for (let i = 0; i < shipSize; i++) {
+        if (shipBoard[r + i][c] !== "") return false;
+      }
+    }
+    return true;
+  };
+
+  const renderCell = (cell: string, r: number, c: number) => {
+    const hovered = hoverPos?.[0] === r && hoverPos?.[1] === c;
+    const placing = hovered && shipName;
+
+    let previewColor = "transparent";
+
+    if (placing) {
+      const valid = canPlace(r, c);
+      previewColor = valid ? "rgba(46, 204, 113, 0.4)" : "rgba(231, 76, 60, 0.4)";
+    }
+
+    return (
+      <motion.div
+        key={`${r}-${c}`}
+        onMouseEnter={() => setHoverPos([r, c])}
+        onMouseLeave={() => setHoverPos(null)}
+        onClick={() => {
+          if (shipName && canPlace(r, c)) {
+            onPlace(shipName, r, c, orientation);
+          }
+        }}
+        whileHover={{ scale: 1.03 }}
+        style={{
+          width: 40,
+          height: 40,
+          border: "1px solid #333",
+          background: cell === "S" ? "#2980b9" : previewColor,
+          cursor: shipName ? "pointer" : "default",
+        }}
+      />
+    );
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 6 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3 }}
+      style={{ textAlign: "center" }}
+    >
+      <h2 style={{ marginBottom: 10 }}>Place Your Fleet</h2>
+
+      {shipName ? (
+        <div style={{ marginBottom: 12 }}>
+          <strong>Placing:</strong> {shipName} ({shipSize})
+        </div>
+      ) : (
+        <div style={{ marginBottom: 12, color: "#2ecc71" }}>
+          ✅ All ships placed — waiting for opponent...
+        </div>
+      )}
+
+      {shipName && (
+        <div style={{ marginBottom: 12 }}>
+          <button
+            onClick={() => setOrientation(orientation === "h" ? "v" : "h")}
+            style={{
+              padding: "8px 14px",
+              background: "#111",
+              border: "1px solid #666",
+              borderRadius: 6,
+              color: "white",
+            }}
+          >
+            Orientation: {orientation === "h" ? "Horizontal" : "Vertical"}
+          </button>
+        </div>
+      )}
+
+      {/* BOARD GRID */}
+      <motion.div
+        layout
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${shipBoard[0].length}, 40px)`,
+          gap: 4,
+          justifyContent: "center",
+          marginTop: 20,
+        }}
+      >
+        {shipBoard.map((row, r) =>
+          row.map((cell, c) => renderCell(cell, r, c))
+        )}
+      </motion.div>
+    </motion.div>
+  );
+}

src/games/battleship/placement/PlacementGrid.tsx

@@ -0,0 +1,127 @@
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+interface ShipGridProps {
+  shipBoard: string[][]; // current placed ships
+  shipName: string | null; // current ship being placed
+  shipSize: number | null;
+  onPlace: (ship: string, row: number, col: number, dir: "h" | "v") => void;
+}
+
+export default function PlacementGrid({
+  shipBoard,
+  shipName,
+  shipSize,
+  onPlace,
+}: ShipGridProps) {
+  const [dir, setDir] = useState<"h" | "v">("h");
+  const [hoverR, setHoverR] = useState<number | null>(null);
+  const [hoverC, setHoverC] = useState<number | null>(null);
+
+  const rows = shipBoard.length;
+  const cols = shipBoard[0].length;
+
+  function isPreviewCell(r: number, c: number): boolean {
+    if (hoverR === null || hoverC === null || !shipSize) return false;
+
+    if (dir === "h") {
+      return r === hoverR && c >= hoverC && c < hoverC + shipSize;
+    } else {
+      return c === hoverC && r >= hoverR && r < hoverR + shipSize;
+    }
+  }
+
+  function isPreviewValid(): boolean {
+    if (hoverR === null || hoverC === null || !shipSize) return false;
+
+    if (dir === "h") {
+      if (hoverC + shipSize > cols) return false;
+      for (let i = 0; i < shipSize; i++) {
+        if (shipBoard[hoverR][hoverC + i] !== "") return false;
+      }
+    } else {
+      if (hoverR + shipSize > rows) return false;
+      for (let i = 0; i < shipSize; i++) {
+        if (shipBoard[hoverR + i][hoverC] !== "") return false;
+      }
+    }
+
+    return true;
+  }
+
+  function handleClick() {
+    if (shipName && shipSize && hoverR !== null && hoverC !== null) {
+      if (isPreviewValid()) {
+        onPlace(shipName, hoverR, hoverC, dir);
+      }
+    }
+  }
+
+  return (
+    <div style={{ textAlign: "center" }}>
+      {/* Ship rotation button */}
+      <button
+        onClick={() => setDir(dir === "h" ? "v" : "h")}
+        style={{
+          padding: "6px 12px",
+          marginBottom: "10px",
+          background: "#333",
+          color: "white",
+          borderRadius: 6,
+          cursor: "pointer",
+        }}
+      >
+        Rotate Ship ({dir.toUpperCase()})
+      </button>
+
+      {/* GRID */}
+      <motion.div
+        layout
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${cols}, 36px)`,
+          gap: "4px",
+          justifyContent: "center",
+        }}
+        onClick={handleClick}
+      >
+        {shipBoard.map((row, r) =>
+          row.map((cell, c) => {
+            const preview = isPreviewCell(r, c);
+            const valid = isPreviewValid();
+
+            let bg = "#0a0a0a";
+
+            if (cell === "S") {
+              bg = "#3498db"; // placed ship
+            } else if (preview) {
+              bg = valid ? "rgba(46, 204, 113, 0.6)" : "rgba(231, 76, 60, 0.6)";
+            }
+
+            return (
+              <motion.div
+                key={`${r}-${c}`}
+                whileHover={{ scale: 1.05 }}
+                onMouseEnter={() => {
+                  setHoverR(r);
+                  setHoverC(c);
+                }}
+                onMouseLeave={() => {
+                  setHoverR(null);
+                  setHoverC(null);
+                }}
+                style={{
+                  width: 36,
+                  height: 36,
+                  border: "1px solid #333",
+                  background: bg,
+                  borderRadius: 4,
+                }}
+              />
+            );
+          })
+        )}
+      </motion.div>
+    </div>
+  );
+}

src/games/tictactoe/TicTacToeBoard.tsx

@@ -1,36 +1,43 @@
 import React, { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { useNakama } from "./providers/NakamaProvider";
-import getHaiku from "./utils/haikus";
+import { useNakama } from "../../providers/NakamaProvider";
+import getHaiku from "../../utils/haikus";
+import { PlayerModel } from "../../models/player";
 
 interface BoardProps {
-  board: string[][];
+  boards: Record<string, { grid: string[][] }>;
   turn: number;
   winner: string | null;
-  players: string[];
+  gameOver: boolean | null;
+  players: PlayerModel[];
   myUserId: string | null;
   onCellClick: (row: number, col: number) => void;
 }
 
-export default function Board({
-  board,
+export default function TicTacToeBoard({
+  boards,
   turn,
   winner,
+  gameOver,
   players,
   myUserId,
   onCellClick,
 }: BoardProps) {
-  const myIndex = players.indexOf(myUserId ?? "");
+  const myIndex = players.findIndex(p => p.user_id === myUserId);
   const gameReady = players.length === 2;
   const {
     matchId
   } = useNakama();
 
   const mySymbol =
-    myIndex === 0 ? "X" : myIndex === 1 ? "O" : null;
+    myIndex !== null && players[myIndex]
+      ? players[myIndex].metadata?.symbol ?? null
+      : null;
 
   const opponentSymbol =
-    mySymbol === "X" ? "O" : mySymbol === "O" ? "X" : null;
+    myIndex !== null && players.length === 2
+      ? players[1 - myIndex].metadata?.symbol ?? null
+      : null;
 
   const isMyTurn = gameReady && myIndex !== -1 && turn === myIndex;
 
@@ -42,6 +49,8 @@ export default function Board({
     status = "Waiting for opponent...";
   } else if (winner) {
     status = `Winner: ${winner}`;
+  } else if (gameOver) {
+    status = `Draw!!!`;
   } else if (myIndex === -1) {
     status = "Spectating";
   } else {
@@ -53,6 +62,7 @@ export default function Board({
   const nextLineIn = 3600;
   const allLinesStay = 2400;
   const allLinesFade = 1200;
+  const board = boards['tictactoe']?.grid ?? null;
 
   useEffect(() => {
     const totalTime = haiku.length * nextLineIn + allLinesStay + allLinesFade;
@@ -98,7 +108,9 @@ export default function Board({
           {/* -------------------------
               BOARD
           -------------------------- */}
-          <motion.div
+          {!board && <div style={{ textAlign: "center", marginTop: "14px" }}>Loading...</div>}
+
+          {board && <motion.div
             layout
             style={{
               display: "grid",
@@ -171,7 +183,7 @@ export default function Board({
                 );
               })
             )}
-          </motion.div>
+          </motion.div>}
 
           {!winner && (
             <div

src/games/tictactoe/TicTacToeLeaderboard.tsx

@@ -4,9 +4,9 @@ import {
   ApiLeaderboardRecordList,
 // @ts-ignore
 } from "@heroiclabs/nakama-js/dist/api.gen"
-import { useNakama } from "./providers/NakamaProvider";
+import { useNakama } from "../../providers/NakamaProvider";
 
-export default function Leaderboard({
+export default function TicTacToeLeaderboard({
   intervalMs = 10000,
 }: {
   intervalMs?: number;

src/main.jsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import TicTacToe from './tictactoe/TicTacToe';
-import { NakamaProvider } from './tictactoe/providers/NakamaProvider';
-import "./tictactoe/styles.css";
+import App from './App';
+import { NakamaProvider } from './providers/NakamaProvider';
+import "./styles.css";
 
 const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
 
 root.render(
   <NakamaProvider>
-    <TicTacToe />
+    <App />
   </NakamaProvider>,
 );

src/models/player.ts

@@ -0,0 +1,6 @@
+export interface PlayerModel {
+  user_id: string;
+  username: string;
+  index: number;
+  metadata: Record<string, string>; // e.g. { symbol: "X" }
+}

src/providers/NakamaProvider.tsx

@@ -25,6 +25,11 @@ function getOrCreateDeviceId(): string {
   return id;
 }
 
+type GameMetadata = {
+  game: string;
+  mode: string;
+};
+
 export interface NakamaContextType {
   client: Client;
   socket: Socket | null;
@@ -33,7 +38,8 @@ export interface NakamaContextType {
 
   loginOrRegister(username: string): Promise<void>;
   logout(): Promise<void>;
-  joinMatchmaker(mode: string): Promise<string>;
+  joinMatchmaker(gameMetadata: GameMetadata): Promise<string>;
+  exitMatchmaker(gameMetadata: GameMetadata): Promise<void>;
   joinMatch(matchId: string): Promise<void>;
 
   sendMatchData(matchId: string, op: number, data: object): void;
@@ -62,10 +68,11 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
     )
   );
 
+  const gameMetadataRef = React.useRef<GameMetadata | null>(null);
   const [session, setSession] = useState<Session | null>(null);
   const [socket, setSocket] = useState<Socket | null>(null);
+  const [matchmakerTicket, setMatchmakerTicket] = useState<string | null>(null);
   const [matchId, setMatchId] = useState<string | null>(null);
-  const lastModeRef = React.useRef<string | null>(null);
   const socketRef = React.useRef<Socket | null>(null);
 
   async function autoLogin() {
@@ -140,9 +147,9 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
       if (!matched.match_id) {
         console.warn("[Nakama] Match rejected by server. Auto-requeueing...");
 
-        if (lastModeRef.current) {
+        if (gameMetadataRef.current) {
           try {
-            await joinMatchmaker(lastModeRef.current);
+            await joinMatchmaker(gameMetadataRef.current);
           } catch (e) {
             console.error("[Nakama] Requeue failed:", e);
           }
@@ -185,23 +192,44 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
   // ----------------------------------------------------
   // MATCHMAKING
   // ----------------------------------------------------
-  async function joinMatchmaker(mode: string) {
+  async function joinMatchmaker(gameMetadata: GameMetadata) {
     const socket = socketRef.current;
+    const game = gameMetadata.game;
+    const mode = gameMetadata.mode;
     if (!socket) throw new Error("socket missing");
 
-    console.log(`[Nakama] Matchmaking... with +mode:"${mode}"`);
+    if (!game || game.trim() === "") {
+      throw new Error("Matchmaking requires a game name");
+    }
+
+    if (!mode || mode.trim() === "") {
+      throw new Error("Matchmaking requires a mode");
+    }
+    console.log(`[Nakama] Matchmaking... game="${game}" mode="${mode}"`);
     const ticket: MatchmakerTicket = await socket.addMatchmaker(
       `*`, // query
       2, // min count
       2, // max count
-      { mode } // stringProperties
+      { game, mode }
     );
 
-    lastModeRef.current = mode;
+    gameMetadataRef.current = { game, mode };
+    setMatchmakerTicket(ticket.ticket);
 
     return ticket.ticket;
   }
 
+  async function exitMatchmaker(gameMetadata: GameMetadata) {
+    const socket = socketRef.current;
+    const game = gameMetadata.game;
+    const mode = gameMetadata.mode;
+    if (!socket) throw new Error("socket missing");
+
+    console.log(`[Nakama] Exiting Matchmaking... game="${game}" mode="${mode}"`);
+    if (matchmakerTicket) await socket.removeMatchmaker(matchmakerTicket);
+    setMatchmakerTicket(null);
+  }
+
   // ----------------------------------------------------
   // EXPLICIT MATCH JOIN
   // ----------------------------------------------------
@@ -217,6 +245,7 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
   // ----------------------------------------------------
   function sendMatchData(matchId: string, op: number, data: object) {
     if (!socket) return;
+    console.log("[Nakama] Sending match state:", matchId, op, data);
     socket.sendMatchState(matchId, op, JSON.stringify(data));
   }
 
@@ -269,6 +298,7 @@ export function NakamaProvider({ children }: { children: React.ReactNode }) {
         loginOrRegister,
         logout,
         joinMatchmaker,
+        exitMatchmaker,
         joinMatch,
         sendMatchData,
         onMatchData,

src/tictactoe/MatchList.tsx

@@ -1,55 +0,0 @@
-import { Match } from "@heroiclabs/nakama-js";
-
-interface MatchListProps {
-  matches: Match[];
-}
-
-export default function MatchList({ matches }: MatchListProps) {
-  if (!matches.length) return <p>No open matches</p>;
-
-  return (
-    <div style={{ marginTop: "20px" }}>
-      <h3>Open Matches</h3>
-
-      <table
-        style={{
-          width: "100%",
-          borderCollapse: "collapse",
-          marginTop: "10px",
-        }}
-      >
-        <thead>
-          <tr>
-            <th style={th}>Sr No.</th>
-            <th style={th}>Match ID</th>
-            <th style={th}>Label</th>
-          </tr>
-        </thead>
-
-        <tbody>
-          {matches
-            .filter(m => m.size ?? 0 > 0)
-            .map((m, index) => (
-            <tr key={m.match_id}>
-              <td style={td}>{index + 1}</td>
-              <td style={td}>{m.match_id}</td>
-              <td style={td}>{m.label ?? "-"}</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-const th: React.CSSProperties = {
-  textAlign: "left",
-  padding: "8px",
-  background: "#f2f2f2",
-  borderBottom: "1px solid #ccc",
-};
-
-const td: React.CSSProperties = {
-  padding: "8px",
-  borderBottom: "1px solid #eee",
-};

src/tictactoe/Square.tsx

@@ -1,12 +0,0 @@
-interface SquareProps {
-  value: string;
-  onClick: () => void;
-}
-
-export default function Square({ value, onClick } : SquareProps) {
-  return (
-    <button className="square" onClick={onClick}>
-      {value}
-    </button>
-  );
-}