From 01fd9f6e35ff098ff4c3c12937f28e2a4f717034 Mon Sep 17 00:00:00 2001
From: Christian Nikel <git@chnikel.de>
Date: Tue, 11 Feb 2025 00:12:01 +0000
Subject: [PATCH] Fix fog gets displaced when dragging map

Also recalculates the size of the fog when resizing the browser window.

Closes #774
---
 app/javascript/maps/fog_of_war.js | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/app/javascript/maps/fog_of_war.js b/app/javascript/maps/fog_of_war.js
index 8e910274..bc3acbb1 100644
--- a/app/javascript/maps/fog_of_war.js
+++ b/app/javascript/maps/fog_of_war.js
@@ -85,15 +85,12 @@ export function createFogOverlay() {
     onAdd: (map) => {
       initializeFogCanvas(map);
 
-      // Add drag event handlers to update fog during marker movement
-      map.on('drag', () => {
-        const fog = document.getElementById('fog');
-        if (fog) {
-          // Update fog canvas position to match map position
-          const mapPos = map.getContainer().getBoundingClientRect();
-          fog.style.left = `${mapPos.left}px`;
-          fog.style.top = `${mapPos.top}px`;
-        }
+      // Add resize event handlers to update fog size
+      map.on('resize', () => {
+       // Set canvas size to match map container
+       const mapSize = map.getSize();
+       fog.width = mapSize.x;
+       fog.height = mapSize.y;
       });
     },
     onRemove: (map) => {
@@ -102,7 +99,7 @@ export function createFogOverlay() {
         fog.remove();
       }
       // Clean up event listener
-      map.off('drag');
+      map.off('resize');
     }
   });
 }