wownerogue/test/debug_game_updates.html

<!DOCTYPE html>
<html>
<head>
    <title>Game Update Debugging</title>
    <style>
        body { font-family: monospace; padding: 20px; background: #222; color: #0f0; }
        .log { margin: 5px 0; padding: 5px; background: #333; border-left: 3px solid #0f0; }
        .error { border-left-color: #f00; color: #f99; }
        .warning { border-left-color: #fa0; color: #ffa; }
        .success { border-left-color: #0a0; color: #afa; }
        #controls { margin-bottom: 20px; }
        button { padding: 10px; margin: 5px; background: #444; color: #0f0; border: 1px solid #0f0; cursor: pointer; }
        button:hover { background: #0f0; color: #000; }
    </style>
</head>
<body>
    <h1>Game Update Debugging</h1>
    
    <div id="controls">
        <button onclick="connectToServer()">Connect to Server</button>
        <button onclick="startGame()">Start Game</button>
        <button onclick="clearLogs()">Clear Logs</button>
        <button onclick="testMove()">Test Move</button>
    </div>
    
    <div id="status">Not connected</div>
    <div id="logs"></div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        let socket;
        let gameActive = false;
        
        function log(message, type = 'log') {
            const logDiv = document.createElement('div');
            logDiv.className = `log ${type}`;
            logDiv.innerHTML = `[${new Date().toLocaleTimeString()}] ${message}`;
            document.getElementById('logs').appendChild(logDiv);
            console.log(message);
            
            // Auto scroll to bottom
            logDiv.scrollIntoView();
        }
        
        function clearLogs() {
            document.getElementById('logs').innerHTML = '';
        }
        
        function connectToServer() {
            if (socket) {
                socket.disconnect();
            }
            
            socket = io();
            
            socket.on('connect', function() {
                log('✅ Connected to server', 'success');
                document.getElementById('status').innerHTML = '✅ Connected';
                
                // Register client
                socket.emit('register_client', {
                    clientId: socket.id,
                    userAgent: navigator.userAgent
                });
            });
            
            socket.on('disconnect', function() {
                log('❌ Disconnected from server', 'error');
                document.getElementById('status').innerHTML = '❌ Disconnected';
                gameActive = false;
            });
            
            socket.on('game_start', function(data) {
                log('🎮 GAME_START received', 'success');
                log(`📦 Game start data keys: ${Object.keys(data).join(', ')}`, 'log');
                
                if (data.lighting) {
                    const lightingTileCount = Object.keys(data.lighting).reduce((acc, yKey) => 
                        acc + Object.keys(data.lighting[yKey] || {}).length, 0);
                    log(`🔥 GAME_START lighting: ${Object.keys(data.lighting).length} rows, ${lightingTileCount} tiles`, 'success');
                } else {
                    log('⚠️ GAME_START: NO lighting data', 'warning');
                }
                
                if (data.torches) {
                    log(`🔦 GAME_START torches: ${data.torches.length} torches`, 'success');
                } else {
                    log('⚠️ GAME_START: NO torch data', 'warning');
                }
                
                gameActive = true;
                document.getElementById('status').innerHTML = '🎮 Game Active';
            });
            
            socket.on('game_update', function(data) {
                log('🔄 GAME_UPDATE received', 'log');
                log(`📦 Game update data keys: ${Object.keys(data).join(', ')}`, 'log');
                
                if (data.lighting) {
                    const lightingTileCount = Object.keys(data.lighting).reduce((acc, yKey) => 
                        acc + Object.keys(data.lighting[yKey] || {}).length, 0);
                    log(`🔥 GAME_UPDATE lighting: ${Object.keys(data.lighting).length} rows, ${lightingTileCount} tiles`, 'success');
                    
                    // Sample a few lighting values
                    let samples = [];
                    let count = 0;
                    for (const y in data.lighting) {
                        for (const x in data.lighting[y]) {
                            if (count < 3) {
                                samples.push(`(${x},${y}): ${data.lighting[y][x].toFixed(3)}`);
                                count++;
                            }
                        }
                    }
                    if (samples.length > 0) {
                        log(`💡 Sample lighting values: ${samples.join(', ')}`, 'log');
                    }
                } else {
                    log('⚠️ GAME_UPDATE: NO lighting data', 'warning');
                }
                
                if (data.torches) {
                    log(`🔦 GAME_UPDATE torches: ${data.torches.length} torches`, 'success');
                } else {
                    log('⚠️ GAME_UPDATE: NO torch data', 'warning');
                }
                
                if (data.player) {
                    log(`👤 Player position: (${data.player.x}, ${data.player.y})`, 'log');
                }
                
                if (data.visibleTiles) {
                    const visibleTileCount = Object.keys(data.visibleTiles).reduce((acc, yKey) => 
                        acc + Object.keys(data.visibleTiles[yKey] || {}).length, 0);
                    log(`👁️ Visible tiles: ${Object.keys(data.visibleTiles).length} rows, ${visibleTileCount} tiles`, 'log');
                }
            });
            
            socket.on('game_over', function(data) {
                log('🏁 GAME_OVER received', 'warning');
                gameActive = false;
                document.getElementById('status').innerHTML = '🏁 Game Over';
            });
            
            socket.on('message', function(msg) {
                log(`💬 Server message: ${msg}`, 'log');
            });
        }
        
        function startGame() {
            if (!socket) {
                log('❌ Not connected to server', 'error');
                return;
            }
            
            log('🚀 Requesting game start...', 'log');
            socket.emit('chat message', 'enter');
        }
        
        function testMove() {
            if (!socket || !gameActive) {
                log('❌ Game not active', 'error');
                return;
            }
            
            // Send a random move
            const moves = [
                { dx: 0, dy: 1 },
                { dx: 0, dy: -1 },
                { dx: 1, dy: 0 },
                { dx: -1, dy: 0 }
            ];
            const move = moves[Math.floor(Math.random() * moves.length)];
            
            log(`🎮 Sending move: dx=${move.dx}, dy=${move.dy}`, 'log');
            socket.emit('player_move', move);
        }
        
        // Auto-connect on page load
        window.addEventListener('load', function() {
            log('🔌 Page loaded, auto-connecting...', 'log');
            connectToServer();
        });
    </script>
</body>
</html>