import { Renderer } from "../rendering/renderer" ; import { state } from "../state" ; import { StorageManager } from "../storage" ; import { Util } from "../util" ; export const mainCanvas = document . querySelector ( '#main-canvas' ) as HTMLCanvasElement ; export let mainRenderer ; export const initMainRenderer = ( ) => { mainRenderer = new Renderer ( { canvas : mainCanvas , desynchronized : StorageManager . data . settings . canvasDesynchronized } ) ; resize ( false ) ; } ; const MIN_WIDTH = 640 ; const MIN_HEIGHT = 600 ; /** Ratio by which the entire body gets scaled by, while still fitting into the screen. */ export let SCALING_RATIO = 1 ; export const resize = async ( wait = true ) => { if ( wait ) await Util . wait ( 100 ) ; let ratio = Math . max ( 1 , MIN_WIDTH / window . innerWidth , MIN_HEIGHT / window . innerHeight ) ; document . body . style . width = Math . ceil ( window . innerWidth * ratio ) + 'px' ; document . body . style . height = Math . ceil ( window . innerHeight * ratio ) + 'px' ; document . body . style . transform = `scale(${ 1 / ratio })` ; SCALING_RATIO = ratio ; mainCanvas . style . width = '100%' ; mainCanvas . style . height = '100%' ; mainRenderer ?. setSize ( window . innerWidth , window . innerHeight ) ; mainRenderer ?. setPixelRatio ( Math . min ( window . devicePixelRatio , [ 0.5 , 1.0 , 1.5 , 2.0 , Infinity ] [ StorageManager . data ?. settings . pixelRatio ] ) ) ; state . level ?. onResize ( ) ; } ; window . addEventListener ( 'resize' , resize as any ) ; resize ( ) ; /** Becomes true when the user has closed the fullscreen enforcer. */ let dislikesFullscreen = false ; const fullscreenEnforcer = document . querySelector ( '#fullscreen-enforcer' ) ; fullscreenEnforcer . addEventListener ( 'click' , ( ) => { document . documentElement . requestFullscreen ( ) ; } ) ; fullscreenEnforcer . querySelector ( 'img' ) . addEventListener ( 'click' , ( e ) => { dislikesFullscreen = true ; fullscreenEnforcer . classList . add ( 'hidden' ) ; e . stopPropagation ( ) ; } ) ; const enterFullscreenButton = document . querySelector ( '#enter-fullscreen' ) ; enterFullscreenButton . addEventListener ( 'click' , ( ) => { document . documentElement . requestFullscreen ( ) ; dislikesFullscreen = false ; } ) ; let fullscreenButtonVisibility = true ; export const setEnterFullscreenButtonVisibility = ( state ) => { fullscreenButtonVisibility = state ; if ( state && Util . isTouchDevice && ! Util . isSafari ( ) && ! Util . isInFullscreen ( ) ) enterFullscreenButton . classList . remove ( 'hidden' ) ; else enterFullscreenButton . classList . add ( 'hidden' ) ; } ; let lastImmunityTime = - Infinity ; setInterval ( ( ) => { if ( document . activeElement ?. tagName === 'INPUT' ) lastImmunityTime = performance . now ( ) ; if ( Util . isTouchDevice && ! Util . isSafari ( ) ) { if ( Util . isInFullscreen ( ) ) { fullscreenEnforcer . classList . add ( 'hidden' ) ; } else if ( ! dislikesFullscreen && document . activeElement ?. tagName !== 'INPUT' && performance . now ( ) - lastImmunityTime > 666 ) { fullscreenEnforcer . classList . remove ( 'hidden' ) ; } } setEnterFullscreenButtonVisibility ( fullscreenButtonVisibility ) ; } , 250 ) ; window . addEventListener ( 'dragstart' , ( e ) => { if ( ( e . target as any ) . nodeName ?. toUpperCase ( ) === 'IMG' ) { e . preventDefault ( ) ; } } ) ;