diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index 4f20ae3c6..d0e8f7c54 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -1,36 +1,55 @@ export class Fullscreen { private button: HTMLElement; + private isFullscreen: boolean; constructor(button: HTMLElement, isFullscreen = false) { this.button = button; + this.isFullscreen = isFullscreen; if (isFullscreen) { button.classList.add('fullscreenMode'); } + document.addEventListener('fullscreenchange', this.onFullscreenChange.bind(this)); + document.addEventListener('keydown', this.onKeyDown.bind(this)); } toggle() { if (isAppInNativeFullscreenMode()) { - this.button.classList.remove('fullscreenMode'); - this.button - .querySelectorAll('.fullscreen__title') - .forEach((el) => (el.textContent = 'FullScreen')); - document.exitFullscreen(); + this.exitFullscreen(); } else if (!isAppInNativeFullscreenMode() && window.innerHeight === screen.height) { alert('Use F11 to exit fullscreen'); } else { - this.button.classList.add('fullscreenMode'); - this.button - .querySelectorAll('.fullscreen__title') - .forEach((el) => (el.textContent = 'Contract')); - document.getElementById('AncientBeast').requestFullscreen(); + this.enterFullscreen(); + } + } + + enterFullscreen() { + this.button.classList.add('fullscreenMode'); + this.button + .querySelectorAll('.fullscreen__title') + .forEach((el) => (el.textContent = 'Contract')); + document.getElementById('AncientBeast').requestFullscreen(); + this.isFullscreen = true; + } + + exitFullscreen() { + this.button.classList.remove('fullscreenMode'); + this.button + .querySelectorAll('.fullscreen__title') + .forEach((el) => (el.textContent = 'FullScreen')); + document.exitFullscreen(); + this.isFullscreen = false; + } + + onFullscreenChange() { + if (!document.fullscreenElement) { + this.isFullscreen = false; } } - private onFullscreenChange() { - if (!isAppInNativeFullscreenMode() && window.innerHeight !== screen.height) { - this.button.classList.add('fullscreenMode'); - document.getElementById('AncientBeast').requestFullscreen(); + onKeyDown(event: KeyboardEvent) { + if (this.isFullscreen && event.key === 'Escape') { + event.preventDefault(); } } }