From ac82564eacec8d3ea4686d4ca3c6132ed7be0342 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 26 Nov 2025 10:02:10 -0600
Subject: [PATCH] feat(know-your-world): make magnifier lazy - only move when
 cursor obscured
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The magnifier now stays in place unless the cursor enters its bounds.
This reduces visual distraction since the magnifier won't constantly
jump to opposite corners as the user moves the mouse.

- Track current magnifier bounds (position + dimensions)
- Check if cursor is within magnifier area (with 10px padding)
- Only calculate new position when cursor would be obscured
- Otherwise keep magnifier at its current position

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/MapRenderer.tsx                | 34 +++++++++++++++----
 1 file changed, 27 insertions(+), 7 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 45c00c3c..d825eb40 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
@@ -1588,20 +1588,40 @@ export function MapRenderer({
       const magnifierWidth = containerRect.width * MAGNIFIER_SIZE_RATIO
       const magnifierHeight = containerRect.height * MAGNIFIER_SIZE_RATIO
 
-      // Calculate magnifier position (opposite corner from cursor)
-      // magnifierWidth and magnifierHeight already declared above
-      const isLeftHalf = cursorX < containerRect.width / 2
-      const isTopHalf = cursorY < containerRect.height / 2
+      // Lazy magnifier positioning: only move if cursor would be obscured
+      // Check if cursor is within current magnifier bounds (with padding)
+      const padding = 10 // pixels of buffer around magnifier
+      const currentMagLeft = targetLeft
+      const currentMagTop = targetTop
+      const currentMagRight = currentMagLeft + magnifierWidth
+      const currentMagBottom = currentMagTop + magnifierHeight
 
-      const newTop = isTopHalf ? containerRect.height - magnifierHeight - 20 : 20
-      const newLeft = isLeftHalf ? containerRect.width - magnifierWidth - 20 : 20
+      const cursorInMagnifier =
+        cursorX >= currentMagLeft - padding &&
+        cursorX <= currentMagRight + padding &&
+        cursorY >= currentMagTop - padding &&
+        cursorY <= currentMagBottom + padding
+
+      // Only calculate new position if cursor would be obscured
+      let newTop = targetTop
+      let newLeft = targetLeft
+
+      if (cursorInMagnifier) {
+        // Move to opposite corner from cursor
+        const isLeftHalf = cursorX < containerRect.width / 2
+        const isTopHalf = cursorY < containerRect.height / 2
+
+        newTop = isTopHalf ? containerRect.height - magnifierHeight - 20 : 20
+        newLeft = isLeftHalf ? containerRect.width - magnifierWidth - 20 : 20
+      }
 
       if (pointerLocked) {
         console.log(
           '[Magnifier] SHOWING with zoom:',
           adaptiveZoom,
           '| Setting opacity to 1, position:',
-          { top: newTop, left: newLeft }
+          { top: newTop, left: newLeft },
+          cursorInMagnifier ? '(moved - cursor was in magnifier)' : '(staying put)'
         )
       }