From 7ba7e036613876d776eaf4822317a8bad2788495 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sun, 23 Nov 2025 21:17:47 -0600
Subject: [PATCH] fix: resume zoom animation immediately when precision mode
 activates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When user clicked to activate precision mode (pointer lock), the zoom
animation stayed paused until the mouse moved. This was because:
- Zoom is capped at threshold (20 px/px) when not in pointer lock
- When pointer lock activates, no mouse movement occurs
- handleMouseMove never runs, so zoom never recalculates without cap

Solution:
- Store uncapped adaptive zoom in ref before capping logic runs
- When pointer lock activates, directly set targetZoom to uncapped value
- This triggers pause/resume effect which sees target is no longer at
  threshold and resumes animation immediately

Changes:
- Added uncappedAdaptiveZoomRef to store zoom before capping
- Store uncapped value in handleMouseMove (line 1468)
- Set targetZoom to uncapped value when pointer lock acquired (lines 256-263)
- Removed synthetic mousemove event approach (didn't work)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/MapRenderer.tsx                | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx b/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx
index b3ca627a..e8b697d4 100644
--- a/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx
+++ b/apps/web/src/arcade-games/know-your-world/components/MapRenderer.tsx
@@ -206,6 +206,9 @@ export function MapRenderer({
   // Maps regionId -> {width, height} of the largest piece
   const largestPieceSizesRef = useRef<Map<string, { width: number; height: number }>>(new Map())
 
+  // Store the uncapped adaptive zoom for use when pointer lock activates
+  const uncappedAdaptiveZoomRef = useRef<number | null>(null)
+
   // Configuration
   const MAX_ZOOM = 1000 // Maximum zoom level (for Gibraltar at 0.08px!)
   const HIGH_ZOOM_THRESHOLD = 100 // Show gold border above this zoom level
@@ -250,20 +253,13 @@ export function MapRenderer({
         initialCapturePositionRef.current = null
       }
 
-      // Trigger a synthetic mouse move event to recalculate zoom without capping
-      // This allows the zoom animation to resume immediately when precision mode activates
-      if (isLocked && svgRef.current && cursorPositionRef.current) {
-        console.log('[Pointer Lock] Triggering zoom recalculation to resume animation')
-        // Create a synthetic mousemove event at the current cursor position
-        const syntheticEvent = new MouseEvent('mousemove', {
-          bubbles: true,
-          cancelable: true,
-          clientX: 0, // These don't matter for pointer lock mode
-          clientY: 0,
-          movementX: 0,
-          movementY: 0,
-        })
-        svgRef.current.dispatchEvent(syntheticEvent)
+      // When pointer lock activates, update target zoom to the uncapped value
+      // This allows the zoom animation to resume immediately
+      if (isLocked && uncappedAdaptiveZoomRef.current !== null) {
+        console.log(
+          `[Pointer Lock] Updating target zoom to uncapped value: ${uncappedAdaptiveZoomRef.current.toFixed(1)}×`
+        )
+        setTargetZoom(uncappedAdaptiveZoomRef.current)
       }
     }
 
@@ -1474,6 +1470,9 @@ export function MapRenderer({
         )
       }
 
+      // Store uncapped adaptive zoom before potentially capping it
+      uncappedAdaptiveZoomRef.current = adaptiveZoom
+
       // Cap zoom if not in pointer lock mode to prevent excessive screen pixel ratios
       if (!pointerLocked && containerRef.current && svgRef.current) {
         const containerRect = containerRef.current.getBoundingClientRect()