Update static/js/game.js

static/js/game.js

@@ -1,326 +1,148 @@
-// Initialize Socket.IO connection with automatic reconnection
-const socket = io({
-    reconnection: true,
-    reconnectionAttempts: 5,
-    reconnectionDelay: 1000
-});
-
-class Game {
-    constructor() {
-        // Core game state
-        this.state = {
-            gameId: null,
-            currentPhase: 'landing',
-            playerId: null,
-            players: [],
-            currentQuestion: null,
-            isRecording: false,
-            recordingTime: 30, // seconds
-            listeningTime: 60, // seconds
-            votingTime: 60, // seconds
-            recordings: new Map(),
-            votes: new Map(),
-            impostor: null
-        };
-
-        // Audio recording configuration
-        this.audioConfig = {
-            mediaRecorder: null,
-            audioChunks: [],
-            stream: null
-        };
-
-        // Initialize the game
-        this.initializeEventListeners();
-        this.bindUIElements();
-    }
-
-    // Initialize all event listeners for the game
-    initializeEventListeners() {
-        // Socket event listeners
-        socket.on('connect', () => this.handleConnection());
-        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));
-
-        // UI event listeners
-        document.getElementById('start-button')?.addEventListener('click', () => this.startGame());
-        document.getElementById('add-player-button')?.addEventListener('click', () => this.addPlayer());
-    }
-
-    // Bind UI elements and initialize their event handlers
-    bindUIElements() {
-        // Bind all necessary UI elements
-        const uiElements = {
-            gameContainer: document.getElementById('game-container'),
-            landingPage: document.getElementById('landing-page'),
-            setupPage: document.getElementById('setup-page'),
-            gamePage: document.getElementById('game-page'),
-            questionDisplay: document.getElementById('question-display'),
-            timerDisplay: document.getElementById('timer-display'),
-            recordButton: document.getElementById('record-button'),
-            playerList: document.getElementById('player-list'),
-            voteButtons: document.querySelectorAll('.vote-button')
-        };
-
-        // Store UI elements in the class
-        this.ui = uiElements;
-    }
-
-    // Handle initial connection to the server
-    handleConnection() {
-        console.log('Connected to server');
-        this.showPage('landing');
-    }
-
-    // Create a new game session
-    async createGame() {
-        try {
-            socket.emit('create_game');
-        } catch (error) {
-            this.handleError('Failed to create game');
-        }
-    }
-
-    // Handle successful game creation
-    handleGameCreated(data) {
-        this.state.gameId = data.gameId;
-        this.showPage('setup');
-    }
-
-    // Add a new player to the game
-    async addPlayer() {
-        if (this.state.players.length >= 5) {
-            this.handleError('Maximum player limit reached');
-            return;
-        }
-
-        const playerName = prompt('Enter player name:');
-        if (!playerName) return;
-
-        socket.emit('join_game', {
-            gameId: this.state.gameId,
-            playerName: playerName
-        });
-    }
-
-    // Handle new player joining the game
-    handlePlayerJoined(data) {
-        this.state.players.push({
-            id: data.playerId,
-            name: data.playerName
-        });
-        this.updatePlayerList();
-    }
-
-    // Update the player list in the UI
-    updatePlayerList() {
-        if (!this.ui.playerList) return;
-
-        this.ui.playerList.innerHTML = '';
-        this.state.players.forEach(player => {
-            const playerElement = document.createElement('div');
-            playerElement.className = 'player-avatar';
-            playerElement.textContent = player.id;
-            this.ui.playerList.appendChild(playerElement);
-        });
-    }
-
-    // Start the game
-    async startGame() {
-        if (this.state.players.length < 3) {
-            this.handleError('Need at least 3 players to start');
-            return;
-        }
-
-        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);
-            }
-        } catch (error) {
-            this.handleError('Failed to start game');
-        }
-    }
-
-    // Handle the start of a new round
-    handleRoundStart(data) {
-        this.state.currentQuestion = data.question;
-        this.state.currentPhase = 'recording';
-        this.showPage('game');
-        this.updateQuestionDisplay();
-        this.startTimer(this.state.recordingTime, () => this.endRecordingPhase());
-    }
-
-    // Start audio recording
-    async startRecording() {
-        try {
-            this.audioConfig.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            this.audioConfig.mediaRecorder = new MediaRecorder(this.audioConfig.stream);
-            this.audioConfig.audioChunks = [];
-
-            this.audioConfig.mediaRecorder.ondataavailable = (event) => {
-                this.audioConfig.audioChunks.push(event.data);
-            };
-
-            this.audioConfig.mediaRecorder.onstop = () => {
-                this.submitRecording();
-            };
-
-            this.audioConfig.mediaRecorder.start();
-            this.state.isRecording = true;
-            this.updateRecordButton();
-        } catch (error) {
-            this.handleError('Failed to start recording');
-        }
-    }
-
-    // Stop audio recording
-    stopRecording() {
-        if (this.audioConfig.mediaRecorder && this.state.isRecording) {
-            this.audioConfig.mediaRecorder.stop();
-            this.audioConfig.stream.getTracks().forEach(track => track.stop());
-            this.state.isRecording = false;
-            this.updateRecordButton();
-        }
-    }
-
-    // Submit recording to server
-    async submitRecording() {
-        const audioBlob = new Blob(this.audioConfig.audioChunks, { type: 'audio/wav' });
-        const formData = new FormData();
-        formData.append('audio', audioBlob);
-        formData.append('gameId', this.state.gameId);
-        formData.append('playerId', this.state.playerId);
-
-        try {
-            const response = await fetch('/api/submit_recording', {
-                method: 'POST',
-                body: formData
-            });
-
-            const data = await response.json();
-            if (data.status === 'success') {
-                this.state.recordings.set(this.state.playerId, data.recordingUrl);
-            }
-        } catch (error) {
-            this.handleError('Failed to submit recording');
-        }
-    }
-
-    // Start the timer for a game phase
-    startTimer(duration, callback) {
-        let timeLeft = duration;
-        this.updateTimerDisplay(timeLeft);
-
-        this.timer = setInterval(() => {
-            timeLeft--;
-            this.updateTimerDisplay(timeLeft);
-
-            if (timeLeft <= 0) {
-                clearInterval(this.timer);
-                if (callback) callback();
-            }
-        }, 1000);
-    }
-
-    // Update the timer display
-    updateTimerDisplay(timeLeft) {
-        if (this.ui.timerDisplay) {
-            const minutes = Math.floor(timeLeft / 60);
-            const seconds = timeLeft % 60;
-            this.ui.timerDisplay.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
-        }
-    }
-
-    // End the recording phase and move to listening phase
-    endRecordingPhase() {
-        if (this.state.isRecording) {
-            this.stopRecording();
-        }
-        this.state.currentPhase = 'listening';
-        this.startListeningPhase();
-    }
-
-    // Start the listening phase
-    startListeningPhase() {
-        this.showPage('listening');
-        this.loadRecordings();
-        this.startTimer(this.state.listeningTime, () => this.startVotingPhase());
-    }
-
-    // Load all player recordings
-    async loadRecordings() {
-        // Implementation for loading and playing recordings
-        // This would integrate with the audio playback UI
-    }
-
-    // Start the voting phase
-    startVotingPhase() {
-        this.state.currentPhase = 'voting';
-        this.showPage('voting');
-        this.startTimer(this.state.votingTime, () => this.endVotingPhase());
-    }
-
-    // Submit a vote
-    submitVote(votedPlayerId) {
-        socket.emit('submit_vote', {
-            gameId: this.state.gameId,
-            voterId: this.state.playerId,
-            votedPlayerId: votedPlayerId
-        });
-    }
-
-    // Handle the round results
-    handleRoundResult(data) {
-        this.showResults(data);
-        // Trigger dramatic background effect
-        window.gameBackground?.addDramaticEffect('impostor_reveal');
-    }
-
-    // Show the results page
-    showResults(data) {
-        this.showPage('results');
-        // Implementation for displaying round results
-    }
-
-    // Switch between game pages
-    showPage(pageName) {
-        const pages = document.querySelectorAll('.game-page');
-        pages.forEach(page => {
-            page.classList.remove('active');
-            if (page.id === `${pageName}-page`) {
-                page.classList.add('active');
-            }
-        });
-    }
-
-    // Handle errors
-    handleError(message) {
-        const errorElement = document.createElement('div');
-        errorElement.className = 'error-message';
-        errorElement.textContent = message;
-        this.ui.gameContainer.appendChild(errorElement);
-        setTimeout(() => errorElement.remove(), 3000);
-    }
-}
-
-// Initialize the game when the DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-    const game = new Game();
-    // Expose game instance for debugging
-    window.game = game;
-});
-
-export default Game;
+// Initialize Socket.IO connection with automatic reconnection
+const socket = io({
+    reconnection: true,
+    reconnectionAttempts: 5,
+    reconnectionDelay: 1000
+});
+
+class Game {
+    constructor() {
+        // Core game state
+        this.state = {
+            gameId: null,
+            currentPhase: 'landing',
+            playerId: null,
+            players: [],
+            currentQuestion: null,
+            isRecording: false,
+            recordingTime: 30,
+            listeningTime: 60,
+            votingTime: 60,
+            recordings: new Map(),
+            votes: new Map(),
+            impostor: null
+        };
+
+        // Wait for DOM to be fully loaded before initializing
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.initialize());
+        } else {
+            this.initialize();
+        }
+    }
+
+    initialize() {
+        // Initialize event listeners and UI bindings
+        this.initializeEventListeners();
+        this.bindUIElements();
+        
+        // Initialize Socket.IO event handlers
+        this.initializeSocketHandlers();
+        
+        // Show the landing page
+        this.showPage('landing');
+    }
+
+    initializeEventListeners() {
+        // Handle play button click
+        const playButton = document.getElementById('play-button');
+        if (playButton) {
+            playButton.addEventListener('click', () => {
+                console.log('Play button clicked'); // Debug log
+                this.handlePlayButton();
+            });
+        }
+
+        // Other button handlers
+        document.getElementById('start-button')?.addEventListener('click', () => this.startGame());
+        document.getElementById('add-player-button')?.addEventListener('click', () => this.addPlayer());
+    }
+
+    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'),
+                results: document.getElementById('results-page')
+            },
+            buttons: {
+                play: document.getElementById('play-button'),
+                start: document.getElementById('start-button'),
+                addPlayer: document.getElementById('add-player-button'),
+                record: document.getElementById('record-button')
+            }
+        };
+    }
+
+    initializeSocketHandlers() {
+        socket.on('connect', () => {
+            console.log('Connected to server');
+        });
+
+        socket.on('game_created', (data) => {
+            this.handleGameCreated(data);
+        });
+
+        socket.on('player_joined', (data) => {
+            this.handlePlayerJoined(data);
+        });
+    }
+
+    async handlePlayButton() {
+        console.log('Handling play button click'); // Debug log
+        try {
+            // Create new game session
+            await this.createGame();
+            // Show the setup page
+            this.showPage('setup');
+        } catch (error) {
+            console.error('Error starting game:', error);
+            this.handleError('Failed to start 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); // Debug log
+        this.state.gameId = data.gameId;
+    }
+
+    showPage(pageName) {
+        console.log('Showing page:', pageName); // Debug log
+        
+        // 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');
+            this.state.currentPhase = pageName;
+        }
+    }
+
+    // Rest of the Game class implementation remains the same...
+}
+
+// Initialize the game when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    window.game = new Game();
+});