better login and matchmaking flow

src/tictactoe/TicTacToe.tsx

@@ -6,6 +6,7 @@ import MatchList from "./MatchList";
 
 export default function TicTacToe() {
   const [username, setUsername] = useState("");
+  const [selectedMode, setSelectedMode] = useState("classic");
   const [board, setBoard] = useState<string[][]>([
     ["", "", ""],
     ["", "", ""],
@@ -22,6 +23,7 @@ export default function TicTacToe() {
     sendMatchData,
     listOpenMatches,
     matchId,
+    session,
   } = useNakama();
 
   useEffect(() => {
@@ -87,8 +89,8 @@ export default function TicTacToe() {
   // ------------------------------------------
   // MATCHMAKING
   // ------------------------------------------
-  async function startQueue() {
-    const ticket = await joinMatchmaker("classic");
+  async function startQueue(selectedMode: string) {
+    const ticket = await joinMatchmaker(selectedMode);
     console.log("Queued:", ticket);
   }
 
@@ -96,7 +98,7 @@ export default function TicTacToe() {
     <div>
       <h1>Tic Tac Toe Multiplayer</h1>
 
-      {!matchId && (
+      {!session && (
         <>
           <input
             placeholder="username"
@@ -104,10 +106,32 @@ export default function TicTacToe() {
             onChange={(e) => setUsername(e.target.value)}
           />
           <button onClick={connect}>Connect</button>
-          <button onClick={startQueue}>Join Matchmaking</button>
-          <MatchList
-            matches={openMatches}
-          />
+        </>
+      )}
+
+      {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>
+
+          {/* List open matches */}
+          <MatchList matches={openMatches} />
         </>
       )}