From 41a0dae82532815d583316d8b777a0afbc235aad Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 7 Aug 2023 19:08:13 +0200 Subject: [PATCH 1/3] refactor: fullscreen.js -> fullscreen.ts --- src/ui/{fullscreen.js => fullscreen.ts} | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) rename src/ui/{fullscreen.js => fullscreen.ts} (69%) diff --git a/src/ui/fullscreen.js b/src/ui/fullscreen.ts similarity index 69% rename from src/ui/fullscreen.js rename to src/ui/fullscreen.ts index 36a2e9753..70a265120 100644 --- a/src/ui/fullscreen.js +++ b/src/ui/fullscreen.ts @@ -1,7 +1,9 @@ import * as $j from 'jquery'; export class Fullscreen { - constructor(fullscreenElement, fullscreenMode) { + fullscreenElement: any; + + constructor(fullscreenElement, fullscreenMode = false) { this.fullscreenElement = fullscreenElement; if (fullscreenMode) { fullscreenElement.addClass('fullscreenMode'); @@ -21,8 +23,14 @@ export class Fullscreen { } } -const isNativeFullscreenAPIUse = () => - document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement; +const isNativeFullscreenAPIUse = () => { + // 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 + ); +}; const disableFullscreenLayout = (fullscreenElement) => { fullscreenElement.removeClass('fullscreenMode'); From 8427422984abd19bf3fe227467982cd182a8cca9 Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 7 Aug 2023 19:49:58 +0200 Subject: [PATCH 2/3] refactor: remove jQuery --- src/script.ts | 2 +- src/ui/fullscreen.ts | 28 ++++++++++++++++------------ src/ui/interface.js | 5 ++++- 3 files changed, 21 insertions(+), 14 deletions(-) diff --git a/src/script.ts b/src/script.ts index 797d718ab..fa3e55b31 100644 --- a/src/script.ts +++ b/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 = { diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index 70a265120..8778e009d 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -1,12 +1,10 @@ -import * as $j from 'jquery'; - export class Fullscreen { - fullscreenElement: any; + private fullscreenElement: HTMLElement; - constructor(fullscreenElement, fullscreenMode = false) { + constructor(fullscreenElement: HTMLElement, fullscreenMode = false) { this.fullscreenElement = fullscreenElement; if (fullscreenMode) { - fullscreenElement.addClass('fullscreenMode'); + fullscreenElement.classList.add('fullscreenMode'); } } @@ -18,7 +16,7 @@ export class Fullscreen { alert('Use F11 to exit fullscreen'); } else { enableFullscreenLayout(this.fullscreenElement); - $j('#AncientBeast')[0].requestFullscreen(); + document.getElementById('AncientBeast').requestFullscreen(); } } } @@ -32,12 +30,18 @@ const isNativeFullscreenAPIUse = () => { ); }; -const disableFullscreenLayout = (fullscreenElement) => { - fullscreenElement.removeClass('fullscreenMode'); - fullscreenElement.find('.fullscreen__title').text('Fullscreen'); +const disableFullscreenLayout = (fullscreenElement: HTMLElement) => { + fullscreenElement.classList.remove('fullscreenMode'); + const labelNode = fullscreenElement.querySelector('.fullscreen__title'); + if (labelNode) { + labelNode.textContent = 'Fullscreen'; + } }; -const enableFullscreenLayout = (fullscreenElement) => { - fullscreenElement.addClass('fullscreenMode'); - fullscreenElement.find('.fullscreen__title').text('Contract'); +const enableFullscreenLayout = (fullscreenElement: HTMLElement) => { + fullscreenElement.classList.add('fullscreenMode'); + const labelNode = fullscreenElement.querySelector('.fullscreen__title'); + if (labelNode) { + labelNode.textContent = 'Contract'; + } }; diff --git a/src/ui/interface.js b/src/ui/interface.js index ca139bc68..eb8c9095e 100644 --- a/src/ui/interface.js +++ b/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'))); From 28704973eebe6aa55fbb144657ad71032c2ac188 Mon Sep 17 00:00:00 2001 From: Peter Date: Mon, 7 Aug 2023 21:34:22 +0200 Subject: [PATCH 3/3] refactor: rename member/arguments, inline functions, add JSDoc --- src/ui/fullscreen.ts | 47 +++++++++++++++++++------------------------- 1 file changed, 20 insertions(+), 27 deletions(-) diff --git a/src/ui/fullscreen.ts b/src/ui/fullscreen.ts index 8778e009d..0c4eb27ec 100644 --- a/src/ui/fullscreen.ts +++ b/src/ui/fullscreen.ts @@ -1,47 +1,40 @@ export class Fullscreen { - private fullscreenElement: HTMLElement; + private button: HTMLElement; - constructor(fullscreenElement: HTMLElement, fullscreenMode = false) { - this.fullscreenElement = fullscreenElement; - if (fullscreenMode) { - fullscreenElement.classList.add('fullscreenMode'); + constructor(button: HTMLElement, isFullscreen = false) { + this.button = button; + if (isFullscreen) { + button.classList.add('fullscreenMode'); } } toggle() { - if (isNativeFullscreenAPIUse()) { - disableFullscreenLayout(this.fullscreenElement); + if (isAppInNativeFullscreenMode()) { + this.button.classList.remove('fullscreenMode'); + this.button + .querySelectorAll('.fullscreen__title') + .forEach((el) => (el.textContent = 'FullScreen')); document.exitFullscreen(); - } else if (!isNativeFullscreenAPIUse() && window.innerHeight === screen.height) { + } else if (!isAppInNativeFullscreenMode() && window.innerHeight === screen.height) { alert('Use F11 to exit fullscreen'); } else { - enableFullscreenLayout(this.fullscreenElement); + this.button.classList.add('fullscreenMode'); + this.button + .querySelectorAll('.fullscreen__title') + .forEach((el) => (el.textContent = 'Contract')); document.getElementById('AncientBeast').requestFullscreen(); } } } -const isNativeFullscreenAPIUse = () => { +/** + * @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 ); -}; - -const disableFullscreenLayout = (fullscreenElement: HTMLElement) => { - fullscreenElement.classList.remove('fullscreenMode'); - const labelNode = fullscreenElement.querySelector('.fullscreen__title'); - if (labelNode) { - labelNode.textContent = 'Fullscreen'; - } -}; - -const enableFullscreenLayout = (fullscreenElement: HTMLElement) => { - fullscreenElement.classList.add('fullscreenMode'); - const labelNode = fullscreenElement.querySelector('.fullscreen__title'); - if (labelNode) { - labelNode.textContent = 'Contract'; - } -}; +}