Upload 9 files

README.md

@@ -1,13 +1 @@
----
-title: Team 16trial
-emoji: 🏃
-colorFrom: green
-colorTo: pink
-sdk: gradio
-sdk_version: 5.13.1
-app_file: app.py
-pinned: false
-short_description: trial
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# trial

app.py

@@ -0,0 +1,401 @@
+from flask import Flask, render_template, request, jsonify
+from flask_socketio import SocketIO, emit
+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}
+        }
+        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
+        
+        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()
+
+async def generate_question():
+    """Generate an engaging question using Mistral AI."""
+    try:
+        headers = {
+            'Authorization': f'Bearer {MISTRAL_API_KEY}',
+            'Content-Type': 'application/json'
+        }
+        
+        # Craft a prompt that encourages interesting, personal questions
+        payload = {
+            'messages': [{
+                'role': 'user',
+                'content': '''Generate an engaging personal question for a social game.
+                The question should:
+                1. Encourage creative and unique responses
+                2. Be open-ended but not too philosophical
+                3. Be answerable in 15-30 seconds
+                4. Be appropriate for all ages
+                5. Spark interesting conversation
+
+                Generate only the question, without any additional text.'''
+            }]
+        }
+        
+        response = requests.post(
+            'https://api.mistral.ai/v1/chat/completions',
+            headers=headers,
+            json=payload,
+            timeout=10  # Set timeout to handle slow responses
+        )
+        
+        if response.status_code == 200:
+            question = response.json()['choices'][0]['message']['content'].strip()
+            logger.info(f"Generated question: {question}")
+            return question
+        else:
+            logger.error(f"Mistral API error: {response.status_code}")
+            # Fallback questions if API fails
+            fallback_questions = [
+                "What is your favorite childhood memory?",
+                "What's the most interesting place you've ever visited?",
+                "What's a skill you'd love to master and why?",
+                "What's the best piece of advice you've ever received?"
+            ]
+            return random.choice(fallback_questions)
+            
+    except Exception as e:
+        logger.error(f"Error generating question: {str(e)}")
+        return "What is your favorite memory from your childhood?"
+
+async def generate_impostor_answer(question):
+    """Generate a convincing impostor response using Mistral AI."""
+    try:
+        headers = {
+            'Authorization': f'Bearer {MISTRAL_API_KEY}',
+            'Content-Type': 'application/json'
+        }
+        
+        # Craft a detailed prompt for generating a natural response
+        prompt = f'''Given the question "{question}", generate a detailed and convincing personal response.
+        The response should:
+        1. Sound natural and conversational
+        2. Be 2-3 sentences long
+        3. Include specific details to sound authentic
+        4. Be suitable for text-to-speech conversion
+        5. Avoid complex words or punctuation that might affect voice synthesis
+        
+        Generate only the response, without any additional context.'''
+        
+        payload = {
+            'messages': [{
+                'role': 'user',
+                'content': prompt
+            }]
+        }
+        
+        response = requests.post(
+            'https://api.mistral.ai/v1/chat/completions',
+            headers=headers,
+            json=payload,
+            timeout=10
+        )
+        
+        if response.status_code == 200:
+            answer = response.json()['choices'][0]['message']['content'].strip()
+            logger.info(f"Generated impostor answer: {answer}")
+            return answer
+        else:
+            logger.error(f"Mistral API error generating answer: {response.status_code}")
+            return "I have an interesting story about that, but I'd need more time to explain it properly."
+            
+    except Exception as e:
+        logger.error(f"Error generating impostor answer: {str(e)}")
+        return "I have an interesting story about that, but I'd need more time to explain it properly."
+
+async def clone_voice(audio_file):
+    """Clone a voice using ElevenLabs API."""
+    try:
+        headers = {
+            'xi-api-key': ELEVENLABS_API_KEY
+        }
+        
+        with open(audio_file, 'rb') as f:
+            files = {
+                'files': ('recording.wav', f, 'audio/wav')
+            }
+            
+            response = requests.post(
+                'https://api.elevenlabs.io/v1/voices/add',
+                headers=headers,
+                files=files,
+                timeout=30
+            )
+            
+        if response.status_code == 200:
+            voice_id = response.json().get('voice_id')
+            logger.info(f"Successfully cloned voice: {voice_id}")
+            return voice_id
+        else:
+            logger.error(f"ElevenLabs voice cloning error: {response.status_code}")
+            return None
+            
+    except Exception as e:
+        logger.error(f"Error cloning voice: {str(e)}")
+        return None
+
+async def generate_cloned_speech(voice_id, text):
+    """Generate speech using ElevenLabs with a cloned voice."""
+    try:
+        headers = {
+            'xi-api-key': ELEVENLABS_API_KEY,
+            'Content-Type': 'application/json'
+        }
+        
+        payload = {
+            'text': text,
+            'voice_settings': {
+                'stability': 0.75,
+                'similarity_boost': 0.75
+            }
+        }
+        
+        response = requests.post(
+            f'https://api.elevenlabs.io/v1/text-to-speech/{voice_id}',
+            headers=headers,
+            json=payload,
+            timeout=30
+        )
+        
+        if response.status_code == 200:
+            filename = f"temp/impostor_audio_{uuid.uuid4()}.mp3"
+            with open(filename, 'wb') as f:
+                f.write(response.content)
+            logger.info(f"Generated cloned speech: {filename}")
+            return filename
+        else:
+            logger.error(f"ElevenLabs speech generation error: {response.status_code}")
+            return None
+            
+    except Exception as e:
+        logger.error(f"Error generating cloned speech: {str(e)}")
+        return None
+
+@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 game_id not in game_state.games:
+            return jsonify({'error': 'Game not found'}), 404
+            
+        game = game_state.games[game_id]
+        
+        # Generate question for the round
+        question = await generate_question()
+        game['question'] = question
+        game['current_phase'] = 'recording'
+        
+        return jsonify({
+            'status': 'success',
+            'question': question
+        })
+        
+    except Exception as e:
+        logger.error(f"Error starting game: {str(e)}")
+        return jsonify({'error': 'Internal server error'}), 500
+
+@app.route('/api/submit_recording', methods=['POST'])
+async def submit_recording():
+    """Handle voice recording submissions."""
+    try:
+        game_id = request.form.get('game_id')
+        player_id = request.form.get('player_id')
+        audio_file = request.files.get('audio')
+        
+        if not all([game_id, player_id, audio_file]):
+            return jsonify({'error': 'Missing required data'}), 400
+            
+        if game_id not in game_state.games:
+            return jsonify({'error': 'Game not found'}), 404
+            
+        # Save the recording
+        filename = secure_filename(f"recording_{game_id}_{player_id}.wav")
+        filepath = os.path.join('temp', filename)
+        audio_file.save(filepath)
+        
+        game_state.games[game_id]['recordings'][player_id] = filepath
+        
+        return jsonify({'status': 'success'})
+        
+    except Exception as e:
+        logger.error(f"Error submitting recording: {str(e)}")
+        return jsonify({'error': 'Internal server error'}), 500
+
+@app.route('/api/process_impostor', methods=['POST'])
+async def process_impostor():
+    """Handle the complete impostor voice generation process."""
+    try:
+        data = request.get_json()
+        game_id = data.get('game_id')
+        impostor_id = data.get('impostor_id')
+        
+        if game_id not in game_state.games:
+            return jsonify({'error': 'Game not found'}), 404
+            
+        game = game_state.games[game_id]
+        
+        # Generate impostor's answer
+        impostor_answer = await generate_impostor_answer(game['question'])
+        game['impostor_answer'] = impostor_answer
+        
+        # Get impostor's original recording
+        original_recording = game['recordings'].get(impostor_id)
+        if not original_recording:
+            return jsonify({'error': 'Original recording not found'}), 404
+        
+        # Clone voice
+        voice_id = await clone_voice(original_recording)
+        if not voice_id:
+            return jsonify({'error': 'Voice cloning failed'}), 500
+            
+        # Generate modified speech
+        audio_file = await generate_cloned_speech(voice_id, impostor_answer)
+        if not audio_file:
+            return jsonify({'error': 'Speech generation failed'}), 500
+            
+        game['modified_recording'] = audio_file
+        
+        return jsonify({
+            'status': 'success',
+            'audio_url': audio_file
+        })
+        
+    except Exception as e:
+        logger.error(f"Error processing impostor: {str(e)}")
+        return jsonify({'error': 'Internal server error'}), 500
+
+@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 game_id in game_state.games:
+        game = game_state.games[game_id]
+        if len(game['players']) < 5:
+            player_id = len(game['players']) + 1
+            game['players'].append({
+                'id': player_id,
+                'name': player_name
+            })
+            emit('player_joined', {
+                'player_id': player_id,
+                'player_name': player_name
+            }, broadcast=True, room=game_id)
+
+@socketio.on('submit_vote')
+def handle_vote(data):
+    """Process player votes and determine round outcome."""
+    game_id = data.get('game_id')
+    voter_id = data.get('voter_id')
+    vote_for = data.get('vote_for')
+    
+    if game_id in game_state.games:
+        game = game_state.games[game_id]
+        game['votes'][voter_id] = vote_for
+        
+        # Check if all players have voted
+        if len(game['votes']) == len(game['players']):
+            # Calculate results
+            votes_count = {}
+            for vote in game['votes'].values():
+                votes_count[vote] = votes_count.get(vote, 0) + 1
+            
+            most_voted = max(votes_count.items(), key=lambda x: x[1])[0]
+            
+            # Update scores
+            if most_voted == game['impostor']:
+                game['score']['player_wins'] += 1
+            else:
+                game['score']['impostor_wins'] += 1
+            
+            # Store round results
+            game['completed_rounds'].append({
+                'round_number': game['round_number'],
+                'impostor': game['impostor'],
+                'votes': game['votes'].copy(),
+                'most_voted': most_voted
+            })
+            
+            # Emit results
+            emit('round_result', {
+                'impostor': game['impostor'],
+                'most_voted': most_voted,
+                'votes': game['votes'],
+                'score': game['score']
+            }, broadcast=True, room=game_id)
+
+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)

