fix: Resolve React hooks violation, implement player waiting screen, and auto-start game upon deck submission.

src/server/index.ts

@@ -104,16 +104,6 @@ io.on('connection', (socket) => {
     }
   });
 
-  socket.on('pick_card', ({ roomId, cardId }) => {
-    // Find player from socket? Actually we trust clientId sent or inferred (but simpler to trust socket for now if we tracked map, but here just use helper?)
-    // We didn't store socket->player map here globally. We'll pass playerId in payload for simplicity but validation later.
-    // Wait, let's look at signature.. pickCard(roomId, playerId, cardId)
-
-    // Need playerId. Let's ask client to send it.
-    // Or we can find it if we know connection...
-    // Let's assume payload: { roomId, playerId, cardId }
-  });
-
   // Revised pick_card to actual impl
   socket.on('pick_card', ({ roomId, playerId, cardId }) => {
     const draft = draftManager.pickCard(roomId, playerId, cardId);
@@ -131,6 +121,45 @@ io.on('connection', (socket) => {
     }
   });
 
+  socket.on('player_ready', ({ roomId, playerId, deck }) => {
+    const room = roomManager.setPlayerReady(roomId, playerId, deck);
+    if (room) {
+      io.to(roomId).emit('room_update', room);
+
+      // Check if all active players are ready
+      const activePlayers = room.players.filter(p => p.role === 'player');
+      if (activePlayers.length > 0 && activePlayers.every(p => p.ready)) {
+        console.log(`All players ready in room ${roomId}. Starting game...`);
+
+        room.status = 'playing';
+        io.to(roomId).emit('room_update', room);
+
+        // Initialize Game
+        const game = gameManager.createGame(roomId, room.players);
+
+        // Load decks
+        activePlayers.forEach(p => {
+          if (p.deck) {
+            p.deck.forEach((card: any) => {
+              gameManager.addCardToGame(roomId, {
+                ownerId: p.id,
+                controllerId: p.id,
+                oracleId: card.oracle_id || card.id,
+                name: card.name,
+                // Prioritize 'image' property which might hold the cached URL
+                imageUrl: card.image || card.image_uris?.normal || card.card_faces?.[0]?.image_uris?.normal || "",
+                zone: 'library'
+              });
+            });
+            // TODO: Shuffle library
+          }
+        });
+
+        io.to(roomId).emit('game_update', game);
+      }
+    }
+  });
+
   socket.on('start_game', ({ roomId, decks }) => {
     const room = roomManager.startGame(roomId);
     if (room) {

src/server/managers/RoomManager.ts

@@ -3,6 +3,8 @@ interface Player {
   name: string;
   isHost: boolean;
   role: 'player' | 'spectator';
+  ready?: boolean;
+  deck?: any[];
 }
 
 interface ChatMessage {
@@ -17,7 +19,7 @@ interface Room {
   hostId: string;
   players: Player[];
   packs: any[]; // Store generated packs (JSON)
-  status: 'waiting' | 'drafting' | 'deck_building' | 'finished';
+  status: 'waiting' | 'drafting' | 'deck_building' | 'playing' | 'finished';
   messages: ChatMessage[];
   maxPlayers: number;
 }
@@ -30,7 +32,7 @@ export class RoomManager {
     const room: Room = {
       id: roomId,
       hostId,
-      players: [{ id: hostId, name: hostName, isHost: true, role: 'player' }],
+      players: [{ id: hostId, name: hostName, isHost: true, role: 'player', ready: false }],
       packs,
       status: 'waiting',
       messages: [],
@@ -40,6 +42,18 @@ export class RoomManager {
     return room;
   }
 
+  setPlayerReady(roomId: string, playerId: string, deck: any[]): Room | null {
+    const room = this.rooms.get(roomId);
+    if (!room) return null;
+
+    const player = room.players.find(p => p.id === playerId);
+    if (player) {
+      player.ready = true;
+      player.deck = deck;
+    }
+    return room;
+  }
+
   joinRoom(roomId: string, playerId: string, playerName: string): Room | null {
     const room = this.rooms.get(roomId);
     if (!room) return null;