From a6be05f8c1167d1175ef7d7b1d0e239afaebbf9b Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 19 Nov 2025 10:46:26 -0600
Subject: [PATCH] feat: increase max zoom to 1000x with detailed debug logging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Increase MAX_ZOOM from 500x to 1000x and double the exponential
scaling formula to handle Gibraltar's extreme size.

New zoom calculation for sub-pixel regions:
- Formula: 1000 / (size + 0.05)
- Gibraltar (0.08px): ~770x size zoom → ~800x total (capped at 1000x)
- Jersey (0.82px): ~115x size zoom → ~145x total
- 1px: ~95x size zoom → ~125x total

Added detailed debug logging for Gibraltar to diagnose:
- Exact region size (4 decimal places)
- Breakdown: base (10) + density + size zoom
- Total before/after clamping
- Whether we're hitting max zoom limit

This will help determine if we're hitting floating-point precision
limits or if Gibraltar needs even more magnification.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/MapRenderer.tsx                | 27 ++++++++++++-------
 1 file changed, 18 insertions(+), 9 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 18ed1ecb..c56a01d5 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
@@ -183,7 +183,7 @@ export function MapRenderer({
   const [smallestRegionSize, setSmallestRegionSize] = useState<number>(Infinity)
 
   // Configuration
-  const MAX_ZOOM = 500 // Maximum zoom level (for Gibraltar at 0.08px!)
+  const MAX_ZOOM = 1000 // Maximum zoom level (for Gibraltar at 0.08px!)
   const HIGH_ZOOM_THRESHOLD = 100 // Show gold border above this zoom level
 
   // Movement speed multiplier based on smallest region size
@@ -877,28 +877,37 @@ export function MapRenderer({
       adaptiveZoom += countFactor * 20 // Up to +20x for density
 
       // Add zoom based on smallest region size (tiny regions need EXTREME zoom)
+      let sizeZoom = 0
       if (detectedSmallestSize !== Infinity) {
-        // For Gibraltar (0.08px): we need ~400x total
+        // For Gibraltar (0.08px): we need massive zoom
         // Use exponential scaling for sub-pixel regions
         if (detectedSmallestSize < 1) {
           // Sub-pixel regions get exponential zoom
-          // 0.08px → ~470x, 0.5px → ~380x, 1px → ~200x
-          adaptiveZoom += 500 / (detectedSmallestSize + 0.05)
+          // 0.08px → ~970x, 0.5px → ~180x, 1px → ~95x
+          sizeZoom = 1000 / (detectedSmallestSize + 0.05)
         } else {
           // Regular small regions use linear scaling
           const sizeFactor = Math.max(0, 1 - detectedSmallestSize / 20) // 0 to 1
-          adaptiveZoom += sizeFactor * 150 // Up to +150x for small regions
+          sizeZoom = sizeFactor * 150 // Up to +150x for small regions
         }
+        adaptiveZoom += sizeZoom
       }
 
       // Clamp to max zoom
+      const preClampZoom = adaptiveZoom
       adaptiveZoom = Math.max(10, Math.min(MAX_ZOOM, adaptiveZoom))
 
-      // Debug logging for Gibraltar
+      // Debug logging for Gibraltar - show full calculation breakdown
       if (hasGibraltar) {
-        console.log(
-          `[Zoom] 🎯 GIBRALTAR: ${adaptiveZoom.toFixed(1)}x zoom (size: ${detectedSmallestSize.toFixed(2)}px)`
-        )
+        console.log(`[Zoom] 🎯 GIBRALTAR BREAKDOWN:`, {
+          regionSize: `${detectedSmallestSize.toFixed(4)}px`,
+          baseZoom: 10,
+          densityZoom: (countFactor * 20).toFixed(1),
+          sizeZoom: sizeZoom.toFixed(1),
+          totalBeforeClamp: preClampZoom.toFixed(1),
+          finalZoom: adaptiveZoom.toFixed(1),
+          hitMaxZoom: preClampZoom > MAX_ZOOM,
+        })
       }
 
       // Calculate magnifier position (opposite corner from cursor)