Update static/js/game.js

static/js/game.js

@@ -1,197 +1,361 @@
-from flask import Flask, render_template, request, jsonify
-from flask_socketio import SocketIO, emit, join_room
-import os
-import requests
-import json
-import uuid
-from datetime import datetime
-from dotenv import load_dotenv
-import logging
-from werkzeug.utils import secure_filename
-import random
-import asyncio
-
-# Initialize Flask and configure core settings
-app = Flask(__name__)
-app.config['SECRET_KEY'] = os.urandom(24)  # Generate a random secret key for security
-app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # Limit file uploads to 16MB
-
-# Initialize SocketIO with CORS support for development
-socketio = SocketIO(app, cors_allowed_origins="*")
-
-# Load environment variables from .env file
-load_dotenv()
-MISTRAL_API_KEY = os.getenv('MISTRAL_API_KEY')
-ELEVENLABS_API_KEY = os.getenv('ELEVENLABS_API_KEY')
-
-# Configure logging to track application behavior
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
-
-class GameState:
-    """Manages the state of all active game sessions."""
-    
-    def __init__(self):
-        """Initialize the game state manager."""
-        self.games = {}  # Dictionary to store all active games
-        self.cleanup_interval = 3600  # Cleanup inactive games every hour
-        
-    def create_game(self):
-        """Create a new game session with a unique identifier."""
-        game_id = str(uuid.uuid4())
-        self.games[game_id] = {
-            'players': [],
-            'current_phase': 'setup',
-            'recordings': {},
-            'impostor': None,
-            'votes': {},
-            'question': None,
-            'impostor_answer': None,
-            'modified_recording': None,
-            'round_number': 1,
-            'start_time': datetime.now().isoformat(),
-            'completed_rounds': [],
-            'score': {'impostor_wins': 0, 'player_wins': 0},
-            'socket_room': f'game_{game_id}'  # Add dedicated socket room
+
+// Initialize Socket.IO connection with automatic reconnection
+const socket = io({
+    reconnection: true,
+    reconnectionAttempts: 5,
+    reconnectionDelay: 1000
+});
+
+class Game {
+    constructor() {
+        // Core game state with all necessary properties
+        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
+        };
+
+        // Initialize if DOM is ready, otherwise wait for it
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.initialize());
+        } else {
+            this.initialize();
         }
-        return game_id
+    }
 
