@vpmedia/phaser 1.75.0 → 1.77.0

package/lefthook.yml

@@ -1,7 +1,3 @@
-# Copyright (c) Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)
-# author: Andras Csizmadia <andras@vpmedia.hu>
-# see: https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md
-
 pre-commit:
   parallel: false
   commands:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vpmedia/phaser",
-  "version": "1.75.0",
+  "version": "1.77.0",
   "description": "@vpmedia/phaser is the modern ECMAScript port of the popular Phaser game engine v2.6.2",
   "author": "Andras Csizmadia <andras@vpmedia.hu> (www.vpmedia.hu)",
   "license": "MIT",
@@ -23,34 +23,32 @@
   "types": "./types/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@vpmedia/simplify": "^1.16.0",
-    "uuid": "^11.0.3"
+    "@vpmedia/simplify": "^1.17.0",
+    "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.16.0",
+    "@eslint/js": "^9.21.0",
     "@jest/globals": "^29.7.0",
     "@types/jest": "^29.5.14",
-    "eslint": "^9.16.0",
-    "eslint-plugin-jsdoc": "^50.6.0",
-    "eslint-plugin-unicorn": "^56.0.1",
-    "globals": "^15.13.0",
+    "eslint": "^9.23.0",
+    "eslint-plugin-jsdoc": "^50.6.8",
+    "eslint-plugin-unicorn": "^57.0.0",
+    "globals": "^16.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lefthook": "^1.8.5",
-    "prettier": "^3.4.1",
-    "typescript": "^5.7.2"
+    "prettier": "^3.5.3",
+    "typescript": "^5.8.2"
   },
   "scripts": {
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
     "lint": "eslint \"**/*.{js,jsx}\"",
     "typecheck": "tsc",
-    "format": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json,md,css}\"",
-    "lefthook:install": "lefthook install",
-    "lefthook:uninstall": "lefthook uninstall"
+    "format": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json,md,css}\""
   },
   "browserslist": [
     "> 0.5%",
     "not dead",
-    "not op_mini all"
+    "not op_mini all",
+    "iOS >= 14"
   ]
 }

package/src/phaser/core/device_util.js

@@ -110,6 +110,7 @@ export const checkFullScreenSupport = (device) => {
         break;
       }
     }
+    // @ts-ignore
     if (window.Element && Element.ALLOW_KEYBOARD_INPUT) {
       device.fullscreenKeyboard = true;
     }

package/src/phaser/core/dom.js

