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 ? (
+
- )}
+ ) : 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