@vpmedia/phaser 1.43.0 → 1.44.0

package/CHANGES.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## 1.44.0
+
+- Improved Canvas2D fallback handling
+
 ## 1.43.0
 
 - Updated dependencies

package/README.md

@@ -1,6 +1,6 @@
 # @vpmedia/phaser
 
-[![npm version](https://badge.fury.io/js/@vpmedia%2Fphaser.svg?v=1.43.0)](https://badge.fury.io/js/@vpmedia%2Fphaser)
+[![npm version](https://badge.fury.io/js/@vpmedia%2Fphaser.svg?v=1.44.0)](https://badge.fury.io/js/@vpmedia%2Fphaser)
 [![Node.js CI](https://github.com/vpmedia/phaser/actions/workflows/ci.yml/badge.svg)](https://github.com/vpmedia/phaser/actions/workflows/ci.yml)
 
 @vpmedia/phaser is the modern ECMAScript port of the popular Phaser game engine v2.6.2.

package/eslint.config.js

@@ -0,0 +1,80 @@
+import js from '@eslint/js';
+import jsdocPlugin from 'eslint-plugin-jsdoc';
+import unicornPlugin from 'eslint-plugin-unicorn';
+import globals from 'globals';
+
+/** @type { import('eslint').Linter.Config[] } */
+export default [
+  {
+    ignores: [
+      '.github/**/*.*',
+      '.idea/**/*.*',
+      '.vscode/**/*.*',
+      'build/**/*.*',
+      'coverage/**/*.*',
+      'dist/**/*.*',
+      'public/**/*.*',
+      'types/**/*.*',
+      'node_modules/**/*.*',
+    ],
+  },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.jest,
+        ...globals.browser,
+        ...globals.node,
+        ...globals.es2021,
+      },
+      parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
+    plugins: {
+      jsdoc: jsdocPlugin,
+      unicorn: unicornPlugin,
+    },
+    settings: {
+      'import/parsers': {
+        espree: ['.js', '.cjs', '.mjs', '.jsx'],
+      },
+      'import/resolver': {
+        node: true,
+      },
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...jsdocPlugin.configs['flat/recommended'].rules,
+      'no-unused-vars': 'off',
+      'prefer-arrow-callback': 'warn',
+      'prefer-template': 'warn',
+      'jsdoc/require-jsdoc': [
+        'warn',
+        {
+          require: {
+            FunctionDeclaration: true,
+            MethodDefinition: true,
+            ClassDeclaration: false,
+            ArrowFunctionExpression: false,
+            FunctionExpression: false,
+          },
+        },
+      ],
+      'jsdoc/check-indentation': 1,
+      'jsdoc/check-line-alignment': 1,
+      'jsdoc/check-syntax': 1,
+      'jsdoc/require-asterisk-prefix': 1,
+      'jsdoc/require-description': 1,
+      'jsdoc/require-description-complete-sentence': 1,
+      'jsdoc/require-hyphen-before-param-description': 1,
+      'jsdoc/require-throws': 1,
+      'jsdoc/sort-tags': 1,
+      'jsdoc/no-undefined-types': 0,
+    },
+  },
+];

package/lefthook.yml

@@ -10,13 +10,8 @@ pre-commit:
       run: |
         set -e
         yq 'true' {staged_files} > /dev/null
-    lint_json:
-      glob: "*.{json}"
-      run: |
-        set -e
-        jq empty {staged_files}
     lint_js:
-      glob: "*.{js,ts,jsx,tsx}"
+      glob: "*.{js,jsx}"
       run: |
         set -e
         ./node_modules/.bin/eslint {staged_files}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vpmedia/phaser",
-  "version": "1.43.0",
+  "version": "1.44.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,33 +23,30 @@
   "types": "./types/index.d.ts",
   "type": "module",
   "devDependencies": {
+    "@eslint/js": "^9.12.0",
     "@jest/globals": "^29.7.0",
-    "@types/jest": "^29.5.12",
-    "eslint": "^8.56.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.6.3",
-    "eslint-plugin-jsdoc": "^48.0.4",
+    "@types/jest": "^29.5.13",
+    "eslint": "^9.12.0",
+    "eslint-plugin-jsdoc": "^50.3.1",
+    "eslint-plugin-unicorn": "^56.0.0",
+    "globals": "^15.11.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lefthook": "^1.6.1",
-    "prettier": "^3.2.4",
-    "typescript": "^5.3.3"
+    "lefthook": "^1.7.18",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.3"
   },
   "scripts": {
     "test": "NODE_OPTIONS=--experimental-vm-modules jest --passWithNoTests",
-    "lint": "eslint --fix \"**/*.{js,jsx}\"",
+    "lint": "eslint \"**/*.{js,jsx}\"",
     "typecheck": "tsc",
-    "format": "prettier --write \"**/*.{css,js,jsx}\"",
+    "format": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json,md,css}\"",
     "lefthook:install": "lefthook install",
     "lefthook:uninstall": "lefthook uninstall"
   },
   "browserslist": [
-    "> 1%",
+    "> 0.5%",
     "not dead",
     "not op_mini all"
-  ],
-  "engines": {
-    "npm": ">=8.0.0",
-    "node": ">=18.0.0"
-  }
+  ]
 }

package/src/index.js

@@ -1,77 +1,42 @@
 // core
-import * as Const from './phaser/core/const.js';
-import { Game } from './phaser/core/game.js';
-import { GameObjectFactory } from './phaser/core/factory.js';
-import { Signal } from './phaser/core/signal.js';
-import * as MathUtils from './phaser/util/math.js';
+export * as Const from './phaser/core/const.js';
+export { GameObjectFactory } from './phaser/core/factory.js';
+export { Game } from './phaser/core/game.js';
+export { Signal } from './phaser/core/signal.js';
+export * as MathUtils from './phaser/util/math.js';
 // sound
-import { Sound } from './phaser/core/sound.js';
-import { SoundSprite } from './phaser/core/sound_sprite.js';
-import { SoundManager } from './phaser/core/sound_manager.js';
+export { Sound } from './phaser/core/sound.js';
+export { SoundManager } from './phaser/core/sound_manager.js';
+export { SoundSprite } from './phaser/core/sound_sprite.js';
 // time
-import { Time } from './phaser/core/time.js';
-import { Timer } from './phaser/core/timer.js';
-import { TimerEvent } from './phaser/core/timer_event.js';
+export { Time } from './phaser/core/time.js';
+export { Timer } from './phaser/core/timer.js';
+export { TimerEvent } from './phaser/core/timer_event.js';
 // tween
-import { Tween } from './phaser/core/tween.js';
-import { TweenData } from './phaser/core/tween_data.js';
-import { TweenManager } from './phaser/core/tween_manager.js';
+export { Tween } from './phaser/core/tween.js';
+export { TweenData } from './phaser/core/tween_data.js';
+export { TweenManager } from './phaser/core/tween_manager.js';
 // animation
-import { Animation } from './phaser/core/animation.js';
-import { AnimationManager } from './phaser/core/animation_manager.js';
+export { Animation } from './phaser/core/animation.js';
+export { AnimationManager } from './phaser/core/animation_manager.js';
 // texture
-import { BaseTexture } from './phaser/display/webgl/base_texture.js';
-import { Texture } from './phaser/display/webgl/texture.js';
+export { BaseTexture } from './phaser/display/webgl/base_texture.js';
+export { Texture } from './phaser/display/webgl/texture.js';
 // geom
-import { Circle } from './phaser/geom/circle.js';
-import { Ellipse } from './phaser/geom/ellipse.js';
-import { Line } from './phaser/geom/line.js';
-import { Matrix } from './phaser/geom/matrix.js';
-import { Point } from './phaser/geom/point.js';
-import { Polygon } from './phaser/geom/polygon.js';
-import { Rectangle } from './phaser/geom/rectangle.js';
-import { RoundedRectangle } from './phaser/geom/rounded_rectangle.js';
+export { Circle } from './phaser/geom/circle.js';
+export { Ellipse } from './phaser/geom/ellipse.js';
+export { Line } from './phaser/geom/line.js';
+export { Matrix } from './phaser/geom/matrix.js';
+export { Point } from './phaser/geom/point.js';
+export { Polygon } from './phaser/geom/polygon.js';
+export { Rectangle } from './phaser/geom/rectangle.js';
+export { RoundedRectangle } from './phaser/geom/rounded_rectangle.js';
 // display
-import { BitmapText } from './phaser/display/bitmap_text.js';
-import { DisplayObject } from './phaser/display/display_object.js';
-import { Button } from './phaser/display/button.js';
-import { Image } from './phaser/display/image.js';
-import { Group } from './phaser/display/group.js';
-import { Text } from './phaser/display/text.js';
-import { Graphics } from './phaser/display/graphics.js';
-// exports
-export {
-  Const,
-  Game,
-  GameObjectFactory,
-  Signal,
-  MathUtils,
-  BaseTexture,
-  Sound,
-  SoundSprite,
-  SoundManager,
-  Time,
-  Timer,
-  TimerEvent,
-  Tween,
-  TweenData,
-  TweenManager,
-  Animation,
-  AnimationManager,
-  Texture,
-  Circle,
-  Ellipse,
-  Line,
-  Matrix,
-  Point,
-  Polygon,
-  Rectangle,
-  RoundedRectangle,
-  BitmapText,
-  Button,
-  DisplayObject,
-  Image,
-  Group,
-  Text,
-  Graphics,
-};
+export { BitmapText } from './phaser/display/bitmap_text.js';
+export { Button } from './phaser/display/button.js';
+export { DisplayObject } from './phaser/display/display_object.js';
+export { Graphics } from './phaser/display/graphics.js';
+export { Group } from './phaser/display/group.js';
+export { Image } from './phaser/display/image.js';
+export { Text } from './phaser/display/text.js';
+

package/src/phaser/core/animation_parser.js

@@ -37,7 +37,7 @@ export function spriteSheet(game, key, frameWidth, frameHeight, frameMax, margin
   //  Zero or smaller than frame sizes?
   if (width === 0 || height === 0 || width < frameWidth || height < frameHeight || total === 0) {
     console.warn(
-      "AnimationParser.spriteSheet: '" + key + "'s width/height zero or width/height < given frameWidth/frameHeight"
+      `AnimationParser.spriteSheet: '${  key  }'s width/height zero or width/height < given frameWidth/frameHeight`
     );
     return null;
   }

package/src/phaser/core/game.js

@@ -1,22 +1,22 @@
 import { CanvasRenderer } from '../display/canvas/renderer.js';
+import { addToDOM, create, removeFromDOM, setTouchAction } from '../display/canvas/util.js';
 import { WebGLRenderer } from '../display/webgl/renderer.js';
-import { Signal } from './signal.js';
-import { Loader } from './loader.js';
 import { Cache } from './cache.js';
-import { Input } from './input.js';
+import { RENDER_AUTO, RENDER_WEBGL } from './const.js';
 import { Device } from './device.js';
+import { checkOS, initialize } from './device_util.js';
 import { GameObjectFactory } from './factory.js';
+import { Input } from './input.js';
+import { Loader } from './loader.js';
 import { RequestAnimationFrame } from './raf.js';
 import { ScaleManager } from './scale_manager.js';
-import { SoundManager } from './sound_manager.js';
 import { SceneManager } from './scene_manager.js';
+import { Signal } from './signal.js';
+import { SoundManager } from './sound_manager.js';
+import { Stage } from './stage.js';
 import { Time } from './time.js';
 import { TweenManager } from './tween_manager.js';
 import { World } from './world.js';
-import { Stage } from './stage.js';
-import { RENDER_AUTO, RENDER_WEBGL } from './const.js';
-import { create, removeFromDOM, addToDOM, setTouchAction } from '../display/canvas/util.js';
-import { initialize, checkOS } from './device_util.js';
 
 export class Game {
   /**
@@ -48,7 +48,9 @@ export class Game {
     this.tweens = null;
     this.world = null;
     this.device = new Device();
+    /** @type {HTMLCanvasElement} */
     this.canvas = null;
+    /** @type {RenderingContext} */
     this.context = null;
     this.onPause = new Signal();
     this.onResume = new Signal();
@@ -110,7 +112,10 @@ export class Game {
   /**
    * TBD.
    */
-  initRenderer() {
+  createRendererCanvas() {
+    if (this.canvas) {
+      removeFromDOM(this.canvas);
+    }
     if (this.config.canvas) {
       this.canvas = this.config.canvas;
     } else {
@@ -121,6 +126,13 @@ export class Game {
     } else {
       this.canvas.style['-webkit-full-screen'] = 'width: 100%; height: 100%';
     }
+  }
+
+  /**
+   * TBD.
+   */
+  initRenderer() {
+    this.createRendererCanvas();
     let isWebGlReady = false;
     if (this.config.renderType === RENDER_AUTO || this.config.renderType === RENDER_WEBGL) {
       try {
@@ -133,7 +145,11 @@ export class Game {
         isWebGlReady = true;
       } catch (e) {
         isWebGlReady = false;
-        const tags = {};
+        const tags = {
+          'document.readyState': document.readyState,
+          'document.hidden': document.hidden,
+          'document.visibilityState': document.visibilityState,
+        };
         if (window.PhaserRegistry?.GL_PROGRAM_INFO_LOG) {
           tags.gl_program_log = window.PhaserRegistry.GL_PROGRAM_INFO_LOG;
         }
@@ -159,9 +175,8 @@ export class Game {
           this.canvas.removeEventListener('webglcontextlost', this.contextRestoredBinded, false);
         }
         this.renderer.destroy();
-        removeFromDOM(this.canvas);
-        this.canvas = create(this, this.width, this.height, this.config.canvasID, true);
       }
+      this.createRendererCanvas();
       this.renderer = new CanvasRenderer(this);
       this.context = this.renderer.context;
     }

package/src/phaser/core/input.js

@@ -162,13 +162,13 @@ export class Input {
    */
   addPointer() {
     if (this.pointers.length >= MAX_POINTERS) {
-      console.warn('Input.addPointer: Maximum limit of ' + MAX_POINTERS + ' pointers reached.');
+      console.warn(`Input.addPointer: Maximum limit of ${  MAX_POINTERS  } pointers reached.`);
       return null;
     }
     const id = this.pointers.length + 1;
     const pointer = new Pointer(this.game, id, POINTER_CONTACT);
     this.pointers.push(pointer);
-    this['pointer' + id] = pointer;
+    this[`pointer${  id}`] = pointer;
     return pointer;
   }
 

package/src/phaser/core/loader.js

@@ -163,14 +163,14 @@ export class Loader {
    */
   addToFileList(type, key = '', url = null, properties = null, overwrite = false, extension = null) {
     if (key === undefined || key === '') {
-      console.warn('Loader: Invalid or no key given of type ' + type);
+      console.warn(`Loader: Invalid or no key given of type ${  type}`);
       return this;
     }
     if (url === undefined || url === null) {
       if (extension) {
         url = key + extension;
       } else {
-        console.warn('Loader: No URL given for file type: ' + type + ' key: ' + key);
+        console.warn(`Loader: No URL given for file type: ${  type  } key: ${  key}`);
         return this;
       }
     }
@@ -376,12 +376,12 @@ export class Loader {
     }
     this.audio(key, urls, autoDecode);
     if (jsonURL) {
-      this.json(key + '-audioatlas', jsonURL);
+      this.json(`${key  }-audioatlas`, jsonURL);
     } else if (jsonData) {
       if (typeof jsonData === 'string') {
         jsonData = JSON.parse(jsonData);
       }
-      this.cache.addJSON(key + '-audioatlas', '', jsonData);
+      this.cache.addJSON(`${key  }-audioatlas`, '', jsonData);
     }
     return this;
   }
@@ -399,10 +399,10 @@ export class Loader {
    */
   bitmapFont(key, textureURL = null, atlasURL = null, atlasData = null, xSpacing = 0, ySpacing = 0) {
     if (textureURL === undefined || textureURL === null) {
-      textureURL = key + '.png';
+      textureURL = `${key  }.png`;
     }
     if (atlasURL === null && atlasData === null) {
-      atlasURL = key + '.xml';
+      atlasURL = `${key  }.xml`;
     }
     //  A URL to a json/xml atlas has been given
     if (atlasURL) {
@@ -441,10 +441,10 @@ export class Loader {
    */
   atlas(key, textureURL, atlasURL = null, atlasData = null, format = TEXTURE_ATLAS_JSON_HASH) {
     if (textureURL === undefined || textureURL === null) {
-      textureURL = key + '.png';
+      textureURL = `${key  }.png`;
     }
     if (!atlasURL && !atlasData) {
-      atlasURL = key + '.json';
+      atlasURL = `${key  }.json`;
     }
     //  A URL to a json/xml file has been given
     if (atlasURL) {
@@ -936,7 +936,7 @@ export class Loader {
     if (!reason && xhr) {
       reason = xhr.status;
     }
-    const message = 'Error loading asset (' + reason + ')';
+    const message = `Error loading asset (${  reason  })`;
     this.asyncComplete(file, message);
   }
 
@@ -976,7 +976,7 @@ export class Loader {
           if (file.format === TEXTURE_ATLAS_JSON_HASH) {
             this.xhrLoad(file, this.transformUrl(file.atlasURL, file), 'text', this.jsonLoadComplete);
           } else {
-            throw new Error('Invalid Texture Atlas format: ' + file.format);
+            throw new Error(`Invalid Texture Atlas format: ${  file.format}`);
           }
         }
         break;
@@ -1068,7 +1068,7 @@ export class Loader {
     const xml = this.parseXml(data);
     if (!xml) {
       const responseType = xhr.responseType || xhr.contentType; // contentType for MS-XDomainRequest
-      console.warn('Loader - ' + file.key + ': invalid XML (' + responseType + ')');
+      console.warn(`Loader - ${  file.key  }: invalid XML (${  responseType  })`);
       this.asyncComplete(file, 'invalid XML');
       return;
     }

package/src/phaser/core/scale_manager.js

@@ -552,10 +552,10 @@ export class ScaleManager {
         const offset = targetEdge - currentEdge;
         margin.left = Math.round(offset);
       }
-      canvas.style.marginLeft = margin.left + 'px';
+      canvas.style.marginLeft = `${margin.left  }px`;
       if (margin.left !== 0) {
         margin.right = -(parentBounds.width - canvasBounds.width - margin.left);
-        canvas.style.marginRight = margin.right + 'px';
+        canvas.style.marginRight = `${margin.right  }px`;
       }
     }
     if (vertical) {
@@ -569,10 +569,10 @@ export class ScaleManager {
         const offset = targetEdge - currentEdge;
         margin.top = Math.round(offset);
       }
-      canvas.style.marginTop = margin.top + 'px';
+      canvas.style.marginTop = `${margin.top  }px`;
       if (margin.top !== 0) {
         margin.bottom = -(parentBounds.height - canvasBounds.height - margin.top);
-        canvas.style.marginBottom = margin.bottom + 'px';
+        canvas.style.marginBottom = `${margin.bottom  }px`;
       }
     }
     // Silly backwards compatibility..
@@ -613,7 +613,7 @@ export class ScaleManager {
    * @param {string} cssWidth - TBD.
    * @param {string} cssHeight - TBD.
    */
-  resetCanvas(cssWidth = this.width + 'px', cssHeight = this.height + 'px') {
+  resetCanvas(cssWidth = `${this.width  }px`, cssHeight = `${this.height  }px`) {
     const canvas = this.game.canvas;
     if (!this.compatibility.noMargins) {
       canvas.style.marginLeft = '';

package/src/phaser/core/signal.js

@@ -44,11 +44,11 @@ export class Signal {
       binding = this._bindings[prevIndex];
       if (binding.isOnce() !== isOnce) {
         throw new Error(
-          'You cannot add' +
-            (isOnce ? '' : 'Once') +
-            '() then add' +
-            (!isOnce ? '' : 'Once') +
-            '() the same listener without removing the relationship first.'
+          `You cannot add${ 
+            isOnce ? '' : 'Once' 
+            }() then add${ 
+            !isOnce ? '' : 'Once' 
+            }() the same listener without removing the relationship first.`
         );
       }
     } else {
@@ -243,7 +243,7 @@ export class Signal {
    * @returns {string} TBD.
    */
   toString() {
-    return '[Signal active:' + this.active + ' numListeners:' + this.getNumListeners() + ']';
+    return `[Signal active:${  this.active  } numListeners:${  this.getNumListeners()  }]`;
   }
 
   /**

package/src/phaser/core/signal_binding.js

@@ -96,6 +96,6 @@ export class SignalBinding {
    * @returns {string} TBD.
    */
   toString() {
-    return '[SignalBinding isOnce:' + this._isOnce + ', isBound:' + this.isBound() + ', active:' + this.active + ']';
+    return `[SignalBinding isOnce:${  this._isOnce  }, isBound:${  this.isBound()  }, active:${  this.active  }]`;
   }
 }

package/src/phaser/core/sound.js

@@ -268,7 +268,7 @@ export class Sound {
         this._tempVolume = this.volume;
         this._tempLoop = this.loop;
       } else {
-        console.warn('Sound.play: audio marker ' + marker + ' does not exist');
+        console.warn(`Sound.play: audio marker ${  marker  } does not exist`);
         return this;
       }
     } else {

package/src/phaser/core/sound_sprite.js

@@ -7,7 +7,7 @@ export class SoundSprite {
   constructor(game, key) {
     this.game = game;
     this.key = key;
-    this.config = this.game.cache.getJSON(key + '-audioatlas');
+    this.config = this.game.cache.getJSON(`${key  }-audioatlas`);
     this.autoplayKey = null;
     this.autoplay = false;
     this.sounds = {};

package/src/phaser/display/bitmap_text.js

@@ -318,7 +318,7 @@ export class BitmapText extends DisplayObject {
     if (typeof this.tint === 'number') {
       let colorStr = this.tint.toString(16);
       while (colorStr.length < 6) {
-        colorStr = '0' + colorStr;
+        colorStr = `0${  colorStr}`;
       }
       return `#${colorStr.toUpperCase()}`;
     }

package/src/phaser/display/button.js

@@ -127,7 +127,7 @@ export class Button extends Image {
    * @param {boolean} switchImmediately - TBD.
    */
   setStateFrame(state, frame, switchImmediately = false) {
-    const frameKey = '_on' + state + 'Frame';
+    const frameKey = `_on${  state  }Frame`;
     if (frame) {
       this[frameKey] = frame;
       if (switchImmediately) {
@@ -148,7 +148,7 @@ export class Button extends Image {
       return false;
     }
     const state = this.input.enabled || !this._onDisabledFrame ? newState : STATE_DISABLED;
-    const frameKey = '_on' + state + 'Frame';
+    const frameKey = `_on${  state  }Frame`;
     const frame = this[frameKey];
     if (typeof frame === 'string') {
       this.frameName = frame;

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

@@ -59,23 +59,23 @@ export function renderGraphics(graphics, context) {
       }
       if (data.fill) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = '#' + ('00000' + (fillColor | 0).toString(16)).substr(-6);
+        context.fillStyle = `#${  (`00000${  (fillColor | 0).toString(16)}`).substr(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
         context.globalAlpha = data.lineAlpha * worldAlpha;
-        context.strokeStyle = '#' + ('00000' + (lineColor | 0).toString(16)).substr(-6);
+        context.strokeStyle = `#${  (`00000${  (lineColor | 0).toString(16)}`).substr(-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${  (fillColor | 0).toString(16)}`).substr(-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${  (lineColor | 0).toString(16)}`).substr(-6)}`;
         context.strokeRect(shape.x, shape.y, shape.width, shape.height);
       }
     } else if (data.type === GEOM_CIRCLE) {
@@ -84,12 +84,12 @@ export function renderGraphics(graphics, context) {
       context.closePath();
       if (data.fill) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = '#' + ('00000' + (fillColor | 0).toString(16)).substr(-6);
+        context.fillStyle = `#${  (`00000${  (fillColor | 0).toString(16)}`).substr(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
         context.globalAlpha = data.lineAlpha * worldAlpha;
-        context.strokeStyle = '#' + ('00000' + (lineColor | 0).toString(16)).substr(-6);
+        context.strokeStyle = `#${  (`00000${  (lineColor | 0).toString(16)}`).substr(-6)}`;
         context.stroke();
       }
     } else if (data.type === GEOM_ELLIPSE) {
@@ -114,12 +114,12 @@ export function renderGraphics(graphics, context) {
       context.closePath();
       if (data.fill) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = '#' + ('00000' + (fillColor | 0).toString(16)).substr(-6);
+        context.fillStyle = `#${  (`00000${  (fillColor | 0).toString(16)}`).substr(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
         context.globalAlpha = data.lineAlpha * worldAlpha;
-        context.strokeStyle = '#' + ('00000' + (lineColor | 0).toString(16)).substr(-6);
+        context.strokeStyle = `#${  (`00000${  (lineColor | 0).toString(16)}`).substr(-6)}`;
         context.stroke();
       }
     } else if (data.type === GEOM_ROUNDED_RECTANGLE) {
@@ -143,12 +143,12 @@ export function renderGraphics(graphics, context) {
       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${  (fillColor | 0).toString(16)}`).substr(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
         context.globalAlpha = data.lineAlpha * worldAlpha;
-        context.strokeStyle = '#' + ('00000' + (lineColor | 0).toString(16)).substr(-6);
+        context.strokeStyle = `#${  (`00000${  (lineColor | 0).toString(16)}`).substr(-6)}`;
         context.stroke();
       }
     }

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

@@ -106,8 +106,8 @@ export class CanvasRenderer {
     this.view.width = this.width;
     this.view.height = this.height;
     if (this.autoResize) {
-      this.view.style.width = this.width / this.resolution + 'px';
-      this.view.style.height = this.height / this.resolution + 'px';
+      this.view.style.width = `${this.width / this.resolution  }px`;
+      this.view.style.height = `${this.height / this.resolution  }px`;
     }
     if (this.renderSession.smoothProperty) {
       this.context[this.renderSession.smoothProperty] = this.renderSession.scaleMode === SCALE_LINEAR;

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

@@ -28,7 +28,7 @@ export function tintWithMultiply(texture, color, canvas) {
     canvas.height = crop.height;
   }
   context.clearRect(0, 0, crop.width, crop.height);
-  context.fillStyle = '#' + ('00000' + (color | 0).toString(16)).substr(-6);
+  context.fillStyle = `#${  (`00000${  (color | 0).toString(16)}`).substr(-6)}`;
   context.fillRect(0, 0, crop.width, crop.height);
   context.globalCompositeOperation = 'multiply';
   context.drawImage(texture.baseTexture.source, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height);
@@ -105,9 +105,9 @@ export function canUseNewCanvasBlendModes() {
   const pngHead = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABAQMAAADD8p2OAAAAA1BMVEX/';
   const pngEnd = 'AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==';
   const magenta = new Image();
-  magenta.src = pngHead + 'AP804Oa6' + pngEnd;
+  magenta.src = `${pngHead  }AP804Oa6${  pngEnd}`;
   const yellow = new Image();
-  yellow.src = pngHead + '/wCKxvRF' + pngEnd;
+  yellow.src = `${pngHead  }/wCKxvRF${  pngEnd}`;
   const canvas = create('CanvasTinter', 6, 1);
   const context = canvas.getContext('2d');
   context.globalCompositeOperation = 'multiply';

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

@@ -7,7 +7,7 @@ import { create as createCanvas } from './pool.js';
  * @param {number} height - TBD.
  * @param {string} id - TBD.
  * @param {boolean} skipPool - TBD.
- * @returns {object} TBD.
+ * @returns {HTMLCanvasElement} TBD.
  */
 export function create(parent, width, height, id, skipPool) {
   width = width || 256;
@@ -100,7 +100,7 @@ export function addToDOM(canvas, parent, overflowHidden = true) {
  * @param {HTMLCanvasElement} canvas - TBD.
  */
 export function removeFromDOM(canvas) {
-  if (canvas.parentNode) {
+  if (canvas && canvas.parentNode) {
     canvas.parentNode.removeChild(canvas);
   }
 }
@@ -129,7 +129,7 @@ export function setTransform(context, translateX, translateY, scaleX, scaleY, sk
 export function getSmoothingPrefix(context) {
   const VENDORS = ['i', 'webkitI', 'msI', 'mozI', 'oI'];
   for (let i = 0; i < VENDORS.length; i += 1) {
-    const s = VENDORS[i] + 'mageSmoothingEnabled';
+    const s = `${VENDORS[i]  }mageSmoothingEnabled`;
     if (context && context[s]) {
       return s;
     }

package/src/phaser/display/display_object.js

@@ -95,7 +95,7 @@ export class DisplayObject {
       this.children.splice(index, 0, child);
       return child;
     }
-    throw new Error(child + 'addChildAt: The index ' + index + ' supplied is out of bounds ' + this.children.length);
+    throw new Error(`${child  }addChildAt: The index ${  index  } supplied is out of bounds ${  this.children.length}`);
   }
 
   /**
@@ -155,9 +155,9 @@ export class DisplayObject {
   getChildAt(index) {
     if (index < 0 || index >= this.children.length) {
       throw new Error(
-        'getChildAt: Supplied index ' +
-          index +
-          ' does not exist in the child list, or the supplied DisplayObject must be a child of the caller'
+        `getChildAt: Supplied index ${ 
+          index 
+          } does not exist in the child list, or the supplied DisplayObject must be a child of the caller`
       );
     }
     return this.children[index];

package/src/phaser/display/text.js

@@ -545,7 +545,7 @@ export class Text extends Image {
       // append the entire line and exit early
       const lineWidth = context.measureText(line).width;
       if (lineWidth < wordWrapWidth) {
-        output += line + '\n';
+        output += `${line  }\n`;
       } else {
         // otherwise, calculate new lines
         let currentLineWidth = wordWrapWidth;
@@ -553,7 +553,7 @@ export class Text extends Image {
         const words = line.split(' ');
         for (let j = 0; j < words.length; j += 1) {
           const word = words[j];
-          const wordWithSpace = word + ' ';
+          const wordWithSpace = `${word  } `;
           let wordWidth = context.measureText(wordWithSpace).width;
           if (wordWidth > currentLineWidth) {
             // break word
@@ -587,7 +587,7 @@ export class Text extends Image {
               .join(' ')
               .replace(/[ \n]*$/gi, '');
             // prepend remainder to next line
-            lines[i + 1] = remainder + ' ' + (lines[i + 1] || '');
+            lines[i + 1] = `${remainder  } ${  lines[i + 1] || ''}`;
             linesCount = lines.length;
             break; // processing on this line
             // append word with space to output
@@ -597,7 +597,7 @@ export class Text extends Image {
           }
         }
         // append processed line to output
-        output += out.replace(/[ \n]*$/gi, '') + '\n';
+        output += `${out.replace(/[ \n]*$/gi, '')  }\n`;
       }
     }
     // trim the end of the string
@@ -624,11 +624,11 @@ export class Text extends Image {
           if (j > 0) {
             result += '\n';
           }
-          result += words[j] + ' ';
+          result += `${words[j]  } `;
           spaceLeft = this.style.wordWrapWidth - wordWidth;
         } else {
           spaceLeft -= wordWidthWithSpace;
-          result += words[j] + ' ';
+          result += `${words[j]  } `;
         }
       }
       if (i < lines.length - 1) {
@@ -674,7 +674,7 @@ export class Text extends Image {
       let family = m[5].trim();
       // If it looks like the value should be quoted, but isn't, then quote it.
       if (!/^(?:inherit|serif|sans-serif|cursive|fantasy|monospace)$/.exec(family) && !/['",]/.exec(family)) {
-        family = "'" + family + "'";
+        family = `'${  family  }'`;
       }
       return {
         font,
@@ -685,7 +685,7 @@ export class Text extends Image {
         fontFamily: family,
       };
     }
-    console.warn('[Text] Error parsing CSS font: ' + font);
+    console.warn(`[Text] Error parsing CSS font: ${  font}`);
     return { font };
   }
 
@@ -1039,7 +1039,7 @@ export class Text extends Image {
     mutatedValue = mutatedValue.trim();
     // If it looks like the value should be quoted, but isn't, then quote it.
     if (!/^(?:inherit|serif|sans-serif|cursive|fantasy|monospace)$/.exec(mutatedValue) && !/['",]/.exec(mutatedValue)) {
-      mutatedValue = "'" + mutatedValue + "'";
+      mutatedValue = `'${  mutatedValue  }'`;
     }
 
     this._fontComponents.fontFamily = mutatedValue;

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

@@ -211,8 +211,8 @@ export class WebGLRenderer {
     this.view.width = this.width;
     this.view.height = this.height;
     if (this.autoResize) {
-      this.view.style.width = this.width / this.resolution + 'px';
-      this.view.style.height = this.height / this.resolution + 'px';
+      this.view.style.width = `${this.width / this.resolution  }px`;
+      this.view.style.height = `${this.height / this.resolution  }px`;
     }
     this.gl.viewport(0, 0, this.width, this.height);
     this.projection.x = this.width / 2 / this.resolution;

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

@@ -115,7 +115,7 @@ export class NormalShader {
         }
       } else {
         //  GL function reference
-        uniform.glFunc = gl['uniform' + type];
+        uniform.glFunc = gl[`uniform${  type}`];
         if (type === '2f' || type === '2i') {
           uniform.glValueLength = 2;
         } else if (type === '3f' || type === '3i') {
@@ -138,7 +138,7 @@ export class NormalShader {
       return;
     }
     const gl = this.gl;
-    gl.activeTexture(gl['TEXTURE' + this.textureCount]);
+    gl.activeTexture(gl[`TEXTURE${  this.textureCount}`]);
     gl.bindTexture(gl.TEXTURE_2D, uniform.value.baseTexture._glTextures[gl.id]);
     //  Extended texture data
     if (uniform.textureData) {
@@ -215,7 +215,7 @@ export class NormalShader {
         );
       } else if (uniform.type === 'sampler2D') {
         if (uniform._init) {
-          gl.activeTexture(gl['TEXTURE' + this.textureCount]);
+          gl.activeTexture(gl[`TEXTURE${  this.textureCount}`]);
           if (uniform.value.baseTexture._dirty[gl.id]) {
             window.PhaserRegistry.INSTANCES[gl.id].updateTexture(uniform.value.baseTexture);
           } else {

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

@@ -96,7 +96,7 @@ export class Texture {
       // TODO: make this configurable
       const isTextureSilentFail = true;
       if (!isTextureSilentFail) {
-        throw new Error('Texture Error: frame does not fit inside the base Texture dimensions ' + this);
+        throw new Error(`Texture Error: frame does not fit inside the base Texture dimensions ${  this}`);
       }
       this.valid = false;
       return;

package/src/phaser/geom/circle.js

@@ -157,7 +157,7 @@ export class Circle {
    * @returns {string} TBD.
    */
   toString() {
-    return '[{Circle (x=' + this.x + ' y=' + this.y + ' diameter=' + this.diameter + ' radius=' + this.radius + ')}]';
+    return `[{Circle (x=${  this.x  } y=${  this.y  } diameter=${  this.diameter  } radius=${  this.radius  })}]`;
   }
 
   /**

package/src/phaser/geom/ellipse.js

@@ -96,6 +96,6 @@ export class Ellipse {
    * @returns {string} TBD.
    */
   toString() {
-    return '[{Ellipse (x=' + this.x + ' y=' + this.y + ' width=' + this.width + ' height=' + this.height + ')}]';
+    return `[{Ellipse (x=${  this.x  } y=${  this.y  } width=${  this.width  } height=${  this.height  })}]`;
   }
 }

package/src/phaser/geom/point.js

@@ -309,6 +309,6 @@ export class Point {
    * @returns {string} TBD.
    */
   toString() {
-    return '[{Point (x=' + this.x + ' y=' + this.y + ')}]';
+    return `[{Point (x=${  this.x  } y=${  this.y  })}]`;
   }
 }

package/src/phaser/geom/rectangle.js

@@ -322,17 +322,17 @@ export class Rectangle {
    */
   toString() {
     return (
-      '[{Rectangle (x=' +
-      this.x +
-      ' y=' +
-      this.y +
-      ' width=' +
-      this.width +
-      ' height=' +
-      this.height +
-      ' empty=' +
-      this.empty +
-      ')}]'
+      `[{Rectangle (x=${ 
+      this.x 
+      } y=${ 
+      this.y 
+      } width=${ 
+      this.width 
+      } height=${ 
+      this.height 
+      } empty=${ 
+      this.empty 
+      })}]`
     );
   }
 

package/src/phaser/util/math.js

@@ -285,7 +285,7 @@ export function valueToColor(value, out) {
     out.a = tempColor.a / 255;
   }
   out.rgba =
-    'rgba(' + out.r.toString() + ',' + out.g.toString() + ',' + out.b.toString() + ',' + out.a.toString() + ')';
+    `rgba(${  out.r.toString()  },${  out.g.toString()  },${  out.b.toString()  },${  out.a.toString()  })`;
   out.color = getColor(out.r, out.g, out.b);
   out.color32 = getColor32(out.a * 255, out.r, out.g, out.b);
   return out;