@vpmedia/phaser 1.112.0 → 1.113.0

package/src/phaser/display/canvas/buffer.ts

@@ -1,16 +1,16 @@
 import { create, removeByCanvas } from './pool.js';
 
 export class CanvasBuffer {
-  width!: any;
-  height!: any;
-  canvas!: any;
-  context!: any;
+  public width!: any;
+  public height!: any;
+  public canvas!: any;
+  public context!: any;
   /**
    * Creates a new CanvasBuffer instance.
    * @param {number} width - The width of the canvas buffer.
    * @param {number} height - The height of the canvas buffer.
    */
-  constructor(width: number, height: number) {
+  public constructor(width: number, height: number) {
     this.width = width;
     this.height = height;
     this.canvas = create(this, this.width, this.height);
@@ -22,7 +22,7 @@ export class CanvasBuffer {
   /**
    * Clears the canvas buffer.
    */
-  clear() {
+  public clear() {
     this.context.setTransform(1, 0, 0, 1, 0, 0);
     this.context.clearRect(0, 0, this.width, this.height);
   }
@@ -32,7 +32,7 @@ export class CanvasBuffer {
    * @param {number} width - The new width of the canvas buffer.
    * @param {number} height - The new height of the canvas buffer.
    */
-  resize(width: number, height: number) {
+  public resize(width: number, height: number) {
     this.width = width;
     this.height = height;
     this.canvas.width = width;
@@ -42,7 +42,7 @@ export class CanvasBuffer {
   /**
    * Destroys the canvas buffer and cleans up resources.
    */
-  destroy() {
+  public destroy() {
     try {
       this.context?.reset();
     } catch {

package/src/phaser/display/canvas/graphics.ts

@@ -1,20 +1,20 @@
 import { GEOM_CIRCLE, GEOM_ELLIPSE, GEOM_POLYGON, GEOM_RECTANGLE, GEOM_ROUNDED_RECTANGLE } from '../../core/const.js';
+import type { Graphics } from '../graphics.js';
 
 /**
  * Renders a graphics object to canvas.
- * @param {import('../graphics.js').Graphics} graphics - The graphics object to render.
+ * @param {Graphics} graphics - The graphics object to render.
  */
-export const updateGraphicsTint = (graphics: import('../graphics.js').Graphics) => {
+export const updateGraphicsTint = (graphics: Graphics) => {
   if (graphics.tint === 0xffffff) {
     return;
   }
   const tintR = ((graphics.tint >> 16) & 0xff) / 255;
   const tintG = ((graphics.tint >> 8) & 0xff) / 255;
   const tintB = (graphics.tint & 0xff) / 255;
-  for (let i = 0; i < graphics.graphicsData.length; i += 1) {
-    const data = graphics.graphicsData[i];
-    const fillColor = data.fillColor | 0;
-    const lineColor = data.lineColor | 0;
+  for (const data of graphics.graphicsData) {
+    const fillColor = Math.trunc(data.fillColor);
+    const lineColor = Math.trunc(data.lineColor);
     data._fillTint =
       (((((fillColor >> 16) & 0xff) / 255) * tintR * 255) << 16) +
       (((((fillColor >> 8) & 0xff) / 255) * tintG * 255) << 8) +
@@ -28,24 +28,23 @@ export const updateGraphicsTint = (graphics: import('../graphics.js').Graphics)
 
 /**
  * Renders a graphics object to canvas.
- * @param {import('../graphics.js').Graphics} graphics - The graphics object to render.
+ * @param {Graphics} graphics - The graphics object to render.
  * @param {object} context - The canvas rendering context.
  */
-export const renderGraphics = (graphics: import('../graphics.js').Graphics, context: any) => {
-  const worldAlpha = graphics.worldAlpha;
+export const renderGraphics = (graphics: Graphics, context: any) => {
+  const { worldAlpha } = graphics;
   if (graphics.dirty) {
     updateGraphicsTint(graphics);
     graphics.dirty = false;
   }
-  for (let i = 0; i < graphics.graphicsData.length; i += 1) {
-    const data = graphics.graphicsData[i];
-    const shape = data.shape;
+  for (const data of graphics.graphicsData) {
+    const { shape } = data;
     const fillColor = data._fillTint;
     const lineColor = data._lineTint;
     context.lineWidth = data.lineWidth;
     if (data.type === GEOM_POLYGON) {
       context.beginPath();
-      const points = shape.points;
+      const { points } = shape;
       context.moveTo(points[0], points[1]);
       for (let j = 1; j < points.length / 2; j += 1) {
         context.lineTo(points[j * 2], points[j * 2 + 1]);
@@ -54,28 +53,28 @@ export const renderGraphics = (graphics: import('../graphics.js').Graphics, cont
         context.lineTo(points[0], points[1]);
       }
       // if the first and last point are the same close the path - much neater :)
-      if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1]) {
+      if (points[0] === points.at(-2) && points[1] === points.at(-1)) {
         context.closePath();
       }
       if (data.fill) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${(fillColor | 0).toString(16)}`.substr(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
         context.globalAlpha = data.lineAlpha * worldAlpha;
-        context.strokeStyle = `#${`00000${(lineColor | 0).toString(16)}`.substr(-6)}`;
+        context.strokeStyle = `#${`00000${Math.trunc(lineColor).toString(16)}`.slice(-6)}`;
         context.stroke();
       }
     } else if (data.type === GEOM_RECTANGLE) {
       if (data.fillColor || data.fillColor === 0) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${(fillColor | 0).toString(16)}`.substr(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
         context.fillRect(shape.x, shape.y, shape.width, shape.height);
       }
       if (data.lineWidth) {
         context.globalAlpha = data.lineAlpha * worldAlpha;
-        context.strokeStyle = `#${`00000${(lineColor | 0).toString(16)}`.substr(-6)}`;
+        context.strokeStyle = `#${`00000${Math.trunc(lineColor).toString(16)}`.slice(-6)}`;
         context.strokeRect(shape.x, shape.y, shape.width, shape.height);
       }
     } else if (data.type === GEOM_CIRCLE) {
@@ -84,12 +83,12 @@ export const renderGraphics = (graphics: import('../graphics.js').Graphics, cont
       context.closePath();
       if (data.fill) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${(fillColor | 0).toString(16)}`.substr(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
         context.globalAlpha = data.lineAlpha * worldAlpha;
-        context.strokeStyle = `#${`00000${(lineColor | 0).toString(16)}`.substr(-6)}`;
+        context.strokeStyle = `#${`00000${Math.trunc(lineColor).toString(16)}`.slice(-6)}`;
         context.stroke();
       }
     } else if (data.type === GEOM_ELLIPSE) {
@@ -114,21 +113,21 @@ export const renderGraphics = (graphics: import('../graphics.js').Graphics, cont
       context.closePath();
       if (data.fill) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${(fillColor | 0).toString(16)}`.substr(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
         context.globalAlpha = data.lineAlpha * worldAlpha;
-        context.strokeStyle = `#${`00000${(lineColor | 0).toString(16)}`.substr(-6)}`;
+        context.strokeStyle = `#${`00000${Math.trunc(lineColor).toString(16)}`.slice(-6)}`;
         context.stroke();
       }
     } else if (data.type === GEOM_ROUNDED_RECTANGLE) {
       const rx = shape.x;
       const ry = shape.y;
-      const width = shape.width;
-      const height = shape.height;
-      let radius = shape.radius;
-      const maxRadius = (Math.min(width, height) / 2) | 0;
+      const { width } = shape;
+      const { height } = shape;
+      let { radius } = shape;
+      const maxRadius = Math.trunc(Math.min(width, height) / 2);
       radius = radius > maxRadius ? maxRadius : radius;
       context.beginPath();
       context.moveTo(rx, ry + radius);
@@ -143,12 +142,12 @@ export const renderGraphics = (graphics: import('../graphics.js').Graphics, cont
       context.closePath();
       if (data.fillColor || data.fillColor === 0) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${(fillColor | 0).toString(16)}`.substr(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
         context.globalAlpha = data.lineAlpha * worldAlpha;
-        context.strokeStyle = `#${`00000${(lineColor | 0).toString(16)}`.substr(-6)}`;
+        context.strokeStyle = `#${`00000${Math.trunc(lineColor).toString(16)}`.slice(-6)}`;
         context.stroke();
       }
     }
@@ -157,10 +156,10 @@ export const renderGraphics = (graphics: import('../graphics.js').Graphics, cont
 
 /**
  * Renders a graphics object to canvas.
- * @param {import('../graphics.js').Graphics} graphics - The graphics object to render.
+ * @param {Graphics} graphics - The graphics object to render.
  * @param {object} context - The canvas rendering context.
  */
-export const renderGraphicsMask = (graphics: import('../graphics.js').Graphics, context: any) => {
+export const renderGraphicsMask = (graphics: Graphics, context: any) => {
   const len = graphics.graphicsData.length;
   if (len === 0) {
     return;
@@ -168,15 +167,15 @@ export const renderGraphicsMask = (graphics: import('../graphics.js').Graphics,
   context.beginPath();
   for (let i = 0; i < len; i += 1) {
     const data = graphics.graphicsData[i];
-    const shape = data.shape;
+    const { shape } = data;
     if (data.type === GEOM_POLYGON) {
-      const points = shape.points;
+      const { points } = shape;
       context.moveTo(points[0], points[1]);
       for (let j = 1; j < points.length / 2; j += 1) {
         context.lineTo(points[j * 2], points[j * 2 + 1]);
       }
       // if the first and last point are the same close the path - much neater :)
-      if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1]) {
+      if (points[0] === points.at(-2) && points[1] === points.at(-1)) {
         context.closePath();
       }
     } else if (data.type === GEOM_RECTANGLE) {
@@ -207,10 +206,10 @@ export const renderGraphicsMask = (graphics: import('../graphics.js').Graphics,
     } else if (data.type === GEOM_ROUNDED_RECTANGLE) {
       const rx = shape.x;
       const ry = shape.y;
-      const width = shape.width;
-      const height = shape.height;
-      let radius = shape.radius;
-      const maxRadius = (Math.min(width, height) / 2) | 0;
+      const { width } = shape;
+      const { height } = shape;
+      let { radius } = shape;
+      const maxRadius = Math.trunc(Math.min(width, height) / 2);
       radius = radius > maxRadius ? maxRadius : radius;
       context.moveTo(rx, ry + radius);
       context.lineTo(rx, ry + height - radius);

package/src/phaser/display/canvas/masker.ts

@@ -6,11 +6,11 @@ import { renderGraphicsMask } from './graphics.js';
  * @param {object} renderSession - The rendering session object.
  */
 export const pushMask = (maskData: any, renderSession: any) => {
-  const context = renderSession.context;
+  const { context } = renderSession;
   context.save();
   const cacheAlpha = maskData.alpha;
   const transform = maskData.worldTransform;
-  const resolution = renderSession.resolution;
+  const { resolution } = renderSession;
   context.setTransform(
     transform.a * resolution,
     transform.b * resolution,

package/src/phaser/display/canvas/pool.test.ts

@@ -0,0 +1,106 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { create, getFirst, getFree, getPool, getTotal, remove, removeByCanvas } from './pool.js';
+
+describe('canvas pool', () => {
+  beforeEach(() => {
+    getPool().length = 0;
+  });
+
+  describe('getPool', () => {
+    it('lazily creates the backing array and returns the same one thereafter', () => {
+      expect(getPool()).toBe(getPool());
+      expect(getPool()).toStrictEqual([]);
+    });
+  });
+
+  describe('create', () => {
+    it('adds a new entry when the pool is empty', () => {
+      const parent = { name: 'owner' };
+      const canvas = create(parent);
+      expect(getPool()).toHaveLength(1);
+      expect(getPool()[0]?.parent).toBe(parent);
+      expect(getPool()[0]?.canvas).toBe(canvas);
+    });
+
+    it('reuses a free entry instead of growing the pool', () => {
+      const first = { name: 'first' };
+      const canvas = create(first);
+      remove(first);
+      const second = { name: 'second' };
+      expect(create(second)).toBe(canvas);
+      expect(getPool()).toHaveLength(1);
+      expect(getPool()[0]?.parent).toBe(second);
+    });
+
+    it('grows the pool when skipPool is set even if an entry is free', () => {
+      const first = { name: 'first' };
+      create(first);
+      remove(first);
+      create({ name: 'second' }, undefined, undefined, true);
+      expect(getPool()).toHaveLength(2);
+    });
+
+    it('applies the requested dimensions', () => {
+      const canvas = create({ name: 'sized' }, 64, 32);
+      expect(canvas.width).toBe(64);
+      expect(canvas.height).toBe(32);
+    });
+  });
+
+  describe('getFirst', () => {
+    it('reports -1 when every entry is claimed', () => {
+      create({ name: 'owner' });
+      expect(getFirst()).toBe(-1);
+    });
+
+    it('reports the index of the first free entry', () => {
+      create({ name: 'a' });
+      const b = { name: 'b' };
+      create(b);
+      create({ name: 'c' });
+      remove(b);
+      expect(getFirst()).toBe(1);
+    });
+  });
+
+  describe('remove', () => {
+    it('frees the entry and shrinks its canvas to 1x1', () => {
+      const parent = { name: 'owner' };
+      const canvas = create(parent, 100, 50);
+      remove(parent);
+      expect(getPool()[0]?.parent).toBeNull();
+      expect(canvas.width).toBe(1);
+      expect(canvas.height).toBe(1);
+    });
+
+    it('ignores a parent that owns nothing', () => {
+      create({ name: 'owner' });
+      expect(() => {
+        remove({ name: 'stranger' });
+      }).not.toThrow();
+      expect(getPool()[0]?.parent).not.toBeNull();
+    });
+  });
+
+  describe('removeByCanvas', () => {
+    it('frees the entry holding that canvas', () => {
+      const canvas = create({ name: 'owner' }, 100, 50);
+      removeByCanvas(canvas);
+      expect(getPool()[0]?.parent).toBeNull();
+      expect(canvas.width).toBe(1);
+    });
+  });
+
+  describe('getTotal and getFree', () => {
+    it('count claimed and unclaimed entries', () => {
+      const a = { name: 'a' };
+      create(a);
+      create({ name: 'b' });
+      expect(getTotal()).toBe(2);
+      expect(getFree()).toBe(0);
+      remove(a);
+      expect(getTotal()).toBe(1);
+      expect(getFree()).toBe(1);
+    });
+  });
+});

package/src/phaser/display/canvas/pool.ts

@@ -1,15 +1,12 @@
+import { getRegistry } from '../../core/registry.js';
 /**
  * Gets the canvas pool array.
  * @returns {{canvas: HTMLCanvasElement, parent: object}[]} The canvas pool array.
  */
-export const getPool = () => {
-  if (!window.PhaserRegistry) {
-    window.PhaserRegistry = {};
-  }
-  if (!window.PhaserRegistry.CANVAS_POOL) {
-    window.PhaserRegistry.CANVAS_POOL = [];
-  }
-  return window.PhaserRegistry.CANVAS_POOL;
+export const getPool = (): CanvasPoolEntry[] => {
+  const registry = getRegistry();
+  registry.CANVAS_POOL ??= [];
+  return registry.CANVAS_POOL;
 };
 
 /**
@@ -19,7 +16,7 @@ export const getPool = () => {
 export const getFirst = () => {
   const pool = getPool();
   for (let i = 0; i < pool.length; i += 1) {
-    if (!pool[i].parent) {
+    if (!pool[i]!.parent) {
       return i;
     }
   }
@@ -32,11 +29,11 @@ export const getFirst = () => {
  */
 export const remove = (parent: any) => {
   const pool = getPool();
-  for (let i = 0; i < pool.length; i += 1) {
-    if (pool[i].parent === parent) {
-      pool[i].parent = null;
-      pool[i].canvas.width = 1;
-      pool[i].canvas.height = 1;
+  for (const entry of pool) {
+    if (entry.parent === parent) {
+      entry.parent = null;
+      entry.canvas.width = 1;
+      entry.canvas.height = 1;
     }
   }
 };
@@ -47,11 +44,11 @@ export const remove = (parent: any) => {
  */
 export const removeByCanvas = (canvas: HTMLCanvasElement) => {
   const pool = getPool();
-  for (let i = 0; i < pool.length; i += 1) {
-    if (pool[i].canvas === canvas) {
-      pool[i].parent = null;
-      pool[i].canvas.width = 1;
-      pool[i].canvas.height = 1;
+  for (const entry of pool) {
+    if (entry.canvas === canvas) {
+      entry.parent = null;
+      entry.canvas.width = 1;
+      entry.canvas.height = 1;
     }
   }
 };
@@ -63,8 +60,8 @@ export const removeByCanvas = (canvas: HTMLCanvasElement) => {
 export const getTotal = () => {
   const pool = getPool();
   let c = 0;
-  for (let i = 0; i < pool.length; i += 1) {
-    if (pool[i].parent) {
+  for (const entry of pool) {
+    if (entry.parent) {
       c += 1;
     }
   }
@@ -78,8 +75,8 @@ export const getTotal = () => {
 export const getFree = () => {
   const pool = getPool();
   let c = 0;
-  for (let i = 0; i < pool.length; i += 1) {
-    if (!pool[i].parent) {
+  for (const entry of pool) {
+    if (!entry.parent) {
       c += 1;
     }
   }
@@ -94,14 +91,14 @@ export const getFree = () => {
  * @param {boolean} skipPool - True to skip using the pool and create a new canvas.
  * @returns {HTMLCanvasElement} The canvas from the pool or a newly created one.
  */
-export const create = (parent: any, width?: any, height?: any, skipPool: boolean = false) => {
+export const create = (parent: any, width?: any, height?: any, skipPool = false) => {
   if (parent === undefined) {
     console.warn('Created CanvasPool element with undefined parent.');
   }
   const idx = getFirst();
   const pool = getPool();
   let canvas;
-  if (idx === -1 || skipPool === true) {
+  if (idx === -1 || skipPool) {
     const container = {
       parent,
       canvas: document.createElement('canvas'),
@@ -109,8 +106,9 @@ export const create = (parent: any, width?: any, height?: any, skipPool: boolean
     pool.push(container);
     canvas = container.canvas;
   } else {
-    pool[idx].parent = parent;
-    canvas = pool[idx].canvas;
+    const entry = pool[idx]!;
+    entry.parent = parent;
+    canvas = entry.canvas;
   }
   if (width !== undefined) {
     canvas.width = width;

package/src/phaser/display/canvas/renderer.ts

@@ -1,3 +1,5 @@
+import type { Game } from '../../core/game.js';
+import type { Stage } from '../../core/stage.js';
 import {
   BLEND_ADD,
   BLEND_COLOR,
@@ -26,24 +28,24 @@ import { detectCapabilities } from './tinter.js';
 import { getSmoothingPrefix } from './util.js';
 
 export class CanvasRenderer {
-  type!: any;
-  resolution!: any;
-  clearBeforeRender!: any;
-  transparent!: any;
-  autoResize!: any;
-  contextLost!: any;
-  width!: any;
-  height!: any;
-  view!: any;
-  context!: any;
-  refresh!: any;
-  count!: any;
-  renderSession!: any;
+  public type!: any;
+  public resolution!: any;
+  public clearBeforeRender!: any;
+  public transparent!: any;
+  public autoResize!: any;
+  public contextLost!: any;
+  public width!: any;
+  public height!: any;
+  public view!: any;
+  public context!: any;
+  public refresh!: any;
+  public count!: any;
+  public renderSession!: any;
   /**
    * Creates a new CanvasRenderer instance.
-   * @param {import('../../core/game.js').Game} _game - The game instance.
+   * @param {Game} _game - The game instance.
    */
-  constructor(game: import('../../core/game.js').Game) {
+  public constructor(game: Game) {
     detectCapabilities(game);
     /** @type {number} */
     this.type = RENDER_CANVAS;
@@ -56,7 +58,6 @@ export class CanvasRenderer {
     this.height = game.height * this.resolution;
     this.view = game.canvas;
     /** @type {CanvasRenderingContext2D} */
-    // @ts-ignore
     this.context = this.view.getContext('2d', { willReadFrequently: false, alpha: this.transparent });
     if (!this.context) {
       throw new Error(ENGINE_ERROR_CREATING_CANVAS_2D_CONTEXT);
@@ -76,9 +77,9 @@ export class CanvasRenderer {
 
   /**
    * Renders the stage to canvas.
-   * @param {import('../../core/stage.js').Stage} root - The root stage to render.
+   * @param {Stage} root - The root stage to render.
    */
-  render(root: import('../../core/stage.js').Stage) {
+  public render(root: Stage) {
     if (!this.context) {
       return;
     }
@@ -103,7 +104,7 @@ export class CanvasRenderer {
    * Destroys this renderer and cleans up resources.
    * @param {boolean} removeView - Whether to remove the view from the DOM.
    */
-  destroy(removeView: boolean = true) {
+  public destroy(removeView = true) {
     if (removeView && this.view.parent) {
       this.view.parent.removeChild(this.view);
     }
@@ -117,7 +118,7 @@ export class CanvasRenderer {
    * @param {number} width - The new width of the canvas.
    * @param {number} height - The new height of the canvas.
    */
-  resize(width: number, height: number) {
+  public resize(width: number, height: number) {
     this.width = width * this.resolution;
     this.height = height * this.resolution;
     this.view.width = this.width;
@@ -133,12 +134,12 @@ export class CanvasRenderer {
 
   /**
    * Renders a display object to canvas.
-   * @param {import('../../display/image.js').Image} displayObject - The display object to render.
+   * @param {Image} displayObject - The display object to render.
    * @param {CanvasRenderingContext2D} context - The canvas rendering context.
-   * @param {import('../../geom/matrix.js').Matrix} matrix - The transformation matrix.
+   * @param {Matrix} matrix - The transformation matrix.
    */
-  renderDisplayObject(displayObject: any, context?: any, matrix?: any) {
-    this.renderSession.context = context || this.context;
+  public renderDisplayObject(displayObject: any, context?: any, matrix?: any) {
+    this.renderSession.context = context ?? this.context;
     this.renderSession.resolution = this.resolution;
     displayObject.renderCanvas(this.renderSession, matrix);
   }
@@ -146,12 +147,12 @@ export class CanvasRenderer {
   /**
    * Maps blend modes to canvas rendering operations.
    */
-  mapBlendModes() {
-    if (window.PhaserRegistry.blendModesCanvas) {
+  public mapBlendModes() {
+    if (globalThis.PhaserRegistry.blendModesCanvas) {
       return;
     }
-    const b = [];
-    const useNew = window.PhaserRegistry.CAN_CANVAS_USE_MULTIPLY;
+    const b: GlobalCompositeOperation[] = [];
+    const useNew = globalThis.PhaserRegistry.CAN_CANVAS_USE_MULTIPLY;
     b[BLEND_NORMAL] = 'source-over';
     b[BLEND_ADD] = 'lighter';
     b[BLEND_MULTIPLY] = useNew ? 'multiply' : 'source-over';
@@ -169,14 +170,14 @@ export class CanvasRenderer {
     b[BLEND_SATURATION] = useNew ? 'saturation' : 'source-over';
     b[BLEND_COLOR] = useNew ? 'color' : 'source-over';
     b[BLEND_LUMINOSITY] = useNew ? 'luminosity' : 'source-over';
-    window.PhaserRegistry.blendModesCanvas = b;
+    globalThis.PhaserRegistry.blendModesCanvas = b;
   }
 
   /**
    * Initializes the WebGL context for rendering.
-   * @param {import('../../core/game.js').Game} game - The game instance.
+   * @param {Game} game - The game instance.
    */
-  initContext(_game: import('../../core/game.js').Game) {
+  public initContext(_game: Game) {
     // stub
   }
 }