From 996c973774286768952454c369dff2b37d875833 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Tue, 25 Nov 2025 10:00:08 -0600
Subject: [PATCH] feat: show magnifier only when current target region needs
 magnification
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Only display the magnifier when the region the player is currently being asked to find would require magnification to be clickable. This makes the magnifier context-aware and only appears when it's actually useful for the current game objective.

- Add targetNeedsMagnification state to track if current prompt region is small
- Add useEffect to check target region size when currentPrompt changes
- Update shouldShow logic to require both targetNeedsMagnification AND hasSmallRegion
- Use same thresholds as region detection (15px width/height, 200px² area)
- Log magnification check results for debugging

Now the magnifier won't appear when looking for large countries, even when hovering near small regions like Vatican City.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/MapRenderer.tsx                | 49 ++++++++++++++++++-
 1 file changed, 47 insertions(+), 2 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 28697255..6214724b 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
@@ -254,6 +254,9 @@ export function MapRenderer({
   const [targetLeft, setTargetLeft] = useState(20)
   const [smallestRegionSize, setSmallestRegionSize] = useState<number>(Infinity)
 
+  // Track whether current target region needs magnification
+  const [targetNeedsMagnification, setTargetNeedsMagnification] = useState(false)
+
   // Debug: Track bounding boxes for visualization
   const [debugBoundingBoxes, setDebugBoundingBoxes] = useState<DebugBoundingBox[]>([])
   // Debug: Track full zoom search result for detailed panel
@@ -416,6 +419,48 @@ export function MapRenderer({
     })
   }, [targetOpacity, targetTop, targetLeft, smallestRegionSize, magnifierApi])
 
+  // Check if current target region needs magnification
+  useEffect(() => {
+    if (!currentPrompt || !svgRef.current || !containerRef.current) {
+      setTargetNeedsMagnification(false)
+      return
+    }
+
+    // Find the path element for the target region
+    const svgElement = svgRef.current
+    const path = svgElement.querySelector(`path[data-region-id="${currentPrompt}"]`)
+    if (!path || !(path instanceof SVGGeometryElement)) {
+      setTargetNeedsMagnification(false)
+      return
+    }
+
+    // Get the bounding box size
+    const bbox = path.getBoundingClientRect()
+    const pixelWidth = bbox.width
+    const pixelHeight = bbox.height
+    const pixelArea = pixelWidth * pixelHeight
+
+    // Use same thresholds as region detection
+    const SMALL_REGION_THRESHOLD = 15 // pixels
+    const SMALL_REGION_AREA_THRESHOLD = 200 // px²
+
+    const isVerySmall =
+      pixelWidth < SMALL_REGION_THRESHOLD ||
+      pixelHeight < SMALL_REGION_THRESHOLD ||
+      pixelArea < SMALL_REGION_AREA_THRESHOLD
+
+    setTargetNeedsMagnification(isVerySmall)
+
+    console.log('[MapRenderer] Target region magnification check:', {
+      regionId: currentPrompt,
+      pixelWidth: pixelWidth.toFixed(2),
+      pixelHeight: pixelHeight.toFixed(2),
+      pixelArea: pixelArea.toFixed(2),
+      isVerySmall,
+      needsMagnification: isVerySmall,
+    })
+  }, [currentPrompt, svgDimensions]) // Re-check when prompt or SVG size changes
+
   const [labelPositions, setLabelPositions] = useState<RegionLabelPosition[]>([])
   const [smallRegionLabelPositions, setSmallRegionLabelPositions] = useState<
     Array<{
@@ -1060,8 +1105,8 @@ export function MapRenderer({
       console.log('[Zoom Search] Sorted regions (smallest first):', sortedSizes)
     }
 
-    // Show magnifier only when there are small regions (< 15px)
-    const shouldShow = hasSmallRegion
+    // Show magnifier only when the current target region needs magnification
+    const shouldShow = targetNeedsMagnification && hasSmallRegion
 
     // Update smallest region size for adaptive cursor dampening
     if (shouldShow && detectedSmallestSize !== Infinity) {