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 7807b0a7..627db06c 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 @@ -1222,24 +1222,36 @@ export function MapRenderer({ ))} {/* Custom Cursor - Visible when pointer lock is active */} - {pointerLocked && cursorPosition && ( -
+ {(() => { + console.log('[Custom Cursor] Render check:', { + pointerLocked, + hasCursorPosition: !!cursorPosition, + cursorPosition, + shouldRender: pointerLocked && cursorPosition, + }) + + if (pointerLocked && cursorPosition) { + console.log('[Custom Cursor] ✅ RENDERING at position:', cursorPosition) + } + + return pointerLocked && cursorPosition ? ( +
{/* Crosshair */}
- )} + ) : null + })()} {/* Magnifier Window - Always rendered when cursor exists, opacity controlled by spring */} {cursorPosition && svgRef.current && containerRef.current && ( diff --git a/apps/web/src/arcade-games/know-your-world/components/PlayingPhase.tsx b/apps/web/src/arcade-games/know-your-world/components/PlayingPhase.tsx index e3367f5a..7ff7cd1b 100644 --- a/apps/web/src/arcade-games/know-your-world/components/PlayingPhase.tsx +++ b/apps/web/src/arcade-games/know-your-world/components/PlayingPhase.tsx @@ -33,6 +33,12 @@ export function PlayingPhase() { useEffect(() => { const handlePointerLockChange = () => { const isLocked = document.pointerLockElement === containerRef.current + console.log('[PlayingPhase] Pointer lock change event:', { + isLocked, + pointerLockElement: document.pointerLockElement, + containerElement: containerRef.current, + elementsMatch: document.pointerLockElement === containerRef.current, + }) setPointerLocked(isLocked) console.log('[Pointer Lock]', isLocked ? '🔒 LOCKED' : '🔓 UNLOCKED') } @@ -46,9 +52,12 @@ export function PlayingPhase() { document.addEventListener('pointerlockchange', handlePointerLockChange) document.addEventListener('pointerlockerror', handlePointerLockError) + console.log('[PlayingPhase] Pointer lock listeners attached') + return () => { document.removeEventListener('pointerlockchange', handlePointerLockChange) document.removeEventListener('pointerlockerror', handlePointerLockError) + console.log('[PlayingPhase] Pointer lock listeners removed') } }, []) @@ -64,13 +73,30 @@ export function PlayingPhase() { // Request pointer lock on first click const handleContainerClick = () => { + console.log('[PlayingPhase] Container clicked:', { + pointerLocked, + hasContainer: !!containerRef.current, + showLockPrompt, + willRequestLock: !pointerLocked && containerRef.current && showLockPrompt, + }) + if (!pointerLocked && containerRef.current && showLockPrompt) { console.log('[Pointer Lock] 🔒 REQUESTING pointer lock (user clicked)') - containerRef.current.requestPointerLock() + try { + containerRef.current.requestPointerLock() + console.log('[Pointer Lock] Request sent successfully') + } catch (error) { + console.error('[Pointer Lock] Request failed with error:', error) + } setShowLockPrompt(false) // Hide prompt after first click } } + // Log when pointerLocked state changes + useEffect(() => { + console.log('[PlayingPhase] pointerLocked state changed:', pointerLocked) + }, [pointerLocked]) + // Get the display name for the current prompt const currentRegionName = state.currentPrompt ? mapData.regions.find((r) => r.id === state.currentPrompt)?.name