requirements.txt

@@ -0,0 +1,37 @@
+# Web Framework and Server
+Flask==2.3.3
+Flask-SocketIO==5.3.6
+python-dotenv==1.0.0
+gunicorn==21.2.0
+eventlet==0.33.3
+Werkzeug==2.3.7
+
+# Real-time Communication
+websockets==11.0.3
+python-engineio==4.5.1
+python-socketio==5.8.0
+
+# API and Network Requests
+requests==2.31.0
+urllib3==2.0.4
+certifi==2023.7.22
+
+# Audio Processing
+pydub==0.25.1
+soundfile==0.12.1
+numpy==1.24.3
+
+# Error Handling and Logging
+python-json-logger==2.0.7
+
+# Security
+PyJWT==2.8.0
+
+# CORS support
+Flask-CORS==4.0.0
+
+# Time zone support
+pytz==2023.3
+
+# File handling
+python-magic==0.4.27

static/css/styles.css

@@ -0,0 +1,306 @@
+/* Base styling and CSS variables for consistent theming */
+:root {
+    /* Color palette */
+    --bg-primary: #0a0a0a;
+    --bg-secondary: #1a1a1a;
+    --text-primary: #ffffff;
+    --text-secondary: #cccccc;
+    --accent-red: #ff0000;
+    --accent-green: #00ff00;
+    
+    /* Animation timings */
+    --transition-speed: 0.3s;
+    
+    /* Spacing units */
+    --spacing-sm: 0.5rem;
+    --spacing-md: 1rem;
+    --spacing-lg: 2rem;
+}
+
+/* Global reset and base styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Pixelify Sans', sans-serif;
+    background-color: var(--bg-primary);
+    color: var(--text-primary);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+/* WebGL background container */
+#webgl-background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+}
+
+/* Main game container */
+#game-container {
+    position: relative;
+    z-index: 2;
+    min-height: 100vh;
+    padding: var(--spacing-lg);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Game pages styling */
+.game-page {
+    display: none;
+    width: 100%;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: var(--spacing-lg);
+}
+
+.game-page.active {
+    display: block;
+    animation: fadeIn 0.5s ease-in-out;
+}
+
+/* Landing page specific styles */
+#landing-page {
+    text-align: center;
+}
+
+.game-title {
+    font-size: 4rem;
+    margin-bottom: var(--spacing-lg);
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+}
+
+.title-emphasis {
+    color: var(--accent-red);
+}
+
+/* Button styles */
+.button {
+    background: transparent;
+    border: 2px solid var(--text-primary);
+    color: var(--text-primary);
+    padding: var(--spacing-md) var(--spacing-lg);
+    font-family: 'Pixelify Sans', sans-serif;
+    font-size: 1.2rem;
+    cursor: pointer;
+    transition: all var(--transition-speed) ease;
+}
+
+.button:hover {
+    background: var(--text-primary);
+    color: var(--bg-primary);
+}
+
+.button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+/* Player setup page styles */
+.player-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: var(--spacing-md);
+    margin-bottom: var(--spacing-lg);
+}
+
+.player-avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 2px solid var(--text-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+    margin: 0 auto;
+}
+
+/* Recording phase styles */
+.question-display {
+    text-align: center;
+    font-size: 1.5rem;
+    margin-bottom: var(--spacing-lg);
+    padding: var(--spacing-md);
+    background: var(--bg-secondary);
+    border-radius: 8px;
+}
+
+.timer {
+    position: absolute;
+    top: var(--spacing-md);
+    left: var(--spacing-md);
+    font-size: 2rem;
+    color: var(--accent-red);
+}
+
+.recording-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--spacing-md);
+}
+
+/* Listening phase styles */
+.audio-player {
+    width: 100%;
+    margin-bottom: var(--spacing-md);
+}
+
+.player-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-md);
+}
+
+/* Voting phase styles */
+.vote-options {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: var(--spacing-md);
+    margin-top: var(--spacing-lg);
+}
+
+.vote-button {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 2px solid var(--text-primary);
+    background: transparent;
+    color: var(--text-primary);
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: all var(--transition-speed) ease;
+}
+
+.vote-button:hover {
+    background: var(--text-primary);
+    color: var(--bg-primary);
+}
+
+/* Results page styles */
+.results-container {
+    text-align: center;
+}
+
+.result-message {
+    font-size: 2rem;
+    margin-bottom: var(--spacing-lg);
+}
+
+.impostor-reveal {
+    color: var(--accent-red);
+    font-size: 1.5rem;
+    margin-bottom: var(--spacing-lg);
+}
+
+/* Animation keyframes */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Settings icon */
+.settings-icon {
+    position: absolute;
+    top: var(--spacing-md);
+    right: var(--spacing-md);
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: transform var(--transition-speed) ease;
+}
+
+.settings-icon:hover {
+    transform: rotate(90deg);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .game-title {
+        font-size: 3rem;
+    }
+    
+    .player-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    
+    .player-avatar {
+        width: 80px;
+        height: 80px;
+        font-size: 1.5rem;
+    }
+    
+    .question-display {
+        font-size: 1.2rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .game-title {
+        font-size: 2rem;
+    }
+    
+    .player-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .button {
+        width: 100%;
+        margin-bottom: var(--spacing-sm);
+    }
+}
+
+/* Loading and transition states */
+.loading {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+.loading-spinner {
+    width: 50px;
+    height: 50px;
+    border: 4px solid var(--text-secondary);
+    border-top-color: var(--accent-red);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Error message styling */
+.error-message {
+    background: rgba(255, 0, 0, 0.2);
+    border: 1px solid var(--accent-red);
+    padding: var(--spacing-md);
+    margin: var(--spacing-md) 0;
+    border-radius: 4px;
+    text-align: center;
+}

static/js/audio.js

@@ -0,0 +1,302 @@
+class AudioManager {
+    constructor() {
+        // Core audio configuration
+        this.config = {
+            sampleRate: 44100,
+            channels: 1,
+            bitDepth: 16,
+            maxRecordingTime: 30000, // 30 seconds in milliseconds
+            minRecordingTime: 15000  // 15 seconds in milliseconds
+        };
+
+        // Recording state management
+        this.state = {
+            isRecording: false,
+            startTime: null,
+            recorder: null,
+            stream: null,
+            audioChunks: [],
+            audioContext: null,
+            analyser: null
+        };
+
+        // Audio visualization settings
+        this.visualizer = {
+            canvasContext: null,
+            dataArray: null,
+            bufferLength: null,
+            width: 0,
+            height: 0
+        };
+
+        // Initialize audio context with error handling
+        try {
+            this.state.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        } catch (error) {
+            console.error('AudioContext not supported in this browser');
+        }
+
+        // Bind methods to maintain context
+        this.startRecording = this.startRecording.bind(this);
+        this.stopRecording = this.stopRecording.bind(this);
+        this.processAudio = this.processAudio.bind(this);
+    }
+
+    /**
+     * Initialize audio visualization on a canvas element
+     * @param {HTMLCanvasElement} canvas - The canvas element for visualization
+     */
+    initializeVisualizer(canvas) {
+        if (!canvas) return;
+
+        this.visualizer.canvasContext = canvas.getContext('2d');
+        this.visualizer.width = canvas.width;
+        this.visualizer.height = canvas.height;
+
+        // Set up audio analyser for visualization
+        this.state.analyser = this.state.audioContext.createAnalyser();
+        this.state.analyser.fftSize = 2048;
+        this.visualizer.bufferLength = this.state.analyser.frequencyBinCount;
+        this.visualizer.dataArray = new Uint8Array(this.visualizer.bufferLength);
+    }
+
+    /**
+     * Start recording audio with visualization
+     * @returns {Promise<void>}
+     */
+    async startRecording() {
+        try {
+            // Request microphone access
+            this.state.stream = await navigator.mediaDevices.getUserMedia({
+                audio: {
+                    channelCount: this.config.channels,
+                    sampleRate: this.config.sampleRate
+                }
+            });
+
+            // Create and configure MediaRecorder
+            this.state.recorder = new MediaRecorder(this.state.stream, {
+                mimeType: 'audio/webm;codecs=opus'
+            });
+
+            // Set up recording event handlers
+            this.state.recorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    this.state.audioChunks.push(event.data);
+                }
+            };
+
+            // Connect audio nodes for visualization
+            const source = this.state.audioContext.createMediaStreamSource(this.state.stream);
+            source.connect(this.state.analyser);
+
+            // Start recording
+            this.state.recorder.start(100); // Collect data every 100ms
+            this.state.isRecording = true;
+            this.state.startTime = Date.now();
+
+            // Start visualization if canvas is set up
+            if (this.visualizer.canvasContext) {
+                this.drawVisualization();
+            }
+
+            // Set up automatic recording stop
+            setTimeout(() => {
+                if (this.state.isRecording) {
+                    this.stopRecording();
+                }
+            }, this.config.maxRecordingTime);
+
+        } catch (error) {
+            console.error('Error starting recording:', error);
+            throw new Error('Failed to start recording');
+        }
+    }
+
+    /**
+     * Stop recording and process the audio
+     * @returns {Promise<Blob>} The processed audio blob
+     */
+    async stopRecording() {
+        return new Promise((resolve, reject) => {
+            try {
+                const recordingDuration = Date.now() - this.state.startTime;
+
+                // Check if recording meets minimum duration
+                if (recordingDuration < this.config.minRecordingTime) {
+                    throw new Error('Recording too short');
+                }
+
+                this.state.recorder.onstop = async () => {
+                    try {
+                        const audioBlob = await this.processAudio();
+                        resolve(audioBlob);
+                    } catch (error) {
+                        reject(error);
+                    }
+                };
+
+                // Stop recording and clean up
+                this.state.recorder.stop();
+                this.state.stream.getTracks().forEach(track => track.stop());
+                this.state.isRecording = false;
+
+            } catch (error) {
+                reject(error);
+            }
+        });
+    }
+
+    /**
+     * Process recorded audio chunks into a single blob
+     * @returns {Promise<Blob>}
+     */
+    async processAudio() {
+        try {
+            // Combine audio chunks into a single blob
+            const audioBlob = new Blob(this.state.audioChunks, { type: 'audio/webm;codecs=opus' });
+            
+            // Convert to proper format for ElevenLabs API
+            const arrayBuffer = await audioBlob.arrayBuffer();
+            const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+            
+            // Create WAV format buffer
+            const wavBuffer = this.createWAVBuffer(audioBuffer);
+            
+            return new Blob([wavBuffer], { type: 'audio/wav' });
+        } catch (error) {
+            console.error('Error processing audio:', error);
+            throw new Error('Failed to process audio');
+        }
+    }
+
+    /**
+     * Create WAV buffer from audio buffer
+     * @param {AudioBuffer} audioBuffer 
+     * @returns {ArrayBuffer}
+     */
+    createWAVBuffer(audioBuffer) {
+        const numChannels = audioBuffer.numberOfChannels;
+        const length = audioBuffer.length * numChannels * 2;
+        const buffer = new ArrayBuffer(44 + length);
+        const view = new DataView(buffer);
+
+        // Write WAV header
+        this.writeWAVHeader(view, length, numChannels, audioBuffer.sampleRate);
+
+        // Write audio data
+        const channels = [];
+        for (let i = 0; i < numChannels; i++) {
+            channels.push(audioBuffer.getChannelData(i));
+        }
+
+        let offset = 44;
+        for (let i = 0; i < audioBuffer.length; i++) {
+            for (let channel = 0; channel < numChannels; channel++) {
+                const sample = Math.max(-1, Math.min(1, channels[channel][i]));
+                view.setInt16(offset, sample < 0 ? sample * 0x8000 : sample * 0x7FFF, true);
+                offset += 2;
+            }
+        }
+
+        return buffer;
+    }
+
+    /**
+     * Write WAV header to DataView
+     * @param {DataView} view 
+     * @param {number} length 
+     * @param {number} numChannels 
+     * @param {number} sampleRate 
+     */
+    writeWAVHeader(view, length, numChannels, sampleRate) {
+        // RIFF identifier
+        this.writeString(view, 0, 'RIFF');
+        // RIFF chunk length
+        view.setUint32(4, 36 + length, true);
+        // RIFF type
+        this.writeString(view, 8, 'WAVE');
+        // Format chunk identifier
+        this.writeString(view, 12, 'fmt ');
+        // Format chunk length
+        view.setUint32(16, 16, true);
+        // Sample format (raw)
+        view.setUint16(20, 1, true);
+        // Channel count
+        view.setUint16(22, numChannels, true);
+        // Sample rate
+        view.setUint32(24, sampleRate, true);
+        // Byte rate (sample rate * block align)
+        view.setUint32(28, sampleRate * numChannels * 2, true);
+        // Block align (channel count * bytes per sample)
+        view.setUint16(32, numChannels * 2, true);
+        // Bits per sample
+        view.setUint16(34, 16, true);
+        // Data chunk identifier
+        this.writeString(view, 36, 'data');
+        // Data chunk length
+        view.setUint32(40, length, true);
+    }
+
+    /**
+     * Write string to DataView
+     * @param {DataView} view 
+     * @param {number} offset 
+     * @param {string} string 
+     */
+    writeString(view, offset, string) {
+        for (let i = 0; i < string.length; i++) {
+            view.setUint8(offset + i, string.charCodeAt(i));
+        }
+    }
+
+    /**
+     * Draw audio visualization
+     */
+    drawVisualization() {
+        if (!this.state.isRecording || !this.visualizer.canvasContext) return;
+
+        requestAnimationFrame(() => this.drawVisualization());
+
+        // Get frequency data
+        this.state.analyser.getByteFrequencyData(this.visualizer.dataArray);
+
+        // Clear canvas
+        this.visualizer.canvasContext.fillStyle = 'rgb(10, 10, 10)';
+        this.visualizer.canvasContext.fillRect(0, 0, this.visualizer.width, this.visualizer.height);
+
+        // Draw frequency bars
+        const barWidth = (this.visualizer.width / this.visualizer.bufferLength) * 2.5;
+        let barHeight;
+        let x = 0;
+
+        for (let i = 0; i < this.visualizer.bufferLength; i++) {
+            barHeight = (this.visualizer.dataArray[i] / 255) * this.visualizer.height;
+
+            this.visualizer.canvasContext.fillStyle = `rgb(${barHeight + 100},50,50)`;
+            this.visualizer.canvasContext.fillRect(
+                x, 
+                this.visualizer.height - barHeight, 
+                barWidth, 
+                barHeight
+            );
+
+            x += barWidth + 1;
+        }
+    }
+
+    /**
+     * Clean up audio resources
+     */
+    cleanup() {
+        if (this.state.stream) {
+            this.state.stream.getTracks().forEach(track => track.stop());
+        }
+        this.state.audioChunks = [];
+        this.state.isRecording = false;
+    }
+}
+
+// Export the AudioManager class
+export default AudioManager;

static/js/background.js

@@ -0,0 +1,175 @@
+// Import Three.js library (already included in index.html)
+// const THREE = window.THREE;
+
+class Background {
+    constructor() {
+        // Initialize core Three.js components
+        this.scene = new THREE.Scene();
+        this.camera = new THREE.PerspectiveCamera(
+            75, // Field of view
+            window.innerWidth / window.innerHeight, // Aspect ratio
+            0.1, // Near plane
+            1000 // Far plane
+        );
+        
+        // Setup renderer with transparency and anti-aliasing
+        this.renderer = new THREE.WebGLRenderer({
+            canvas: document.querySelector('#webgl-background'),
+            alpha: true,
+            antialias: true
+        });
+        this.renderer.setSize(window.innerWidth, window.innerHeight);
+        this.renderer.setClearColor(0x0a0a0a, 1); // Dark background color
+
+        // Initialize particle system properties
+        this.particles = [];
+        this.particleCount = 100;
+        this.particleGeometry = new THREE.BufferGeometry();
+        this.particleMaterial = new THREE.PointsMaterial({
+            size: 2,
+            color: 0xffffff,
+            transparent: true,
+            opacity: 0.5,
+            blending: THREE.AdditiveBlending
+        });
+
+        // Set up camera position
+        this.camera.position.z = 100;
+
+        // Initialize the background
+        this.init();
+
+        // Bind event listeners
+        this.bindEvents();
+    }
+
+    init() {
+        // Create particle positions array
+        const positions = new Float32Array(this.particleCount * 3);
+        
+        // Generate random positions for particles
+        for (let i = 0; i < this.particleCount; i++) {
+            const i3 = i * 3; // Index for x, y, z coordinates
+            positions[i3] = (Math.random() - 0.5) * window.innerWidth;     // X coordinate
+            positions[i3 + 1] = (Math.random() - 0.5) * window.innerHeight; // Y coordinate
+            positions[i3 + 2] = (Math.random() - 0.5) * 500;               // Z coordinate
+            
+            // Store particle data for animation
+            this.particles.push({
+                velocity: (Math.random() - 0.5) * 0.2,
+                baseX: positions[i3],
+                baseY: positions[i3 + 1]
+            });
+        }
+
+        // Set particle positions in geometry
+        this.particleGeometry.setAttribute(
+            'position',
+            new THREE.BufferAttribute(positions, 3)
+        );
+
+        // Create particle system and add to scene
+        this.particleSystem = new THREE.Points(
+            this.particleGeometry,
+            this.particleMaterial
+        );
+        this.scene.add(this.particleSystem);
+
+        // Start animation loop
+        this.animate();
+    }
+
+    // Handle window resize events
+    bindEvents() {
+        window.addEventListener('resize', () => {
+            // Update camera aspect ratio and projection matrix
+            this.camera.aspect = window.innerWidth / window.innerHeight;
+            this.camera.updateProjectionMatrix();
+            
+            // Update renderer size
+            this.renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+    }
+
+    // Animation loop for particle movement
+    animate() {
+        requestAnimationFrame(() => this.animate());
+
+        const positions = this.particleGeometry.attributes.position.array;
+        const time = Date.now() * 0.0005;
+
+        // Update particle positions with wave-like motion
+        for (let i = 0; i < this.particleCount; i++) {
+            const i3 = i * 3;
+            const particle = this.particles[i];
+
+            // Create wave-like motion using sine waves
+            positions[i3] = particle.baseX + Math.sin(time + i) * 2;
+            positions[i3 + 1] = particle.baseY + Math.cos(time + i) * 2;
+            
+            // Add slight drift to z-position
+            positions[i3 + 2] += particle.velocity;
+
+            // Reset particles that drift too far
+            if (Math.abs(positions[i3 + 2]) > 250) {
+                positions[i3 + 2] = -250;
+            }
+        }
+
+        // Mark particle positions for update
+        this.particleGeometry.attributes.position.needsUpdate = true;
+
+        // Add subtle camera movement
+        this.camera.position.x = Math.sin(time) * 10;
+        this.camera.position.y = Math.cos(time) * 10;
+        this.camera.lookAt(this.scene.position);
+
+        // Render the scene
+        this.renderer.render(this.scene, this.camera);
+    }
+
+    // Method to add dramatic effects during game events
+    addDramaticEffect(type) {
+        switch(type) {
+            case 'impostor_reveal':
+                // Create a dramatic red flash effect
+                this.particleMaterial.color.setHex(0xff0000);
+                setTimeout(() => {
+                    this.particleMaterial.color.setHex(0xffffff);
+                }, 1000);
+                break;
+            
+            case 'round_start':
+                // Increase particle movement temporarily
+                const originalVelocities = this.particles.map(p => p.velocity);
+                this.particles.forEach(p => p.velocity *= 2);
+                setTimeout(() => {
+                    this.particles.forEach((p, i) => p.velocity = originalVelocities[i]);
+                }, 2000);
+                break;
+            
+            case 'voting':
+                // Create a pulsing effect
+                const pulseAnimation = () => {
+                    this.particleMaterial.size = 2 + Math.sin(Date.now() * 0.005) * 1;
+                };
+                const pulseInterval = setInterval(pulseAnimation, 16);
+                setTimeout(() => {
+                    clearInterval(pulseInterval);
+                    this.particleMaterial.size = 2;
+                }, 3000);
+                break;
+        }
+    }
+}
+
+// Initialize the background when the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    const background = new Background();
+
+    // Expose background instance for game events
+    window.gameBackground = background;
+});
+
+// Export the Background class for potential module usage
+export default Background;

static/js/game.js

@@ -0,0 +1,326 @@
+// 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;

static/js/ui.js

@@ -0,0 +1,322 @@
+class GameUI {
+    constructor() {
+        // Initialize UI state and configurations
+        this.state = {
+            currentPage: 'landing',
+            isAnimating: false,
+            darkMode: true,
+            animationDuration: 300
+        };
+
+        // Store references to frequently accessed DOM elements
+        this.elements = {
+            pages: {},
+            buttons: {},
+            containers: {},
+            overlays: {}
+        };
+
+        // Initialize the UI
+        this.initialize();
+    }
+
+    async initialize() {
+        // Wait for DOM to be fully loaded
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.setupUI());
+        } else {
+            this.setupUI();
+        }
+    }
+
+    setupUI() {
+        // Cache all important DOM elements
+        this.cacheElements();
+        // Set up event listeners
+        this.setupEventListeners();
+        // Initialize the landing page
+        this.showPage('landing');
+    }
+
+    cacheElements() {
+        // Cache all page elements
+        ['landing', 'setup', 'game', 'recording', 'listening', 'voting', 'results'].forEach(pageId => {
+            this.elements.pages[pageId] = document.getElementById(`${pageId}-page`);
+        });
+
+        // Cache all button elements
+        this.elements.buttons = {
+            play: document.getElementById('play-button'),
+            addPlayer: document.getElementById('add-player-button'),
+            start: document.getElementById('start-button'),
+            record: document.getElementById('record-button'),
+            settings: document.getElementById('settings-button')
+        };
+
+        // Cache container elements
+        this.elements.containers = {
+            playerList: document.getElementById('player-list'),
+            questionDisplay: document.getElementById('question-display'),
+            timerDisplay: document.getElementById('timer-display'),
+            recordingVisualizer: document.getElementById('recording-visualizer'),
+            votingOptions: document.getElementById('voting-options')
+        };
+
+        // Cache overlay elements
+        this.elements.overlays = {
+            loading: document.getElementById('loading-overlay'),
+            error: document.getElementById('error-overlay'),
+            settings: document.getElementById('settings-overlay')
+        };
+    }
+
+    setupEventListeners() {
+        // Set up button click handlers
+        Object.entries(this.elements.buttons).forEach(([key, button]) => {
+            if (button) {
+                button.addEventListener('click', () => this.handleButtonClick(key));
+            }
+        });
+
+        // Set up keyboard shortcuts
+        document.addEventListener('keydown', (e) => this.handleKeyPress(e));
+
+        // Set up settings toggle
+        if (this.elements.buttons.settings) {
+            this.elements.buttons.settings.addEventListener('click', () => this.toggleSettings());
+        }
+    }
+
+    handleButtonClick(buttonType) {
+        switch (buttonType) {
+            case 'play':
+                this.transitionToPage('setup');
+                break;
+            case 'addPlayer':
+                window.game.addPlayer();
+                break;
+            case 'start':
+                window.game.startGame();
+                break;
+            case 'record':
+                this.toggleRecording();
+                break;
+            default:
+                console.warn(`Unhandled button type: ${buttonType}`);
+        }
+    }
+
+    async transitionToPage(pageName) {
+        if (this.state.isAnimating || this.state.currentPage === pageName) return;
+
+        this.state.isAnimating = true;
+
+        // Fade out current page
+        const currentPage = this.elements.pages[this.state.currentPage];
+        if (currentPage) {
+            await this.animateElement(currentPage, 'fadeOut');
+            currentPage.classList.remove('active');
+        }
+
+        // Update state and fade in new page
+        this.state.currentPage = pageName;
+        const newPage = this.elements.pages[pageName];
+        if (newPage) {
+            newPage.classList.add('active');
+            await this.animateElement(newPage, 'fadeIn');
+        }
+
+        this.state.isAnimating = false;
+    }
+
+    async animateElement(element, animation) {
+        return new Promise(resolve => {
+            element.classList.add(animation);
+            setTimeout(() => {
+                element.classList.remove(animation);
+                resolve();
+            }, this.state.animationDuration);
+        });
+    }
+
+    updatePlayerList(players) {
+        if (!this.elements.containers.playerList) return;
+
+        const playerList = this.elements.containers.playerList;
+        playerList.innerHTML = '';
+
+        players.forEach(player => {
+            const playerElement = document.createElement('div');
+            playerElement.className = 'player-avatar';
+            
+            // Create avatar circle
+            const avatarCircle = document.createElement('div');
+            avatarCircle.className = 'avatar-circle';
+            avatarCircle.textContent = player.id;
+
+            // Create player name
+            const playerName = document.createElement('div');
+            playerName.className = 'player-name';
+            playerName.textContent = player.name;
+
+            playerElement.appendChild(avatarCircle);
+            playerElement.appendChild(playerName);
+            playerList.appendChild(playerElement);
+        });
+    }
+
+    updateTimer(timeLeft) {
+        if (!this.elements.containers.timerDisplay) return;
+
+        const minutes = Math.floor(timeLeft / 60);
+        const seconds = timeLeft % 60;
+        this.elements.containers.timerDisplay.textContent = 
+            `${minutes}:${seconds.toString().padStart(2, '0')}`;
+
+        // Add warning class when time is running low
+        if (timeLeft <= 10) {
+            this.elements.containers.timerDisplay.classList.add('warning');
+        }
+    }
+
+    showQuestion(question) {
+        if (!this.elements.containers.questionDisplay) return;
+
+        const questionElement = this.elements.containers.questionDisplay;
+        questionElement.textContent = question;
+        
+        // Animate question appearance
+        this.animateElement(questionElement, 'slideIn');
+    }
+
+    toggleRecording(isRecording) {
+        if (!this.elements.buttons.record) return;
+
+        const recordButton = this.elements.buttons.record;
+        recordButton.classList.toggle('recording', isRecording);
+        recordButton.textContent = isRecording ? 'Stop Recording' : 'Start Recording';
+    }
+
+    showLoadingOverlay(show, message = 'Loading...') {
+        if (!this.elements.overlays.loading) return;
+
+        const overlay = this.elements.overlays.loading;
+        if (show) {
+            overlay.querySelector('.loading-message').textContent = message;
+            overlay.classList.add('active');
+        } else {
+            overlay.classList.remove('active');
+        }
+    }
+
+    showError(message, duration = 3000) {
+        if (!this.elements.overlays.error) return;
+
+        const errorOverlay = this.elements.overlays.error;
+        const errorMessage = errorOverlay.querySelector('.error-message');
+        
+        errorMessage.textContent = message;
+        errorOverlay.classList.add('active');
+
+        setTimeout(() => {
+            errorOverlay.classList.remove('active');
+        }, duration);
+    }
+
+    updateVotingOptions(players, currentPlayer) {
+        if (!this.elements.containers.votingOptions) return;
+
+        const votingContainer = this.elements.containers.votingOptions;
+        votingContainer.innerHTML = '';
+
+        players.forEach(player => {
+            if (player.id !== currentPlayer) {
+                const voteButton = document.createElement('button');
+                voteButton.className = 'vote-button';
+                voteButton.dataset.playerId = player.id;
+                
+                const playerCircle = document.createElement('div');
+                playerCircle.className = 'player-circle';
+                playerCircle.textContent = player.id;
+                
+                voteButton.appendChild(playerCircle);
+                votingContainer.appendChild(voteButton);
+
+                voteButton.addEventListener('click', () => {
+                    window.game.submitVote(player.id);
+                });
+            }
+        });
+    }
+
+    showResults(results) {
+        const resultsPage = this.elements.pages.results;
+        if (!resultsPage) return;
+
+        // Clear previous results
+        resultsPage.innerHTML = '';
+
+        // Create results content
+        const content = document.createElement('div');
+        content.className = 'results-content';
+
+        // Add impostor reveal
+        const impostorReveal = document.createElement('div');
+        impostorReveal.className = 'impostor-reveal';
+        impostorReveal.textContent = `The impostor was Player ${results.impostor}!`;
+
+        // Add voting results
+        const votingResults = document.createElement('div');
+        votingResults.className = 'voting-results';
+        Object.entries(results.votes).forEach(([player, vote]) => {
+            const voteEntry = document.createElement('div');
+            voteEntry.className = 'vote-entry';
+            voteEntry.textContent = `Player ${player} voted for Player ${vote}`;
+            votingResults.appendChild(voteEntry);
+        });
+
+        content.appendChild(impostorReveal);
+        content.appendChild(votingResults);
+        resultsPage.appendChild(content);
+
+        this.transitionToPage('results');
+    }
+
+    handleKeyPress(event) {
+        // Add keyboard shortcuts
+        switch (event.key) {
+            case 'Escape':
+                this.closeAllOverlays();
+                break;
+            case 'r':
+                if (this.state.currentPage === 'recording') {
+                    this.toggleRecording();
+                }
+                break;
+        }
+    }
+
+    closeAllOverlays() {
+        Object.values(this.elements.overlays).forEach(overlay => {
+            if (overlay) {
+                overlay.classList.remove('active');
+            }
+        });
+    }
+
+    // Method to clean up UI resources
+    cleanup() {
+        // Remove event listeners
+        Object.values(this.elements.buttons).forEach(button => {
+            if (button) {
+                button.replaceWith(button.cloneNode(true));
+            }
+        });
+
+        // Clear all intervals and timeouts
+        this.closeAllOverlays();
+    }
+}
+
+// Export the GameUI class
+export default GameUI;

