From 9c89aadb17516fb540304813da73a649d5dfb96c Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 26 Nov 2025 06:25:02 -0600
Subject: [PATCH] feat: add debug indicator for custom crop region (dev only)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Shows a magenta dashed rectangle outlining the custom crop region
when SHOW_CROP_REGION_DEBUG is true (dev mode only). This helps
visualize the "must be visible" area vs the expanded fill area.

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

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

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 ac305b4c..0ff531d7 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
@@ -37,6 +37,9 @@ const SHOW_MAGNIFIER_DEBUG_INFO = process.env.NODE_ENV === 'development'
 // Debug flag: show bounding boxes with importance scores (dev only)
 const SHOW_DEBUG_BOUNDING_BOXES = process.env.NODE_ENV === 'development'
 
+// Debug flag: show custom crop region outline (dev only)
+const SHOW_CROP_REGION_DEBUG = process.env.NODE_ENV === 'development'
+
 // Precision mode threshold: screen pixel ratio that triggers pointer lock recommendation
 const PRECISION_MODE_THRESHOLD = 20
 
@@ -1844,6 +1847,31 @@ export function MapRenderer({
             opacity={0.8}
           />
         )}
+
+        {/* Debug: Show custom crop region outline */}
+        {SHOW_CROP_REGION_DEBUG && mapData.customCrop && (() => {
+          const cropParts = mapData.customCrop.split(' ').map(Number)
+          const cropX = cropParts[0] || 0
+          const cropY = cropParts[1] || 0
+          const cropWidth = cropParts[2] || 100
+          const cropHeight = cropParts[3] || 100
+          return (
+            <rect
+              data-element="crop-region-debug"
+              x={cropX}
+              y={cropY}
+              width={cropWidth}
+              height={cropHeight}
+              fill="none"
+              stroke="#ff00ff"
+              strokeWidth={2}
+              vectorEffect="non-scaling-stroke"
+              strokeDasharray="8,4"
+              pointerEvents="none"
+              opacity={0.8}
+            />
+          )
+        })()}
       </animated.svg>
 
       {/* HTML labels positioned absolutely over the SVG */}