From 5d6d6b4ddc5bc66c05ec433cd6daadb2692286f0 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Wed, 19 Nov 2025 09:14:36 -0600
Subject: [PATCH] fix: add custom cursor when pointer lock is active
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When pointer lock is active, the browser hides the native cursor.
Add a custom crosshair cursor that follows the tracked position:
- 20px circle with crosshair lines
- Blue color (matches theme)
- Positioned at tracked cursor coordinates
- Only visible when pointerLocked is true

This ensures users can always see where they're pointing.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/MapRenderer.tsx                | 45 +++++++++++++++++++
 1 file changed, 45 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 f1704262..7807b0a7 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
@@ -1221,6 +1221,51 @@ export function MapRenderer({
         </div>
       ))}
 
+      {/* Custom Cursor - Visible when pointer lock is active */}
+      {pointerLocked && cursorPosition && (
+        <div
+          data-element="custom-cursor"
+          style={{
+            position: 'absolute',
+            left: `${cursorPosition.x}px`,
+            top: `${cursorPosition.y}px`,
+            width: '20px',
+            height: '20px',
+            border: `2px solid ${isDark ? '#60a5fa' : '#3b82f6'}`,
+            borderRadius: '50%',
+            pointerEvents: 'none',
+            zIndex: 200,
+            transform: 'translate(-50%, -50%)',
+            backgroundColor: 'transparent',
+            boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.3)',
+          }}
+        >
+          {/* Crosshair */}
+          <div
+            style={{
+              position: 'absolute',
+              left: '50%',
+              top: '50%',
+              width: '2px',
+              height: '100%',
+              backgroundColor: isDark ? '#60a5fa' : '#3b82f6',
+              transform: 'translateX(-50%)',
+            }}
+          />
+          <div
+            style={{
+              position: 'absolute',
+              left: '50%',
+              top: '50%',
+              width: '100%',
+              height: '2px',
+              backgroundColor: isDark ? '#60a5fa' : '#3b82f6',
+              transform: 'translateY(-50%)',
+            }}
+          />
+        </div>
+      )}
+
       {/* Magnifier Window - Always rendered when cursor exists, opacity controlled by spring */}
       {cursorPosition && svgRef.current && containerRef.current && (
         <animated.div