wownerogue/test/debug_lighting.html

<!DOCTYPE html>
<html>
<head>
    <title>Lighting Debug - Wowngeon</title>
    <style>
        body { 
            font-family: monospace; 
            background: #222; 
            color: #fff; 
            padding: 20px;
        }
        .debug-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #444;
            background: #333;
        }
        .alpha-test {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 5px;
            text-align: center;
            line-height: 50px;
            border: 1px solid #666;
        }
        #game-container {
            margin: 20px 0;
            border: 2px solid #666;
        }
        .log-output {
            background: #111;
            padding: 10px;
            max-height: 300px;
            overflow-y: auto;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>Lighting System Debug</h1>
    
    <div class="debug-section">
        <h2>Alpha Value Tests</h2>
        <p>Testing different alpha values to see how they render:</p>
        <div id="alpha-tests"></div>
    </div>
    
    <div class="debug-section">
        <h2>Game Display</h2>
        <div id="game-container"></div>
        <button onclick="startNewGame()">Start New Game</button>
        <button onclick="captureCurrentLighting()">Capture Lighting Data</button>
    </div>
    
    <div class="debug-section">
        <h2>Live Lighting Data</h2>
        <div id="lighting-data">No data captured yet</div>
    </div>
    
    <div class="debug-section">
        <h2>Console Log</h2>
        <div id="log-output" class="log-output"></div>
    </div>

    <!-- Include game files -->
    <script src="html/js/jquery-3.4.1.min.js"></script>
    <script src="html/js/rot.min.js"></script>
    <script src="html/js/options.js"></script>
    <script src="html/js/displayManager.js"></script>
    <script src="html/js/screenManager.js"></script>
    <script src="html/js/gameState.js"></script>
    <script src="html/js/renderEngine.js"></script>
    <script src="html/js/game.js"></script>
    <script src="html/js/socketHandlers.js"></script>
    <script src="/socket.io/socket.io.js"></script>

    <script>
        // Override console.log to capture output
        const originalLog = console.log;
        console.log = function(...args) {
            originalLog.apply(console, args);
            const logOutput = document.getElementById('log-output');
            if (logOutput) {
                logOutput.innerHTML += args.join(' ') + '<br>';
                logOutput.scrollTop = logOutput.scrollHeight;
            }
        };

        // Test different alpha values
        function createAlphaTests() {
            const container = document.getElementById('alpha-tests');
            const alphas = [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0];
            
            alphas.forEach(alpha => {
                const div = document.createElement('div');
                div.className = 'alpha-test';
                div.style.background = 'white';
                div.style.color = `rgba(0, 0, 0, ${alpha})`;
                div.textContent = alpha.toFixed(1);
                div.title = `Alpha: ${alpha}`;
                container.appendChild(div);
            });
        }

        // Start a new game and capture data
        function startNewGame() {
            console.log('🎮 Starting new game for debug...');
            if (window.Game) {
                Game.init();
            }
        }

        // Capture current lighting data from game state
        function captureCurrentLighting() {
            console.log('🔍 Capturing current lighting data...');
            
            if (window.GameState) {
                const gameState = GameState.getGameStateForRender();
                const lighting = gameState.lighting || {};
                const torches = gameState.torches || [];
                
                let html = '<h3>Current Lighting State</h3>';
                html += `<p><strong>Torches:</strong> ${torches.length} positions</p>`;
                
                const lightingTileCount = Object.keys(lighting).reduce((acc, yKey) => 
                    acc + Object.keys(lighting[yKey] || {}).length, 0);
                html += `<p><strong>Lighting Tiles:</strong> ${lightingTileCount} tiles</p>`;
                
                if (lightingTileCount > 0) {
                    html += '<h4>Sample Lighting Values:</h4><ul>';
                    let samples = 0;
                    for (const y in lighting) {
                        for (const x in lighting[y]) {
                            if (samples >= 10) break;
                            const alpha = lighting[y][x];
                            html += `<li>(${x},${y}): ${alpha.toFixed(3)}</li>`;
                            samples++;
                        }
                        if (samples >= 10) break;
                    }
                    html += '</ul>';
                }
                
                document.getElementById('lighting-data').innerHTML = html;
            } else {
                document.getElementById('lighting-data').innerHTML = '<p>GameState not available</p>';
            }
        }

        // Initialize when page loads
        document.addEventListener('DOMContentLoaded', function() {
            createAlphaTests();
            
            // Initialize display manager
            if (window.DisplayManager) {
                DisplayManager.init('game-container');
            }
            
            console.log('🔧 Debug page initialized');
        });

        // Monitor game state changes
        setInterval(() => {
            if (window.GameState && window.GameState._lighting) {
                const lightingKeys = Object.keys(window.GameState._lighting);
                if (lightingKeys.length > 0) {
                    console.log(`💡 Current lighting state: ${lightingKeys.length} Y-coordinates with data`);
                }
            }
        }, 5000);
    </script>
</body>
</html>