Update static/js/game.js

static/js/game.js

@@ -1,53 +1,56 @@
-
-// Initialize Socket.IO connection with automatic reconnection
-const socket = io({
-    reconnection: true,
-    reconnectionAttempts: 5,
-    reconnectionDelay: 1000
-});
-
+[file name]: game.js
+[file content begin]
 class Game {
     constructor() {
-        // Core game state with all necessary properties
+        // Enhanced game state with connection tracking
         this.state = {
             gameId: null,
             currentPhase: 'landing',
             players: [],
             currentQuestion: null,
             isRecording: false,
-            recordingTime: 30, // seconds
-            listeningTime: 60, // seconds
-            votingTime: 60,    // seconds
             recordings: new Map(),
             votes: new Map(),
-            impostor: null,
-            maxPlayers: 5,
-            minPlayers: 3,
-            socketConnected: false // Track socket connection status
+            connectionStatus: 'disconnected',
+            connectionRetries: 0,
+            socket: null,
+            uiElements: null
         };
 
-        // Initialize if DOM is ready, otherwise wait for it
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', () => this.initialize());
-        } else {
-            this.initialize();
-        }
+        this.initializeGame();
     }
 
-    initialize() {
-        console.log('Initializing game components...');
-        this.bindUIElements();
+    initializeGame() {
+        this.initializeSocket();
+        this.initializeUI();
         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'),
+    initializeSocket() {
+        console.log('Initializing WebSocket connection...');
+        this.state.socket = io({
+            reconnection: true,
+            reconnectionAttempts: 5,
+            reconnectionDelay: 3000,
+            transports: ['websocket'],
+            autoConnect: false
+        });
+
+        // Socket event handlers
+        this.state.socket.on('connect', () => this.handleSocketConnect());
+        this.state.socket.on('disconnect', () => this.handleSocketDisconnect());
+        this.state.socket.on('connect_error', (error) => this.handleSocketError(error));
+        this.state.socket.on('game_created', (data) => this.handleGameCreated(data));
+        this.state.socket.on('player_joined', (data) => this.handlePlayerJoined(data));
+        this.state.socket.on('round_start', (data) => this.handleRoundStart(data));
+        this.state.socket.on('round_result', (data) => this.handleRoundResult(data));
+
+        // Manually connect after setting up handlers
+        this.state.socket.connect();
+    }
+
+    initializeUI() {
+        this.state.uiElements = {
             pages: {
                 landing: document.getElementById('landing-page'),
                 setup: document.getElementById('setup-page'),
@@ -65,120 +68,102 @@ class Game {
             displays: {
                 timer: document.getElementById('timer-display'),
                 question: document.getElementById('question-display'),
-                playerList: document.getElementById('player-list')
+                playerList: document.getElementById('player-list'),
+                connectionStatus: document.getElementById('connection-status')
             }
         };
     }
 
     initializeEventListeners() {
-        console.log('Setting up event listeners...');
-        
-        // Button event listeners
-        if (this.ui.buttons.play) {
-            this.ui.buttons.play.addEventListener('click', () => this.handlePlayButton());
-        }
-
-        if (this.ui.buttons.addPlayer) {
-            this.ui.buttons.addPlayer.addEventListener('click', () => this.addPlayer());
-        }
-
-        if (this.ui.buttons.start) {
-            this.ui.buttons.start.addEventListener('click', () => this.startGame());
-        }
+        // Button click handlers
+        this.state.uiElements.buttons.play?.addEventListener('click', () => this.handlePlay());
+        this.state.uiElements.buttons.addPlayer?.addEventListener('click', () => this.addPlayer());
+        this.state.uiElements.buttons.start?.addEventListener('click', () => this.startGame());
+        this.state.uiElements.buttons.record?.addEventListener('click', () => this.toggleRecording());
 
-        if (this.ui.buttons.record) {
-            this.ui.buttons.record.addEventListener('click', () => this.toggleRecording());
-        }
-
-        // Handle window resize for responsive layout
+        // Window resize handler
         window.addEventListener('resize', () => this.handleResize());
     }
 
-    initializeSocketHandlers() {
-        // Server connection events
-        socket.on('connect', () => {
-            this.state.socketConnected = true;
-            console.log('Connected to server');
-        });
-
-        socket.on('disconnect', () => {
-            this.state.socketConnected = false;
-            console.log('Disconnected from server');
-            this.handleError('Connection lost. Please refresh the page.');
-        });
-
-        // Game events
-        socket.on('game_created', (data) => {
-            if (data.status === 'success') {
-                this.state.gameId = data.gameId;
-                console.log('Game created:', data);
-                this.showPage('setup');
-                this.addDefaultPlayers();
-            } else {
-                this.handleError(data.error || 'Failed to create game');
-            }
-        });
+    handleSocketConnect() {
+        console.log('WebSocket connected:', this.state.socket.id);
+        this.state.connectionStatus = 'connected';
+        this.updateConnectionStatus();
+    }
 
-        socket.on('player_joined', (data) => {
-            if (data.status === 'success') {
-                this.state.players.push({
-                    id: data.player.id,
-                    name: data.player.name
-                });
-                this.updatePlayerList();
-                this.updatePlayerControls();
-            }
-        });
+    handleSocketDisconnect() {
+        console.log('WebSocket disconnected');
+        this.state.connectionStatus = 'disconnected';
+        this.updateConnectionStatus();
+        this.showError('Disconnected from server. Reconnecting...');
+    }
 
-        socket.on('round_start', (data) => this.handleRoundStart(data));
-        socket.on('round_result', (data) => this.handleRoundResult(data));
+    handleSocketError(error) {
+        console.error('WebSocket error:', error);
+        this.state.connectionStatus = 'error';
+        this.updateConnectionStatus();
+        this.showError(`Connection error: ${error.message}`);
     }
 
-    initializeAudioManager() {
-        // Initialize audio context for recording
-        this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    updateConnectionStatus() {
+        if (!this.state.uiElements.displays.connectionStatus) return;
+        
+        const statusMap = {
+            connected: '🟢 Connected',
+            disconnected: '🔴 Disconnected',
+            error: '⚠️ Connection Error'
+        };
+        
+        this.state.uiElements.displays.connectionStatus.textContent = 
+            statusMap[this.state.connectionStatus] || '❓ Unknown';
     }
 
-    async handlePlayButton() {
-        console.log('Play button clicked');
+    async handlePlay() {
+        if (this.state.connectionStatus !== 'connected') {
+            this.showError('Not connected to server');
+            return;
+        }
+
         try {
-            await this.createGame();
+            await this.createNewGame();
+            this.showPage('setup');
+            this.addDefaultPlayers();
         } catch (error) {
-            console.error('Error starting game:', error);
-            this.handleError('Failed to start game');
+            this.showError(error.message);
         }
     }
 
-    createGame() {
+    createNewGame() {
         return new Promise((resolve, reject) => {
-            console.log('Creating new game...');
-            socket.emit('create_game', {}, (response) => {
+            this.state.socket.emit('create_game', (response) => {
                 if (response.status === 'success') {
+                    this.state.gameId = response.gameId;
                     resolve(response);
                 } else {
                     reject(new Error(response.error || 'Game creation failed'));
                 }
             });
 
-            setTimeout(() => reject(new Error('Game creation timeout')), 5000);
+            setTimeout(() => {
+                reject(new Error('Game creation timed out'));
+            }, 10000);
         });
     }
 
     addDefaultPlayers() {
-        // Add two default players to start
         this.addPlayer('Player 1');
         this.addPlayer('Player 2');
-        this.updatePlayerControls();
     }
 
     addPlayer(defaultName = null) {
-        if (this.state.players.length >= this.state.maxPlayers) {
-            this.handleError('Maximum players reached');
+        if (this.state.players.length >= 5) {
+            this.showError('Maximum players reached (5)');
             return;
         }
 
         const playerName = defaultName || `Player ${this.state.players.length + 1}`;
-        socket.emit('join_game', {
+        
+        this.state.socket.emit('join_game', {
             gameId: this.state.gameId,
             playerName: playerName
         }, (response) => {
@@ -188,25 +173,24 @@ class Game {
                     name: response.player.name
                 });
                 this.updatePlayerList();
-                this.updatePlayerControls();
+                this.updateGameControls();
             } else {
-                this.handleError(response.error || 'Failed to add player');
+                this.showError(response.error || 'Failed to add player');
             }
         });
     }
 
     updatePlayerList() {
-        if (!this.ui.displays.playerList) return;
+        const container = this.state.uiElements.displays.playerList;
+        if (!container) return;
 
-        const playerList = this.ui.displays.playerList;
-        playerList.innerHTML = '';
-        
-        const gridContainer = document.createElement('div');
-        gridContainer.className = 'player-grid';
+        container.innerHTML = '';
+        const grid = document.createElement('div');
+        grid.className = 'player-grid';
 
         this.state.players.forEach(player => {
-            const playerCard = document.createElement('div');
-            playerCard.className = 'player-card';
+            const card = document.createElement('div');
+            card.className = 'player-card';
             
             const circle = document.createElement('div');
             circle.className = 'player-circle';
@@ -216,36 +200,31 @@ class Game {
             name.className = 'player-name';
             name.textContent = player.name;
 
-            playerCard.appendChild(circle);
-            playerCard.appendChild(name);
-            gridContainer.appendChild(playerCard);
+            card.append(circle, name);
+            grid.appendChild(card);
         });
 
-        playerList.appendChild(gridContainer);
+        container.appendChild(grid);
     }
 
-    updatePlayerControls() {
-        if (this.ui.buttons.addPlayer) {
-            this.ui.buttons.addPlayer.disabled = 
-                this.state.players.length >= this.state.maxPlayers;
-        }
+    updateGameControls() {
+        // Update add player button
+        this.state.uiElements.buttons.addPlayer.disabled = 
+            this.state.players.length >= 5;
 
-        if (this.ui.buttons.start) {
-            this.ui.buttons.start.disabled = 
-                this.state.players.length < this.state.minPlayers;
-        }
+        // Update start game button
+        this.state.uiElements.buttons.start.disabled = 
+            this.state.players.length < 3;
     }
 
     async startGame() {
-        console.log('Starting game...');
         try {
             const response = await fetch('/api/start_game', {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
+                headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify({
-                    gameId: this.state.gameId
+                    gameId: this.state.gameId,
+                    players: this.state.players.map(p => p.id)
                 })
             });
 
@@ -256,106 +235,72 @@ class Game {
                 throw new Error(data.error || 'Failed to start game');
             }
         } catch (error) {
-            console.error('Error starting game:', error);
-            this.handleError('Failed to start game');
+            this.showError(error.message);
         }
     }
 
     handleRoundStart(data) {
-        console.log('Round starting:', data);
         this.state.currentQuestion = data.question;
         this.state.currentPhase = 'recording';
         this.showPage('recording');
         this.updateQuestionDisplay();
-        this.startTimer(this.state.recordingTime);
+        this.startTimer(30);
+    }
+
+    showPage(pageName) {
+        Object.values(this.state.uiElements.pages).forEach(page => {
+            page?.classList.remove('active');
+        });
+        this.state.uiElements.pages[pageName]?.classList.add('active');
     }
 
     updateQuestionDisplay() {
-        if (this.ui.displays.question && this.state.currentQuestion) {
-            this.ui.displays.question.textContent = this.state.currentQuestion;
+        if (this.state.uiElements.displays.question && this.state.currentQuestion) {
+            this.state.uiElements.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);
+        let remaining = duration;
+        this.updateTimerDisplay(remaining);
+        
+        const timer = setInterval(() => {
+            remaining--;
+            this.updateTimerDisplay(remaining);
+            
+            if (remaining <= 0) {
+                clearInterval(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')}`;
-        }
+    updateTimerDisplay(seconds) {
+        if (!this.state.uiElements.displays.timer) return;
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        this.state.uiElements.displays.timer.textContent = 
+            `${mins}:${secs.toString().padStart(2, '0')}`;
     }
 
-    showPage(pageName) {
-        console.log('Showing page:', pageName);
-        
-        Object.values(this.ui.pages).forEach(page => {
-            if (page) {
-                page.classList.remove('active');
-            }
-        });
-
-        const pageToShow = this.ui.pages[pageName];
-        if (pageToShow) {
-            pageToShow.classList.add('active');
-            this.state.currentPhase = pageName;
-        } else {
-            console.error(`Page ${pageName} not found`);
-        }
-    }
-
-    handleError(message) {
-        console.error('Error:', message);
+    showError(message, duration = 5000) {
         const errorElement = document.createElement('div');
         errorElement.className = 'error-message';
         errorElement.textContent = message;
-        this.ui.gameContainer.appendChild(errorElement);
-        setTimeout(() => errorElement.remove(), 3000);
+        document.body.appendChild(errorElement);
+        
+        setTimeout(() => {
+            errorElement.remove();
+        }, duration);
     }
 
     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
-        };
+        // Add responsive layout handling if needed
     }
 }
 
-// Initialize the game when the DOM is loaded
+// Initialize game when DOM loads
 document.addEventListener('DOMContentLoaded', () => {
-    console.log('Initializing game...');
     window.game = new Game();
 });
+[file content end]