Fix lobby: only show players who have joined

Changes:
- Added socket.join(LOBBY_ROOM) when player joins lobby
- Changed io.emit() to io.to(LOBBY_ROOM).emit() for all lobby events
- Players only see lobby events after they click JOIN LOBBY
- Fixed player list to update correctly when players join/ready
- Game now starts properly when all players are ready

Files modified:
- server/index.js: Use Socket.io rooms for lobby scoping
- public/js/app.js: Show lobby screen on player-joined event
- public/js/ui.js: Removed duplicate listener override

public/js/app.js

@@ -23,6 +23,10 @@ function setupNetworkListeners() {
   // Player joined lobby
   network.setListener('player-joined', (player) => {
     ui.updatePlayerList(network.getAllPlayers());
+    // Show lobby screen if we're on the login screen
+    if (ui.screens.room.classList.contains('active')) {
+      ui.showScreen('lobby');
+    }
   });
 
   // Player left lobby

public/js/ui.js

@@ -57,11 +57,6 @@ class UIManager {
       return;
     }
 
-    // Set listener for player joined event
-    network.setListener('player-joined', () => {
-      this.showScreen('lobby');
-    });
-
     network.joinLobby(playerName);
   }
 

server/index.js

@@ -34,12 +34,15 @@ const TETROMINO_KEYS = Object.keys(TETROMINOS);
 const BOARD_WIDTH = 10;
 const BOARD_HEIGHT = 20;
 const GARBAGE_COLOR = '#666666';
+const LOBBY_ROOM = 'global-lobby';
 
 io.on('connection', (socket) => {
   console.log('Player connected:', socket.id);
 
   // Join global lobby
   socket.on('join-lobby', ({ playerName }) => {
+    // Add socket to lobby room so they receive lobby events
+    socket.join(LOBBY_ROOM);
     socket.data.playerName = playerName;
 
     const player = {
@@ -59,8 +62,8 @@ io.on('connection', (socket) => {
 
     lobby.players.set(socket.id, player);
 
-    // Broadcast to all clients
-    io.emit('player-joined', {
+    // Broadcast only to players in the lobby room
+    io.to(LOBBY_ROOM).emit('player-joined', {
       player: { id: player.id, name: player.name },
       players: getPlayersList()
     });
@@ -74,8 +77,8 @@ io.on('connection', (socket) => {
 
     player.ready = true;
 
-    // Broadcast updated player list
-    io.emit('player-joined', {
+    // Broadcast only to players in the lobby room
+    io.to(LOBBY_ROOM).emit('player-joined', {
       player: { id: player.id, name: player.name, ready: player.ready },
       players: getPlayersList()
     });
@@ -169,7 +172,7 @@ io.on('connection', (socket) => {
 
       lobby.players.delete(socket.id);
 
-      io.emit('player-left', {
+      io.to(LOBBY_ROOM).emit('player-left', {
         playerId: socket.id,
         players: getPlayersList()
       });
@@ -321,7 +324,7 @@ function startGame() {
 
   lobby.gameInterval = setInterval(() => gameTick(), 50);
 
-  io.emit('game-started', {
+  io.to(LOBBY_ROOM).emit('game-started', {
     players: getPlayersList(),
     states: getStates()
   });
@@ -348,7 +351,7 @@ function gameTick() {
 }
 
 function broadcastState() {
-  io.emit('state-update', getStates());
+  io.to(LOBBY_ROOM).emit('state-update', getStates());
 }
 
 function getStates() {
@@ -367,7 +370,7 @@ function getStates() {
 function checkGameOver() {
   const activePlayers = Array.from(lobby.players.values()).filter(p => !p.eliminated);
   if (activePlayers.length <= 1) {
-    io.emit('game-over', { states: getStates() });
+    io.to(LOBBY_ROOM).emit('game-over', { states: getStates() });
     if (lobby.gameInterval) {
       clearInterval(lobby.gameInterval);
       lobby.gameInterval = null;