Fix

frontend/src/lib/components/Map.svelte

@@ -3,7 +3,7 @@
   import { backendUrl } from '$lib/socket';
   import { gameState, myPlayerId, selectedUnit, selectedBuilding, mapViewport, mapVisibleCells, mapExploredCells, mapCenterRequest, mapTextureUrl, isTutorial } from '$lib/stores/game';
   import { BUILDING_SIZES } from '$lib/types';
-  import type { Unit, Building, UnitType, BuildingType } from '$lib/types';
+  import type { Unit, Building, UnitType, BuildingType, GameState } from '$lib/types';
 
   // ── Per-unit smooth interpolation state ───────────────────────────────────
   const TICK_MS = 250; // must match server TICK_INTERVAL * 1000
@@ -339,6 +339,9 @@
     }
 
     unitRenderStates = { ...unitRenderStates };
+
+    // Accumulate fog explored sources (reliable here: explicit subscription, not $: block)
+    accumulateExploredSources(newGs as GameState);
   }
 
   function lerp(a: number, b: number, t: number) { return a + (b - a) * t; }
@@ -471,13 +474,19 @@
     if (next.size !== exploredCells.size) exploredCells = next;
   }
 
-  // Fog of war: circle-based vision sources for SVG mask rendering
+  // Fog of war: circle-based vision sources for SVG mask rendering.
+  // getVisibleSources is called INLINE in the template (not via $: block) so that
+  // Svelte's template renderer tracks gs/myId as dependencies — same pattern as the
+  // original buildFogRects, which avoids the production-build reactive scheduling issue.
   type FogSource = { x: number; y: number; r: number };
 
-  $: visibleSources = (() => {
+  function getVisibleSources(
+    _gs: typeof gs,
+    _myId: typeof myId,
+  ): FogSource[] {
     const sources: FogSource[] = [];
-    if (!gs || !myId) return sources;
-    const myP = gs.players[myId];
+    if (!_gs || !_myId) return sources;
+    const myP = _gs.players[_myId];
     if (!myP) return sources;
     for (const u of Object.values(myP.units)) {
       sources.push({ x: u.x, y: u.y, r: visionRadiusUnit(u) });
@@ -487,22 +496,37 @@
       sources.push({ x: b.x, y: b.y, r: visionRadiusBuilding(b) });
     }
     return sources;
-  })();
+  }
 
-  // Accumulate explored sources (deduped by snapped grid position)
+  // Explored sources: accumulated in onGameStateUpdate (explicit subscription, reliable in prod).
   let exploredSources: FogSource[] = [];
   let _exploredSourceKeys = new Set<string>();
-  $: {
+
+  function accumulateExploredSources(newGs: GameState) {
+    if (!myId) return;
+    const myP = newGs.players[myId];
+    if (!myP) return;
     let changed = false;
-    for (const s of visibleSources) {
-      const key = `${Math.round(s.x * 2)},${Math.round(s.y * 2)},${s.r}`;
+    for (const u of Object.values(myP.units) as Unit[]) {
+      const r = visionRadiusUnit(u);
+      const key = `${Math.round(u.x * 2)},${Math.round(u.y * 2)},${r}`;
+      if (!_exploredSourceKeys.has(key)) {
+        _exploredSourceKeys.add(key);
+        exploredSources.push({ x: u.x, y: u.y, r });
+        changed = true;
+      }
+    }
+    for (const b of Object.values(myP.buildings) as Building[]) {
+      if (b.status === 'destroyed') continue;
+      const r = visionRadiusBuilding(b);
+      const key = `${Math.round(b.x * 2)},${Math.round(b.y * 2)},${r}`;
       if (!_exploredSourceKeys.has(key)) {
         _exploredSourceKeys.add(key);
-        exploredSources.push(s);
+        exploredSources.push({ x: b.x, y: b.y, r });
         changed = true;
       }
     }
-    if (changed) exploredSources = exploredSources;
+    if (changed) exploredSources = [...exploredSources];
   }
 
   // Expose viewport and fog for Minimap
@@ -867,9 +891,12 @@
     {/each}
   {/if}
 
-  <!-- Fog of war: single black rect covering the viewport, with vision circles
-       masked out via SVG <mask>. Two layers: dark (unexplored) and dim (explored). -->
+  <!-- Fog of war: single black rect covering the viewport, with vision circles masked out.
+       getVisibleSources is called INLINE so Svelte's template renderer tracks gs/myId as
+       dependencies — avoids the production-build $: scheduling issue (same pattern as the
+       original buildFogRects). exploredSources is populated via onGameStateUpdate. -->
   {#if !isObserver}
+    {@const _visSrc = getVisibleSources(gs, myId)}
     <defs>
       <mask id="fog-explored-mask" maskUnits="userSpaceOnUse" x="0" y="0" width={MAP_W} height={MAP_H}>
         <rect x="0" y="0" width={MAP_W} height={MAP_H} fill="white"/>
@@ -879,7 +906,7 @@
       </mask>
       <mask id="fog-visible-mask" maskUnits="userSpaceOnUse" x="0" y="0" width={MAP_W} height={MAP_H}>
         <rect x="0" y="0" width={MAP_W} height={MAP_H} fill="white"/>
-        {#each visibleSources as s}
+        {#each _visSrc as s}
           <circle cx={s.x} cy={s.y} r={s.r} fill="black"/>
         {/each}
       </mask>