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