review(application): add isFullscreen, clean up the device fullscreen probes (#1467)

Round-out of the move to app-instance fullscreen:

- **`Application#isFullscreen`** added so the trio sits together
  (`isFullscreen` / `requestFullscreen` / `exitFullscreen`). Defaults
  the documented example to `app.isFullscreen()` instead of mixing
  in `me.device.isFullscreen()`.
- **`device.isFullscreen` deprecated** alongside the other two
  fullscreen statics. Same `since 19.7.0 — use Application#…`
  pointer.
- The four example sites that still called `device.isFullscreen()`
  switch to `_app.isFullscreen()` / `game.isFullscreen()` so the
  fullscreen path is consistently app-instance in user-facing code.
- The new `Application#requestFullscreen` JSDoc names
  `parentElement` directly (with a backlink to
  {@link Application#getParentElement}) instead of the vaguer
  "canvas parent element" phrasing.

Tag-along cleanup of the deprecated device wrappers themselves: the
`prefixed("fullscreenEnabled", ...)` / `prefixed("fullscreenElement",
...)` / `prefixed("requestFullscreen", ...)` calls iterated 5 vendor
prefixes per probe via the `prefixed()` helper, with awkward
`as unknown as Record<string, unknown>` casts. Replaced with an
explicit four-variant OR chain (`fullscreenEnabled || webkit… ||
moz… || ms…`), the same pattern lib.dom.d.ts uses and what every
MDN recipe recommends in 2026. `DocumentLegacy` / `ElementLegacy`
gain the missing `webkit*` / `ms*` typings. `requestFullscreen`
also `.catch()`-es the Promise the modern (unprefixed) call
returns — the vendor-prefixed variants returned undefined so the
guard `if (result instanceof Promise)` cleanly covers both.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: obiot

packages/examples/src/examples/platformer-matter/createGame.ts

@@ -125,7 +125,7 @@ export const createGame = () => {
 				audio.setVolume(Math.max(0, audio.getVolume() - 0.1));
 			}
 			if (keyCode === input.KEY.F) {
-				if (!device.isFullscreen()) {
+				if (!_app.isFullscreen()) {
 					_app.requestFullscreen();
 				} else {
 					_app.exitFullscreen();

packages/examples/src/examples/platformer-matter/entities/HUD.ts

@@ -49,7 +49,7 @@ class FSControl extends UISpriteElement {
 	 * function called when the object is clicked on
 	 */
 	onClick(/* event */) {
-		if (!device.isFullscreen()) {
+		if (!game.isFullscreen()) {
 			game.requestFullscreen();
 		} else {
 			game.exitFullscreen();

packages/examples/src/examples/platformer/createGame.ts

@@ -75,7 +75,7 @@ export const createGame = () => {
 				audio.setVolume(audio.getVolume() - 0.1);
 			}
 			if (keyCode === input.KEY.F) {
-				if (!device.isFullscreen()) {
+				if (!_app.isFullscreen()) {
 					_app.requestFullscreen();
 				} else {
 					_app.exitFullscreen();

packages/examples/src/examples/platformer/entities/HUD.ts

@@ -49,7 +49,7 @@ class FSControl extends UISpriteElement {
 	 * function called when the object is clicked on
 	 */
 	onClick(/* event */) {
-		if (!device.isFullscreen()) {
+		if (!game.isFullscreen()) {
 			game.requestFullscreen();
 		} else {
 			game.exitFullscreen();

packages/melonjs/CHANGELOG.md

@@ -35,7 +35,7 @@
 - **`device.platform.isMobile` no longer ORs the dead-platform regexes** (#1467). `wp` / `BlackBerry` / `Kindle` regexes were burning cycles on every page load testing for hardware nobody ships (Windows Phone EOL 2017, BB10 EOL 2016, Kindle behaves like Android anyway). The remaining chain — `/Mobi/.test(ua) || iOS || android` — covers ~99.9% of mobile traffic in 2026 per MDN. The deprecated exports themselves still compute and return; only the `isMobile` aggregate stopped consulting them.
 - **`initKeyboardEvent` no longer skips listener registration on `isMobile === true`** (#1467). The gate assumed "mobile = no physical keyboard" — invalid for iPads with Magic Keyboard (now correctly detected per the iPad fix above), Samsung DeX, ChromeOS tablet mode, Bluetooth-keyboard-on-phone, etc. Two empty listener slots cost nothing on touch-only devices; the unbound-key path is a single map lookup that returns undefined.
 - **`system/device` converted to TypeScript** (#1467, renamed from `device.js` → `device.ts`). 945 lines / 53 exports / 56 JSDoc blocks of feature-detection helpers and platform plumbing now ship as a `.ts` file with native type signatures. JSDoc was already exhaustive, so the conversion is mostly mechanical — `@param {Type}` blocks become parameter annotations and `@type {Type}` constants get TS-inferred. Non-standard / legacy browser surfaces (`Document.mozFullScreenEnabled`, `Navigator.standalone` / `browserLanguage` / `userLanguage`, iOS-only `DeviceOrientationEvent.requestPermission`, deprecated `Screen.lockOrientation`, `webkitAudioContext`) are typed via narrow local intersection types declared at the top of the file. Behavioural parity verified against the full 3975-test suite; downstream call sites (`pointerevent.ts`, `application.ts`, `resize.ts`, `header.ts`, etc.) are unchanged thanks to bundler-resolution rewriting `.js` imports to `.ts` source. One small correctness improvement fell out of the conversion: `onDeviceMotion` now guards against `accelerationIncludingGravity === null` rather than crashing.
-- **`Application#requestFullscreen` / `Application#exitFullscreen`** — fullscreen control finally has app-instance context. Defaults to fullscreening the app's `parentElement` (so the canvas + any sibling HUD go fullscreen together); accepts an optional `Element` override. The two examples that wire `F` → toggle fullscreen (platformer + platformer-matter) migrate to the new API. No deprecated `getParent()` / global-game lookup involved — the canonical fullscreen path now reaches the canvas through the Application it was created on.
+- **`Application#requestFullscreen` / `Application#exitFullscreen` / `Application#isFullscreen`** — fullscreen control finally has app-instance context. `requestFullscreen` defaults to the app's `parentElement` (the container the canvas was appended into — `getParentElement()`), so the canvas plus any sibling HUD / overlay markup inside that container go fullscreen together; accepts an optional `Element` override. `isFullscreen` is the matching probe (delegates to the underlying document check). The two examples that wire `F` → toggle fullscreen (platformer + platformer-matter) migrate to the new API. No deprecated `getParent()` / global-game lookup involved — the canonical fullscreen path now reaches the canvas through the Application it was created on.
 
 ### Deprecated
 - **`device.requestFullscreen()` / `device.exitFullscreen()`** (#1467, since 19.7.0). Use `app.requestFullscreen()` / `app.exitFullscreen()` instead. The device wrappers still work for backwards compat through the 19.x line but rely on the deprecated global-game canvas lookup (`getParent()` → `game.getParentElement()`, deprecated since 18.3.0).

packages/melonjs/src/application/application.ts

@@ -656,23 +656,34 @@ export default class Application {
 	}
 
 	/**
-	 * Trigger a fullscreen request for this application. Defaults to fullscreening
-	 * the canvas parent element, so the rendered viewport (and any sibling HUD)
-	 * goes fullscreen together.
-	 * @param element - optional element to fullscreen instead of the canvas parent
+	 * Returns `true` if the browser/device is currently in fullscreen mode.
+	 * @category Application
+	 */
+	isFullscreen(): boolean {
+		// eslint-disable-next-line @typescript-eslint/no-deprecated -- device.isFullscreen is the canonical probe; only the public API surface moved
+		return device.isFullscreen();
+	}
+
+	/**
+	 * Trigger a fullscreen request for this application. Defaults to this
+	 * application's `parentElement` (the container the canvas was appended
+	 * into — see {@link Application#getParentElement}), so the canvas and
+	 * any sibling HUD / overlay markup inside that container go fullscreen
+	 * together.
+	 * @param element - optional element to fullscreen instead of `this.parentElement`
 	 * @example
 	 * // bind F to toggle fullscreen
 	 * me.input.bindKey(me.input.KEY.F, "toggleFullscreen");
 	 * me.event.on(me.event.KEYDOWN, (action) => {
 	 *   if (action === "toggleFullscreen") {
-	 *     if (!me.device.isFullscreen()) app.requestFullscreen();
+	 *     if (!app.isFullscreen()) app.requestFullscreen();
 	 *     else app.exitFullscreen();
 	 *   }
 	 * });
 	 * @category Application
 	 */
 	requestFullscreen(element?: Element): void {
-		if (device.hasFullscreenSupport && !device.isFullscreen()) {
+		if (device.hasFullscreenSupport && !this.isFullscreen()) {
 			const target = element ?? this.parentElement;
 			target.requestFullscreen?.().catch(console.error);
 		}
@@ -683,7 +694,7 @@ export default class Application {
 	 * @category Application
 	 */
 	exitFullscreen(): void {
-		if (device.hasFullscreenSupport && device.isFullscreen()) {
+		if (device.hasFullscreenSupport && this.isFullscreen()) {
 			globalThis.document.exitFullscreen().catch(console.error);
 		}
 	}

packages/melonjs/src/system/device.ts

@@ -18,9 +18,15 @@ type NavigatorLegacy = Navigator & {
 type DocumentLegacy = Document & {
 	mozFullScreenEnabled?: boolean;
 	mozFullScreenElement?: Element;
+	webkitFullscreenEnabled?: boolean;
+	webkitFullscreenElement?: Element;
+	msFullscreenEnabled?: boolean;
+	msFullscreenElement?: Element;
 };
 type ElementLegacy = Element & {
 	mozRequestFullScreen?: () => void;
+	webkitRequestFullscreen?: () => void;
+	msRequestFullscreen?: () => void;
 };
 type DeviceOrientationEventCtor = typeof DeviceOrientationEvent & {
 	requestPermission?: () => Promise<"granted" | "denied" | "default">;
@@ -185,10 +191,10 @@ export const hasAccelerometer = !!globalThis.DeviceMotionEvent;
 export const hasFullscreenSupport =
 	typeof globalThis.document !== "undefined" &&
 	!!(
-		prefixed(
-			"fullscreenEnabled",
-			globalThis.document as unknown as Record<string, unknown>,
-		) || (globalThis.document as DocumentLegacy).mozFullScreenEnabled
+		globalThis.document.fullscreenEnabled ||
+		(globalThis.document as DocumentLegacy).webkitFullscreenEnabled ||
+		(globalThis.document as DocumentLegacy).mozFullScreenEnabled ||
+		(globalThis.document as DocumentLegacy).msFullscreenEnabled
 	);
 
 /**
@@ -419,19 +425,18 @@ export function enableSwipe(enable?: boolean) {
 
 /**
  * Returns true if the browser/device is in full screen mode.
+ * @deprecated since 19.7.0 — use {@link Application#isFullscreen app.isFullscreen()} instead.
  * @category Application
  */
 export function isFullscreen() {
-	if (hasFullscreenSupport) {
-		return !!(
-			prefixed(
-				"fullscreenElement",
-				globalThis.document as unknown as Record<string, unknown>,
-			) || (globalThis.document as DocumentLegacy).mozFullScreenElement
-		);
-	} else {
-		return false;
-	}
+	if (!hasFullscreenSupport) return false;
+	const doc = globalThis.document as DocumentLegacy;
+	return !!(
+		doc.fullscreenElement ||
+		doc.webkitFullscreenElement ||
+		doc.mozFullScreenElement ||
+		doc.msFullscreenElement
+	);
 }
 
 /**
@@ -452,15 +457,19 @@ export function isFullscreen() {
  * @category Application
  */
 export function requestFullscreen(element?: Element) {
+	// eslint-disable-next-line @typescript-eslint/no-deprecated -- this whole function is the deprecated wrapper; internal use of the matching deprecated probe is fine
 	if (hasFullscreenSupport && !isFullscreen()) {
 		// eslint-disable-next-line @typescript-eslint/no-deprecated -- no Application context available from this static API
 		const target = (element ?? getParent()) as ElementLegacy;
-		const vendor = prefixed(
-			"requestFullscreen",
-			target as unknown as Record<string, unknown>,
-		) as (() => void) | undefined;
-		const request = vendor ?? target.mozRequestFullScreen;
-		request?.call(target);
+		/* eslint-disable @typescript-eslint/unbound-method -- `this` is restored explicitly via `.call(target)` below */
+		const request =
+			target.requestFullscreen ||
+			target.webkitRequestFullscreen ||
+			target.mozRequestFullScreen ||
+			target.msRequestFullscreen;
+		/* eslint-enable @typescript-eslint/unbound-method */
+		const result = request?.call(target);
+		if (result instanceof Promise) result.catch(console.error);
 	}
 }
 
@@ -469,6 +478,7 @@ export function requestFullscreen(element?: Element) {
  * @deprecated since 19.7.0 — use {@link Application#exitFullscreen app.exitFullscreen()} instead.
  */
 export const exitFullscreen = () => {
+	// eslint-disable-next-line @typescript-eslint/no-deprecated -- this whole function is the deprecated wrapper; internal use of the matching deprecated probe is fine
 	if (hasFullscreenSupport && isFullscreen()) {
 		document.exitFullscreen().catch(console.error);
 	}