templates/index.html

@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="NOT ME - A voice deduction game powered by AI">
+    
+    <title>NOT ME - Voice Deduction Game</title>
+
+    <!-- Import the Pixelify Sans font for our game's unique style -->
+    <link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Main stylesheet -->
+    <link rel="stylesheet" href="static/css/styles.css">
+
+    <!-- Socket.IO client for real-time communication -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
+    
+    <!-- Three.js for background animations -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+</head>
+<body>
+    <!-- WebGL background container for particle effects -->
+    <canvas id="webgl-background"></canvas>
+
+    <!-- Settings button that appears after game starts -->
+    <button id="settings-button" class="settings-button hidden">
+        <span class="settings-icon">⚙️</span>
+    </button>
+
+    <!-- Main game container -->
+    <div id="game-container">
+        <!-- Landing Page -->
+        <div id="landing-page" class="game-page active">
+            <h1 class="game-title">
+                NOT <span class="title-emphasis">ME</span>
+            </h1>
+            <button id="play-button" class="button primary-button">PLAY</button>
+        </div>
+
+        <!-- Player Setup Page -->
+        <div id="setup-page" class="game-page">
+            <h2 class="page-title">Player Setup</h2>
+            <div id="player-list" class="player-grid"></div>
+            <div class="setup-controls">
+                <button id="add-player-button" class="button secondary-button">Add Player</button>
+                <button id="start-button" class="button primary-button" disabled>Start Game</button>
+            </div>
+        </div>
+
+        <!-- Game Page (Recording Phase) -->
+        <div id="recording-page" class="game-page">
+            <div id="timer-display" class="timer"></div>
+            <div id="question-display" class="question-box"></div>
+            
+            <!-- Recording interface -->
+            <div class="recording-controls">
+                <canvas id="recording-visualizer" class="visualizer"></canvas>
+                <button id="record-button" class="button record-button">Start Recording</button>
+                <div class="recording-time"></div>
+            </div>
+        </div>
+
+        <!-- Listening Phase -->
+        <div id="listening-page" class="game-page">
+            <div id="timer-display" class="timer"></div>
+            <h2 class="page-title">Listen to Responses</h2>
+            <div id="recordings-list" class="recordings-grid">
+                <!-- Recording playback buttons will be dynamically added here -->
+            </div>
+        </div>
+
+        <!-- Voting Phase -->
+        <div id="voting-page" class="game-page">
+            <div id="timer-display" class="timer"></div>
+            <h2 class="page-title">Vote for the Impostor</h2>
+            <div id="voting-options" class="voting-grid">
+                <!-- Voting buttons will be dynamically added here -->
+            </div>
+        </div>
+
+        <!-- Results Page -->
+        <div id="results-page" class="game-page">
+            <h2 class="page-title">Round Results</h2>
+            <div id="results-content" class="results-container">
+                <!-- Results will be dynamically added here -->
+            </div>
+            <button id="next-round-button" class="button primary-button">Next Round</button>
+        </div>
+    </div>
+
+    <!-- Overlay containers -->
+    <div id="loading-overlay" class="overlay">
+        <div class="loading-spinner"></div>
+        <div class="loading-message">Loading...</div>
+    </div>
+
+    <div id="error-overlay" class="overlay">
+        <div class="error-message"></div>
+    </div>
+
+    <div id="settings-overlay" class="overlay">
+        <div class="settings-panel">
+            <h3>Game Settings</h3>
+            <div class="settings-options">
+                <div class="setting-item">
+                    <label for="dark-mode">Dark Mode</label>
+                    <input type="checkbox" id="dark-mode" checked>
+                </div>
+                <div class="setting-item">
+                    <label for="sound-effects">Sound Effects</label>
+                    <input type="checkbox" id="sound-effects" checked>
+                </div>
+            </div>
+            <button id="exit-game" class="button secondary-button">Exit Game</button>
+        </div>
+    </div>
+
+    <!-- Game scripts -->
+    <script type="module" src="static/js/background.js"></script>
+    <script type="module" src="static/js/audio.js"></script>
+    <script type="module" src="static/js/ui.js"></script>
+    <script type="module" src="static/js/game.js"></script>
+
+    <!-- Audio context initialization script -->
+    <script>
+        // Initialize audio context on user interaction
+        document.addEventListener('click', function initAudioContext() {
+            if (!window.audioContext) {
+                window.audioContext = new (window.AudioContext || window.webkitAudioContext)();
+            }
+            document.removeEventListener('click', initAudioContext);
+        }, { once: true });
+    </script>
+</body>
+</html>