@@ -257,6 +257,7 @@ export class DOM {
    */
   getScreenOrientation(primaryFallback) {
     const screen = window.screen;
+    // @ts-ignore
     const orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
     if (orientation && typeof orientation.type === 'string') {
       // Screen Orientation API specification

package/src/phaser/core/game.js

@@ -126,7 +126,10 @@ export class Game {
       this.canvas = create(this, this.width, this.height, this.config.canvasID, true);
     }
     if (this.config.canvasStyle) {
-      this.canvas.style = this.config.canvasStyle;
+      const properties = Object.keys(this.config.canvasStyle);
+      for (const property of properties) {
+        this.canvas.style[property] = this.config.canvasStyle[property];
+      }
     } else {
       this.canvas.style['-webkit-full-screen'] = 'width: 100%; height: 100%';
     }

package/src/phaser/core/input_handler.js

@@ -284,7 +284,7 @@ export class InputHandler {
     if (!this.enabled) {
       return false;
     }
-    if (pointerId === undefined) {
+    if (pointerId === undefined || pointerId === null) {
       for (let i = 0; i < 10; i += 1) {
         if (this._pointerData[i].isOver) {
           return true;
@@ -304,7 +304,7 @@ export class InputHandler {
     if (!this.enabled) {
       return false;
     }
-    if (pointerId === undefined) {
+    if (pointerId === undefined || pointerId === null) {
       for (let i = 0; i < 10; i += 1) {
         if (this._pointerData[i].isOut) {
           return true;

package/src/phaser/core/scene.js

@@ -37,8 +37,10 @@ export class Scene {
 
   /**
    * TBD.
+   * @param {number} width - TBD.
+   * @param {number} height - TBD.
    */
-  resize() {
+  resize(width, height) {
     // inherit
   }
 

package/src/phaser/core/signal.js

@@ -10,7 +10,7 @@ export class Signal {
     this.memorize = false;
     this._shouldPropagate = true;
     this.active = true;
-    this._boundDispatch = false;
+    this._boundDispatch = null;
   }
 
   /**

package/src/phaser/core/timer.js

@@ -96,7 +96,7 @@ export class Timer {
    * TBD.
    * @param {number} delay - TBD.
    */
-  start(delay) {
+  start(delay = 0) {
     if (this.running) {
       return;
     }

package/src/phaser/display/canvas/util.js

@@ -42,6 +42,7 @@ export const setBackgroundColor = (canvas, color) => {
  */
 export const setTouchAction = (canvas, value = 'none') => {
   value = value || 'none';
+  // @ts-ignore
   canvas.style.msTouchAction = value;
   canvas.style['ms-touch-action'] = value;
   canvas.style['touch-action'] = value;

package/src/phaser/display/display_object.js

@@ -32,6 +32,8 @@ export class DisplayObject {
     this.cachedBounds = new Rectangle(0, 0, 0, 0);
     this.currentBounds = null;
     this._mask = null;
+    this._filters = null;
+    this._filterBlock = null;
     this.children = [];
     this.ignoreChildInput = false;
   }

package/src/phaser/display/text.js

@@ -153,7 +153,10 @@ export class Text extends Image {
     const lineWidths = [];
     let lineWidth = 0;
     let maxLineWidth = 0;
-    const fontProperties = this.determineFontProperties(this.style.font);
+    let fontProperties = this.determineFontProperties(this.style.font);
+    if (!fontProperties.fontSize) {
+      fontProperties = this.determineFontPropertiesFallback(this.style.font);
+    }
     let drawnLines = lines.length;
     if (this.style.maxLines > 0 && this.style.maxLines < lines.length) {
       drawnLines = this.style.maxLines;
@@ -894,12 +897,37 @@ export class Text extends Image {
     return window.PhaserRegistry.fontPropertiesContext;
   }
 
+  /**
+   * TBD.
+   * @param {string} font - TBD.
+   * @returns {object} TBD.
+   */
+  determineFontProperties(font) {
+    const fontPropertiesCache = this.getFontPropertiesCache();
+    let properties = fontPropertiesCache[font];
+    if (properties) {
+      return properties;
+    }
+    const METRICS_STRING = '|ÉqÅ';
+    const BASELINE_SYMBOL = 'M';
+    /** @type {CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D} */
+    const context = this.getFontPropertiesContext();
+    context.font = font;
+    const metrics = context.measureText(METRICS_STRING + BASELINE_SYMBOL);
+    properties = {
+      ascent: Math.ceil(metrics.actualBoundingBoxAscent),
+      descent: Math.ceil(metrics.actualBoundingBoxDescent),
+      fontSize: Math.ceil(metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent),
+    };
+    return properties;
+  }
+
   /**
    * TBD.
    * @param {string} fontStyle - TBD.
    * @returns {object} TBD.
    */
-  determineFontProperties(fontStyle) {
+  determineFontPropertiesFallback(fontStyle) {
     const fontPropertiesCache = this.getFontPropertiesCache();
     let properties = fontPropertiesCache[fontStyle];
     if (!properties) {
@@ -936,7 +964,8 @@ export class Text extends Image {
       // ascent. scan from top to bottom until we find a non red pixel
       for (i = 0; i < baseline; i += 1) {
         for (j = 0; j < line; j += 4) {
-          if (imagedata[idx + j] !== 255) {
+          // firefox returns 253 for red pixel
+          if (imagedata[idx + j] < 253) {
             stop = true;
             break;
           }
@@ -953,7 +982,8 @@ export class Text extends Image {
       // descent. scan from bottom to top until we find a non red pixel
       for (i = height; i > baseline; i -= 1) {
         for (j = 0; j < line; j += 4) {
-          if (imagedata[idx + j] !== 255) {
+          // firefox returns 253 for red pixel
+          if (imagedata[idx + j] < 253) {
             stop = true;
             break;
           }

package/src/phaser/display/webgl/render_texture.js

@@ -1,10 +1,10 @@
-import { Rectangle } from '../../geom/rectangle.js';
+import { RENDER_WEBGL } from '../../core/const.js';
 import { Point } from '../../geom/point.js';
-import { Texture } from './texture.js';
+import { Rectangle } from '../../geom/rectangle.js';
+import { CanvasBuffer } from '../canvas/buffer.js';
 import { BaseTexture } from './base_texture.js';
 import { FilterTexture } from './filter_texture.js';
-import { CanvasBuffer } from '../canvas/buffer.js';
-import { RENDER_WEBGL } from '../../core/const.js';
+import { Texture } from './texture.js';
 
 export class RenderTexture extends Texture {
   /**
@@ -34,6 +34,7 @@ export class RenderTexture extends Texture {
     this.crop = new Rectangle(0, 0, this.width * this.resolution, this.height * this.resolution);
     this.renderer = renderer;
     if (this.renderer.type === RENDER_WEBGL) {
+      // @ts-ignore
       const gl = this.renderer.gl;
       this.baseTexture._dirty[gl.id] = false;
       this.textureBuffer = new FilterTexture(gl, this.width, this.height, this.baseTexture.scaleMode);

package/src/phaser/display/webgl/shader/complex.js

@@ -11,6 +11,7 @@ export class ComplexPrimitiveShader {
   constructor(gl) {
     this.gl = gl;
     this._UID = uuidv4();
+    /** @type {WebGLProgram} */
     this.program = null;
     this.fragmentSrc = [
       'precision mediump float;',

package/src/phaser/display/webgl/shader/fast.js

@@ -11,6 +11,7 @@ export class FastShader {
   constructor(gl) {
     this.gl = gl;
     this._UID = uuidv4();
+    /** @type {WebGLProgram} */
     this.program = null;
     this.textureCount = 0;
     this.fragmentSrc = [

package/src/phaser/display/webgl/shader/normal.js

@@ -31,6 +31,7 @@ export class NormalShader {
   constructor(gl) {
     this.gl = gl;
     this._UID = uuidv4();
+    /** @type {WebGLProgram} */
     this.program = null;
     this.fragmentSrc = [
       'precision lowp float;',
@@ -41,6 +42,8 @@ export class NormalShader {
       '   gl_FragColor = texture2D(uSampler, vTextureCoord) * vColor ;',
       '}',
     ];
+    /** @type {string[]} */
+    this.vertexSrc = null;
     this.textureCount = 0;
     this.firstRun = true;
     this.dirty = true;

package/src/phaser/display/webgl/shader/primitive.js

@@ -11,6 +11,7 @@ export class PrimitiveShader {
   constructor(gl) {
     this.gl = gl;
     this._UID = uuidv4();
+    /** @type {WebGLProgram} */
     this.program = null;
     this.fragmentSrc = [
       'precision mediump float;',

package/src/phaser/display/webgl/shader/strip.js

@@ -11,6 +11,7 @@ export class StripShader {
   constructor(gl) {
     this.gl = gl;
     this._UID = uuidv4();
+    /** @type {WebGLProgram} */
     this.program = null;
     this.fragmentSrc = [
       'precision mediump float;',

package/src/phaser/display/webgl/shader_manager.js

@@ -26,7 +26,7 @@ export class WebGLShaderManager {
 
   /**
    * TBD.
-   * @param {WebGLRenderingContext} gl - TBD.
+   * @param {WebGLRenderingContext & { id: number }} gl - TBD.
    */
   setContext(gl) {
     this.gl = gl;

package/src/phaser/display/webgl/texture.js

@@ -30,7 +30,7 @@ export class Texture {
       this.noFrame = true;
       frame = new Rectangle(0, 0, 1, 1);
     }
-    if (baseTexture && baseTexture.baseTexture) {
+    if (baseTexture instanceof Texture) {
       baseTexture = baseTexture.baseTexture;
     }
     this.baseTexture = baseTexture;

package/src/phaser/geom/circle.test.js

@@ -0,0 +1,198 @@
+import { Circle } from './circle.js';
+import { Point } from './point.js';
+
+describe('Circle', () => {
+  describe('constructor', () => {
+    it('should initialize properties correctly when no arguments are provided', () => {
+      const circle = new Circle();
+      expect(circle.x).toBe(0);
+      expect(circle.y).toBe(0);
+      expect(circle.diameter).toBe(0);
+    });
+
+    it('should initialize properties correctly when x, y, and diameter are provided', () => {
+      const circle = new Circle(10, 20, 30);
+      expect(circle.x).toBe(10);
+      expect(circle.y).toBe(20);
+      expect(circle.diameter).toBe(30);
+    });
+  });
+
+  describe('circumference', () => {
+    it('should calculate the circumference correctly when diameter is provided', () => {
+      const circle = new Circle(0, 0, 1);
+      expect(circle.circumference()).toBeCloseTo(Math.PI);
+    });
+
+    it('should return Infinity when diameter is 0', () => {
+      const circle = new Circle();
+      circle.diameter = 0;
+      expect(circle.circumference()).toBe(0);
+    });
+  });
+
+  describe('random', () => {
+    it('should generate a random point within the circle correctly', () => {
+      const circle = new Circle();
+      const output = new Point();
+      circle.random(output);
+      expect(output.x).toBeGreaterThan(-1);
+      expect(output.y).toBeGreaterThan(-1);
+      expect(Math.hypot(output.x, output.y)).toBe(0);
+    });
+
+    it('should generate a random point within the circle correctly when output is not provided', () => {
+      const circle = new Circle();
+      const output = new Point();
+      circle.random(output);
+      expect(output.x).toBeGreaterThan(-1);
+      expect(output.y).toBeGreaterThan(-1);
+      expect(Math.hypot(output.x, output.y)).toBe(0);
+    });
+  });
+
+  describe('getBounds', () => {
+    it('should calculate the bounds correctly when diameter is provided', () => {
+      const circle = new Circle(0, 0, 1);
+      const bounds = circle.getBounds();
+      expect(bounds.x).toBe(-0.5);
+      expect(bounds.y).toBe(-0.5);
+      expect(bounds.width).toBe(1);
+      expect(bounds.height).toBe(1);
+    });
+
+    it('should return empty rectangle when diameter is 0', () => {
+      const circle = new Circle();
+      circle.diameter = 0;
+      const bounds = circle.getBounds();
+      expect(bounds.x).toBe(0);
+      expect(bounds.y).toBe(0);
+      expect(bounds.width).toBe(0);
+      expect(bounds.height).toBe(0);
+    });
+  });
+
+  describe('setTo', () => {
+    it('should set properties correctly when x, y, and diameter are provided', () => {
+      const circle = new Circle();
+      circle.setTo(10, 20, 30);
+      expect(circle.x).toBe(10);
+      expect(circle.y).toBe(20);
+      expect(circle.diameter).toBe(30);
+    });
+
+    it('should set radius property correctly when diameter is changed', () => {
+      const circle = new Circle();
+      circle.diameter = 1;
+      expect(circle.radius).toBe(0.5);
+    });
+  });
+
+  describe('copyFrom', () => {
+    it('should copy properties correctly from another Circle instance', () => {
+      const source = new Circle(10, 20, 30);
+      const dest = new Circle();
+      dest.copyFrom(source);
+      expect(dest.x).toBe(source.x);
+      expect(dest.y).toBe(source.y);
+      expect(dest.diameter).toBe(source.diameter);
+    });
+  });
+
+  describe('copyTo', () => {
+    it('should copy properties correctly to another Circle instance', () => {
+      const source = new Circle(10, 20, 30);
+      const dest = new Circle();
+      source.copyTo(dest);
+      expect(dest.x).toBe(source.x);
+      expect(dest.y).toBe(source.y);
+      expect(dest.diameter).toBe(source.diameter);
+    });
+  });
+
+  describe('distance', () => {
+    it('should calculate the distance correctly between two points within a circle', () => {
+      const circle = new Circle();
+      const point = new Point(1, 1);
+      expect(circle.distance(point)).toBeCloseTo(Math.hypot(point.x, point.y));
+    });
+
+    it('should return Infinity when diameter is 0', () => {
+      const circle = new Circle();
+      circle.diameter = 0;
+      expect(circle.distance(new Point(1, 1))).toBeCloseTo(1.4142);
+    });
+  });
+
+  describe('clone', () => {
+    it('should create a deep copy of the Circle instance correctly', () => {
+      const source = new Circle(10, 20, 30);
+      const clone = source.clone();
+      expect(clone.x).toBe(source.x);
+      expect(clone.y).toBe(source.y);
+      expect(clone.diameter).toBe(source.diameter);
+    });
+  });
+
+  describe('contains', () => {
+    it('should determine if a point is within the circle correctly', () => {
+      const circle = new Circle();
+      const point = new Point(1, 1);
+      expect(circle.contains(point.x, point.y)).toBe(false);
+    });
+
+    it('should return false when diameter is 0', () => {
+      const circle = new Circle();
+      circle.diameter = 0;
+      expect(circle.contains(1, 1)).toBe(false);
+    });
+  });
+
+  describe('circumferencePoint', () => {
+    it('should generate a point on the circumference correctly', () => {
+      const circle = new Circle();
+      const output = new Point();
+      expect(circle.circumferencePoint(Math.PI / 2).x).toBeCloseTo(0.5 * circle.radius);
+    });
+
+    it('should return null when diameter is 0', () => {
+      const circle = new Circle();
+      circle.diameter = 0;
+      expect(circle.circumferencePoint(Math.PI / 2).type).toBe(25);
+    });
+  });
+
+  describe('offset', () => {
+    it('should offset the circle correctly by a point', () => {
+      const circle = new Circle();
+      const point = new Point(1, 1);
+      circle.offset(point.x, point.y);
+      expect(circle.x).toBeGreaterThan(0);
+      expect(circle.y).toBeGreaterThan(0);
+    });
+
+    it('should return the Circle instance itself', () => {
+      const circle = new Circle();
+      const point = new Point(1, 1);
+      circle.offset(point.x, point.y);
+      expect(circle).toBe(circle);
+    });
+  });
+
+  describe('offsetPoint', () => {
+    it('should offset the circle correctly by a point', () => {
+      const circle = new Circle();
+      const point = new Point(1, 1);
+      circle.offsetPoint(point);
+      expect(circle.x).toBeGreaterThan(0);
+      expect(circle.y).toBeGreaterThan(0);
+    });
+  });
+
+  describe('toString', () => {
+    it('should generate the correct string representation of the Circle instance', () => {
+      const circle = new Circle();
+      expect(circle.toString()).toBe('[{Circle (x=0 y=0 diameter=0 radius=0)}]');
+    });
+  });
+});

package/src/phaser/geom/ellipse.test.js

@@ -0,0 +1,83 @@
+import { Ellipse } from './ellipse.js';
+
+it('should create an ellipse with default values', () => {
+  const ellipse = new Ellipse();
+  expect(ellipse.x).toBe(0);
+  expect(ellipse.y).toBe(0);
+  expect(ellipse.width).toBe(0);
+  expect(ellipse.height).toBe(0);
+});
+
+it('should create an ellipse with custom x, y, width, height', () => {
+  const ellipse = new Ellipse(10, 20, 30, 40);
+  expect(ellipse.x).toBe(10);
+  expect(ellipse.y).toBe(20);
+  expect(ellipse.width).toBe(30);
+  expect(ellipse.height).toBe(40);
+});
+
+it('should set the ellipse values to new x, y, width, height', () => {
+  const ellipse = new Ellipse();
+  ellipse.setTo(10, 20, 30, 40);
+  expect(ellipse.x).toBe(10);
+  expect(ellipse.y).toBe(20);
+  expect(ellipse.width).toBe(30);
+  expect(ellipse.height).toBe(40);
+});
+
+it('should return the ellipse instance', () => {
+  const ellipse = new Ellipse();
+  const result = ellipse.setTo(10, 20, 30, 40);
+  expect(result).toBe(ellipse);
+});
+
+it('should create a rectangle with correct bounds', () => {
+  const ellipse = new Ellipse(10, 20, 30, 40);
+  const bounds = ellipse.getBounds();
+  expect(bounds.x).toBe(10 - 30);
+  expect(bounds.y).toBe(20 - 40);
+  expect(bounds.width).toBe(30);
+  expect(bounds.height).toBe(40);
+});
+
+it('should copy the values from another ellipse', () => {
+  const source = new Ellipse(10, 20, 30, 40);
+  const target = new Ellipse();
+  target.copyFrom(source);
+  expect(target.x).toBe(source.x);
+  expect(target.y).toBe(source.y);
+  expect(target.width).toBe(source.width);
+  expect(target.height).toBe(source.height);
+});
+
+it('should copy the values to another ellipse', () => {
+  const source = new Ellipse(10, 20, 30, 40);
+  const target = new Ellipse();
+  source.copyTo(target);
+  expect(target.x).toBe(source.x);
+  expect(target.y).toBe(source.y);
+  expect(target.width).toBe(source.width);
+  expect(target.height).toBe(source.height);
+});
+
+it('should return true if point is inside the ellipse', () => {
+  const ellipse = new Ellipse(10, 20, 30, 40);
+  expect(ellipse.contains(20, 30)).toBe(true);
+});
+
+it('should return false if point is outside the ellipse', () => {
+  const ellipse = new Ellipse(10, 20, 30, 40);
+  expect(ellipse.contains(-5, -10)).toBe(false);
+});
+
+it('should generate a random point within the ellipse', () => {
+  const ellipse = new Ellipse(10, 20, 30, 40);
+  const point = ellipse.random();
+  expect(typeof point.x).toBe('number');
+  expect(typeof point.y).toBe('number');
+});
+
+it('should return a string representation of the ellipse', () => {
+  const ellipse = new Ellipse(10, 20, 30, 40);
+  expect(ellipse.toString()).toBe('[{Ellipse (x=10 y=20 width=30 height=40)}]');
+});