Fix fog of war on zoom and map movement

.app_version

@@ -1 +1 @@
-0.30.7
+0.30.8

CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+# [0.30.8] - 2025-08-01
+
+## Fixed
+
+- Fog of war is now working correctly on zoom and map movement. #1603
+
+
+
 # [0.30.7] - 2025-08-01
 
 ## Fixed

app/javascript/controllers/maps_controller.js

@@ -754,11 +754,17 @@ export default class extends BaseController {
   }
 
   updateFog(markers, clearFogRadius, fogLineThreshold) {
-    const fog = document.getElementById('fog');
+    // Call the fog overlay's updateFog method if it exists
-    if (!fog) {
+    if (this.fogOverlay && typeof this.fogOverlay.updateFog === 'function') {
-      initializeFogCanvas(this.map);
+      this.fogOverlay.updateFog(markers, clearFogRadius, fogLineThreshold);
+    } else {
+      // Fallback for when fog overlay isn't available
+      const fog = document.getElementById('fog');
+      if (!fog) {
+        initializeFogCanvas(this.map);
+      }
+      requestAnimationFrame(() => drawFogCanvas(this.map, markers, clearFogRadius, fogLineThreshold));
     }
-    requestAnimationFrame(() => drawFogCanvas(this.map, markers, clearFogRadius, fogLineThreshold));
   }
 
   initializeDrawControl() {

app/javascript/maps/fog_of_war.js

@@ -33,7 +33,12 @@ export function drawFogCanvas(map, markers, clearFogRadius, fogLineThreshold) {
 
   const size = map.getSize();
 
-  // 1) Paint base fog
+  // Update canvas size if needed
+  if (fog.width !== size.x || fog.height !== size.y) {
+    fog.width = size.x;
+    fog.height = size.y;
+  }
+// 1) Paint base fog
   ctx.clearRect(0, 0, size.x, size.y);
   ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
   ctx.fillRect(0, 0, size.x, size.y);
@@ -106,23 +111,17 @@ export function createFogOverlay() {
   return L.Layer.extend({
     onAdd: function(map) {
       this._map = map;
+      
+      // Initialize storage for fog parameters
+      this._markers = [];
+      this._clearFogRadius = 50;
+      this._fogLineThreshold = 90;
 
       // Initialize the fog canvas
       initializeFogCanvas(map);
 
-      // Get the map controller to access markers and settings
+      // Fog overlay will be initialized via updateFog() call from maps controller
-      const mapElement = document.getElementById('map');
+      // No need to try to access controller data here
-      if (mapElement && mapElement._stimulus_controllers) {
-        const controller = mapElement._stimulus_controllers.find(c => c.identifier === 'maps');
-        if (controller) {
-          this._controller = controller;
-
-          // Draw initial fog if we have markers
-          if (controller.markers && controller.markers.length > 0) {
-            drawFogCanvas(map, controller.markers, controller.clearFogRadius, controller.fogLineThreshold);
-          }
-        }
-      }
 
       // Add resize event handlers to update fog size
       this._onResize = () => {
@@ -139,7 +138,31 @@ export function createFogOverlay() {
         }
       };
 
+      // Add event handlers for zoom and pan to update fog position
+      this._onMoveEnd = () => {
+        console.log('Fog: moveend event fired');
+        if (this._markers && this._markers.length > 0) {
+          console.log('Fog: redrawing after move with stored data');
+          drawFogCanvas(map, this._markers, this._clearFogRadius, this._fogLineThreshold);
+        } else {
+          console.log('Fog: no stored markers available');
+        }
+      };
+
+      this._onZoomEnd = () => {
+        console.log('Fog: zoomend event fired');
+        if (this._markers && this._markers.length > 0) {
+          console.log('Fog: redrawing after zoom with stored data');
+          drawFogCanvas(map, this._markers, this._clearFogRadius, this._fogLineThreshold);
+        } else {
+          console.log('Fog: no stored markers available');
+        }
+      };
+
+      // Bind event listeners
       map.on('resize', this._onResize);
+      map.on('moveend', this._onMoveEnd);
+      map.on('zoomend', this._onZoomEnd);
     },
 
     onRemove: function(map) {
@@ -148,16 +171,28 @@ export function createFogOverlay() {
         fog.remove();
       }
 
-      // Clean up event listener
+      // Clean up event listeners
       if (this._onResize) {
         map.off('resize', this._onResize);
       }
+      if (this._onMoveEnd) {
+        map.off('moveend', this._onMoveEnd);
+      }
+      if (this._onZoomEnd) {
+        map.off('zoomend', this._onZoomEnd);
+      }
     },
 
     // Method to update fog when markers change
     updateFog: function(markers, clearFogRadius, fogLineThreshold) {
       if (this._map) {
-        drawFogCanvas(this._map, markers, clearFogRadius, fogLineThreshold);
+        // Store the updated parameters
+        this._markers = markers || [];
+        this._clearFogRadius = clearFogRadius || 50;
+        this._fogLineThreshold = fogLineThreshold || 90;
+        
+        console.log('Fog: updateFog called with', markers?.length || 0, 'markers');
+        drawFogCanvas(this._map, this._markers, this._clearFogRadius, this._fogLineThreshold);
       }
     }
   });