@vpmedia/phaser 1.75.0 → 1.76.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vpmedia/phaser",
-  "version": "1.75.0",
+  "version": "1.76.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",

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/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)}]');
+});

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

@@ -0,0 +1,112 @@
+import { degToRad } from '../util/math.js';
+import { Line } from './line.js';
+
+describe('Line', () => {
+  it('should create a new line instance with correct coordinates', () => {
+    const line = new Line(0, 0, 10, 10);
+    expect(line.start.x).toBe(0);
+    expect(line.start.y).toBe(0);
+    expect(line.end.x).toBe(10);
+    expect(line.end.y).toBe(10);
+  });
+
+  it('should set the start and end points of the line correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    line.setTo(5, 5, 15, 15);
+    expect(line.start.x).toBe(5);
+    expect(line.start.y).toBe(5);
+    expect(line.end.x).toBe(15);
+    expect(line.end.y).toBe(15);
+  });
+
+  it('should create a new line instance from two sprites correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    const sprite1 = { x: 0, y: 0 };
+    const sprite2 = { x: 10, y: 10 };
+    const result = line.fromSprite(sprite1, sprite2);
+    expect(result.start.x).toBe(0);
+    expect(result.start.y).toBe(0);
+    expect(result.end.x).toBe(10);
+    expect(result.end.y).toBe(10);
+  });
+
+  it('should create a new line instance from an angle and length correctly', () => {
+    const line = new Line(0, 10, 10, 10);
+    const result = line.fromAngle(0, 0, degToRad(45), 10);
+    expect(result.start.x).toBe(0);
+    expect(result.start.y).toBe(0);
+    expect(result.end.x).toBeCloseTo(7.07);
+    expect(result.end.y).toBeCloseTo(7.07);
+  });
+
+  it('should rotate the line correctly', () => {
+    const line = new Line(0, 0, 10, 0);
+    const result = line.rotate(90, true);
+    expect(result.start.x).toBe(5);
+    expect(result.start.y).toBe(-5);
+    expect(result.end.x).toBe(5);
+    expect(result.end.y).toBe(5);
+  });
+
+  it('should rotate the line around a point correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    const result = line.rotateAround(5, 5, 90, true);
+    expect(result.start.x).toBe(10);
+    expect(result.start.y).toBe(0);
+    expect(result.end.x).toBe(0);
+    expect(result.end.y).toBe(10);
+  });
+
+  it('should intersect the line with another line correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    const line2 = new Line(5, 5, 15, 15);
+    const result = line.intersects(line2, true, null);
+    expect(result).toBe(null);
+  });
+
+  it('should reflect the line across another line correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    const line2 = new Line(5, 5, 15, 15);
+    const result = line.reflect(line2);
+    expect(result).toBeCloseTo(-5.497);
+  });
+
+  it('should get the midpoint of the line correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    const result = line.midPoint(null);
+    expect(result.x).toBe(5);
+    expect(result.y).toBe(5);
+  });
+
+  it('should center the line on a point correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    const result = line.centerOn(10, 10);
+    expect(line.start.x).toBe(10 - (line.end.x - line.start.x) / 2);
+    expect(line.start.y).toBe(10 - (line.end.y - line.start.y) / 2);
+  });
+
+  it('should check if a point is on the line correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    expect(line.pointOnLine(5, 0)).toBe(false);
+    expect(line.pointOnLine(-5, 0)).toBe(false);
+  });
+
+  it('should check if a point is on the segment of the line correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    expect(line.pointOnSegment(5, -10)).toBe(false);
+    expect(line.pointOnSegment(15, 15)).toBe(false);
+  });
+
+  it('should get the random point on the line correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    const result = line.random(null);
+    expect(result.x > 0).toBe(true);
+    expect(result.y > 0).toBe(true);
+  });
+
+  it('should get the coordinates on the line correctly', () => {
+    const line = new Line(0, 0, 10, 10);
+    const result = line.coordinatesOnLine(1, []);
+    expect(result.length).toBeGreaterThan(0);
+  });
+});