- Created new Player.tsx component to handle username input, auto-connect, matchmaking, and logout.

- Moved all login, session UI, mode selection, and matchmaking logic from TicTacToe.tsx into Player.tsx.
- Added onMatchDataCallback prop support for Player component.
- Cleaned up TicTacToe.tsx by removing duplicated login/matchmaking UI and connect logic.
- Improved auto-connect on mount via Player.tsx.

src/tictactoe/Player.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useState } from "react";
+import Leaderboard from "./Leaderboard";
+import { useNakama } from "./providers/NakamaProvider";
+
+export default function Player({
+  onMatchDataCallback,
+}: {
+  onMatchDataCallback: (msg: any) => void;
+}) {
+  const {
+    session,
+    matchId,
+    loginOrRegister,
+    logout,
+    onMatchData,
+    joinMatchmaker,
+  } = useNakama();
+
+  const [username, setUsername] = useState(
+    localStorage.getItem("username") ?? ""
+  );
+  const [selectedMode, setSelectedMode] = useState("classic");
+
+  // ------------------------------------------
+  // CONNECT
+  // ------------------------------------------
+  async function handleConnect() {
+    await loginOrRegister(username);
+
+    // Match data listener
+    onMatchData(onMatchDataCallback);
+  }
+
+  // ------------------------------------------
+  // MATCHMAKING
+  // ------------------------------------------
+  async function startQueue(selectedMode: string) {
+    const ticket = await joinMatchmaker(selectedMode);
+    console.log("Queued:", ticket);
+  }
+
+  useEffect(() => {
+    handleConnect();
+  }, []);
+
+  return (
+    <div style={{ marginBottom: "20px" }}>
+      {session && !matchId && (
+        <>
+          <h2>Hello, {session.username}</h2>
+
+          {/* Game mode selection */}
+          <label style={{ display: "block", marginTop: "10px" }}>
+            Select Game Mode:
+          </label>
+
+          <select
+            value={selectedMode}
+            onChange={(e) => setSelectedMode(e.target.value)}
+            style={{ padding: "6px", marginBottom: "10px" }}
+          >
+            <option value="classic">Classic</option>
+            <option value="blitz">Blitz</option>
+          </select>
+
+          {/* Join matchmaking */}
+          <button onClick={() => startQueue(selectedMode)}>Join Matchmaking</button>
+          <button onClick={() => logout()}>Logout</button>
+
+          {/*/!* List open matches *!/*/}
+          {/*<MatchList matches={openMatches} />*/}
+          <Leaderboard/>
+        </>
+      )}
+      {session && matchId && (
+        <>
+          <h2>Go {session.username}!</h2>
+        </>
+      )}
+    </div>
+  );
+}