Merge pull request FreezingMoon#2475 from andretchen0/fullscreen

refactor: fullscreen.js -> fullscreen.ts FreezingMoon#1969

src/script.ts

@@ -89,7 +89,7 @@ $j(() => {
 	disableScrollAndArrowKeys(document.getElementById('loader')); // Disable scroll and arrow keys for loader element
 
 	// Add listener for Fullscreen API
-	const fullscreen = new Fullscreen($j('#fullscreen'));
+	const fullscreen = new Fullscreen(document.getElementById('fullscreen'));
 	$j('#fullscreen').on('click', () => fullscreen.toggle());
 
 	const startScreenHotkeys = {

src/ui/fullscreen.ts

@@ -0,0 +1,40 @@
+export class Fullscreen {
+	private button: HTMLElement;
+
+	constructor(button: HTMLElement, isFullscreen = false) {
+		this.button = button;
+		if (isFullscreen) {
+			button.classList.add('fullscreenMode');
+		}
+	}
+
+	toggle() {
+		if (isAppInNativeFullscreenMode()) {
+			this.button.classList.remove('fullscreenMode');
+			this.button
+				.querySelectorAll('.fullscreen__title')
+				.forEach((el) => (el.textContent = 'FullScreen'));
+			document.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();
+		}
+	}
+}
+
+/**
+ * @returns {boolean} true if app is currently in [fullscreen mode using the native API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API), else false.
+ */
+function isAppInNativeFullscreenMode(): boolean {
+	// NOTE: These properties were vendor-prefixed until very recently.
+	// Keeping vendor prefixes, though they make TS report an error.
+	return (
+		// @ts-expect-error 2551
+		document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement
+	);
+}

src/ui/interface.js

@@ -47,7 +47,10 @@ export class UI {
 	 */
 	constructor(game) {
 		this.game = game;
-		this.fullscreen = new Fullscreen($j('#fullscreen.button'), game.fullscreenMode);
+		this.fullscreen = new Fullscreen(
+			document.querySelector('#fullscreen.button'),
+			game.fullscreenMode,
+		);
 		this.$display = $j('#ui');
 		this.$dash = $j('#dash');
 		this.$grid = $j(this.#makeCreatureGrid(document.getElementById('creaturerasterwrapper')));