Create js/game.js

static/js/game.js

@@ -0,0 +1,1670 @@
+// ========================================
+// Chess Arena - Main Game JavaScript
+// ========================================
+
+(function() {
+    'use strict';
+
+    // ========================================
+    // Configuration & Constants
+    // ========================================
+    const PIECES = {
+        'K': '♔', 'Q': '♕', 'R': '♖', 'B': '♗', 'N': '♘', 'P': '♙',
+        'k': '♚', 'q': '♛', 'r': '♜', 'b': '♝', 'n': '♞', 'p': '♟'
+    };
+
+    const FILES = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'];
+    const RANKS = ['8', '7', '6', '5', '4', '3', '2', '1'];
+
+    // ========================================
+    // Game State
+    // ========================================
+    let socket = null;
+    let chess = null;
+    let gameState = {
+        roomId: null,
+        playerColor: null,
+        username: null,
+        opponent: null,
+        timeControl: null,
+        isMyTurn: false,
+        gameStarted: false,
+        gameOver: false,
+        selectedSquare: null,
+        legalMoves: [],
+        lastMove: null,
+        isFlipped: false,
+        soundEnabled: true,
+        pendingPromotion: null
+    };
+
+    let timers = {
+        white: null,
+        black: null,
+        interval: null
+    };
+
+    let unreadMessages = 0;
+
+    // ========================================
+    // Chess.js Helper Functions (Version Compatible)
+    // ========================================
+    function chessInCheck() {
+        if (typeof chess.inCheck === 'function') {
+            return chess.inCheck();
+        } else if (typeof chess.in_check === 'function') {
+            return chess.in_check();
+        } else if (typeof chess.isCheck === 'function') {
+            return chess.isCheck();
+        }
+        // Manual check detection
+        return isKingInCheck();
+    }
+
+    function chessIsCheckmate() {
+        if (typeof chess.isCheckmate === 'function') {
+            return chess.isCheckmate();
+        } else if (typeof chess.in_checkmate === 'function') {
+            return chess.in_checkmate();
+        }
+        return false;
+    }
+
+    function chessIsDraw() {
+        if (typeof chess.isDraw === 'function') {
+            return chess.isDraw();
+        } else if (typeof chess.in_draw === 'function') {
+            return chess.in_draw();
+        }
+        return false;
+    }
+
+    function chessIsStalemate() {
+        if (typeof chess.isStalemate === 'function') {
+            return chess.isStalemate();
+        } else if (typeof chess.in_stalemate === 'function') {
+            return chess.in_stalemate();
+        }
+        return false;
+    }
+
+    function chessIsGameOver() {
+        if (typeof chess.isGameOver === 'function') {
+            return chess.isGameOver();
+        } else if (typeof chess.game_over === 'function') {
+            return chess.game_over();
+        }
+        return chessIsCheckmate() || chessIsDraw() || chessIsStalemate();
+    }
+
+    function chessTurn() {
+        if (typeof chess.turn === 'function') {
+            return chess.turn();
+        }
+        return chess.turn;
+    }
+
+    function chessFen() {
+        if (typeof chess.fen === 'function') {
+            return chess.fen();
+        }
+        return chess.fen;
+    }
+
+    function chessPgn() {
+        if (typeof chess.pgn === 'function') {
+            return chess.pgn();
+        }
+        return chess.pgn || '';
+    }
+
+    function chessHistory() {
+        if (typeof chess.history === 'function') {
+            return chess.history();
+        }
+        return chess.history || [];
+    }
+
+    function chessGet(square) {
+        if (typeof chess.get === 'function') {
+            return chess.get(square);
+        }
+        return null;
+    }
+
+    function chessMoves(options) {
+        if (typeof chess.moves === 'function') {
+            return chess.moves(options);
+        }
+        return [];
+    }
+
+    function chessMove(moveObj) {
+        if (typeof chess.move === 'function') {
+            try {
+                return chess.move(moveObj);
+            } catch (e) {
+                console.error('Move error:', e);
+                return null;
+            }
+        }
+        return null;
+    }
+
+    function isKingInCheck() {
+        // Manual check detection as fallback
+        const turn = chessTurn();
+        const kingSquare = findKingSquare(turn);
+        if (!kingSquare) return false;
+        
+        // Check if any opponent piece can capture the king
+        const opponentColor = turn === 'w' ? 'b' : 'w';
+        for (let file of FILES) {
+            for (let rank of RANKS) {
+                const square = file + rank;
+                const piece = chessGet(square);
+                if (piece && piece.color === opponentColor) {
+                    const moves = chessMoves({ square: square, verbose: true });
+                    for (let move of moves) {
+                        if (move.to === kingSquare) {
+                            return true;
+                        }
+                    }
+                }
+            }
+        }
+        return false;
+    }
+
+    // ========================================
+    // Audio
+    // ========================================
+    const sounds = {
+        move: null,
+        capture: null,
+        check: null,
+        castle: null,
+        promote: null,
+        gameStart: null,
+        gameEnd: null,
+        notify: null
+    };
+
+    function initSounds() {
+        const AudioContext = window.AudioContext || window.webkitAudioContext;
+        if (!AudioContext) return;
+
+        const audioCtx = new AudioContext();
+
+        function createSound(frequency, duration, type = 'sine') {
+            return function() {
+                if (!gameState.soundEnabled) return;
+                
+                try {
+                    const oscillator = audioCtx.createOscillator();
+                    const gainNode = audioCtx.createGain();
+                    
+                    oscillator.connect(gainNode);
+                    gainNode.connect(audioCtx.destination);
+                    
+                    oscillator.frequency.value = frequency;
+                    oscillator.type = type;
+                    
+                    gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
+                    gainNode.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration);
+                    
+                    oscillator.start(audioCtx.currentTime);
+                    oscillator.stop(audioCtx.currentTime + duration);
+                } catch (e) {
+                    console.log('Audio error:', e);
+                }
+            };
+        }
+
+        sounds.move = createSound(400, 0.1);
+        sounds.capture = createSound(300, 0.15);
+        sounds.check = createSound(600, 0.2);
+        sounds.castle = createSound(350, 0.15);
+        sounds.promote = createSound(800, 0.2);
+        sounds.gameStart = createSound(500, 0.3);
+        sounds.gameEnd = createSound(200, 0.5);
+        sounds.notify = createSound(700, 0.1);
+    }
+
+    // ========================================
+    // DOM Elements
+    // ========================================
+    const elements = {};
+
+    function cacheElements() {
+        elements.loadingScreen = document.getElementById('loading-screen');
+        elements.app = document.getElementById('app');
+        elements.lobbyScreen = document.getElementById('lobby-screen');
+        elements.waitingScreen = document.getElementById('waiting-screen');
+        elements.gameScreen = document.getElementById('game-screen');
+        
+        elements.usernameInput = document.getElementById('username-input');
+        elements.roomCodeInput = document.getElementById('room-code-input');
+        elements.createGameBtn = document.getElementById('create-game-btn');
+        elements.joinGameBtn = document.getElementById('join-game-btn');
+        elements.timeBtns = document.querySelectorAll('.time-btn');
+        elements.roomsList = document.getElementById('rooms-list');
+        elements.refreshRoomsBtn = document.getElementById('refresh-rooms');
+        
+        elements.displayRoomCode = document.getElementById('display-room-code');
+        elements.waitingTimeControl = document.getElementById('waiting-time-control');
+        elements.copyCodeBtn = document.getElementById('copy-code-btn');
+        elements.cancelWaitingBtn = document.getElementById('cancel-waiting');
+        
+        elements.chessboard = document.getElementById('chessboard');
+        elements.opponentName = document.getElementById('opponent-name');
+        elements.opponentColor = document.getElementById('opponent-color');
+        elements.opponentTime = document.getElementById('opponent-time');
+        elements.opponentTimer = document.getElementById('opponent-timer');
+        elements.playerName = document.getElementById('player-name');
+        elements.playerColor = document.getElementById('player-color');
+        elements.playerTime = document.getElementById('player-time');
+        elements.playerTimer = document.getElementById('player-timer');
+        elements.opponentCaptured = document.getElementById('opponent-captured');
+        elements.playerCaptured = document.getElementById('player-captured');
+        elements.moveHistory = document.getElementById('move-history');
+        
+        elements.resignBtn = document.getElementById('resign-btn');
+        elements.drawBtn = document.getElementById('draw-btn');
+        elements.flipBoardBtn = document.getElementById('flip-board-btn');
+        elements.chatToggleBtn = document.getElementById('chat-toggle-btn');
+        elements.chatBadge = document.getElementById('chat-badge');
+        elements.chatPanel = document.getElementById('chat-panel');
+        elements.chatMessages = document.getElementById('chat-messages');
+        elements.chatInput = document.getElementById('chat-input');
+        elements.sendChatBtn = document.getElementById('send-chat-btn');
+        
+        elements.themeToggle = document.getElementById('theme-toggle');
+        elements.themeDropdown = document.getElementById('theme-dropdown');
+        elements.soundToggle = document.getElementById('sound-toggle');
+        
+        elements.gameOverModal = document.getElementById('game-over-modal');
+        elements.gameOverIcon = document.getElementById('game-over-icon');
+        elements.gameOverTitle = document.getElementById('game-over-title');
+        elements.gameOverMessage = document.getElementById('game-over-message');
+        elements.playAgainBtn = document.getElementById('play-again-btn');
+        elements.backToLobbyBtn = document.getElementById('back-to-lobby-btn');
+        
+        elements.drawOfferModal = document.getElementById('draw-offer-modal');
+        elements.drawOfferMessage = document.getElementById('draw-offer-message');
+        elements.acceptDrawBtn = document.getElementById('accept-draw-btn');
+        elements.declineDrawBtn = document.getElementById('decline-draw-btn');
+        
+        elements.resignModal = document.getElementById('resign-modal');
+        elements.confirmResignBtn = document.getElementById('confirm-resign-btn');
+        elements.cancelResignBtn = document.getElementById('cancel-resign-btn');
+        
+        elements.promotionModal = document.getElementById('promotion-modal');
+        elements.promotionPieces = document.getElementById('promotion-pieces');
+        
+        elements.disconnectModal = document.getElementById('disconnect-modal');
+        elements.disconnectMessage = document.getElementById('disconnect-message');
+        elements.disconnectCountdown = document.getElementById('disconnect-countdown');
+        
+        elements.toastContainer = document.getElementById('toast-container');
+    }
+
+    // ========================================
+    // Utilities
+    // ========================================
+    function showToast(message, type = 'info') {
+        const toast = document.createElement('div');
+        toast.className = `toast ${type}`;
+        
+        const icons = {
+            success: 'fa-check-circle',
+            error: 'fa-exclamation-circle',
+            info: 'fa-info-circle',
+            warning: 'fa-exclamation-triangle'
+        };
+        
+        toast.innerHTML = `
+            <i class="fas ${icons[type]}"></i>
+            <span>${message}</span>
+        `;
+        
+        elements.toastContainer.appendChild(toast);
+        
+        setTimeout(() => {
+            if (toast.parentNode) {
+                toast.remove();
+            }
+        }, 3000);
+    }
+
+    function formatTime(seconds) {
+        if (seconds === null || seconds === undefined) return '--:--';
+        const mins = Math.floor(seconds / 60);
+        const secs = Math.floor(seconds % 60);
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    function showScreen(screenId) {
+        document.querySelectorAll('.screen').forEach(screen => {
+            screen.classList.add('hidden');
+        });
+        const screen = document.getElementById(screenId);
+        if (screen) {
+            screen.classList.remove('hidden');
+        }
+    }
+
+    function showModal(modalId) {
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.remove('hidden');
+        }
+    }
+
+    function hideModal(modalId) {
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.add('hidden');
+        }
+    }
+
+    function hideAllModals() {
+        document.querySelectorAll('.modal').forEach(modal => {
+            modal.classList.add('hidden');
+        });
+    }
+
+    function capitalizeFirst(str) {
+        if (!str) return '';
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // ========================================
+    // Theme Management
+    // ========================================
+    function initTheme() {
+        const savedTheme = localStorage.getItem('chess-theme') || 'dark';
+        setTheme(savedTheme);
+    }
+
+    function setTheme(themeName) {
+        document.body.className = '';
+        document.body.classList.add(`theme-${themeName}`);
+        localStorage.setItem('chess-theme', themeName);
+        
+        document.querySelectorAll('.theme-option').forEach(option => {
+            option.classList.remove('active');
+            if (option.dataset.theme === themeName) {
+                option.classList.add('active');
+            }
+        });
+    }
+
+    // ========================================
+    // Socket Connection
+    // ========================================
+    function initSocket() {
+        try {
+            socket = io({
+                transports: ['websocket', 'polling'],
+                upgrade: true,
+                reconnection: true,
+                reconnectionAttempts: 5,
+                reconnectionDelay: 1000
+            });
+
+            socket.on('connect', () => {
+                console.log('Connected to server');
+                showToast('Connected to server', 'success');
+            });
+
+            socket.on('disconnect', () => {
+                console.log('Disconnected from server');
+                showToast('Disconnected from server', 'error');
+            });
+
+            socket.on('connect_error', (error) => {
+                console.error('Connection error:', error);
+                showToast('Connection error', 'error');
+            });
+
+            socket.on('error', (data) => {
+                showToast(data.message || 'An error occurred', 'error');
+            });
+
+            socket.on('room_created', handleRoomCreated);
+            socket.on('room_joined', handleRoomJoined);
+            socket.on('game_restored', handleGameRestored);
+            socket.on('opponent_joined', handleOpponentJoined);
+            socket.on('opponent_reconnected', handleOpponentReconnected);
+            socket.on('game_start', handleGameStart);
+            socket.on('move_made', handleMoveMade);
+            socket.on('game_over', handleGameOver);
+            socket.on('opponent_disconnected', handleOpponentDisconnected);
+            socket.on('draw_offered', handleDrawOffered);
+            socket.on('draw_declined', handleDrawDeclined);
+            socket.on('chat_message', handleChatMessage);
+            socket.on('rooms_list', handleRoomsList);
+        } catch (e) {
+            console.error('Socket initialization error:', e);
+            showToast('Failed to connect to server', 'error');
+        }
+    }
+
+    // ========================================
+    // Socket Event Handlers
+    // ========================================
+    function handleRoomCreated(data) {
+        gameState.roomId = data.room_id;
+        gameState.playerColor = data.color;
+        gameState.timeControl = data.time_control;
+        
+        if (elements.displayRoomCode) {
+            elements.displayRoomCode.textContent = data.room_id;
+        }
+        if (elements.waitingTimeControl) {
+            elements.waitingTimeControl.textContent = data.time_control 
+                ? `${data.time_control} minutes` 
+                : 'No Limit';
+        }
+        
+        showScreen('waiting-screen');
+        showToast('Room created! Share the code with your friend.', 'success');
+    }
+
+    function handleRoomJoined(data) {
+        gameState.roomId = data.room_id;
+        gameState.playerColor = data.color;
+        gameState.timeControl = data.time_control;
+        gameState.opponent = data.opponent;
+        
+        showToast(`Joined room! Playing against ${data.opponent}`, 'success');
+    }
+
+    function handleGameRestored(data) {
+        gameState.roomId = data.room_id;
+        gameState.playerColor = data.color;
+        gameState.opponent = data.opponent;
+        
+        chess = new Chess(data.game_state.fen);
+        timers.white = data.white_time;
+        timers.black = data.black_time;
+        
+        initGameScreen();
+        renderBoard();
+        updateTimers();
+        
+        showToast('Game restored!', 'success');
+    }
+
+    function handleOpponentJoined(data) {
+        gameState.opponent = data.username;
+        showToast(`${data.username} joined the game!`, 'success');
+    }
+
+    function handleOpponentReconnected(data) {
+        hideModal('disconnect-modal');
+        gameState.opponent = data.username;
+        
+        chess = new Chess(data.game_state.fen);
+        timers.white = data.white_time;
+        timers.black = data.black_time;
+        
+        renderBoard();
+        updateTimers();
+        startTimer();
+        
+        showToast(`${data.username} reconnected!`, 'success');
+    }
+
+    function handleGameStart(data) {
+        console.log('Game starting:', data);
+        
+        gameState.gameStarted = true;
+        gameState.opponent = gameState.playerColor === 'white' ? data.black : data.white;
+        gameState.timeControl = data.time_control;
+        
+        // Initialize chess.js
+        if (data.game_state && data.game_state.fen) {
+            chess = new Chess(data.game_state.fen);
+        } else {
+            chess = new Chess();
+        }
+        
+        // Initialize timers
+        if (gameState.timeControl) {
+            timers.white = gameState.timeControl * 60;
+            timers.black = gameState.timeControl * 60;
+        }
+        
+        initGameScreen();
+        renderBoard();
+        updateTimers();
+        startTimer();
+        
+        if (sounds.gameStart) sounds.gameStart();
+        showToast('Game started! Good luck!', 'success');
+    }
+
+    function handleMoveMade(data) {
+        console.log('Move received:', data);
+        
+        // Update chess.js state
+        chess = new Chess(data.fen);
+        
+        // Store last move for highlighting
+        gameState.lastMove = data.move;
+        
+        // Update timers
+        if (gameState.timeControl) {
+            timers.white = data.white_time;
+            timers.black = data.black_time;
+        }
+        
+        // Clear selection
+        gameState.selectedSquare = null;
+        gameState.legalMoves = [];
+        
+        // Play appropriate sound
+        if (data.is_checkmate && sounds.gameEnd) {
+            sounds.gameEnd();
+        } else if (data.is_check && sounds.check) {
+            sounds.check();
+        } else if (data.move && data.move.includes('x') && sounds.capture) {
+            sounds.capture();
+        } else if (data.move && (data.move === 'O-O' || data.move === 'O-O-O') && sounds.castle) {
+            sounds.castle();
+        } else if (sounds.move) {
+            sounds.move();
+        }
+        
+        // Update display
+        renderBoard();
+        updateTimers();
+        updateMoveHistory();
+        updateCapturedPieces();
+        
+        // Check game end conditions
+        if (data.is_checkmate || data.is_draw || data.is_stalemate) {
+            handleGameEnd(data);
+        }
+    }
+
+    function handleGameOver(data) {
+        gameState.gameOver = true;
+        stopTimer();
+        
+        const isWinner = data.winner === gameState.username;
+        const isDraw = !data.winner;
+        
+        if (elements.gameOverIcon) {
+            elements.gameOverIcon.className = 'game-over-icon';
+            
+            if (isDraw) {
+                elements.gameOverIcon.classList.add('draw');
+                elements.gameOverIcon.innerHTML = '<i class="fas fa-handshake"></i>';
+            } else if (isWinner) {
+                elements.gameOverIcon.innerHTML = '<i class="fas fa-trophy"></i>';
+            } else {
+                elements.gameOverIcon.classList.add('loss');
+                elements.gameOverIcon.innerHTML = '<i class="fas fa-times"></i>';
+            }
+        }
+        
+        if (elements.gameOverTitle) {
+            if (isDraw) {
+                elements.gameOverTitle.textContent = 'Draw!';
+            } else if (isWinner) {
+                elements.gameOverTitle.textContent = 'Victory!';
+            } else {
+                elements.gameOverTitle.textContent = 'Defeat';
+            }
+        }
+        
+        if (elements.gameOverMessage) {
+            if (isDraw) {
+                elements.gameOverMessage.textContent = getDrawMessage(data.reason);
+            } else if (isWinner) {
+                elements.gameOverMessage.textContent = getWinMessage(data.reason);
+            } else {
+                elements.gameOverMessage.textContent = getLossMessage(data.reason, data);
+            }
+        }
+        
+        if (sounds.gameEnd) sounds.gameEnd();
+        showModal('game-over-modal');
+    }
+
+    function getDrawMessage(reason) {
+        switch (reason) {
+            case 'stalemate': return 'Stalemate - No legal moves available.';
+            case 'insufficient': return 'Insufficient material to checkmate.';
+            case 'threefold': return 'Threefold repetition.';
+            case 'fifty_moves': return 'Fifty-move rule.';
+            case 'draw_agreement': return 'Draw by agreement.';
+            case 'draw': return 'Draw by agreement.';
+            default: return 'The game ended in a draw.';
+        }
+    }
+
+    function getWinMessage(reason) {
+        switch (reason) {
+            case 'checkmate': return 'Checkmate! Excellent play!';
+            case 'resignation': return 'Your opponent resigned.';
+            case 'timeout': return 'Your opponent ran out of time.';
+            case 'abandonment': return 'Your opponent abandoned the game.';
+            default: return 'You won the game!';
+        }
+    }
+
+    function getLossMessage(reason, data) {
+        switch (reason) {
+            case 'checkmate': return 'Checkmate! Better luck next time.';
+            case 'resignation': return 'You resigned the game.';
+            case 'timeout': return 'You ran out of time.';
+            case 'abandonment': return 'Game forfeited due to disconnection.';
+            default: return 'You lost the game.';
+        }
+    }
+
+    function handleGameEnd(data) {
+        gameState.gameOver = true;
+        stopTimer();
+        
+        const turn = chessTurn();
+        
+        if (data.is_checkmate) {
+            const winner = turn === 'w' ? 'Black' : 'White';
+            const isWinner = (winner === 'White' && gameState.playerColor === 'white') ||
+                            (winner === 'Black' && gameState.playerColor === 'black');
+            
+            if (elements.gameOverIcon) {
+                elements.gameOverIcon.className = 'game-over-icon';
+                
+                if (isWinner) {
+                    elements.gameOverIcon.innerHTML = '<i class="fas fa-trophy"></i>';
+                } else {
+                    elements.gameOverIcon.classList.add('loss');
+                    elements.gameOverIcon.innerHTML = '<i class="fas fa-times"></i>';
+                }
+            }
+            
+            if (elements.gameOverTitle) {
+                elements.gameOverTitle.textContent = isWinner ? 'Victory!' : 'Defeat';
+            }
+            
+            if (elements.gameOverMessage) {
+                elements.gameOverMessage.textContent = isWinner 
+                    ? 'Checkmate! Excellent play!' 
+                    : 'Checkmate! Better luck next time.';
+            }
+        } else if (data.is_stalemate || data.is_draw) {
+            if (elements.gameOverIcon) {
+                elements.gameOverIcon.className = 'game-over-icon draw';
+                elements.gameOverIcon.innerHTML = '<i class="fas fa-handshake"></i>';
+            }
+            
+            if (elements.gameOverTitle) {
+                elements.gameOverTitle.textContent = 'Draw!';
+            }
+            
+            if (elements.gameOverMessage) {
+                elements.gameOverMessage.textContent = data.is_stalemate 
+                    ? 'Stalemate - No legal moves available.' 
+                    : 'The game ended in a draw.';
+            }
+        }
+        
+        showModal('game-over-modal');
+    }
+
+    function handleOpponentDisconnected(data) {
+        showModal('disconnect-modal');
+        
+        if (elements.disconnectMessage) {
+            elements.disconnectMessage.textContent = `${data.username} disconnected. Waiting for reconnection...`;
+        }
+        
+        let countdown = data.timeout;
+        stopTimer();
+        
+        const disconnectInterval = setInterval(() => {
+            countdown--;
+            if (elements.disconnectCountdown) {
+                elements.disconnectCountdown.textContent = formatTime(countdown);
+            }
+            
+            if (countdown <= 0) {
+                clearInterval(disconnectInterval);
+            }
+        }, 1000);
+        
+        gameState.disconnectInterval = disconnectInterval;
+    }
+
+    function handleDrawOffered(data) {
+        if (elements.drawOfferMessage) {
+            elements.drawOfferMessage.textContent = `${data.from} offers a draw`;
+        }
+        showModal('draw-offer-modal');
+        if (sounds.notify) sounds.notify();
+    }
+
+    function handleDrawDeclined(data) {
+        showToast(`${data.by} declined the draw offer`, 'info');
+    }
+
+    function handleChatMessage(data) {
+        addChatMessage(data.username, data.message, data.timestamp);
+        
+        if (data.username !== gameState.username) {
+            unreadMessages++;
+            updateChatBadge();
+            if (sounds.notify) sounds.notify();
+        }
+    }
+
+    function handleRoomsList(data) {
+        renderRoomsList(data.rooms);
+    }
+
+    // ========================================
+    // Game Screen Initialization
+    // ========================================
+    function initGameScreen() {
+        showScreen('game-screen');
+        
+        if (elements.playerName) {
+            elements.playerName.textContent = gameState.username || 'You';
+        }
+        if (elements.playerColor) {
+            elements.playerColor.textContent = capitalizeFirst(gameState.playerColor);
+        }
+        if (elements.opponentName) {
+            elements.opponentName.textContent = gameState.opponent || 'Opponent';
+        }
+        if (elements.opponentColor) {
+            elements.opponentColor.textContent = gameState.playerColor === 'white' ? 'Black' : 'White';
+        }
+        
+        // Hide timers if no time control
+        if (!gameState.timeControl) {
+            if (elements.playerTimer) elements.playerTimer.style.display = 'none';
+            if (elements.opponentTimer) elements.opponentTimer.style.display = 'none';
+        } else {
+            if (elements.playerTimer) elements.playerTimer.style.display = 'flex';
+            if (elements.opponentTimer) elements.opponentTimer.style.display = 'flex';
+        }
+        
+        // Flip board if playing black
+        if (gameState.playerColor === 'black') {
+            gameState.isFlipped = true;
+        }
+        
+        // Reset game state
+        gameState.gameOver = false;
+        gameState.selectedSquare = null;
+        gameState.legalMoves = [];
+        gameState.lastMove = null;
+        
+        // Clear move history
+        if (elements.moveHistory) {
+            elements.moveHistory.innerHTML = '';
+        }
+        
+        // Clear captured pieces
+        if (elements.opponentCaptured) elements.opponentCaptured.innerHTML = '';
+        if (elements.playerCaptured) elements.playerCaptured.innerHTML = '';
+        
+        // Clear chat
+        if (elements.chatMessages) elements.chatMessages.innerHTML = '';
+        unreadMessages = 0;
+        updateChatBadge();
+    }
+
+    // ========================================
+    // Board Rendering
+    // ========================================
+    function renderBoard() {
+        if (!elements.chessboard || !chess) {
+            console.error('Chessboard element or chess instance not found');
+            return;
+        }
+        
+        elements.chessboard.innerHTML = '';
+        
+        const files = gameState.isFlipped ? [...FILES].reverse() : FILES;
+        const ranks = gameState.isFlipped ? [...RANKS].reverse() : RANKS;
+        
+        ranks.forEach((rank, rankIdx) => {
+            files.forEach((file, fileIdx) => {
+                const square = file + rank;
+                const isLight = (rankIdx + fileIdx) % 2 === 0;
+                
+                const squareEl = document.createElement('div');
+                squareEl.className = `board-square ${isLight ? 'light' : 'dark'}`;
+                squareEl.dataset.square = square;
+                
+                // Add coordinates on edges
+                if (fileIdx === 7) {
+                    const rankLabel = document.createElement('span');
+                    rankLabel.className = 'coord-rank';
+                    rankLabel.textContent = rank;
+                    squareEl.appendChild(rankLabel);
+                }
+                if (rankIdx === 7) {
+                    const fileLabel = document.createElement('span');
+                    fileLabel.className = 'coord-file';
+                    fileLabel.textContent = file;
+                    squareEl.appendChild(fileLabel);
+                }
+                
+                // Add piece
+                const piece = chessGet(square);
+                if (piece) {
+                    const pieceEl = document.createElement('span');
+                    pieceEl.className = `piece piece-${piece.color === 'w' ? 'white' : 'black'}`;
+                    const pieceChar = piece.color === 'w' ? piece.type.toUpperCase() : piece.type;
+                    pieceEl.textContent = PIECES[pieceChar];
+                    squareEl.appendChild(pieceEl);
+                }
+                
+                // Highlight selected square
+                if (gameState.selectedSquare === square) {
+                    squareEl.classList.add('selected');
+                }
+                
+                // Highlight last move
+                if (gameState.lastMove) {
+                    const lastMoveFrom = typeof gameState.lastMove === 'object' 
+                        ? gameState.lastMove.from 
+                        : null;
+                    const lastMoveTo = typeof gameState.lastMove === 'object' 
+                        ? gameState.lastMove.to 
+                        : extractSquareFromSan(gameState.lastMove);
+                    
+                    if (square === lastMoveFrom || square === lastMoveTo) {
+                        squareEl.classList.add('last-move');
+                    }
+                }
+                
+                // Highlight legal moves
+                if (gameState.legalMoves.includes(square)) {
+                    const targetPiece = chessGet(square);
+                    if (targetPiece) {
+                        squareEl.classList.add('legal-capture');
+                    } else {
+                        squareEl.classList.add('legal-move');
+                    }
+                }
+                
+                // Add check indicator
+                if (chessInCheck()) {
+                    const turn = chessTurn();
+                    const kingSquare = findKingSquare(turn);
+                    if (square === kingSquare) {
+                        const checkRing = document.createElement('div');
+                        checkRing.className = 'check-ring';
+                        squareEl.appendChild(checkRing);
+                    }
+                }
+                
+                // Add click handler
+                squareEl.addEventListener('click', () => handleSquareClick(square));
+                
+                elements.chessboard.appendChild(squareEl);
+            });
+        });
+        
+        // Update turn indicator
+        updateTurnIndicator();
+    }
+
+    function extractSquareFromSan(san) {
+        if (!san || typeof san !== 'string') return null;
+        // Extract destination square from SAN notation
+        const match = san.match(/[a-h][1-8]/g);
+        if (match && match.length > 0) {
+            return match[match.length - 1];
+        }
+        return null;
+    }
+
+    function findKingSquare(color) {
+        for (let file of FILES) {
+            for (let rank of RANKS) {
+                const square = file + rank;
+                const piece = chessGet(square);
+                if (piece && piece.type === 'k' && piece.color === color) {
+                    return square;
+                }
+            }
+        }
+        return null;
+    }
+
+    function handleSquareClick(square) {
+        if (gameState.gameOver || !chess) return;
+        
+        const turn = chessTurn();
+        const myTurn = (turn === 'w' && gameState.playerColor === 'white') ||
+                       (turn === 'b' && gameState.playerColor === 'black');
+        
+        if (!myTurn) {
+            showToast("It's not your turn", 'warning');
+            return;
+        }
+        
+        const piece = chessGet(square);
+        
+        // If clicking on own piece, select it
+        if (piece && ((piece.color === 'w' && gameState.playerColor === 'white') ||
+                      (piece.color === 'b' && gameState.playerColor === 'black'))) {
+            selectSquare(square);
+            return;
+        }
+        
+        // If a piece is selected and clicking on a legal move, make the move
+        if (gameState.selectedSquare && gameState.legalMoves.includes(square)) {
+            attemptMove(gameState.selectedSquare, square);
+            return;
+        }
+        
+        // Clear selection
+        gameState.selectedSquare = null;
+        gameState.legalMoves = [];
+        renderBoard();
+    }
+
+    function selectSquare(square) {
+        gameState.selectedSquare = square;
+        
+        // Get legal moves for this piece
+        const moves = chessMoves({ square: square, verbose: true });
+        gameState.legalMoves = moves.map(m => m.to);
+        
+        renderBoard();
+    }
+
+    function attemptMove(from, to) {
+        const piece = chessGet(from);
+        
+        // Check for pawn promotion
+        if (piece && piece.type === 'p') {
+            const targetRank = to.charAt(1);
+            if ((piece.color === 'w' && targetRank === '8') ||
+                (piece.color === 'b' && targetRank === '1')) {
+                gameState.pendingPromotion = { from, to };
+                showPromotionModal(piece.color);
+                return;
+            }
+        }
+        
+        makeMove(from, to);
+    }
+
+    function makeMove(from, to, promotion = null) {
+        const moveObj = {
+            from: from,
+            to: to
+        };
+        
+        if (promotion) {
+            moveObj.promotion = promotion;
+        }
+        
+        const move = chessMove(moveObj);
+        
+        if (move) {
+            gameState.lastMove = { from, to };
+            gameState.selectedSquare = null;
+            gameState.legalMoves = [];
+            
+            // Send move to server
+            socket.emit('make_move', {
+                move: move.san,
+                fen: chessFen(),
+                pgn: chessPgn(),
+                turn: chessTurn(),
+                is_check: chessInCheck(),
+                is_checkmate: chessIsCheckmate(),
+                is_draw: chessIsDraw(),
+                is_stalemate: chessIsStalemate()
+            });
+            
+            // Play promotion sound
+            if (promotion && sounds.promote) {
+                sounds.promote();
+            }
+            
+            // Render immediately for responsiveness
+            renderBoard();
+        } else {
+            showToast('Invalid move', 'error');
+            gameState.selectedSquare = null;
+            gameState.legalMoves = [];
+            renderBoard();
+        }
+    }
+
+    function showPromotionModal(color) {
+        if (elements.promotionPieces) {
+            const pieces = elements.promotionPieces.querySelectorAll('.promotion-piece');
+            pieces.forEach(piece => {
+                const pieceType = piece.dataset.piece;
+                const pieceChar = color === 'w' ? pieceType.toUpperCase() : pieceType;
+                piece.textContent = PIECES[pieceChar];
+                piece.className = `promotion-piece piece-${color === 'w' ? 'white' : 'black'}`;
+            });
+        }
+        showModal('promotion-modal');
+    }
+
+    // ========================================
+    // Timer Management
+    // ========================================
+    function startTimer() {
+        if (!gameState.timeControl) return;
+        
+        stopTimer();
+        
+        timers.interval = setInterval(() => {
+            if (gameState.gameOver || !chess) {
+                stopTimer();
+                return;
+            }
+            
+            const currentTurn = chessTurn();
+            
+            if (currentTurn === 'w') {
+                timers.white = Math.max(0, (timers.white || 0) - 0.1);
+            } else {
+                timers.black = Math.max(0, (timers.black || 0) - 0.1);
+            }
+            
+            updateTimers();
+            
+            // Check for timeout
+            if (timers.white <= 0 || timers.black <= 0) {
+                stopTimer();
+            }
+        }, 100);
+    }
+
+    function stopTimer() {
+        if (timers.interval) {
+            clearInterval(timers.interval);
+            timers.interval = null;
+        }
+    }
+
+    function updateTimers() {
+        if (!gameState.timeControl) return;
+        
+        const playerIsWhite = gameState.playerColor === 'white';
+        const playerTime = playerIsWhite ? timers.white : timers.black;
+        const opponentTime = playerIsWhite ? timers.black : timers.white;
+        
+        if (elements.playerTime) {
+            elements.playerTime.textContent = formatTime(playerTime);
+        }
+        if (elements.opponentTime) {
+            elements.opponentTime.textContent = formatTime(opponentTime);
+        }
+        
+        // Add low time warning
+        if (elements.playerTimer) {
+            if (playerTime !== null && playerTime < 30) {
+                elements.playerTimer.classList.add('low-time');
+            } else {
+                elements.playerTimer.classList.remove('low-time');
+            }
+        }
+        
+        if (elements.opponentTimer) {
+            if (opponentTime !== null && opponentTime < 30) {
+                elements.opponentTimer.classList.add('low-time');
+            } else {
+                elements.opponentTimer.classList.remove('low-time');
+            }
+        }
+    }
+
+    function updateTurnIndicator() {
+        if (!chess) return;
+        
+        const currentTurn = chessTurn();
+        const isPlayerTurn = (currentTurn === 'w' && gameState.playerColor === 'white') ||
+                            (currentTurn === 'b' && gameState.playerColor === 'black');
+        
+        const playerInfo = document.querySelector('.player-self-info');
+        const opponentInfo = document.querySelector('.opponent-info');
+        
+        if (playerInfo && opponentInfo) {
+            if (isPlayerTurn) {
+                playerInfo.classList.add('active-turn');
+                opponentInfo.classList.remove('active-turn');
+            } else {
+                playerInfo.classList.remove('active-turn');
+                opponentInfo.classList.add('active-turn');
+            }
+        }
+    }
+
+    // ========================================
+    // Move History
+    // ========================================
+    function updateMoveHistory() {
+        if (!elements.moveHistory || !chess) return;
+        
+        const history = chessHistory();
+        elements.moveHistory.innerHTML = '';
+        
+        for (let i = 0; i < history.length; i += 2) {
+            const moveNum = Math.floor(i / 2) + 1;
+            const whiteMove = history[i] || '';
+            const blackMove = history[i + 1] || '';
+            
+            const row = document.createElement('div');
+            row.className = 'move-row';
+            row.innerHTML = `
+                <span class="move-number">${moveNum}.</span>
+                <span class="move-white">${whiteMove}</span>
+                <span class="move-black">${blackMove}</span>
+            `;
+            
+            elements.moveHistory.appendChild(row);
+        }
+        
+        // Scroll to bottom
+        elements.moveHistory.scrollTop = elements.moveHistory.scrollHeight;
+    }
+
+    // ========================================
+    // Captured Pieces
+    // ========================================
+    function updateCapturedPieces() {
+        if (!chess) return;
+        
+        const startingPieces = {
+            'w': { p: 8, n: 2, b: 2, r: 2, q: 1 },
+            'b': { p: 8, n: 2, b: 2, r: 2, q: 1 }
+        };
+        
+        const currentPieces = {
+            'w': { p: 0, n: 0, b: 0, r: 0, q: 0 },
+            'b': { p: 0, n: 0, b: 0, r: 0, q: 0 }
+        };
+        
+        // Count current pieces
+        for (let file of FILES) {
+            for (let rank of RANKS) {
+                const piece = chessGet(file + rank);
+                if (piece && piece.type !== 'k') {
+                    currentPieces[piece.color][piece.type]++;
+                }
+            }
+        }
+        
+        // Calculate captured pieces
+        const captured = {
+            'w': {},
+            'b': {}
+        };
+        
+        for (let color of ['w', 'b']) {
+            for (let type of ['q', 'r', 'b', 'n', 'p']) {
+                const diff = startingPieces[color][type] - currentPieces[color][type];
+                if (diff > 0) {
+                    captured[color][type] = diff;
+                }
+            }
+        }
+        
+        // Render captured pieces
+        const playerCapturedColor = gameState.playerColor === 'white' ? 'b' : 'w';
+        const opponentCapturedColor = gameState.playerColor === 'white' ? 'w' : 'b';
+        
+        if (elements.playerCaptured) {
+            elements.playerCaptured.innerHTML = renderCapturedPieces(captured[playerCapturedColor], playerCapturedColor);
+        }
+        if (elements.opponentCaptured) {
+            elements.opponentCaptured.innerHTML = renderCapturedPieces(captured[opponentCapturedColor], opponentCapturedColor);
+        }
+    }
+
+    function renderCapturedPieces(captured, color) {
+        let html = '';
+        for (let type of ['q', 'r', 'b', 'n', 'p']) {
+            if (captured[type]) {
+                const pieceChar = color === 'w' ? type.toUpperCase() : type;
+                for (let i = 0; i < captured[type]; i++) {
+                    html += `<span class="piece-${color === 'w' ? 'white' : 'black'}">${PIECES[pieceChar]}</span>`;
+                }
+            }
+        }
+        return html;
+    }
+
+    // ========================================
+    // Chat
+    // ========================================
+    function addChatMessage(username, message, timestamp) {
+        if (!elements.chatMessages) return;
+        
+        const time = timestamp ? new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+        
+        const messageEl = document.createElement('div');
+        messageEl.className = 'chat-message';
+        messageEl.innerHTML = `
+            <div class="sender">${escapeHtml(username)}</div>
+            <div class="text">${escapeHtml(message)}</div>
+            <div class="time">${time}</div>
+        `;
+        
+        elements.chatMessages.appendChild(messageEl);
+        elements.chatMessages.scrollTop = elements.chatMessages.scrollHeight;
+    }
+
+    function updateChatBadge() {
+        if (!elements.chatBadge) return;
+        
+        if (unreadMessages > 0) {
+            elements.chatBadge.textContent = unreadMessages > 9 ? '9+' : unreadMessages;
+            elements.chatBadge.classList.remove('hidden');
+        } else {
+            elements.chatBadge.classList.add('hidden');
+        }
+    }
+
+    function sendChatMessage() {
+        if (!elements.chatInput) return;
+        
+        const message = elements.chatInput.value.trim();
+        if (message && socket) {
+            socket.emit('chat_message', { message: message });
+            elements.chatInput.value = '';
+        }
+    }
+
+    // ========================================
+    // Rooms List
+    // ========================================
+    function renderRoomsList(rooms) {
+        if (!elements.roomsList) return;
+        
+        if (!rooms || rooms.length === 0) {
+            elements.roomsList.innerHTML = '<p class="no-rooms">No rooms available. Create one!</p>';
+            return;
+        }
+        
+        elements.roomsList.innerHTML = rooms.map(room => `
+            <div class="room-item" data-room-id="${room.room_id}">
+                <div class="room-info">
+                    <div class="room-host">${escapeHtml(room.host)}'s Room</div>
+                    <div class="room-time">${room.time_control ? room.time_control + ' min' : 'No Limit'}</div>
+                </div>
+                <button class="btn btn-secondary join-room-btn" data-room-id="${room.room_id}">
+                    Join
+                </button>
+            </div>
+        `).join('');
+        
+        // Add click handlers
+        elements.roomsList.querySelectorAll('.join-room-btn').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const roomId = btn.dataset.roomId;
+                joinRoom(roomId);
+            });
+        });
+    }
+
+    function joinRoom(roomId) {
+        const username = elements.usernameInput ? elements.usernameInput.value.trim() : 'Anonymous';
+        gameState.username = username || 'Anonymous';
+        
+        if (socket) {
+            socket.emit('join_room', {
+                username: gameState.username,
+                room_id: roomId
+            });
+        }
+    }
+
+    // ========================================
+    // Reset Game
+    // ========================================
+    function resetGame() {
+        gameState.roomId = null;
+        gameState.playerColor = null;
+        gameState.opponent = null;
+        gameState.timeControl = null;
+        gameState.isMyTurn = false;
+        gameState.gameStarted = false;
+        gameState.gameOver = false;
+        gameState.selectedSquare = null;
+        gameState.legalMoves = [];
+        gameState.lastMove = null;
+        gameState.isFlipped = false;
+        gameState.pendingPromotion = null;
+        
+        stopTimer();
+        timers.white = null;
+        timers.black = null;
+        
+        if (gameState.disconnectInterval) {
+            clearInterval(gameState.disconnectInterval);
+        }
+        
+        chess = null;
+    }
+
+    // ========================================
+    // Event Listeners
+    // ========================================
+    function initEventListeners() {
+        // Time control buttons
+        if (elements.timeBtns) {
+            elements.timeBtns.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    elements.timeBtns.forEach(b => b.classList.remove('active'));
+                    btn.classList.add('active');
+                });
+            });
+        }
+        
+        // Create game
+        if (elements.createGameBtn) {
+            elements.createGameBtn.addEventListener('click', () => {
+                const username = elements.usernameInput ? elements.usernameInput.value.trim() : '';
+                const activeTimeBtn = document.querySelector('.time-btn.active');
+                const timeControl = activeTimeBtn && activeTimeBtn.dataset.time !== 'null' 
+                    ? parseInt(activeTimeBtn.dataset.time) 
+                    : null;
+                
+                gameState.username = username || 'Anonymous';
+                
+                if (socket) {
+                    socket.emit('create_room', {
+                        username: gameState.username,
+                        time_control: timeControl
+                    });
+                }
+            });
+        }
+        
+        // Join game
+        if (elements.joinGameBtn) {
+            elements.joinGameBtn.addEventListener('click', () => {
+                const roomCode = elements.roomCodeInput ? elements.roomCodeInput.value.trim().toUpperCase() : '';
+                if (!roomCode) {
+                    showToast('Please enter a room code', 'warning');
+                    return;
+                }
+                joinRoom(roomCode);
+            });
+        }
+        
+        // Refresh rooms
+        if (elements.refreshRoomsBtn) {
+            elements.refreshRoomsBtn.addEventListener('click', () => {
+                if (socket) {
+                    socket.emit('get_rooms');
+                }
+            });
+        }
+        
+        // Copy room code
+        if (elements.copyCodeBtn) {
+            elements.copyCodeBtn.addEventListener('click', () => {
+                if (gameState.roomId) {
+                    navigator.clipboard.writeText(gameState.roomId).then(() => {
+                        showToast('Room code copied!', 'success');
+                    }).catch(() => {
+                        showToast('Failed to copy', 'error');
+                    });
+                }
+            });
+        }
+        
+        // Cancel waiting
+        if (elements.cancelWaitingBtn) {
+            elements.cancelWaitingBtn.addEventListener('click', () => {
+                showScreen('lobby-screen');
+                if (socket) {
+                    socket.emit('leave_room');
+                }
+                resetGame();
+            });
+        }
+        
+        // Resign button
+        if (elements.resignBtn) {
+            elements.resignBtn.addEventListener('click', () => {
+                if (!gameState.gameOver) {
+                    showModal('resign-modal');
+                }
+            });
+        }
+        
+        // Confirm resign
+        if (elements.confirmResignBtn) {
+            elements.confirmResignBtn.addEventListener('click', () => {
+                hideModal('resign-modal');
+                if (socket) {
+                    socket.emit('resign');
+                }
+            });
+        }
+        
+        // Cancel resign
+        if (elements.cancelResignBtn) {
+            elements.cancelResignBtn.addEventListener('click', () => {
+                hideModal('resign-modal');
+            });
+        }
+        
+        // Draw button
+        if (elements.drawBtn) {
+            elements.drawBtn.addEventListener('click', () => {
+                if (!gameState.gameOver && socket) {
+                    socket.emit('offer_draw');
+                    showToast('Draw offer sent', 'info');
+                }
+            });
+        }
+        
+        // Accept draw
+        if (elements.acceptDrawBtn) {
+            elements.acceptDrawBtn.addEventListener('click', () => {
+                hideModal('draw-offer-modal');
+                if (socket) {
+                    socket.emit('accept_draw');
+                }
+            });
+        }
+        
+        // Decline draw
+        if (elements.declineDrawBtn) {
+            elements.declineDrawBtn.addEventListener('click', () => {
+                hideModal('draw-offer-modal');
+                if (socket) {
+                    socket.emit('decline_draw');
+                }
+            });
+        }
+        
+        // Flip board
+        if (elements.flipBoardBtn) {
+            elements.flipBoardBtn.addEventListener('click', () => {
+                gameState.isFlipped = !gameState.isFlipped;
+                renderBoard();
+            });
+        }
+        
+        // Chat toggle
+        if (elements.chatToggleBtn && elements.chatPanel) {
+            elements.chatToggleBtn.addEventListener('click', () => {
+                elements.chatPanel.classList.toggle('hidden');
+                if (!elements.chatPanel.classList.contains('hidden')) {
+                    unreadMessages = 0;
+                    updateChatBadge();
+                }
+            });
+        }
+        
+        // Send chat
+        if (elements.sendChatBtn) {
+            elements.sendChatBtn.addEventListener('click', sendChatMessage);
+        }
+        if (elements.chatInput) {
+            elements.chatInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    sendChatMessage();
+                }
+            });
+        }
+        
+        // Theme toggle
+        if (elements.themeToggle && elements.themeDropdown) {
+            elements.themeToggle.addEventListener('click', (e) => {
+                e.stopPropagation();
+                elements.themeDropdown.classList.toggle('hidden');
+            });
+        }
+        
+        // Theme selection
+        document.querySelectorAll('.theme-option').forEach(option => {
+            option.addEventListener('click', () => {
+                setTheme(option.dataset.theme);
+                if (elements.themeDropdown) {
+                    elements.themeDropdown.classList.add('hidden');
+                }
+            });
+        });
+        
+        // Close dropdown when clicking outside
+        document.addEventListener('click', (e) => {
+            if (elements.themeToggle && elements.themeDropdown) {
+                if (!elements.themeToggle.contains(e.target) && !elements.themeDropdown.contains(e.target)) {
+                    elements.themeDropdown.classList.add('hidden');
+                }
+            }
+        });
+        
+        // Sound toggle
+        if (elements.soundToggle) {
+            elements.soundToggle.addEventListener('click', () => {
+                gameState.soundEnabled = !gameState.soundEnabled;
+                elements.soundToggle.innerHTML = gameState.soundEnabled 
+                    ? '<i class="fas fa-volume-up"></i>' 
+                    : '<i class="fas fa-volume-mute"></i>';
+                showToast(gameState.soundEnabled ? 'Sound enabled' : 'Sound disabled', 'info');
+            });
+        }
+        
+        // Promotion pieces
+        if (elements.promotionPieces) {
+            elements.promotionPieces.querySelectorAll('.promotion-piece').forEach(piece => {
+                piece.addEventListener('click', () => {
+                    const promotionPiece = piece.dataset.piece;
+                    hideModal('promotion-modal');
+                    
+                    if (gameState.pendingPromotion) {
+                        makeMove(gameState.pendingPromotion.from, gameState.pendingPromotion.to, promotionPiece);
+                        gameState.pendingPromotion = null;
+                    }
+                });
+            });
+        }
+        
+        // Play again
+        if (elements.playAgainBtn) {
+            elements.playAgainBtn.addEventListener('click', () => {
+                hideModal('game-over-modal');
+                resetGame();
+                showScreen('lobby-screen');
+            });
+        }
+        
+        // Back to lobby
+        if (elements.backToLobbyBtn) {
+            elements.backToLobbyBtn.addEventListener('click', () => {
+                hideModal('game-over-modal');
+                resetGame();
+                showScreen('lobby-screen');
+            });
+        }
+        
+        // Enter key for room code
+        if (elements.roomCodeInput) {
+            elements.roomCodeInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter' && elements.joinGameBtn) {
+                    elements.joinGameBtn.click();
+                }
+            });
+        }
+        
+        // Enter key for username
+        if (elements.usernameInput) {
+            elements.usernameInput.addEventListener('keypress', (e) => {
+                if (e.key === 'Enter' && elements.createGameBtn) {
+                    elements.createGameBtn.click();
+                }
+            });
+        }
+    }
+
+    // ========================================
+    // Initialization
+    // ========================================
+    function init() {
+        console.log('Initializing Chess Arena...');
+        
+        // Cache DOM elements
+        cacheElements();
+        
+        // Initialize theme
+        initTheme();
+        
+        // Initialize sounds
+        initSounds();
+        
+        // Initialize socket
+        initSocket();
+        
+        // Initialize event listeners
+        initEventListeners();
+        
+        // Request initial rooms list
+        setTimeout(() => {
+            if (socket) {
+                socket.emit('get_rooms');
+            }
+        }, 500);
+        
+        // Hide loading screen
+        setTimeout(() => {
+            if (elements.loadingScreen) {
+                elements.loadingScreen.classList.add('hidden');
+            }
+            if (elements.app) {
+                elements.app.classList.remove('hidden');
+            }
+            console.log('Chess Arena initialized successfully');
+        }, 1500);
+    }
+
+    // Start the app when DOM is ready
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', init);
+    } else {
+        init();
+    }
+})();