lighting works!

2026-10-19 07:08:33 +02:00 · 2025-05-26 13:45:46 -04:00
parent eb2bdaa825
commit f550ee069d
16 changed files with 1643 additions and 231 deletions
@@ -0,0 +1,174 @@
+<!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>