Fix map

.gitignore

@@ -6,4 +6,5 @@ __pycache__/
 **/*.pyc
 **/__pycache__/
 frontend/.svelte-kit/generated/
-frontend/.svelte-kit/output/
+frontend/.svelte-kit/output/
+real/

frontend/src/lib/components/Map.svelte

@@ -175,8 +175,8 @@
         e.touches[0].clientY - touchState.startY
       ) > 6;
 
-      vx = clamp(vx - dx, 0, MAP_W - vw);
-      vy = clamp(vy - dy, 0, MAP_H - vh);
+      pendingPanDx -= dx;
+      pendingPanDy -= dy;
       touchState = { ...touchState, lastX: e.touches[0].clientX, lastY: e.touches[0].clientY, moved };
     }
   }
@@ -192,6 +192,9 @@
   // Mouse pan for desktop
   let mouseDown = false;
   let mouseLastX = 0, mouseLastY = 0;
+  // Pending pan deltas accumulated from input events, applied in animLoop to keep
+  // viewBox and sprite positions in the same RAF frame (avoids 1-frame jump).
+  let pendingPanDx = 0, pendingPanDy = 0;
 
   function onMouseDown(e: MouseEvent) {
     mouseDown = true;
@@ -204,8 +207,8 @@
     const rect = svgEl.getBoundingClientRect();
     const sx = vw / rect.width;
     const sy = vh / rect.height;
-    vx = clamp(vx - (e.clientX - mouseLastX) * sx, 0, MAP_W - vw);
-    vy = clamp(vy - (e.clientY - mouseLastY) * sy, 0, MAP_H - vh);
+    pendingPanDx -= (e.clientX - mouseLastX) * sx;
+    pendingPanDy -= (e.clientY - mouseLastY) * sy;
     mouseLastX = e.clientX;
     mouseLastY = e.clientY;
   }
@@ -344,6 +347,14 @@
     const now = performance.now();
     let changed = false;
 
+    // Apply accumulated pan deltas here so viewBox + sprite positions update in the same frame.
+    if (pendingPanDx !== 0 || pendingPanDy !== 0) {
+      vx = clamp(vx + pendingPanDx, 0, MAP_W - vw);
+      vy = clamp(vy + pendingPanDy, 0, MAP_H - vh);
+      pendingPanDx = 0;
+      pendingPanDy = 0;
+    }
+
     for (const id of Object.keys(unitRenderStates)) {
       const s = unitRenderStates[id];
       const t = Math.min((now - s.updateTime) / TICK_MS, 1);
@@ -861,7 +872,7 @@
        per-cell rects, works in all environments (no SVG mask url(#id) needed).
        Computed reactively via $: fogRects so viewport panning is always in sync. -->
   {#each fogRects as r}
-    <rect x={r.x} y={r.y} width={r.w + 0.02} height={1.02} fill="rgba(0,0,0,{r.opacity})" pointer-events="none" shape-rendering="crispEdges" />
+    <rect x={r.x} y={r.y} width={r.w} height={1} fill="rgba(0,0,0,{r.opacity})" pointer-events="none" shape-rendering="crispEdges" />
   {/each}
 
   <!-- Tutorial target beacon (rendered above fog so it's always visible) -->