2019-03-03 16:13:57 +01:00
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
|
|
|
|
|
2019-03-06 00:17:11 +01:00
|
|
|
export const useIsMousePresent = () => {
|
2019-03-06 00:16:46 +01:00
|
|
|
let [present, setPresent] = useState<boolean>(false)
|
2019-03-03 16:13:57 +01:00
|
|
|
|
|
|
|
useEffect(() => {
|
2019-03-06 00:17:11 +01:00
|
|
|
const enter = () => setPresent(true)
|
|
|
|
const leave = () => setPresent(false)
|
2019-03-03 16:13:57 +01:00
|
|
|
window.document.addEventListener('mouseenter', enter)
|
|
|
|
window.document.addEventListener('mouseleave', leave)
|
|
|
|
return () => {
|
|
|
|
window.document.removeEventListener('mouseenter', enter)
|
|
|
|
window.document.removeEventListener('mouseleave', leave)
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
return present
|
|
|
|
}
|
|
|
|
|
2019-03-06 22:47:29 +01:00
|
|
|
type Orientation = {
|
|
|
|
x: number,
|
|
|
|
y: number,
|
|
|
|
z: number,
|
|
|
|
}
|
|
|
|
|
|
|
|
export const useOrientation = (useInitialDelta: boolean = false): Orientation | undefined => {
|
|
|
|
|
|
|
|
const [orientation, setOrientation] = useState<DeviceAcceleration | undefined>()
|
|
|
|
const [initial, setInitial] = useState<DeviceAcceleration>()
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (!initial)
|
|
|
|
setInitial(orientation)
|
|
|
|
}, [orientation, initial])
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const handleOrientation = (event: DeviceMotionEvent) => {
|
|
|
|
setOrientation(event.accelerationIncludingGravity || undefined)
|
|
|
|
}
|
|
|
|
window.addEventListener('devicemotion', handleOrientation, true)
|
|
|
|
return () => window.removeEventListener('devicemotion', handleOrientation, true)
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
if (!orientation || !orientation.x || !orientation.y || !orientation.z) return
|
|
|
|
|
|
|
|
if (!useInitialDelta) return {
|
|
|
|
x: orientation.x || 0,
|
|
|
|
y: orientation.y || 0,
|
|
|
|
z: orientation.z || 0,
|
|
|
|
}
|
|
|
|
|
|
|
|
if (initial && orientation && initial.x && initial.y && initial.z) return {
|
|
|
|
x: orientation.x - initial.x,
|
|
|
|
y: orientation.y - initial.y,
|
|
|
|
z: orientation.z - initial.z,
|
|
|
|
}
|
|
|
|
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2019-03-03 16:13:57 +01:00
|
|
|
export const useMousePosition = () => {
|
|
|
|
let [position, setPosition] = useState({ absolute: { x: 0, y: 0 }, relative: { x: 0, y: 0 } })
|
|
|
|
|
|
|
|
const handle = (e: MouseEvent) => {
|
|
|
|
setPosition({
|
|
|
|
absolute: {
|
|
|
|
x: e.pageX,
|
|
|
|
y: e.pageY,
|
|
|
|
},
|
|
|
|
relative: {
|
|
|
|
x: e.pageX / window.innerWidth,
|
|
|
|
y: e.pageY / window.innerHeight,
|
|
|
|
},
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
window.addEventListener('mousemove', handle)
|
|
|
|
return () => {
|
|
|
|
window.removeEventListener('mousemove', handle)
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
return position
|
|
|
|
}
|
|
|
|
|
|
|
|
export const Rand = (from: number = 0, to: number = 1, float: boolean = false) => {
|
|
|
|
const rand = (Math.random() * (to - from)) + from
|
|
|
|
return float ? rand : rand | 0
|
|
|
|
}
|
|
|
|
|
|
|
|
export const GoldenRatio: number = (1 + Math.sqrt(5)) / 2
|