fix: resolve room state synchronization and player display issues

- Fix room.state.players undefined error on component mount
- Wait for initial state sync before accessing room data
- Move message handlers from service to Game component
- Fix player count display in waiting screen (was showing 0/2)
- Prevent lobby component from clearing game room on unmount
- Separate leaveLobby() and leaveGame() methods for proper cleanup
- Ensure player names persist when moving from lobby to game
- Add proper error handling for state initialization

server/src/rooms/GameRoom.ts

@@ -34,16 +34,16 @@ export class GameRoom extends Room<GameState> {
   }
 
   onJoin(client: Client, options: any) {
-    console.log(`[GameRoom] ${client.sessionId} joined room ${this.roomId}`);
+    console.log(`[GameRoom] ${client.sessionId} joined room ${this.roomId} with name: ${options.playerName}`);
 
+    // Use the playerName passed from the lobby - don't generate a new one!
     const playerName = options.playerName || "player";
-    const uniqueName = NameManager.getInstance().generateUniquePlayerName(playerName, client.sessionId);
     
-    this.state.addPlayer(client.sessionId, uniqueName);
+    this.state.addPlayer(client.sessionId, playerName);
 
     client.send("playerInfo", {
       sessionId: client.sessionId,
-      name: uniqueName,
+      name: playerName,
       roomId: this.roomId
     });
 
@@ -58,7 +58,7 @@ export class GameRoom extends Room<GameState> {
     const player = this.state.players.get(client.sessionId);
     if (player) {
       player.connected = false;
-      NameManager.getInstance().releasePlayerName(client.sessionId);
+      // Don't release the name here - it's managed by the LobbyRoom
     }
 
     if (this.state.gameStatus === GameStatus.PLAYING) {
@@ -90,9 +90,7 @@ export class GameRoom extends Room<GameState> {
       clearInterval(this.gameInterval);
     }
 
-    this.state.players.forEach(player => {
-      NameManager.getInstance().releasePlayerName(player.sessionId);
-    });
+    // Don't release names here - they're managed by the LobbyRoom
   }
 
   private startGame() {

server/src/rooms/LobbyRoom.ts

@@ -85,20 +85,30 @@ export class LobbyRoom extends Room<LobbyState> {
     if (!player || player.inGame) return;
 
     try {
-      const reservation = await matchMaker.joinOrCreate("game", {
-        playerName: player.name
-      });
+      // First try to find an available room
+      const rooms = await matchMaker.query({ name: "game", locked: false });
+      let targetRoomId: string;
+      
+      // Find a room with less than 2 players
+      const availableRoom = rooms.find(room => room.clients < 2);
+      
+      if (availableRoom) {
+        targetRoomId = availableRoom.roomId;
+      } else {
+        // If no room available, create a new one
+        const newRoom = await matchMaker.createRoom("game", {});
+        targetRoomId = newRoom.roomId;
+      }
 
       this.state.setPlayerInGame(client.sessionId, true);
 
-      client.send("roomReservation", {
-        sessionId: reservation.sessionId,
-        room: reservation.room
+      // Send the roomId to the client
+      client.send("gameJoined", {
+        roomId: targetRoomId
       });
 
-      setTimeout(() => {
-        client.leave();
-      }, 1000);
+      // Don't auto-leave, let the client handle it
+      // The client will leave the lobby after successfully joining the game room
 
     } catch (error) {
       console.error("[LobbyRoom] Error in quick play:", error);
@@ -113,20 +123,22 @@ export class LobbyRoom extends Room<LobbyState> {
     if (!player || player.inGame) return;
 
     try {
-      const reservation = await matchMaker.joinById(roomId, {
-        playerName: player.name
-      });
+      // Verify the room exists and is available
+      const rooms = await matchMaker.query({ roomId });
+      
+      if (rooms.length === 0 || rooms[0].clients >= 2) {
+        throw new Error("Room not available");
+      }
 
       this.state.setPlayerInGame(client.sessionId, true);
 
-      client.send("roomReservation", {
-        sessionId: reservation.sessionId,
-        room: reservation.room
+      // Send the roomId to the client
+      client.send("gameJoined", {
+        roomId: roomId
       });
 
-      setTimeout(() => {
-        client.leave();
-      }, 1000);
+      // Don't auto-leave, let the client handle it
+      // The client will leave the lobby after successfully joining the game room
 
     } catch (error) {
       console.error("[LobbyRoom] Error joining room:", error);