Update static/js/game.js

static/js/game.js

@@ -1,4 +1,4 @@
-// Initialize Socket.IO connection
+// Initialize Socket.IO connection with automatic reconnection
 const socket = io({
     reconnection: true,
     reconnectionAttempts: 5,
@@ -7,21 +7,24 @@ const socket = io({
 
 class Game {
     constructor() {
-        // Core game state
+        // Core game state with all necessary properties
         this.state = {
             gameId: null,
             currentPhase: 'landing',
             players: [],
             currentQuestion: null,
             isRecording: false,
-            recordingTime: 30,
-            listeningTime: 60,
-            votingTime: 60,
+            recordingTime: 30, // seconds
+            listeningTime: 60, // seconds
+            votingTime: 60,    // seconds
+            recordings: new Map(),
+            votes: new Map(),
+            impostor: null,
             maxPlayers: 5,
             minPlayers: 3
         };
 
-        // Wait for DOM to be loaded
+        // Initialize if DOM is ready, otherwise wait for it
         if (document.readyState === 'loading') {
             document.addEventListener('DOMContentLoaded', () => this.initialize());
         } else {
@@ -30,14 +33,17 @@ class Game {
     }
 
     initialize() {
-        console.log('Initializing game...');
-        this.initializeEventListeners();
+        console.log('Initializing game components...');
         this.bindUIElements();
+        this.initializeEventListeners();
         this.initializeSocketHandlers();
+        this.initializeAudioManager();
         this.showPage('landing');
     }
 
     bindUIElements() {
+        console.log('Binding UI elements...');
+        // Cache all UI elements for quick access
         this.ui = {
             gameContainer: document.getElementById('game-container'),
             pages: {
@@ -50,42 +56,63 @@ class Game {
             },
             buttons: {
                 play: document.getElementById('play-button'),
+                addPlayer: document.getElementById('add-player-button'),
                 start: document.getElementById('start-button'),
-                addPlayer: document.getElementById('add-player-button')
+                record: document.getElementById('record-button')
             },
-            playerList: document.getElementById('player-list')
+            displays: {
+                timer: document.getElementById('timer-display'),
+                question: document.getElementById('question-display'),
+                playerList: document.getElementById('player-list')
+            }
         };
     }
 
     initializeEventListeners() {
-        // Play button handler
-        if (this.ui?.buttons.play) {
+        console.log('Setting up event listeners...');
+        
+        // Button event listeners
+        if (this.ui.buttons.play) {
             this.ui.buttons.play.addEventListener('click', () => this.handlePlayButton());
         }
 
-        // Add player button handler
-        if (this.ui?.buttons.addPlayer) {
+        if (this.ui.buttons.addPlayer) {
             this.ui.buttons.addPlayer.addEventListener('click', () => this.addPlayer());
         }
 
-        // Start game button handler
-        if (this.ui?.buttons.start) {
+        if (this.ui.buttons.start) {
             this.ui.buttons.start.addEventListener('click', () => this.startGame());
         }
+
+        if (this.ui.buttons.record) {
+            this.ui.buttons.record.addEventListener('click', () => this.toggleRecording());
+        }
+
+        // Handle window resize for responsive layout
+        window.addEventListener('resize', () => this.handleResize());
     }
 
     initializeSocketHandlers() {
+        // Server connection events
         socket.on('connect', () => {
             console.log('Connected to server');
         });
 
-        socket.on('game_created', (data) => {
-            this.handleGameCreated(data);
+        socket.on('disconnect', () => {
+            console.log('Disconnected from server');
+            this.handleError('Connection lost. Please refresh the page.');
         });
 
-        socket.on('round_start', (data) => {
-            this.handleRoundStart(data);
-        });
+        // Game events
+        socket.on('game_created', (data) => this.handleGameCreated(data));
+        socket.on('player_joined', (data) => this.handlePlayerJoined(data));
+        socket.on('round_start', (data) => this.handleRoundStart(data));
+        socket.on('round_result', (data) => this.handleRoundResult(data));
+    }
+
+    initializeAudioManager() {
+        // Initialize audio context for recording
+        this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
     }
 
     async handlePlayButton() {
@@ -100,25 +127,38 @@ class Game {
         }
     }
 
+    createGame() {
+        return new Promise((resolve, reject) => {
+            console.log('Creating new game...');
+            socket.emit('create_game');
+            
+            socket.once('game_created', (data) => {
+                this.state.gameId = data.gameId;
+                console.log('Game created:', data);
+                resolve(data);
+            });
+
+            setTimeout(() => reject(new Error('Game creation timeout')), 5000);
+        });
+    }
+
     addDefaultPlayers() {
-        // Clear existing players
-        this.state.players = [];
-        // Add two default players
-        this.addPlayer();
-        this.addPlayer();
+        // Add two default players to start
+        this.addPlayer('Player 1');
+        this.addPlayer('Player 2');
         this.updatePlayerControls();
     }
 
-    addPlayer() {
+    addPlayer(defaultName = null) {
         if (this.state.players.length >= this.state.maxPlayers) {
-            this.handleError('Maximum player limit reached');
+            this.handleError('Maximum players reached');
             return;
         }
 
-        const playerNumber = this.state.players.length + 1;
+        const playerName = defaultName || `Player ${this.state.players.length + 1}`;
         const newPlayer = {
-            id: playerNumber,
-            name: `Player ${playerNumber}`
+            id: this.state.players.length + 1,
+            name: playerName
         };
 
         this.state.players.push(newPlayer);
@@ -127,23 +167,23 @@ class Game {
 
         socket.emit('join_game', {
             gameId: this.state.gameId,
-            playerName: newPlayer.name
+            playerName: playerName
         });
     }
 
     updatePlayerList() {
-        if (!this.ui.playerList) return;
+        if (!this.ui.displays.playerList) return;
 
-        this.ui.playerList.innerHTML = '';
+        const playerList = this.ui.displays.playerList;
+        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-card';
-
+            const playerCard = document.createElement('div');
+            playerCard.className = 'player-card';
+            
             const circle = document.createElement('div');
             circle.className = 'player-circle';
             circle.textContent = player.id;
@@ -152,12 +192,12 @@ class Game {
             name.className = 'player-name';
             name.textContent = player.name;
 
-            playerElement.appendChild(circle);
-            playerElement.appendChild(name);
-            gridContainer.appendChild(playerElement);
+            playerCard.appendChild(circle);
+            playerCard.appendChild(name);
+            gridContainer.appendChild(playerCard);
         });
 
-        this.ui.playerList.appendChild(gridContainer);
+        playerList.appendChild(gridContainer);
     }
 
     updatePlayerControls() {
@@ -172,20 +212,6 @@ class Game {
         }
     }
 
-    async createGame() {
-        try {
-            socket.emit('create_game');
-        } catch (error) {
-            console.error('Error creating game:', error);
-            throw new Error('Failed to create game');
-        }
-    }
-
-    handleGameCreated(data) {
-        console.log('Game created:', data);
-        this.state.gameId = data.gameId;
-    }
-
     async startGame() {
         console.log('Starting game...');
         try {
@@ -216,6 +242,38 @@ class Game {
         this.state.currentQuestion = data.question;
         this.state.currentPhase = 'recording';
         this.showPage('recording');
+        this.updateQuestionDisplay();
+        this.startTimer(this.state.recordingTime);
+    }
+
+    updateQuestionDisplay() {
+        if (this.ui.displays.question && this.state.currentQuestion) {
+            this.ui.displays.question.textContent = this.state.currentQuestion;
+        }
+    }
+
+    startTimer(duration) {
+        let timeLeft = duration;
+        this.updateTimerDisplay(timeLeft);
+
+        this.timer = setInterval(() => {
+            timeLeft--;
+            this.updateTimerDisplay(timeLeft);
+
+            if (timeLeft <= 0) {
+                clearInterval(this.timer);
+                this.handlePhaseEnd();
+            }
+        }, 1000);
+    }
+
+    updateTimerDisplay(timeLeft) {
+        if (this.ui.displays.timer) {
+            const minutes = Math.floor(timeLeft / 60);
+            const seconds = timeLeft % 60;
+            this.ui.displays.timer.textContent = 
+                `${minutes}:${seconds.toString().padStart(2, '0')}`;
+        }
     }
 
     showPage(pageName) {
@@ -231,20 +289,49 @@ class Game {
         if (pageToShow) {
             pageToShow.classList.add('active');
             this.state.currentPhase = pageName;
+        } else {
+            console.error(`Page ${pageName} not found`);
         }
     }
 
     handleError(message) {
-        console.error(message);
+        console.error('Error:', message);
         const errorElement = document.createElement('div');
         errorElement.className = 'error-message';
         errorElement.textContent = message;
         this.ui.gameContainer.appendChild(errorElement);
         setTimeout(() => errorElement.remove(), 3000);
     }
+
+    handleResize() {
+        // Update any size-dependent UI elements
+        if (window.innerWidth < 768) {
+            this.ui.gameContainer.classList.add('mobile');
+        } else {
+            this.ui.gameContainer.classList.remove('mobile');
+        }
+    }
+
+    cleanup() {
+        // Clear all intervals and timeouts
+        if (this.timer) clearInterval(this.timer);
+        
+        // Remove event listeners
+        window.removeEventListener('resize', this.handleResize);
+        
+        // Reset game state
+        this.state = {
+            gameId: null,
+            currentPhase: 'landing',
+            players: [],
+            currentQuestion: null,
+            isRecording: false
+        };
+    }
 }
 
-// Initialize the game
+// Initialize the game when the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
+    console.log('Initializing game...');
     window.game = new Game();
 });