v2

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();
 		}
 	}
 }