Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | /**
* Device Capabilities Hooks for Know Your World
*
* Re-exports shared hooks and adds game-specific hooks.
*
* @see src/hooks/useDeviceCapabilities.ts for shared implementations
*/
import { useEffect, useState } from 'react'
// Re-export shared hooks for convenience
export {
useHasAnyFinePointer,
useIsTouchDevice,
} from '@/hooks/useDeviceCapabilities'
/**
* Hook to detect if the device supports precision mode (pointer lock).
* Returns true only if:
* 1. The browser supports the Pointer Lock API
* 2. The device has a fine pointer (mouse/trackpad)
*
* This is specific to Know Your World's precision guessing feature.
*
* Use cases:
* - Showing/hiding precision mode UI
* - Enabling/disabling zoom threshold capping
* - Showing "click to activate precision mode" messages
*/
export function useCanUsePrecisionMode(): boolean {
const [canUsePrecisionMode, setCanUsePrecisionMode] = useState(false)
useEffect(() => {
const checkPrecisionMode = () => {
// Check if Pointer Lock API is supported
const supportsPointerLock = 'pointerLockElement' in document
// Check if device has a fine pointer (mouse/trackpad)
const hasFinePointer = window.matchMedia('(pointer: fine)').matches
setCanUsePrecisionMode(supportsPointerLock && hasFinePointer)
}
checkPrecisionMode()
// Re-check on resize (in case device mode changes)
window.addEventListener('resize', checkPrecisionMode)
return () => window.removeEventListener('resize', checkPrecisionMode)
}, [])
return canUsePrecisionMode
}
|