- Added username persistence via localStorage with read-only input behavior.

- Added automatic connect() invocation on page load.
- Implemented robust login flow: register or auto-login based on local flags.
- Added logout support with clean WebSocket disconnect + state reset.
- Updated NakamaProvider with getSession(), autoLogin(), registerWithUsername().
- Connected logout button and integrated updated login behavior into UI.

src/tictactoe/TicTacToe.tsx

@@ -6,7 +6,7 @@ import Leaderboard from "./Leaderboard";
 // import MatchList from "./MatchList";
 
 export default function TicTacToe() {
-  const [username, setUsername] = useState("");
+  const [username, setUsername] = useState(localStorage.getItem("username") ?? "");
   const [selectedMode, setSelectedMode] = useState("classic");
   const [board, setBoard] = useState<string[][]>([
     ["", "", ""],
@@ -35,6 +35,7 @@ export default function TicTacToe() {
   }
   const {
     loginOrRegister,
+    logout,
     joinMatchmaker,
     onMatchData,
     sendMatchData,
@@ -76,6 +77,10 @@ export default function TicTacToe() {
     onMatchData(onMatchDataCallback);
   }
 
+  useEffect(() => {
+    connect();
+  }, []);
+
   // ------------------------------------------
   // SEND A MOVE
   // ------------------------------------------
@@ -102,6 +107,7 @@ export default function TicTacToe() {
           <input
             placeholder="username"
             value={username}
+            disabled={username.length > 0}
             onChange={(e) => setUsername(e.target.value)}
           />
           <button onClick={connect}>Connect</button>
@@ -128,6 +134,7 @@ export default function TicTacToe() {
 
           {/* Join matchmaking */}
           <button onClick={() => startQueue(selectedMode)}>Join Matchmaking</button>
+          <button onClick={() => logout()}>Logout</button>
 
           {/*/!* List open matches *!/*/}
           {/*<MatchList matches={openMatches} />*/}