@vpmedia/phaser 1.112.0 → 1.113.0

package/src/phaser/core/device.ts

@@ -1,37 +1,32 @@
 export class Device {
-  desktop!: boolean;
-  iOS!: boolean;
-  android!: boolean;
-  chromeOS!: boolean;
-  linux!: boolean;
-  macOS!: boolean;
-  windows!: boolean;
-  windowsPhone!: boolean;
-  canvas!: boolean;
-  touch!: boolean;
-  mspointer!: boolean;
-  wheelEvent!: string | null;
-  chrome!: boolean;
-  firefox!: boolean;
-  edge!: boolean;
-  safari!: boolean;
-  fullscreen!: boolean;
-  requestFullscreen!: string;
-  cancelFullscreen!: string;
-  fullscreenKeyboard!: boolean;
-  noAudioFormat!: boolean;
-  supportedAudioFormats!: Record<string, boolean>;
-  supportedImageFormats!: Record<string, boolean>;
+  public desktop: boolean = false;
+  public iOS: boolean = false;
+  public android: boolean = false;
+  public chromeOS: boolean = false;
+  public linux: boolean = false;
+  public macOS!: boolean;
+  public windows!: boolean;
+  public windowsPhone!: boolean;
+  public canvas!: boolean;
+  public touch!: boolean;
+  public mspointer!: boolean;
+  public wheelEvent!: string | null;
+  public chrome!: boolean;
+  public firefox!: boolean;
+  public edge!: boolean;
+  public safari!: boolean;
+  public fullscreen!: boolean;
+  public requestFullscreen!: string;
+  public cancelFullscreen!: string;
+  public fullscreenKeyboard!: boolean;
+  public noAudioFormat!: boolean;
+  public supportedAudioFormats!: Record<string, boolean>;
+  public supportedImageFormats!: Record<string, boolean>;
   /**
    * Creates a new Device instance.
    * This class provides information about the current device and browser capabilities.
    */
-  constructor() {
-    this.desktop = false;
-    this.iOS = false;
-    this.android = false;
-    this.chromeOS = false;
-    this.linux = false;
+  public constructor() {
     this.macOS = false;
     this.windows = false;
     this.windowsPhone = false;

package/src/phaser/core/device_util.ts

@@ -9,9 +9,7 @@ const logger = getLogger(['phaser', 'device']);
  * @param {string} type - The audio format type to check.
  * @returns {boolean} True if the device can play this audio format, false otherwise.
  */
-export const canPlayAudio = (device: Device, type: string) => {
-  return device.supportedAudioFormats[type] === true;
-};
+export const canPlayAudio = (device: Device, type: string) => device.supportedAudioFormats[type] === true;
 
 /**
  * Detect the operating system of the device.
@@ -19,19 +17,19 @@ export const canPlayAudio = (device: Device, type: string) => {
  */
 export const checkOS = (device: Device) => {
   const ua = navigator.userAgent;
-  if (/Android/.test(ua)) {
+  if (ua.includes('Android')) {
     device.android = true;
-  } else if (/CrOS/.test(ua)) {
+  } else if (ua.includes('CrOS')) {
     device.chromeOS = true;
   } else if (/iP[ao]d|iPhone/i.test(ua)) {
     device.iOS = true;
   } else if (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1) {
     device.iOS = true;
-  } else if (/Mac OS/.test(ua)) {
+  } else if (ua.includes('Mac OS')) {
     device.macOS = true;
-  } else if (/Linux/.test(ua)) {
+  } else if (ua.includes('Linux')) {
     device.linux = true;
-  } else if (/Windows/.test(ua)) {
+  } else if (ua.includes('Windows')) {
     device.windows = true;
   }
   if (/Windows Phone/i.test(ua) || /IEMobile/i.test(ua)) {
@@ -57,7 +55,7 @@ export const checkOS = (device: Device) => {
 export const checkInput = (device: Device) => {
   if (
     'ontouchstart' in document.documentElement ||
-    (window.navigator.maxTouchPoints && window.navigator.maxTouchPoints >= 1)
+    (globalThis.navigator.maxTouchPoints && globalThis.navigator.maxTouchPoints >= 1)
   ) {
     device.touch = true;
   }
@@ -65,7 +63,7 @@ export const checkInput = (device: Device) => {
   //   device.mspointer = true;
   // }
   // See https://developer.mozilla.org/en-US/docs/Web/Events/wheel
-  if ('onwheel' in window || 'WheelEvent' in window) {
+  if ('onwheel' in globalThis || 'WheelEvent' in globalThis) {
     device.wheelEvent = 'wheel';
   }
 };
@@ -97,23 +95,23 @@ export const checkFullScreenSupport = (device: Device) => {
   ];
   const element = document.createElement('div');
   const elementApi = element as unknown as Record<string, unknown>;
-  for (let i = 0; i < fs.length; i += 1) {
-    if (elementApi[fs[i]]) {
+  for (const name of fs) {
+    if (elementApi[name]) {
       device.fullscreen = true;
-      device.requestFullscreen = fs[i];
+      device.requestFullscreen = name;
       break;
     }
   }
   if (device.fullscreen) {
     const documentApi = document as unknown as Record<string, unknown>;
-    for (let i = 0; i < cfs.length; i += 1) {
-      if (documentApi[cfs[i]]) {
-        device.cancelFullscreen = cfs[i];
+    for (const name of cfs) {
+      if (documentApi[name]) {
+        device.cancelFullscreen = name;
         break;
       }
     }
-    // @ts-ignore
-    if (window.Element && Element.ALLOW_KEYBOARD_INPUT) {
+    // @ts-expect-error
+    if (globalThis.Element && Element.ALLOW_KEYBOARD_INPUT) {
       device.fullscreenKeyboard = true;
     }
   }
@@ -159,7 +157,7 @@ export const canPlayType = (audioElement: HTMLAudioElement, type: string) => {
  * @returns {boolean} True if the media source type is supported, false otherwise.
  */
 export const isMediaSourceTypeSupported = (type: string) => {
-  if ('MediaSource' in window) {
+  if ('MediaSource' in globalThis) {
     try {
       return MediaSource.isTypeSupported(type);
     } catch (error) {
@@ -215,8 +213,8 @@ export const checkImage = (device: Device) => {
     const avif = new Image();
     avif.src =
       'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=';
-    avif.onload = function () {
-      device.supportedImageFormats.avif = true;
+    avif.onload = function onload() {
+      device.supportedImageFormats['avif'] = true;
     };
   } catch (error) {
     const typedError = error instanceof Error ? error : new Error(String(error));
@@ -225,8 +223,8 @@ export const checkImage = (device: Device) => {
   try {
     const webp = new Image();
     webp.src = 'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
-    webp.onload = function () {
-      device.supportedImageFormats.webp = true;
+    webp.onload = function onload() {
+      device.supportedImageFormats['webp'] = true;
     };
   } catch (error) {
     const typedError = error instanceof Error ? error : new Error(String(error));
@@ -252,6 +250,4 @@ export const initialize = (device: Device) => {
  * Create a new Device instance.
  * @returns {Device} A new Device instance.
  */
-export const createDevice = () => {
-  return new Device();
-};
+export const createDevice = () => new Device();

package/src/phaser/core/dom.ts

@@ -1,27 +1,28 @@
 import { Point } from '../geom/point.js';
+import type { Device } from './device.js';
 
 class VisualBoundsDesktopRectangle {
   /**
    * Gets the horizontal scroll position of the window.
    * @returns {number} The horizontal scroll position in pixels.
    */
-  get x() {
-    return window && 'pageXOffset' in window ? window.pageXOffset : document.documentElement.scrollLeft;
+  public get x() {
+    return globalThis && 'pageXOffset' in globalThis ? window.pageXOffset : document.documentElement.scrollLeft;
   }
 
   /**
    * Gets the vertical scroll position of the window.
    * @returns {number} The vertical scroll position in pixels.
    */
-  get y() {
-    return window && 'pageYOffset' in window ? window.pageYOffset : document.documentElement.scrollTop;
+  public get y() {
+    return globalThis && 'pageYOffset' in globalThis ? window.pageYOffset : document.documentElement.scrollTop;
   }
 
   /**
    * Gets the width of the window.
    * @returns {number} The width of the window in pixels.
    */
-  get width() {
+  public get width() {
     return Math.max(window.innerWidth, document.documentElement.clientWidth);
   }
 
@@ -29,7 +30,7 @@ class VisualBoundsDesktopRectangle {
    * Gets the height of the window.
    * @returns {number} The height of the window in pixels.
    */
-  get height() {
+  public get height() {
     return Math.max(window.innerHeight, document.documentElement.clientHeight);
   }
 }
@@ -39,23 +40,19 @@ class LayoutBoundsDesktopRectangle {
    * Gets the horizontal scroll position of the window.
    * @returns {number} The horizontal scroll position in pixels.
    */
-  get x() {
-    return 0;
-  }
+  public readonly x = 0;
 
   /**
    * Gets the vertical scroll position of the window.
    * @returns {number} The vertical scroll position in pixels.
    */
-  get y() {
-    return 0;
-  }
+  public readonly y = 0;
 
   /**
    * Gets the width of the window.
    * @returns {number} The width of the window in pixels.
    */
-  get width() {
+  public get width() {
     return Math.max(window.innerWidth, document.documentElement.clientWidth);
   }
 
@@ -63,7 +60,7 @@ class LayoutBoundsDesktopRectangle {
    * Gets the height of the window.
    * @returns {number} The height of the window in pixels.
    */
-  get height() {
+  public get height() {
     return Math.max(window.innerHeight, document.documentElement.clientHeight);
   }
 }
@@ -73,23 +70,23 @@ class VisualBoundsRectangle {
    * Gets the horizontal scroll position of the document.
    * @returns {number} The horizontal scroll position in pixels.
    */
-  get x() {
-    return window && 'pageXOffset' in window ? window.pageXOffset : document.documentElement.scrollLeft;
+  public get x() {
+    return globalThis && 'pageXOffset' in globalThis ? window.pageXOffset : document.documentElement.scrollLeft;
   }
 
   /**
    * Gets the vertical scroll position of the document.
    * @returns {number} The vertical scroll position in pixels.
    */
-  get y() {
-    return window && 'pageYOffset' in window ? window.pageYOffset : document.documentElement.scrollTop;
+  public get y() {
+    return globalThis && 'pageYOffset' in globalThis ? window.pageYOffset : document.documentElement.scrollTop;
   }
 
   /**
    * TBD.
    * @returns {number} TBD.
    */
-  get width() {
+  public get width() {
     return window.innerWidth;
   }
 
@@ -97,7 +94,7 @@ class VisualBoundsRectangle {
    * TBD.
    * @returns {number} TBD.
    */
-  get height() {
+  public get height() {
     return window.innerHeight;
   }
 }
@@ -107,23 +104,19 @@ class LayoutBoundsRectangle {
    * TBD.
    * @returns {number} TBD.
    */
-  get x() {
-    return 0;
-  }
+  public readonly x = 0;
 
   /**
    * TBD.
    * @returns {number} TBD.
    */
-  get y() {
-    return 0;
-  }
+  public readonly y = 0;
 
   /**
    * TBD.
    * @returns {number} TBD.
    */
-  get width() {
+  public get width() {
     const a = document.documentElement.clientWidth;
     const b = window.innerWidth;
     return a < b ? b : a; // max
@@ -133,7 +126,7 @@ class LayoutBoundsRectangle {
    * TBD.
    * @returns {number} TBD.
    */
-  get height() {
+  public get height() {
     const a = document.documentElement.clientHeight;
     const b = window.innerHeight;
     return a < b ? b : a; // max
@@ -148,23 +141,19 @@ class DocumentBoundsRectangle {
    * TBD.
    * @returns {number} TBD.
    */
-  get x() {
-    return 0;
-  }
+  public readonly x = 0;
 
   /**
    * TBD.
    * @returns {number} TBD.
    */
-  get y() {
-    return 0;
-  }
+  public readonly y = 0;
 
   /**
    * TBD.
    * @returns {number} TBD.
    */
-  get width() {
+  public get width() {
     const d = document.documentElement;
     return Math.max(d.clientWidth, d.offsetWidth, d.scrollWidth);
   }
@@ -173,25 +162,25 @@ class DocumentBoundsRectangle {
    * TBD.
    * @returns {number} TBD.
    */
-  get height() {
+  public get height() {
     const d = document.documentElement;
     return Math.max(d.clientHeight, d.offsetHeight, d.scrollHeight);
   }
 }
 
 export class DOM {
-  treatAsDesktop: boolean;
-  visualBounds: any;
-  layoutBounds: any;
-  documentBounds: any;
-  scrollXProvider: () => number;
-  scrollYProvider: () => number;
+  public treatAsDesktop: boolean;
+  public visualBounds: any;
+  public layoutBounds: any;
+  public documentBounds: any;
+  public scrollXProvider: () => number;
+  public scrollYProvider: () => number;
 
   /**
    * TBD.
-   * @param {import('./device.js').Device} device - TBD.
+   * @param {Device} device - TBD.
    */
-  constructor(device: import('./device.js').Device) {
+  public constructor(device: Device) {
     this.treatAsDesktop =
       device.desktop &&
       document.documentElement.clientWidth <= window.innerWidth &&
@@ -200,9 +189,9 @@ export class DOM {
     this.layoutBounds = this.treatAsDesktop ? new LayoutBoundsDesktopRectangle() : new LayoutBoundsRectangle();
     this.documentBounds = new DocumentBoundsRectangle();
     this.scrollXProvider =
-      window && 'pageXOffset' in window ? () => window.pageXOffset : () => document.documentElement.scrollLeft;
+      globalThis && 'pageXOffset' in globalThis ? () => window.pageXOffset : () => document.documentElement.scrollLeft;
     this.scrollYProvider =
-      window && 'pageYOffset' in window ? () => window.pageYOffset : () => document.documentElement.scrollTop;
+      globalThis && 'pageYOffset' in globalThis ? () => window.pageYOffset : () => document.documentElement.scrollTop;
   }
 
   /**
@@ -211,13 +200,13 @@ export class DOM {
    * @param {Point} point - Optional Point object to store the result.
    * @returns {Point} The offset position of the element.
    */
-  getOffset(element: HTMLCanvasElement, point: Point | null = null) {
-    point = point || new Point();
+  public getOffset(element: HTMLCanvasElement, point: Point | null = null) {
+    point = point ?? new Point();
     const box = element.getBoundingClientRect();
     const scrollTop = this.scrollY;
     const scrollLeft = this.scrollX;
-    const clientTop = document.documentElement.clientTop;
-    const clientLeft = document.documentElement.clientLeft;
+    const { clientTop } = document.documentElement;
+    const { clientLeft } = document.documentElement;
     point.x = box.left + scrollLeft - clientLeft;
     point.y = box.top + scrollTop - clientTop;
     return point;
@@ -229,8 +218,8 @@ export class DOM {
    * @param {number} cushion - Optional padding to add around the element.
    * @returns {boolean} True if bounds were successfully retrieved, false otherwise.
    */
-  getBounds(element: HTMLCanvasElement, cushion: number = 0) {
-    element = element && !element.nodeType ? (element as unknown as HTMLCanvasElement[])[0] : element;
+  public getBounds(element: HTMLCanvasElement, cushion = 0) {
+    element = element && !element.nodeType ? (element as unknown as HTMLCanvasElement[])[0]! : element;
     if (!element || element.nodeType !== 1) {
       return false;
     }
@@ -243,7 +232,7 @@ export class DOM {
    * @param {number} cushion - Optional padding to add around the rectangle.
    * @returns {{width: number, height: number, left: number, right: number, top: number, bottom: number}} The calibrated rectangle.
    */
-  calibrate(coords: DOMRect, cushion: number = 0) {
+  public calibrate(coords: DOMRect, cushion = 0) {
     const output = {
       width: 0,
       height: 0,
@@ -262,9 +251,9 @@ export class DOM {
    * @param {string} primaryFallback - The fallback method to use if screen orientation API is not available.
    * @returns {string} The screen orientation ('portrait-primary', 'landscape-primary', etc.).
    */
-  getScreenOrientation(primaryFallback: string | null = null) {
-    const screen = window.screen;
-    // @ts-ignore
+  public getScreenOrientation(primaryFallback: string | null = null) {
+    const { screen } = globalThis;
+    // @ts-expect-error
     const orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
     if (orientation && typeof orientation.type === 'string') {
       // Screen Orientation API specification
@@ -279,13 +268,13 @@ export class DOM {
       return screen.height > screen.width ? PORTRAIT : LANDSCAPE;
     } else if (primaryFallback === 'viewport') {
       return this.visualBounds.height > this.visualBounds.width ? PORTRAIT : LANDSCAPE;
-    } else if (primaryFallback === 'window.orientation' && typeof window.orientation === 'number') {
+    } else if (primaryFallback === 'window.orientation' && typeof globalThis.orientation === 'number') {
       // This may change by device based on "natural" orientation.
-      return window.orientation === 0 || window.orientation === 180 ? PORTRAIT : LANDSCAPE;
-    } else if (window.matchMedia) {
-      if (window.matchMedia('(orientation: portrait)').matches) {
+      return globalThis.orientation === 0 || globalThis.orientation === 180 ? PORTRAIT : LANDSCAPE;
+    } else if (globalThis.matchMedia) {
+      if (globalThis.matchMedia('(orientation: portrait)').matches) {
         return PORTRAIT;
-      } else if (window.matchMedia('(orientation: landscape)').matches) {
+      } else if (globalThis.matchMedia('(orientation: landscape)').matches) {
         return LANDSCAPE;
       }
     }
@@ -296,7 +285,7 @@ export class DOM {
    * Gets the horizontal scroll position of the window.
    * @returns {number} The horizontal scroll position in pixels.
    */
-  get scrollX() {
+  public get scrollX() {
     return this.scrollXProvider();
   }
 
@@ -304,7 +293,7 @@ export class DOM {
    * Gets the vertical scroll position of the window.
    * @returns {number} The vertical scroll position in pixels.
    */
-  get scrollY() {
+  public get scrollY() {
     return this.scrollYProvider();
   }
 
@@ -312,7 +301,7 @@ export class DOM {
    * Gets the width of the window's client area.
    * @returns {number} The width of the client area in pixels.
    */
-  get clientWidth() {
+  public get clientWidth() {
     return Math.max(window.innerWidth, document.documentElement.clientWidth);
   }
 
@@ -320,7 +309,7 @@ export class DOM {
    * Gets the height of the window's client area.
    * @returns {number} The height of the client area in pixels.
    */
-  get clientHeight() {
+  public get clientHeight() {
     return Math.max(window.innerHeight, document.documentElement.clientHeight);
   }
 }