@vpmedia/phaser 1.123.0 → 1.125.0

package/src/phaser/core/dom.ts

@@ -1,4 +1,14 @@
 import { Point } from '../geom/point.js';
+
+/** An element rectangle after the cushion has been applied to every edge. */
+export type CalibratedBounds = {
+  width: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+};
 import type { Device } from './device.js';
 
 class VisualBoundsDesktopRectangle {
@@ -7,7 +17,7 @@ class VisualBoundsDesktopRectangle {
    * @returns {number} The horizontal scroll position in pixels.
    */
   public get x(): number {
-    return globalThis && 'pageXOffset' in globalThis ? window.pageXOffset : document.documentElement.scrollLeft;
+    return 'pageXOffset' in globalThis ? window.pageXOffset : document.documentElement.scrollLeft;
   }
 
   /**
@@ -15,7 +25,7 @@ class VisualBoundsDesktopRectangle {
    * @returns {number} The vertical scroll position in pixels.
    */
   public get y(): number {
-    return globalThis && 'pageYOffset' in globalThis ? window.pageYOffset : document.documentElement.scrollTop;
+    return 'pageYOffset' in globalThis ? window.pageYOffset : document.documentElement.scrollTop;
   }
 
   /**
@@ -71,7 +81,7 @@ class VisualBoundsRectangle {
    * @returns {number} The horizontal scroll position in pixels.
    */
   public get x(): number {
-    return globalThis && 'pageXOffset' in globalThis ? window.pageXOffset : document.documentElement.scrollLeft;
+    return 'pageXOffset' in globalThis ? window.pageXOffset : document.documentElement.scrollLeft;
   }
 
   /**
@@ -79,7 +89,7 @@ class VisualBoundsRectangle {
    * @returns {number} The vertical scroll position in pixels.
    */
   public get y(): number {
-    return globalThis && 'pageYOffset' in globalThis ? window.pageYOffset : document.documentElement.scrollTop;
+    return 'pageYOffset' in globalThis ? window.pageYOffset : document.documentElement.scrollTop;
   }
 
   /**
@@ -170,9 +180,9 @@ class DocumentBoundsRectangle {
 
 export class DOM {
   public treatAsDesktop: boolean;
-  public visualBounds: any;
-  public layoutBounds: any;
-  public documentBounds: any;
+  public visualBounds: VisualBoundsDesktopRectangle | VisualBoundsRectangle;
+  public layoutBounds: LayoutBoundsDesktopRectangle | LayoutBoundsRectangle;
+  public documentBounds: DocumentBoundsRectangle;
   public scrollXProvider: () => number;
   public scrollYProvider: () => number;
 
@@ -189,13 +199,11 @@ export class DOM {
     this.layoutBounds = this.treatAsDesktop ? new LayoutBoundsDesktopRectangle() : new LayoutBoundsRectangle();
     this.documentBounds = new DocumentBoundsRectangle();
     this.scrollXProvider =
-      globalThis && 'pageXOffset' in globalThis
+      'pageXOffset' in globalThis
         ? (): number => window.pageXOffset
         : (): number => document.documentElement.scrollLeft;
     this.scrollYProvider =
-      globalThis && 'pageYOffset' in globalThis
-        ? (): number => window.pageYOffset
-        : (): number => document.documentElement.scrollTop;
+      'pageYOffset' in globalThis ? (): number => window.pageYOffset : (): number => document.documentElement.scrollTop;
   }
 
   /**
@@ -222,12 +230,13 @@ export class DOM {
    * @param {number} cushion - Optional padding to add around the element.
    * @returns {boolean} True if bounds were successfully retrieved, false otherwise.
    */
-  public getBounds(element: HTMLCanvasElement, cushion = 0) {
-    element = element && !element.nodeType ? (element as unknown as HTMLCanvasElement[])[0]! : element;
-    if (!element || element.nodeType !== 1) {
+  public getBounds(element: HTMLCanvasElement, cushion = 0): CalibratedBounds | false {
+    // a jQuery-style wrapper was accepted here historically, so unwrap the first entry of one
+    const target = element.nodeType === undefined ? (element as unknown as HTMLCanvasElement[])[0] : element;
+    if (target?.nodeType !== 1) {
       return false;
     }
-    return this.calibrate(element.getBoundingClientRect(), cushion);
+    return this.calibrate(target.getBoundingClientRect(), cushion);
   }
 
   /**
@@ -236,7 +245,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.
    */
-  public calibrate(coords: DOMRect, cushion = 0) {
+  public calibrate(coords: DOMRect, cushion = 0): CalibratedBounds {
     const output = {
       width: 0,
       height: 0,
@@ -256,16 +265,21 @@ export class DOM {
    * @returns {string} The screen orientation ('portrait-primary', 'landscape-primary', etc.).
    */
   public getScreenOrientation(primaryFallback: string | null = null): OrientationType {
-    const { screen } = globalThis;
-    // @ts-expect-error the prefixed orientation properties predate the standard one and are absent from lib.dom
-    const orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
-    if (orientation && typeof orientation.type === 'string') {
-      // Screen Orientation API specification
-      return orientation.type;
-    } else if (typeof orientation === 'string') {
+    // the prefixed orientation properties predate the standard one and are absent from lib.dom
+    const screen = globalThis.screen as Screen & {
+      mozOrientation?: string;
+      msOrientation?: string;
+    };
+    const orientation: ScreenOrientation | string | undefined =
+      screen.orientation ?? screen.mozOrientation ?? screen.msOrientation;
+    if (typeof orientation === 'string') {
       // moz/ms-orientation are strings
       return orientation;
     }
+    if (typeof orientation?.type === 'string') {
+      // Screen Orientation API specification
+      return orientation.type;
+    }
     const PORTRAIT = 'portrait-primary';
     const LANDSCAPE = 'landscape-primary';
     if (primaryFallback === 'screen') {
@@ -278,7 +292,7 @@ export class DOM {
     if (primaryFallback === 'window.orientation' && typeof legacyOrientation === 'number') {
       // This may change by device based on "natural" orientation.
       return legacyOrientation === 0 || legacyOrientation === 180 ? PORTRAIT : LANDSCAPE;
-    } else if (globalThis.matchMedia) {
+    } else if (typeof globalThis.matchMedia === 'function') {
       if (globalThis.matchMedia('(orientation: portrait)').matches) {
         return PORTRAIT;
       } else if (globalThis.matchMedia('(orientation: landscape)').matches) {

package/src/phaser/core/factory.ts

@@ -6,6 +6,7 @@ import { Image } from '../display/image.js';
 import { Text } from '../display/text.js';
 import type { Game } from './game.js';
 import type { SignalListener } from './signal.js';
+import type { TextStyle } from '../display/text.js';
 
 export class GameObjectFactory {
   public game!: Game;
@@ -26,7 +27,13 @@ export class GameObjectFactory {
    * @param {Group} group - The parent group for the image.
    * @returns {Image} The created Image object.
    */
-  public image(x: number, y: number, key: string, frame: any, group: Group | null = null): Image {
+  public image(
+    x: number,
+    y: number,
+    key: string,
+    frame: string | number | null = null,
+    group: Group | null = null
+  ): Image {
     const target = group ?? this.game.world;
     return target.add(new Image(this.game, x, y, key, frame));
   }
@@ -51,7 +58,7 @@ export class GameObjectFactory {
    * @param {Group | null} group - The parent group for the text.
    * @returns {Text} The created Text object.
    */
-  public text(x: number, y: number, text: any, style: any, group: Group | null = null): Text {
+  public text(x: number, y: number, text: string | number, style: TextStyle, group: Group | null = null): Text {
     const parent = group ?? this.game.world;
     return parent.add(new Text(this.game, x, y, text, style));
   }

package/src/phaser/core/frame_data.test.ts

@@ -10,89 +10,89 @@ const seed = (names: string[]): FrameData => {
   return data;
 };
 
-describe('FrameData', () => {
-  describe('addFrame', () => {
-    it('assigns a sequential index and registers the name', () => {
+describe('FrameData', (): void => {
+  describe('addFrame', (): void => {
+    it('assigns a sequential index and registers the name', (): void => {
       const data = seed(['a', 'b']);
-      expect(data._frames.map((frame) => frame.index)).toStrictEqual([0, 1]);
+      expect(data._frames.map((frame): number => frame.index)).toStrictEqual([0, 1]);
       expect(data._frameNames).toStrictEqual({ a: 0, b: 1 });
     });
 
-    it('does not register an empty name', () => {
+    it('does not register an empty name', (): void => {
       const data = new FrameData();
       data.addFrame(new Frame(0, 0, 0, 10, 10, ''));
       expect(data._frameNames).toStrictEqual({});
     });
   });
 
-  describe('getFrame', () => {
-    it('returns the frame at the index', () => {
+  describe('getFrame', (): void => {
+    it('returns the frame at the index', (): void => {
       const data = seed(['a', 'b', 'c']);
       expect(data.getFrame(1).name).toBe('b');
     });
 
-    it('falls back to the first frame when the index is out of range', () => {
+    it('falls back to the first frame when the index is out of range', (): void => {
       const data = seed(['a', 'b']);
       expect(data.getFrame(9).name).toBe('a');
     });
   });
 
-  describe('getFrameByName', () => {
-    it('finds a registered frame', () => {
+  describe('getFrameByName', (): void => {
+    it('finds a registered frame', (): void => {
       const data = seed(['a', 'b']);
       expect(data.getFrameByName('b')?.index).toBe(1);
     });
 
-    it('returns null for an unknown name', () => {
+    it('returns null for an unknown name', (): void => {
       const data = seed(['a']);
       expect(data.getFrameByName('missing')).toBeNull();
     });
 
-    it('returns null when the name maps to a frame that is gone', () => {
+    it('returns null when the name maps to a frame that is gone', (): void => {
       const data = seed(['a']);
       data._frames.length = 0;
       expect(data.getFrameByName('a')).toBeNull();
     });
   });
 
-  describe('checkFrameName', () => {
-    it('distinguishes known from unknown names', () => {
+  describe('checkFrameName', (): void => {
+    it('distinguishes known from unknown names', (): void => {
       const data = seed(['a']);
       expect(data.checkFrameName('a')).toBe(true);
       expect(data.checkFrameName('b')).toBe(false);
     });
   });
 
-  describe('getFrameRange', () => {
-    it('collects the inclusive range', () => {
+  describe('getFrameRange', (): void => {
+    it('collects the inclusive range', (): void => {
       const data = seed(['a', 'b', 'c', 'd']);
-      expect(data.getFrameRange(1, 2).map((frame) => frame.name)).toStrictEqual(['b', 'c']);
+      expect(data.getFrameRange(1, 2).map((frame): string => frame.name)).toStrictEqual(['b', 'c']);
     });
 
-    it('appends into a supplied output array', () => {
+    it('appends into a supplied output array', (): void => {
       const data = seed(['a', 'b']);
       const output = [data.getFrame(0)];
       expect(data.getFrameRange(1, 1, output)).toHaveLength(2);
     });
   });
 
-  describe('getFrameIndexes', () => {
-    it('maps numeric indexes through', () => {
+  describe('getFrameIndexes', (): void => {
+    it('maps numeric indexes through', (): void => {
       const data = seed(['a', 'b', 'c']);
       expect(data.getFrameIndexes([0, 2])).toStrictEqual([0, 2]);
     });
 
-    it('maps names when numeric indexing is off', () => {
+    it('maps names when numeric indexing is off', (): void => {
       const data = seed(['a', 'b', 'c']);
       expect(data.getFrameIndexes(['c', 'a'], false)).toStrictEqual([2, 0]);
     });
 
-    it('skips names that do not resolve', () => {
+    it('skips names that do not resolve', (): void => {
       const data = seed(['a']);
       expect(data.getFrameIndexes(['a', 'missing'], false)).toStrictEqual([0]);
     });
 
-    it('returns every index when given no frames', () => {
+    it('returns every index when given no frames', (): void => {
       const data = seed(['a', 'b', 'c']);
       expect(data.getFrameIndexes([])).toStrictEqual([0, 1, 2]);
     });

package/src/phaser/core/frame_data.ts

@@ -20,10 +20,7 @@ export class FrameData {
   }
 
   public getFrame(index = 0): Frame {
-    if (index >= this._frames.length) {
-      index = 0;
-    }
-    return this._frames[index]!;
+    return this._frames[index >= this._frames.length ? 0 : index]!;
   }
 
   public getFrameByName(name: string): Frame | null {
@@ -59,7 +56,7 @@ export class FrameData {
     output: number[] | null = null
   ): number[] {
     const result = output ?? [];
-    if (frames && frames.length > 0) {
+    if (frames.length > 0) {
       for (const f of frames) {
         if (useNumericIndex && this._frames[f as number]) {
           result.push(this._frames[f as number]!.index);

package/src/phaser/core/game.ts

@@ -165,10 +165,10 @@ export class Game {
     this.input.boot();
     this.sound.boot();
     this.state.boot();
-    if (window.focus) {
+    if (typeof window.focus === 'function') {
       window.focus();
     }
-    if (!this.config.isSkipTicker) {
+    if (this.config.isSkipTicker !== true) {
       this.raf = new RequestAnimationFrame(this);
       this.raf.start();
     }
@@ -180,7 +180,7 @@ export class Game {
    */
   public createRendererCanvas(): void {
     this.logger.info('createRendererCanvas');
-    if (this.canvas) {
+    if (this.canvas as HTMLCanvasElement | undefined) {
       removeFromDOM(this.canvas);
     }
     this.canvas = this.config.canvas ?? create(this, this.width, this.height, this.config.canvasID, true);
@@ -212,10 +212,10 @@ export class Game {
         isWebGlReady = true;
       } catch (error) {
         isWebGlReady = false;
-        if (globalThis.PhaserRegistry?.GL_PROGRAM_INFO_LOG) {
+        if (globalThis.PhaserRegistry?.GL_PROGRAM_INFO_LOG != null) {
           this.logger.warn('WebGL program info', { log: globalThis.PhaserRegistry.GL_PROGRAM_INFO_LOG });
         }
-        if (globalThis.PhaserRegistry?.GL_SHADER_INFO_LOG) {
+        if (globalThis.PhaserRegistry?.GL_SHADER_INFO_LOG != null) {
           this.logger.warn('WebGL shader info', { log: globalThis.PhaserRegistry.GL_SHADER_INFO_LOG });
         }
         const typedError = error instanceof Error ? error : new Error(String(error));
@@ -229,7 +229,7 @@ export class Game {
       if (this.contextRestoredBinded) {
         this.canvas.removeEventListener('webglcontextlost', this.contextRestoredBinded, false);
       }
-      if (this.renderer) {
+      if (this.renderer as CanvasRenderer | WebGLRenderer | undefined) {
         this.renderer.destroy();
       }
       this.createRendererCanvas();
@@ -278,7 +278,7 @@ export class Game {
     this.parseConfigElement(config, 'renderType', RENDER_AUTO);
     this.parseConfigElement(config, 'isForceDisabledAudio', false);
     this.parseConfigElement(config, 'maxParallelDownloads', 16);
-    if (config.parent) {
+    if (config.parent !== undefined) {
       this.parent = config.parent;
     }
     this.state = new SceneManager(this, config.state ?? null);
@@ -291,7 +291,7 @@ export class Game {
   public contextLost(event: Event): void {
     this.logger.info('contextLost', { type: event.type });
     event.preventDefault();
-    if (this.renderer) {
+    if (this.renderer as CanvasRenderer | WebGLRenderer | undefined) {
       this.renderer.contextLost = true;
     }
   }
@@ -302,7 +302,7 @@ export class Game {
    */
   public contextRestored(event: Event): void {
     this.logger.info('contextRestored', { type: event.type });
-    if (this.renderer) {
+    if (this.renderer as CanvasRenderer | WebGLRenderer | undefined) {
       this.renderer.initContext(this);
       // This.cache.clearGLTextures();
       this.renderer.contextLost = false;
@@ -340,10 +340,10 @@ export class Game {
     this.logger.info('destroy');
     this.isPaused = true;
 
-    if (!this.cache) {
+    if (!(this.cache as Cache | undefined)) {
       return;
     }
-    if (this.raf) {
+    if (this.raf as RequestAnimationFrame | undefined) {
       this.raf.stop();
     }
 
@@ -354,7 +354,7 @@ export class Game {
     this.stage.destroy();
     this.input.destroy();
 
-    if (this.canvas) {
+    if (this.canvas as HTMLCanvasElement | undefined) {
       if (this.contextLostBinded) {
         this.canvas.removeEventListener('webglcontextlost', this.contextLostBinded, false);
       }

package/src/phaser/core/input.ts

@@ -14,6 +14,7 @@ import type { Game } from './game.js';
 import type { DisplayObject } from '../display/display_object.js';
 import type { InputEvent } from './input_event.js';
 import type { CandidateHandler, PointerMoveCallback } from './callback.js';
+import type { InputHandler } from './input_handler.js';
 
 const MAX_POINTERS = 10;
 
@@ -50,7 +51,7 @@ export class Input {
   public pointer7!: Pointer | null;
   public pointer8!: Pointer | null;
   public pointer9!: Pointer | null;
-  public pointer10!: any;
+  public pointer10!: Pointer | null;
   public pointers!: Pointer[];
   public activePointer!: Pointer;
   public mousePointer!: Pointer;
@@ -63,7 +64,7 @@ export class Input {
   public onTap!: Signal;
   public onHold!: Signal;
   public minPriorityID!: number;
-  public interactiveItems!: ArraySet;
+  public interactiveItems!: ArraySet<InputHandler>;
   public _localPoint!: Point;
   public _pollCounter!: number;
   public _oldPosition!: Point;
@@ -118,7 +119,7 @@ export class Input {
     this.onTap = null!;
     this.onHold = null!;
     this.minPriorityID = 0;
-    this.interactiveItems = new ArraySet();
+    this.interactiveItems = new ArraySet<InputHandler>();
     this._localPoint = new Point();
     this._pollCounter = 0;
     this._oldPosition = null!;
@@ -291,7 +292,7 @@ export class Input {
    * @param {MouseEvent|TouchEvent|PointerEvent} event - TBD.
    * @returns {Pointer} TBD.
    */
-  public startPointer(event: InputEvent) {
+  public startPointer(event: InputEvent): Pointer | null {
     if (this.maxPointers >= 0 && this.countActivePointers(this.maxPointers) >= this.maxPointers) {
       return null;
     }
@@ -315,7 +316,7 @@ export class Input {
    * @param {MouseEvent|TouchEvent|PointerEvent} event - TBD.
    * @returns {Pointer} TBD.
    */
-  public updatePointer(event: InputEvent) {
+  public updatePointer(event: InputEvent): Pointer | null {
     if (this.pointer1.active && this.pointer1.identifier === event.identifier) {
       return this.pointer1.move(event);
     }
@@ -336,7 +337,7 @@ export class Input {
    * @param {MouseEvent|TouchEvent|PointerEvent} event - TBD.
    * @returns {Pointer} TBD.
    */
-  public stopPointer(event: InputEvent) {
+  public stopPointer(event: InputEvent): Pointer | null {
     if (this.pointer1.active && this.pointer1.identifier === event.identifier) {
       return this.pointer1.stop(event);
     }
@@ -442,7 +443,7 @@ export class Input {
     }
     this.getLocalPosition(displayObject, pointer, this._localPoint);
     localPoint.copyFrom(this._localPoint);
-    if (displayObject.hitArea && displayObject.hitArea.contains) {
+    if (displayObject.hitArea !== null) {
       return displayObject.hitArea.contains(this._localPoint.x, this._localPoint.y);
     } else if (displayObject instanceof Image) {
       const { width } = displayObject.texture.frame;
@@ -456,7 +457,7 @@ export class Input {
       }
     } else if (displayObject instanceof Graphics) {
       for (const data of displayObject.graphicsData) {
-        if (data.fill && data.shape && data.shape.contains(this._localPoint.x, this._localPoint.y)) {
+        if (data.fill && (data.shape?.contains(this._localPoint.x, this._localPoint.y) ?? false)) {
           // Only deal with fills..
           return true;
         }
@@ -489,7 +490,7 @@ export class Input {
   /**
    * TBD.
    */
-  public set x(value) {
+  public set x(value: number) {
     this._x = Math.floor(value);
   }
 
@@ -504,7 +505,7 @@ export class Input {
   /**
    * TBD.
    */
-  public set y(value) {
+  public set y(value: number) {
     this._y = Math.floor(value);
   }
 

package/src/phaser/core/input_handler.test.ts

@@ -9,28 +9,28 @@ const createSprite = (): Image =>
     game: {
       time: { time: 0 },
       canvas: { style: { cursor: 'default' } },
-      input: { interactiveItems: { add: () => undefined, remove: () => undefined } },
+      input: { interactiveItems: { add: (): undefined => undefined, remove: (): undefined => undefined } },
     },
     events: {
-      onAddedToGroup: { add: () => undefined },
-      onRemovedFromGroup: { add: () => undefined },
+      onAddedToGroup: { add: (): undefined => undefined },
+      onRemovedFromGroup: { add: (): undefined => undefined },
     },
   }) as unknown as Image;
 
-describe('InputHandler', () => {
-  describe('pointerData', () => {
-    it('seeds pointer 0 from the constructor', () => {
+describe('InputHandler', (): void => {
+  describe('pointerData', (): void => {
+    it('seeds pointer 0 from the constructor', (): void => {
       const handler = new InputHandler(createSprite());
       expect(handler._pointerData).toHaveLength(1);
       expect(handler.pointerData(0).id).toBe(0);
     });
 
-    it('returns the same record on repeat access', () => {
+    it('returns the same record on repeat access', (): void => {
       const handler = new InputHandler(createSprite());
       expect(handler.pointerData(0)).toBe(handler.pointerData(0));
     });
 
-    it('creates a record on first access of an unseeded pointer', () => {
+    it('creates a record on first access of an unseeded pointer', (): void => {
       const handler = new InputHandler(createSprite());
       const data = handler.pointerData(7);
       expect(data.id).toBe(7);
@@ -38,13 +38,13 @@ describe('InputHandler', () => {
       expect(handler.pointerData(7)).toBe(data);
     });
 
-    it('hands back a record whose mutations are visible through the array', () => {
+    it('hands back a record whose mutations are visible through the array', (): void => {
       const handler = new InputHandler(createSprite());
       handler.pointerData(3).isOver = true;
       expect(handler._pointerData[3]?.isOver).toBe(true);
     });
 
-    it('exposes every field a fresh record needs', () => {
+    it('exposes every field a fresh record needs', (): void => {
       const handler = new InputHandler(createSprite());
       expect(handler.pointerData(1)).toStrictEqual({
         id: 1,
@@ -66,18 +66,18 @@ describe('InputHandler', () => {
     });
   });
 
-  describe('start', () => {
-    it('populates the ten pointer slots the input system tracks', () => {
+  describe('start', (): void => {
+    it('populates the ten pointer slots the input system tracks', (): void => {
       const handler = new InputHandler(createSprite());
       handler.start();
       expect(handler._pointerData).toHaveLength(10);
-      expect(handler._pointerData.map((data) => data.id)).toStrictEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
+      expect(handler._pointerData.map((data): number => data.id)).toStrictEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
       expect(handler.enabled).toBe(true);
     });
   });
 
-  describe('reset', () => {
-    it('clears pointer state back to a fresh record', () => {
+  describe('reset', (): void => {
+    it('clears pointer state back to a fresh record', (): void => {
       const handler = new InputHandler(createSprite());
       handler.start();
       handler.pointerData(2).isDown = true;
@@ -89,8 +89,8 @@ describe('InputHandler', () => {
     });
   });
 
-  describe('pointer accessors', () => {
-    it('read through to the backing record', () => {
+  describe('pointer accessors', (): void => {
+    it('read through to the backing record', (): void => {
       const handler = new InputHandler(createSprite());
       handler.start();
       const data = handler.pointerData(4);
@@ -104,7 +104,7 @@ describe('InputHandler', () => {
       expect(handler.pointerTimeDown(4)).toBe(99);
     });
 
-    it('default to pointer 0', () => {
+    it('default to pointer 0', (): void => {
       const handler = new InputHandler(createSprite());
       handler.pointerData(0).x = 5;
       expect(handler.pointerX()).toBe(5);