- 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/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}
         />
       )}