-    def cleanup_inactive_games(self):
-        """Remove inactive game sessions older than 2 hours."""
-        current_time = datetime.now()
-        inactive_threshold = 7200  # 2 hours in seconds
+    initialize() {
+        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: {
+                landing: document.getElementById('landing-page'),
+                setup: document.getElementById('setup-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'),
+                addPlayer: document.getElementById('add-player-button'),
+                start: document.getElementById('start-button'),
+                record: document.getElementById('record-button')
+            },
+            displays: {
+                timer: document.getElementById('timer-display'),
+                question: document.getElementById('question-display'),
+                playerList: document.getElementById('player-list')
+            }
+        };
+    }
+
+    initializeEventListeners() {
+        console.log('Setting up event listeners...');
         
-        for game_id, game in list(self.games.items()):
-            start_time = datetime.fromisoformat(game['start_time'])
-            if (current_time - start_time).total_seconds() > inactive_threshold:
-                del self.games[game_id]
-
-# Initialize global game state
-game_state = GameState()
-
-# Socket.IO event handlers
-@socketio.on('create_game')
-def handle_create_game():
-    """Handle new game creation requests."""
-    try:
-        game_id = game_state.create_game()
-        emit('game_created', {
-            'status': 'success',
-            'gameId': game_id
-        })
-        logger.info(f"New game created: {game_id}")
-    except Exception as e:
-        logger.error(f"Error creating game: {str(e)}")
-        emit('game_creation_failed', {
-            'status': 'error',
-            'error': 'Could not create game'
-        })
-
-@socketio.on('join_game')
-def handle_join_game(data):
-    """Handle a player joining the game."""
-    game_id = data.get('game_id')
-    player_name = data.get('player_name')
-    
-    if not game_id or not player_name:
-        emit('join_failed', {
-            'status': 'error',
-            'error': 'Missing game ID or player name'
-        })
-        return
-
-    if game_id not in game_state.games:
-        emit('join_failed', {
-            'status': 'error',
-            'error': 'Game not found'
-        })
-        return
-
-    game = game_state.games[game_id]
-    if len(game['players']) >= 5:
-        emit('join_failed', {
-            'status': 'error',
-            'error': 'Game is full'
-        })
-        return
-
-    try:
-        player_id = len(game['players']) + 1
-        new_player = {
-            'id': player_id,
-            'name': player_name,
-            'socket_id': request.sid
+        // Button event listeners
+        if (this.ui.buttons.play) {
+            this.ui.buttons.play.addEventListener('click', () => this.handlePlayButton());
         }
-        game['players'].append(new_player)
-        
-        # Join the game room
-        join_room(game['socket_room'])
-        
-        emit('player_joined', {
-            'status': 'success',
-            'player': new_player
-        }, room=game['socket_room'])
-        
-        logger.info(f"Player {player_name} joined game {game_id}")
-        
-    except Exception as e:
-        logger.error(f"Error joining game: {str(e)}")
-        emit('join_failed', {
-            'status': 'error',
-            'error': 'Internal server error'
-        })
-
-@socketio.on('round_start')
-def handle_round_start(data):
-    """Handle the start of a new round."""
-    game_id = data.get('game_id')
-    if game_id not in game_state.games:
-        return
-
-    game = game_state.games[game_id]
-    emit('round_start', {
-        'question': game['question'],
-        'phase': 'recording',
-        'duration': 30
-    }, room=game['socket_room'])
-
-# API endpoints
-@app.route('/')
-def home():
-    """Serve the main game page."""
-    return render_template('index.html')
-
-@app.route('/api/start_game', methods=['POST'])
-async def start_game():
-    """Initialize a new game session."""
-    try:
-        data = request.get_json()
-        game_id = data.get('game_id')
+
+        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());
+        }
+
+        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', () => {
+            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');
+            }
+        });
+
+        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();
+            }
+        });
+
+        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() {
+        console.log('Play button clicked');
+        try {
+            await this.createGame();
+        } catch (error) {
+            console.error('Error starting game:', error);
+            this.handleError('Failed to start game');
+        }
+    }
+
+    createGame() {
+        return new Promise((resolve, reject) => {
+            console.log('Creating new game...');
+            socket.emit('create_game', {}, (response) => {
+                if (response.status === 'success') {
+                    resolve(response);
+                } else {
+                    reject(new Error(response.error || 'Game creation failed'));
+                }
+            });
+
+            setTimeout(() => reject(new Error('Game creation timeout')), 5000);
+        });
+    }
+
+    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');
+            return;
+        }
+
+        const playerName = defaultName || `Player ${this.state.players.length + 1}`;
+        socket.emit('join_game', {
+            gameId: this.state.gameId,
+            playerName: playerName
+        }, (response) => {
+            if (response.status === 'success') {
+                this.state.players.push({
+                    id: response.player.id,
+                    name: response.player.name
+                });
+                this.updatePlayerList();
+                this.updatePlayerControls();
+            } else {
+                this.handleError(response.error || 'Failed to add player');
+            }
+        });
+    }
+
+    updatePlayerList() {
+        if (!this.ui.displays.playerList) return;
+
+        const playerList = this.ui.displays.playerList;
+        playerList.innerHTML = '';
         
-        if game_id not in game_state.games:
-            return jsonify({'error': 'Game not found'}), 404
+        const gridContainer = document.createElement('div');
+        gridContainer.className = 'player-grid';
+
+        this.state.players.forEach(player => {
+            const playerCard = document.createElement('div');
+            playerCard.className = 'player-card';
             
-        game = game_state.games[game_id]
+            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;
+
+            playerCard.appendChild(circle);
+            playerCard.appendChild(name);
+            gridContainer.appendChild(playerCard);
+        });
+
+        playerList.appendChild(gridContainer);
+    }
+
+    updatePlayerControls() {
+        if (this.ui.buttons.addPlayer) {
+            this.ui.buttons.addPlayer.disabled = 
+                this.state.players.length >= this.state.maxPlayers;
+        }
+
+        if (this.ui.buttons.start) {
+            this.ui.buttons.start.disabled = 
+                this.state.players.length < this.state.minPlayers;
+        }
+    }
+
+    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');
+        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) {
+        console.log('Showing page:', pageName);
         
-        # Generate question for the round
-        question = await generate_question()
-        game['question'] = question
-        game['current_phase'] = 'recording'
+        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);
+        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);
         
-        return jsonify({
-            'status': 'success',
-            'question': question
-        })
+        // Remove event listeners
+        window.removeEventListener('resize', this.handleResize);
         
-    except Exception as e:
-        logger.error(f"Error starting game: {str(e)}")
-        return jsonify({'error': 'Internal server error'}), 500
-
-# ... (rest of the API endpoints remain the same)
-
-if __name__ == '__main__':
-    # Create temporary directory for recordings if it doesn't exist
-    os.makedirs('temp', exist_ok=True)
-    
-    # Start the server
-    socketio.run(app, host='0.0.0.0', port=7860, debug=True)
+        // Reset game state
+        this.state = {
+            gameId: null,
+            currentPhase: 'landing',
+            players: [],
+            currentQuestion: null,
+            isRecording: false
+        };
+    }
+}
+
+// Initialize the game when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Initializing game...');
+    window.game = new Game();
+});