diff --git a/web/js/screen.js b/web/js/screen.js index eebc3844..fe0bd177 100644 --- a/web/js/screen.js +++ b/web/js/screen.js @@ -1,80 +1,80 @@ -import { - sub, - SETTINGS_CHANGED, - REFRESH_INPUT, -} from 'event'; -import {env} from 'env'; -import {input, pointer, keyboard} from 'input'; -import {opts, settings} from 'settings'; -import {gui} from 'gui'; +import { sub, SETTINGS_CHANGED, REFRESH_INPUT } from "event"; +import { env } from "env"; +import { input, pointer, keyboard } from "input"; +import { opts, settings } from "settings"; +import { gui } from "gui"; -const rootEl = document.getElementById('screen') -const footerEl = document.getElementsByClassName('screen__footer')[0] +const rootEl = document.getElementById("screen"); +const footerEl = document.getElementsByClassName("screen__footer")[0]; const state = { components: [], current: undefined, forceFullscreen: false, -} +}; const toggle = async (component, force) => { - component && (state.current = component) // keep the last component - state.components.forEach(c => c.toggle(false)) - state.current?.toggle(force) - state.forceFullscreen && fullscreen(true) -} + if (component) { + state.current = component; + } // keep the last component + state.components.forEach((c) => c.toggle(false)); + state.current?.toggle(force); + if (state.forceFullscreen) { + fullscreen(true); + } +}; const init = () => { - state.forceFullscreen = settings.loadOr(opts.FORCE_FULLSCREEN, false) + state.forceFullscreen = settings.loadOr(opts.FORCE_FULLSCREEN, false); sub(SETTINGS_CHANGED, () => { - state.forceFullscreen = settings.get()[opts.FORCE_FULLSCREEN] - }) -} + state.forceFullscreen = settings.get()[opts.FORCE_FULLSCREEN]; + }); +}; -const cursor = pointer.autoHide(rootEl, 2000) +const cursor = pointer.autoHide(rootEl, 2000); const trackPointer = pointer.track(rootEl, () => { const display = state.current; - return {...display.video.size, s: !!display?.hasDisplay} -}) + return { ...display.video.size, s: !!display?.hasDisplay }; +}); const fullscreen = () => { - if (state.current?.noFullscreen) return + if (state.current?.noFullscreen) return; - let h = parseFloat(getComputedStyle(rootEl, null).height.replace('px', '')) - env.display().toggleFullscreen(h !== window.innerHeight, rootEl) -} + let h = parseFloat(getComputedStyle(rootEl, null).height.replace("px", "")); + env.display().toggleFullscreen(h !== window.innerHeight, rootEl); +}; const controls = async (locked = false) => { - if (!state.current?.hasDisplay) return - if (env.isMobileDevice) return - if (!input.kbm) return + if (!state.current?.hasDisplay) return; + if (env.isMobileDevice) return; + if (!input.kbm) return; if (locked) { - await pointer.lock(rootEl) + await pointer.lock(rootEl); } // oof, remove hover:hover when the pointer is forcibly locked, // leaving the element in the hovered state - locked ? footerEl.classList.remove('hover') : footerEl.classList.add('hover') + footerEl.classList.toggle("hover", !locked); - trackPointer(locked) - await keyboard.lock(locked) - input.retropad.toggle(!locked) -} + trackPointer(locked); + await keyboard.lock(locked); + input.retropad.toggle(!locked); +}; -rootEl.addEventListener('fullscreenchange', async () => { - const fs = document.fullscreenElement !== null +rootEl.addEventListener("fullscreenchange", async () => { + const fs = document.fullscreenElement !== null; - cursor(!fs) - gui.toggle(footerEl, fs) - await controls(fs) - state.current?.onFullscreen?.(fs) -}) + cursor(!fs); + gui.toggle(footerEl, fs); + await controls(fs); + state.current?.onFullscreen?.(fs); +}); sub(REFRESH_INPUT, async () => { - await controls(document.fullscreenElement !== null) -}) + await controls(document.fullscreenElement !== null); +}); export const screen = { fullscreen, @@ -85,4 +85,4 @@ export const screen = { */ add: (...o) => state.components.push(...o), init, -} +};