- Added clear turn messaging for both players (Your Turn / Opponent's Turn).

- Fixed initial board state to avoid showing incorrect spectator/opponent status.
- Introduced players[] tracking in React state to correctly reflect match readiness.
- Updated Board component to derive turn text based on player index and session user ID.
- Ensured proper handling of initial match state broadcast from backend.
- Improved overall clarity of gameplay state for both clients on match start.

src/tictactoe/Board.tsx

@@ -4,16 +4,52 @@ interface BoardProps {
   board: string[][];
   turn: number;
   winner: string | null;
+  players: string[];
+  myUserId: string | null;
   onCellClick: (row: number, col: number) => void;
 }
 
-export default function Board({ board, turn, winner, onCellClick }: BoardProps) {
+export default function Board({
+  board,
+  turn,
+  winner,
+  players,
+  myUserId,
+  onCellClick,
+}: BoardProps) {
+  const myIndex = players.indexOf(myUserId ?? "");
+  const gameReady = players.length === 2;
+
+  const mySymbol =
+    myIndex === 0 ? "X" : myIndex === 1 ? "O" : null;
+
+  const opponentSymbol =
+    mySymbol === "X" ? "O" : mySymbol === "O" ? "X" : null;
+
+  const isMyTurn = gameReady && myIndex !== -1 && turn === myIndex;
+
+  // -------------------------------
+  // 🟦 HEADER STATUS FIXED
+  // -------------------------------
+  let status;
+  if (!gameReady) {
+    status = "Waiting for opponent...";
+  } else if (winner) {
+    status = `Winner: ${winner}`;
+  } else if (myIndex === -1) {
+    status = "Spectating";
+  } else {
+    status = isMyTurn ? "Your turn" : "Opponent's turn";
+  }
+
   return (
     <div>
-      {winner ? (
-        <h2>Winner: {winner}</h2>
-      ) : (
-        <h2>Turn: Player {turn === 0 ? "X" : "O"}</h2>
+      <h2 style={{ marginBottom: 8 }}>{status}</h2>
+
+      {gameReady && mySymbol && (
+        <div style={{ marginBottom: 8, fontSize: 14, color: "#666" }}>
+          You: <strong>{mySymbol}</strong> — Opponent: <strong>{opponentSymbol}</strong>
+        </div>
       )}
 
       <div
@@ -21,26 +57,35 @@ export default function Board({ board, turn, winner, onCellClick }: BoardProps)
           display: "grid",
           gridTemplateColumns: "repeat(3, 80px)",
           gap: "10px",
-          marginTop: "20px",
+          marginTop: "6px",
         }}
       >
         {board.map((row, rIdx) =>
-          row.map((cell, cIdx) => (
-            <button
-              key={`${rIdx}-${cIdx}`}
-              style={{
-                width: "80px",
-                height: "80px",
-                fontSize: "2rem",
-                cursor: cell || winner ? "not-allowed" : "pointer",
-              }}
-              onClick={() => {
-                if (!cell && !winner) onCellClick(rIdx, cIdx);
-              }}
-            >
-              {cell}
-            </button>
-          ))
+          row.map((cell, cIdx) => {
+            const disabled =
+              !!cell ||
+              !!winner ||
+              !gameReady ||
+              myIndex === -1 ||
+              !isMyTurn;
+
+            return (
+              <button
+                key={`${rIdx}-${cIdx}`}
+                style={{
+                  width: "80px",
+                  height: "80px",
+                  fontSize: "2rem",
+                  cursor: disabled ? "not-allowed" : "pointer",
+                }}
+                onClick={() => {
+                  if (!disabled) onCellClick(rIdx, cIdx);
+                }}
+              >
+                {cell}
+              </button>
+            );
+          })
         )}
       </div>
     </div>

src/tictactoe/TicTacToe.tsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { useNakama } from "./providers/NakamaProvider";
 import { Match } from "@heroiclabs/nakama-js";
 import Board from "./Board";
-import MatchList from "./MatchList";
+// import MatchList from "./MatchList";
 
 export default function TicTacToe() {
   const [username, setUsername] = useState("");
@@ -14,7 +14,8 @@ export default function TicTacToe() {
   ]);
   const [turn, setTurn] = useState<number>(0);
   const [winner, setWinner] = useState<string | null>(null);
-  const [openMatches, setOpenMatches] = useState<Match[]>([]);
+  // const [openMatches, setOpenMatches] = useState<Match[]>([]);
+  const [players, setPlayers] = useState<string[]>([]);
 
   const {
     loginOrRegister,
@@ -31,9 +32,15 @@ export default function TicTacToe() {
       console.log("[Match Data]", msg);
 
       if (msg.opCode === 2) {
-        setBoard(msg.data.board);
-        setTurn(msg.data.turn);
-        setWinner(msg.data.winner || null);
+        const state = msg.data;
+        console.log("Match state:", state);
+
+        setBoard(state.board);
+        setTurn(state.turn);
+        setWinner(state.winner || null);
+
+        // new:
+        setPlayers(state.players || []);
       }
     });
   }, [onMatchData]);
@@ -69,10 +76,14 @@ export default function TicTacToe() {
 
       if (msg.opCode === 2) {
         const state = msg.data;
+        console.log("Match state:", state);
 
         setBoard(state.board);
         setTurn(state.turn);
         setWinner(state.winner || null);
+
+        // new:
+        setPlayers(state.players || []);
       }
     });
   }
@@ -140,6 +151,8 @@ export default function TicTacToe() {
           board={board}
           turn={turn}
           winner={winner}
+          players={players}
+          myUserId={session?.user_id ?? null}
           onCellClick={handleCellClick}
         />
       )}