Update static/js/game.js

static/js/game.js

@@ -1,4 +1,4 @@
-// Initialize Socket.IO connection with automatic reconnection
+// Initialize Socket.IO connection
 const socket = io({
     reconnection: true,
     reconnectionAttempts: 5,
@@ -17,14 +17,11 @@ class Game {
             recordingTime: 30,
             listeningTime: 60,
             votingTime: 60,
-            recordings: new Map(),
-            votes: new Map(),
-            impostor: null,
             maxPlayers: 5,
             minPlayers: 3
         };
 
-        // Wait for DOM to be fully loaded before initializing
+        // Wait for DOM to be loaded
         if (document.readyState === 'loading') {
             document.addEventListener('DOMContentLoaded', () => this.initialize());
         } else {
@@ -33,47 +30,19 @@ class Game {
     }
 
     initialize() {
-        console.log('Initializing game...'); // Debug log
+        console.log('Initializing game...');
         this.initializeEventListeners();
         this.bindUIElements();
         this.initializeSocketHandlers();
         this.showPage('landing');
     }
 
-    initializeEventListeners() {
-        // Handle play button click
-        const playButton = document.getElementById('play-button');
-        if (playButton) {
-            playButton.addEventListener('click', () => {
-                console.log('Play button clicked');
-                this.handlePlayButton();
-            });
-        }
-
-        // 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() {
-        // Cache frequently used elements
         this.ui = {
             gameContainer: document.getElementById('game-container'),
             pages: {
                 landing: document.getElementById('landing-page'),
                 setup: document.getElementById('setup-page'),
-                game: document.getElementById('game-page'),
                 recording: document.getElementById('recording-page'),
                 listening: document.getElementById('listening-page'),
                 voting: document.getElementById('voting-page'),
@@ -82,13 +51,29 @@ class Game {
             buttons: {
                 play: document.getElementById('play-button'),
                 start: document.getElementById('start-button'),
-                addPlayer: document.getElementById('add-player-button'),
-                record: document.getElementById('record-button')
+                addPlayer: document.getElementById('add-player-button')
             },
             playerList: document.getElementById('player-list')
         };
     }
 
+    initializeEventListeners() {
+        // Play button handler
+        if (this.ui?.buttons.play) {
+            this.ui.buttons.play.addEventListener('click', () => this.handlePlayButton());
+        }
+
+        // Add player button handler
+        if (this.ui?.buttons.addPlayer) {
+            this.ui.buttons.addPlayer.addEventListener('click', () => this.addPlayer());
+        }
+
+        // Start game button handler
+        if (this.ui?.buttons.start) {
+            this.ui.buttons.start.addEventListener('click', () => this.startGame());
+        }
+    }
+
     initializeSocketHandlers() {
         socket.on('connect', () => {
             console.log('Connected to server');
@@ -98,17 +83,16 @@ class Game {
             this.handleGameCreated(data);
         });
 
-        socket.on('player_joined', (data) => {
-            this.handlePlayerJoined(data);
+        socket.on('round_start', (data) => {
+            this.handleRoundStart(data);
         });
     }
 
     async handlePlayButton() {
-        console.log('Handling play button click');
+        console.log('Play button clicked');
         try {
             await this.createGame();
             this.showPage('setup');
-            // Add default players after transitioning to setup page
             this.addDefaultPlayers();
         } catch (error) {
             console.error('Error starting game:', error);
@@ -117,34 +101,33 @@ class Game {
     }
 
     addDefaultPlayers() {
+        // Clear existing players
+        this.state.players = [];
         // Add two default players
-        this.addPlayer('Player 1');
-        this.addPlayer('Player 2');
+        this.addPlayer();
+        this.addPlayer();
         this.updatePlayerControls();
     }
 
-    addPlayer(defaultName = null) {
+    addPlayer() {
         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 playerNumber = this.state.players.length + 1;
         const newPlayer = {
-            id: this.state.players.length + 1,
-            name: playerName
+            id: playerNumber,
+            name: `Player ${playerNumber}`
         };
 
         this.state.players.push(newPlayer);
         this.updatePlayerList();
         this.updatePlayerControls();
 
-        // Emit player joined event
         socket.emit('join_game', {
             gameId: this.state.gameId,
-            playerName: playerName
+            playerName: newPlayer.name
         });
     }
 
@@ -152,34 +135,37 @@ class Game {
         if (!this.ui.playerList) return;
 
         this.ui.playerList.innerHTML = '';
+        
+        // Create player grid container
+        const gridContainer = document.createElement('div');
+        gridContainer.className = 'player-grid';
+
         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);
+            playerElement.className = 'player-card';
+
+            const circle = document.createElement('div');
+            circle.className = 'player-circle';
+            circle.textContent = player.id;
+
+            const name = document.createElement('div');
+            name.className = 'player-name';
+            name.textContent = player.name;
+
+            playerElement.appendChild(circle);
+            playerElement.appendChild(name);
+            gridContainer.appendChild(playerElement);
         });
+
+        this.ui.playerList.appendChild(gridContainer);
     }
 
     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;
@@ -200,17 +186,47 @@ class Game {
         this.state.gameId = data.gameId;
     }
 
+    async startGame() {
+        console.log('Starting game...');
+        try {
+            const response = await fetch('/api/start_game', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    gameId: this.state.gameId
+                })
+            });
+
+            const data = await response.json();
+            if (data.status === 'success') {
+                this.handleRoundStart(data);
+            } else {
+                throw new Error(data.error || 'Failed to start game');
+            }
+        } catch (error) {
+            console.error('Error starting game:', error);
+            this.handleError('Failed to start game');
+        }
+    }
+
+    handleRoundStart(data) {
+        console.log('Round starting:', data);
+        this.state.currentQuestion = data.question;
+        this.state.currentPhase = 'recording';
+        this.showPage('recording');
+    }
+
     showPage(pageName) {
         console.log('Showing page:', pageName);
         
-        // Hide all pages
         Object.values(this.ui.pages).forEach(page => {
             if (page) {
                 page.classList.remove('active');
             }
         });
 
-        // Show requested page
         const pageToShow = this.ui.pages[pageName];
         if (pageToShow) {
             pageToShow.classList.add('active');
@@ -220,20 +236,15 @@ 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...
 }
 
-// Initialize the game when the DOM is loaded
+// Initialize the game
 document.addEventListener('DOMContentLoaded', () => {
     window.game = new Game();
 });