45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { useSnapshot } from 'valtio'
|
|
import { activeModalStack, miscUiState } from '../globalState'
|
|
import Button from './Button'
|
|
import { useUsingTouch } from './utilsApp'
|
|
import { pixelartIcons } from './PixelartIcon'
|
|
import { showNotification } from './NotificationProvider'
|
|
|
|
const hideOnModals = new Set(['chat'])
|
|
|
|
export default () => {
|
|
const [fullScreen, setFullScreen] = useState(false)
|
|
useEffect(() => {
|
|
document.documentElement.addEventListener('fullscreenchange', () => {
|
|
setFullScreen(!!document.fullscreenElement)
|
|
})
|
|
}, [])
|
|
const { gameLoaded } = useSnapshot(miscUiState)
|
|
|
|
const activeStack = useSnapshot(activeModalStack)
|
|
|
|
const inMainMenu = activeStack.length === 0 && !gameLoaded
|
|
|
|
const usingTouch = useUsingTouch()
|
|
const hideButton = activeStack.some(x => hideOnModals.has(x.reactType))
|
|
|
|
if (hideButton || !usingTouch || !document.documentElement.requestFullscreen || fullScreen) return null
|
|
|
|
return <Button
|
|
icon={pixelartIcons.scale}
|
|
style={{
|
|
position: 'fixed',
|
|
top: 5,
|
|
left: inMainMenu ? 35 : 5,
|
|
width: 22,
|
|
}}
|
|
onClick={async () => {
|
|
try {
|
|
await document.documentElement.requestFullscreen()
|
|
} catch (err) {
|
|
showNotification(`${err.message ?? err}`, undefined, true)
|
|
}
|
|
}}
|
|
/>
|
|
}
|