lighting works!

2026-10-20 07:38:34 +02:00 · 2025-05-26 13:45:46 -04:00
parent eb2bdaa825
commit f550ee069d
16 changed files with 1643 additions and 231 deletions
@@ -47,12 +47,14 @@ var Game = {
        return navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
    },

-    startGame: function(playerData, mapData, monsterData, itemData, initialVisibleTiles) {
+    startGame: function(playerData, mapData, monsterData, itemData, initialVisibleTiles, lightingData, torchData) {
        if (!this._ensureDisplay()) {
            console.error("Game: Cannot start game, display not ready.");
            return false;
        }
        console.log("Game: startGame called. PlayerData:", playerData, "MapData:", mapData, "InitialVisibleTiles:", initialVisibleTiles);
+        console.log("🔥 LIGHTING DATA received in startGame:", lightingData);
+        console.log("🔦 TORCH DATA received in startGame:", torchData);

        DisplayManager.clearDisplay();
        
@@ -92,6 +94,16 @@ var Game = {
            GameState._exit = null;
            GameState._treasure = null;

+            // Initialize lighting and torch data
+            if (lightingData) {
+                GameState._lighting = lightingData;
+                console.log("🔥 GameState: Lighting data stored with", Object.keys(lightingData).length, "rows");
+            }
+            if (torchData) {
+                GameState._torches = torchData;
+                console.log("🔦 GameState: Torch data stored with", torchData.length, "torches");
+            }
+
            // Initialize map and validate player position
            GameState.initializeMap(mapData, initialVisibleTiles, this._screenWidth, this._screenHeight);
            
@@ -155,6 +167,15 @@ var Game = {
    _drawGameScreen: function() {
        if (!this._ensureDisplay()) return;
        const gameState = GameState.getGameStateForRender();
+        
+        // Debug: Verify lighting data is included in render state
+        console.log("🎨 _drawGameScreen() passing lighting data:", {
+            hasLighting: !!gameState.lighting,
+            lightingKeys: gameState.lighting ? Object.keys(gameState.lighting).length : 0,
+            hasTorches: !!gameState.torches,
+            torchCount: gameState.torches ? gameState.torches.length : 0
+        });
+        
        RenderEngine.drawGameScreen(gameState);
    },

@@ -13,6 +13,8 @@ var GameState = {
    _message: null,
    _scheduler: null,
    _engine: null,
+    _lighting: {},
+    _torches: [],

    init: function() {
        this.reset();
@@ -30,6 +32,8 @@ var GameState = {
        this._exit = null;
        this._treasure = null;
        this._message = null;
+        this._lighting = {};
+        this._torches = [];
        
        if (this._scheduler) this._scheduler.clear();
        if (!this._scheduler) this._scheduler = new ROT.Scheduler.Simple();
@@ -249,6 +253,21 @@ var GameState = {
                needsRedraw = true;
            }

+            // Update lighting and torch data
+            if (data.lighting !== undefined) {
+                console.log("🔥 BEFORE UPDATE: this._lighting has", this._lighting ? Object.keys(this._lighting).length : 0, "rows");
+                console.log("🔥 NEW DATA: data.lighting has", Object.keys(data.lighting).length, "rows");
+                console.log("🔥 LIGHTING DATA SAMPLE:", JSON.stringify(data.lighting).substring(0, 200));
+                this._lighting = data.lighting;
+                console.log("🔥 AFTER UPDATE: this._lighting has", this._lighting ? Object.keys(this._lighting).length : 0, "rows");
+                needsRedraw = true;
+            }
+            if (data.torches !== undefined) {
+                this._torches = data.torches;
+                needsRedraw = true;
+                console.log("🔦 GameState: Updated torch data with", data.torches.length, "torches");
+            }
+
            // Update visible tiles (most critical for movement feedback)
            if (data.visibleTiles && typeof data.visibleTiles === 'object' && Object.keys(data.visibleTiles).length > 0) {
                console.log("Visible tiles updated. Number of rows:", Object.keys(data.visibleTiles).length);
@@ -305,20 +324,6 @@ var GameState = {
        }
    },

-    getGameStateForRender: function() {
-        return {
-            player: this._player,
-            monster: this._monster,
-            items: this._items,
-            entrance: this._entrance,
-            exit: this._exit,
-            treasure: this._treasure,
-            visibleTiles: this._visibleTiles,
-            exploredTiles: this._exploredTiles,
-            message: this._message
-        };
-    },
-
    // Debug functions
    debugPrintMap: function(screenWidth, screenHeight) {
        console.log("Current game map:");
@@ -338,7 +343,7 @@ var GameState = {
    debugTileMapping: function() {
        const testValues = [0, 1, undefined, null];
        for (const val of testValues) {
-            const char = (val === 1) ? '#' : "'";
+            const char = (val === 1) ? '#' : "\'";
            const debugMsg = `Test mapping: value=${val} -> char='${char}'`;
            console.log(debugMsg);
            if (window.GameDebug) window.GameDebug.updateDebugDisplay(debugMsg);
@@ -376,75 +381,18 @@ var GameState = {
        console.log("Visible tiles:", Object.keys(this._visibleTiles).length);
    },

-    // Update game state with new data from server
-    updateGameState: function(data) {
-        let needsRedraw = false;
-
-        if (data.player && (data.player.x !== this._player.x || data.player.y !== this._player.y)) {
-            this._player = data.player;
-            needsRedraw = true;
-        }
-
-        if (data.monster) {
-            this._monster = data.monster;
-            needsRedraw = true;
-        }
-
-        if (data.items) {
-            this._items = data.items;
-            needsRedraw = true;
-        }
-
-        if (data.map) {
-            this._map = data.map;
-            needsRedraw = true;
-        }
-
-        // Handle visibleTiles from server (this is the FOV data)
-        if (data.visibleTiles) {
-            this._visibleTiles = data.visibleTiles;
-            
-            // Update explored tiles with newly visible areas
-            for (const yKey in this._visibleTiles) {
-                const y = parseInt(yKey);
-                if (!this._exploredTiles[y]) this._exploredTiles[y] = {};
-                for (const xKey in this._visibleTiles[y]) {
-                    const x = parseInt(xKey);
-                    this._exploredTiles[y][x] = this._visibleTiles[y][x];
-                }
-            }
-            
-            // console.log("Updated visibleTiles from server, visible tile count:", 
-            //     Object.keys(this._visibleTiles).reduce((count, y) => count + Object.keys(this._visibleTiles[y]).length, 0));
-            needsRedraw = true;
-        }
-
-        if (data.entrance) {
-            this._entrance = data.entrance;
-            needsRedraw = true;
-        }
-
-        if (data.exit) {
-            this._exit = data.exit;
-            needsRedraw = true;
-        }
-
-        if (data.treasure !== undefined) {
-            this._treasure = data.treasure;
-            needsRedraw = true;
-        }
-
-        if (data.message) {
-            this._message = data.message;
-            needsRedraw = true;
-        }
-
-        return needsRedraw;
-    },
-
    // Get game state data for rendering
    getGameStateForRender: function() {
-        return {
+        // Debug: Log the actual lighting data being returned
+        console.log("🔍 getGameStateForRender() lighting check:", {
+            lightingExists: !!this._lighting,
+            lightingKeys: this._lighting ? Object.keys(this._lighting).length : 0,
+            lightingRef: this._lighting,
+            torchExists: !!this._torches,
+            torchCount: this._torches ? this._torches.length : 0
+        });
+        
+        const renderState = {
            map: this._map,
            player: this._player,
            monster: this._monster,
@@ -455,8 +403,13 @@ var GameState = {
            visibleTiles: this._visibleTiles,
            exploredTiles: this._exploredTiles,
            message: this._message,
-            gameActive: this._gameActive
+            gameActive: this._gameActive,
+            lighting: this._lighting,
+            torches: this._torches
        };
+        
+        console.log("🔍 getGameStateForRender() RETURNING lighting with", renderState.lighting ? Object.keys(renderState.lighting).length : 0, "keys");
+        return renderState;
    },

    // Move player and update game state
@@ -485,9 +438,6 @@ var GameState = {
        this._player.x = newX;
        this._player.y = newY;

-        // Recompute field of view
-        this.computeFieldOfView();
-
        // console.log("Player moved to:", this._player.x, this._player.y);
        return true;
    }
@@ -19,6 +19,7 @@ var options = {
    height: 19, // 19 tiles * 32px/tile = 608px
    tileWidth: 32, // Width of a single tile in pixels
    tileHeight: 32, // Height of a single tile in pixels
+    tileColorize: true, // Enable colorization for tile stacks
    tileSet: tileSet,
    
    // GAME CONFIGURATION - Change these to select different assets
@@ -27,6 +27,7 @@ var RenderEngine = {
        const torches = gameState.torches || []; // New torch positions
        const visibleTiles = gameState.visibleTiles || {};
        const exploredTiles = gameState.exploredTiles || {};
+        const lighting = gameState.lighting || {}; // Lighting data from server
        const message = gameState.message;
        
        // Get configured tile types from options
@@ -56,6 +57,12 @@ var RenderEngine = {
                let baseFg = this.defaultFg;
                let tileType;

+                // Debug log for a specific tile if needed - replace with actual test coordinates
+                // const wx_test = 10, wy_test = 10; // Example coordinates
+                // if (wx === wx_test && wy === wy_test) {
+                //     console.log(`RenderEngine DEBUG: Tile (${wx},${wy}) raw lighting data: ${lighting[wy] ? lighting[wy][wx] : 'N/A'}`);
+                // }
+
                // Render base terrain
                if (this.isVisible(wx, wy, visibleTiles)) {
                    tileType = visibleTiles[wy][wx];
@@ -106,11 +113,28 @@ var RenderEngine = {
                if (baseChar && baseChar !== ' ') {
                    charStack.push(baseChar);
                    
-                    // Use black transparent overlay for explored tiles, normal colors for currently visible tiles
-                    if (this.isVisible(wx, wy, visibleTiles)) {
-                        fgStack.push("transparent"); // Currently visible - use normal tile colors
+                    // Get lighting information for this tile
+                    const lightingAlpha = (lighting[wy] && lighting[wy][wx]) ? lighting[wy][wx] : 0.0;
+                    
+                    // Apply lighting shadows for terrain
+                    const isCurrentlyVisible = this.isVisible(wx, wy, visibleTiles);
+
+                    // Added log to inspect lightingAlpha for visible, lit tiles
+                    if (isCurrentlyVisible && lightingAlpha > 0.01) { // Using 0.01 to catch small, non-zero alphas
+                        console.log(`RenderEngine TRACE: Tile (${wx},${wy}), Visible: ${isCurrentlyVisible}, lightingAlpha: ${lightingAlpha.toFixed(3)}, from: ${lighting[wy] ? lighting[wy][wx].toFixed(3) : 'N/A'}`);
+                    }
+
+                    if (isCurrentlyVisible) {
+                        if (lightingAlpha > 0) {
+                            // Apply torch shadow using foreground overlay
+                            fgStack.push(`rgba(0, 0, 0, ${Math.min(lightingAlpha, 0.8)})`);
+                        } else {
+                            // Normal tile with no shadow
+                            fgStack.push("transparent");
+                        }
                    } else {
-                        fgStack.push("rgba(0, 0, 0, 0.6)"); // Explored but not visible - use dark transparent overlay
+                        // Explored but not currently visible - apply darker shadow
+                        fgStack.push(`rgba(0, 0, 0, 0.7)`);
                    }
                    
                    bgStack.push("transparent"); // Always transparent background for terrain
@@ -123,7 +147,13 @@ var RenderEngine = {
                            const currentItem = items[itemKey];
                            if (currentItem && currentItem.x === wx && currentItem.y === wy && this.isVisible(wx, wy, visibleTiles)) {
                                charStack.push('$');
-                                fgStack.push("transparent"); // Use transparent for now
+                                // Apply torch lighting to items
+                                const lightingAlpha = (lighting[wy] && lighting[wy][wx]) ? lighting[wy][wx] : 0.0;
+                                if (lightingAlpha > 0) {
+                                    fgStack.push(`rgba(0, 0, 0, ${Math.min(lightingAlpha, 0.8)})`);
+                                } else {
+                                    fgStack.push("transparent");
+                                }
                                bgStack.push("transparent");
                            }
                        }
@@ -133,42 +163,68 @@ var RenderEngine = {
                // Render entrance
                if (entrance && entrance[0] === wx && entrance[1] === wy && this.isVisible(wx, wy, visibleTiles)) {
                    charStack.push('<');
-                    fgStack.push("transparent"); // Use transparent for now
+                    // Apply torch lighting to entrance
+                    const lightingAlpha = (lighting[wy] && lighting[wy][wx]) ? lighting[wy][wx] : 0.0;
+                    if (lightingAlpha > 0) {
+                        fgStack.push(`rgba(0, 0, 0, ${Math.min(lightingAlpha, 0.8)})`);
+                    } else {
+                        fgStack.push("transparent");
+                    }
                    bgStack.push("transparent");
                }
                
                // Render exit
                if (exit && exit[0] === wx && exit[1] === wy && this.isVisible(wx, wy, visibleTiles)) {
                    charStack.push('>');
-                    fgStack.push("transparent"); // Use transparent for now
+                    // Apply torch lighting to exit
+                    const lightingAlpha = (lighting[wy] && lighting[wy][wx]) ? lighting[wy][wx] : 0.0;
+                    if (lightingAlpha > 0) {
+                        fgStack.push(`rgba(0, 0, 0, ${Math.min(lightingAlpha, 0.8)})`);
+                    } else {
+                        fgStack.push("transparent");
+                    }
                    bgStack.push("transparent");
                }
                
                // Render treasure
                if (treasure && treasure[0] === wx && treasure[1] === wy && this.isVisible(wx, wy, visibleTiles)) {
                    charStack.push(treasureTile);
-                    fgStack.push("transparent"); // Use transparent for now
+                    // Apply torch lighting to treasure
+                    const lightingAlpha = (lighting[wy] && lighting[wy][wx]) ? lighting[wy][wx] : 0.0;
+                    if (lightingAlpha > 0) {
+                        fgStack.push(`rgba(0, 0, 0, ${Math.min(lightingAlpha, 0.8)})`);
+                    } else {
+                        fgStack.push("transparent");
+                    }
                    bgStack.push("transparent");
                }
                
                // Render torches (check if this tile has a torch)
                if (this.isVisible(wx, wy, visibleTiles) && visibleTiles[wy][wx] === 'torch') {
                    charStack.push(torchTile);
-                    fgStack.push("transparent"); // Use transparent for now
+                    // Don't apply shadows to torches since they're light sources
+                    fgStack.push("transparent");
                    bgStack.push("transparent");
                }
                
                // Render monster
                if (monster && monster.x === wx && monster.y === wy && this.isVisible(wx, wy, visibleTiles)) {
                    charStack.push(monsterTile); 
-                    fgStack.push("transparent"); // Use transparent for now
+                    // Apply torch lighting to monster
+                    const lightingAlpha = (lighting[wy] && lighting[wy][wx]) ? lighting[wy][wx] : 0.0;
+                    if (lightingAlpha > 0) {
+                        fgStack.push(`rgba(0, 0, 0, ${Math.min(lightingAlpha, 0.8)})`);
+                    } else {
+                        fgStack.push("transparent");
+                    }
                    bgStack.push("transparent");
                }
                
                // Render player (always on top)
                if (wx === playerWX && wy === playerWY) {
                    charStack.push(playerTile); 
-                    fgStack.push("transparent"); // Use transparent for now
+                    // Don't apply shadows to player - keep them clearly visible
+                    fgStack.push("transparent");
                    bgStack.push("transparent");
                }
                
@@ -104,6 +104,8 @@ const SocketHandlers = {
        console.log("  - Monster:", data?.monster);
        console.log("  - Items:", data?.items);
        console.log("  - VisibleTiles keys:", data?.visibleTiles ? Object.keys(data.visibleTiles).length : "NO VISIBLE TILES");
+        console.log("  - Lighting keys:", data?.lighting ? Object.keys(data.lighting).length : "NO LIGHTING");
+        console.log("  - Torches:", data?.torches ? data.torches.length : "NO TORCHES (expected - lighting calculated server-side)");
        
        $('#messages').append($('<li class="game-start">').text("Starting game..."));
        
@@ -118,8 +120,8 @@ const SocketHandlers = {
        }
        
        try {
-            // Use the original game.js structure
-            var success = Game.startGame(data.player, data.map, data.monster, data.items, data.visibleTiles);
+            // Pass all game data including lighting and torches
+            var success = Game.startGame(data.player, data.map, data.monster, data.items, data.visibleTiles, data.lighting, data.torches);
            console.log("Game start result:", success ? "SUCCESS" : "FAILED");
            
            if (!success) {
@@ -143,6 +145,22 @@ const SocketHandlers = {

    onGameUpdate: function(data) {
        // Debug log to see what data we're receiving
+        console.log("🎮 GAME UPDATE received with keys:", Object.keys(data));
+        
+        // Debug lighting data specifically
+        if (data.lighting && Object.keys(data.lighting).length > 0) {
+            console.log("🔥 GAME UPDATE: lighting data received with", Object.keys(data.lighting).length, "rows");
+        } else {
+            console.log("⚠️ GAME UPDATE: NO lighting data in update");
+        }
+        
+        // Debug torch data specifically  
+        if (data.torches && data.torches.length > 0) {
+            console.log("🔦 GAME UPDATE: torch data received with", data.torches.length, "torches");
+        } else {
+            console.log("ℹ️ GAME UPDATE: No torch data (expected - lighting calculated server-side)");
+        }
+        
        if (data.visibleTiles) {
            const debugMsg = "🔍 SOCKET: Received game update with visibleTiles";
            console.log(debugMsg);