From 5eb2eeda32ff95ccc45707acfbc329e2214ed3e1 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 24 Nov 2025 08:34:47 -0600
Subject: [PATCH] fix: remove magnifierSpring.zoom from effect dependencies
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Root Cause:**
The animation effect wasn't running when targetZoom changed because
magnifierSpring.zoom (a React Spring value) was in the dependency array.
Spring values don't trigger React effects correctly.

**Evidence from logs:**
- setTargetZoom(15.8) was being called repeatedly ✅
- currentZoom stayed stuck at 205.9× ❌
- No [useMagnifierZoom] Animation effect logs appeared ❌

This meant the effect never ran, so magnifierApi.start() was never called,
and the spring animation never updated to the new target zoom.

**Fix:**
Remove magnifierSpring.zoom from the dependency array. The effect should
run based on targetZoom changes (which is a regular state value), not
spring value changes.

We still read magnifierSpring.zoom.get() inside the effect to check
currentZoom, but we don't depend on it to trigger the effect.

**Impact:**
- Effect now runs every time targetZoom changes
- Spring animation will start/update correctly
- Zoom will no longer freeze after exiting pointer lock

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../know-your-world/hooks/useMagnifierZoom.ts             | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/arcade-games/know-your-world/hooks/useMagnifierZoom.ts b/apps/web/src/arcade-games/know-your-world/hooks/useMagnifierZoom.ts
index 63e1d06f..3cfb6ca9 100644
--- a/apps/web/src/arcade-games/know-your-world/hooks/useMagnifierZoom.ts
+++ b/apps/web/src/arcade-games/know-your-world/hooks/useMagnifierZoom.ts
@@ -223,14 +223,16 @@ export function useMagnifierZoom(options: UseMagnifierZoomOptions): UseMagnifier
       magnifierApi.start({ zoom: targetZoom })
     }
   }, [
-    targetZoom,
-    pointerLocked,
+    targetZoom, // Effect runs when target zoom changes
+    pointerLocked, // Effect runs when pointer lock state changes
     viewBox,
     threshold,
     containerRef,
     svgRef,
     magnifierApi,
-    magnifierSpring.zoom,
+    // NOTE: Do NOT include magnifierSpring.zoom here!
+    // Spring values don't trigger React effects correctly.
+    // We read spring.zoom.get() inside the effect, but don't depend on it.
   ])
 
   return {