Update static/js/game.js

static/js/game.js

@@ -11,7 +11,6 @@ class Game {
         this.state = {
             gameId: null,
             currentPhase: 'landing',
-            playerId: null,
             players: [],
             currentQuestion: null,
             isRecording: false,
@@ -20,7 +19,9 @@ class Game {
             votingTime: 60,
             recordings: new Map(),
             votes: new Map(),
-            impostor: null
+            impostor: null,
+            maxPlayers: 5,
+            minPlayers: 3
         };
 
         // Wait for DOM to be fully loaded before initializing
@@ -32,14 +33,10 @@ class Game {
     }
 
     initialize() {
-        // Initialize event listeners and UI bindings
+        console.log('Initializing game...'); // Debug log
         this.initializeEventListeners();
         this.bindUIElements();
-        
-        // Initialize Socket.IO event handlers
         this.initializeSocketHandlers();
-        
-        // Show the landing page
         this.showPage('landing');
     }
 
@@ -48,14 +45,25 @@ class Game {
         const playButton = document.getElementById('play-button');
         if (playButton) {
             playButton.addEventListener('click', () => {
-                console.log('Play button clicked'); // Debug log
+                console.log('Play button clicked');
                 this.handlePlayButton();
             });
         }
 
-        // Other button handlers
-        document.getElementById('start-button')?.addEventListener('click', () => this.startGame());
-        document.getElementById('add-player-button')?.addEventListener('click', () => this.addPlayer());
+        // Add player button handler
+        const addPlayerButton = document.getElementById('add-player-button');
+        if (addPlayerButton) {
+            addPlayerButton.addEventListener('click', () => {
+                console.log('Add player button clicked');
+                this.addPlayer();
+            });
+        }
+
+        // Start game button handler
+        const startButton = document.getElementById('start-button');
+        if (startButton) {
+            startButton.addEventListener('click', () => this.startGame());
+        }
     }
 
     bindUIElements() {
@@ -76,7 +84,8 @@ class Game {
                 start: document.getElementById('start-button'),
                 addPlayer: document.getElementById('add-player-button'),
                 record: document.getElementById('record-button')
-            }
+            },
+            playerList: document.getElementById('player-list')
         };
     }
 
@@ -95,18 +104,88 @@ class Game {
     }
 
     async handlePlayButton() {
-        console.log('Handling play button click'); // Debug log
+        console.log('Handling play button click');
         try {
-            // Create new game session
             await this.createGame();
-            // Show the setup page
             this.showPage('setup');
+            // Add default players after transitioning to setup page
+            this.addDefaultPlayers();
         } catch (error) {
             console.error('Error starting game:', error);
             this.handleError('Failed to start game');
         }
     }
 
+    addDefaultPlayers() {
+        // Add two default players
+        this.addPlayer('Player 1');
+        this.addPlayer('Player 2');
+        this.updatePlayerControls();
+    }
+
+    addPlayer(defaultName = null) {
+        if (this.state.players.length >= this.state.maxPlayers) {
+            this.handleError('Maximum player limit reached');
+            return;
+        }
+
+        const playerName = defaultName || prompt('Enter player name:');
+        if (!playerName) return;
+
+        const newPlayer = {
+            id: this.state.players.length + 1,
+            name: playerName
+        };
+
+        this.state.players.push(newPlayer);
+        this.updatePlayerList();
+        this.updatePlayerControls();
+
+        // Emit player joined event
+        socket.emit('join_game', {
+            gameId: this.state.gameId,
+            playerName: playerName
+        });
+    }
+
+    updatePlayerList() {
+        if (!this.ui.playerList) return;
+
+        this.ui.playerList.innerHTML = '';
+        this.state.players.forEach(player => {
+            const playerElement = document.createElement('div');
+            playerElement.className = 'player-avatar';
+            
+            // Create avatar circle with player number
+            const avatarCircle = document.createElement('div');
+            avatarCircle.className = 'avatar-circle';
+            avatarCircle.textContent = player.id;
+
+            // Create player name display
+            const playerName = document.createElement('div');
+            playerName.className = 'player-name';
+            playerName.textContent = player.name;
+
+            playerElement.appendChild(avatarCircle);
+            playerElement.appendChild(playerName);
+            this.ui.playerList.appendChild(playerElement);
+        });
+    }
+
+    updatePlayerControls() {
+        // Update add player button state
+        if (this.ui.buttons.addPlayer) {
+            this.ui.buttons.addPlayer.disabled = 
+                this.state.players.length >= this.state.maxPlayers;
+        }
+
+        // Update start game button state
+        if (this.ui.buttons.start) {
+            this.ui.buttons.start.disabled = 
+                this.state.players.length < this.state.minPlayers;
+        }
+    }
+
     async createGame() {
         try {
             socket.emit('create_game');
@@ -117,12 +196,12 @@ class Game {
     }
 
     handleGameCreated(data) {
-        console.log('Game created:', data); // Debug log
+        console.log('Game created:', data);
         this.state.gameId = data.gameId;
     }
 
     showPage(pageName) {
-        console.log('Showing page:', pageName); // Debug log
+        console.log('Showing page:', pageName);
         
         // Hide all pages
         Object.values(this.ui.pages).forEach(page => {
@@ -139,6 +218,18 @@ class Game {
         }
     }
 
+    handleError(message) {
+        console.error(message);
+        // Create error message element
+        const errorElement = document.createElement('div');
+        errorElement.className = 'error-message';
+        errorElement.textContent = message;
+        
+        // Add to container and remove after delay
+        this.ui.gameContainer.appendChild(errorElement);
+        setTimeout(() => errorElement.remove(), 3000);
+    }
+
     // Rest of the Game class implementation remains the same...
 }