refactor: automatically load Phaser images from ./assets/autoload/phaser

Images placed into ./assets/autoload/phaser are available in Phaser after a
once-per-Phaser-game-instance call to `use(phaser:Phaser.Game)` where `use` is
imported from ./src/assets.ts.

In addition to a path to the image, Phaser requires a 'key' when loading
an image. When autoloading, the basename of the image is used as the
Phaser key.

Formerly:

// Load image ./assets/interface/hex_hover.png
this.Phaser.image.load('hover', getUrl('interface/hex_hover.png'));
// Use image
this.Phaser.loadTexture('hover');

Now:

// Load image ./assets/autoload/phaser/interface/hover.png
[nothing to do]
// Use image
this.Phaser.loadTexture('hover');

----

Additionally:

* Remove most calls to Phaser.load.image.
* Update remaing source to point to new image locations.

src/assets.ts

@@ -192,3 +192,25 @@ export function getDirectory(path: string): AssetEntry[] {
 	}
 	return entry;
 }
+
+export function use(phaser: Phaser.Game) {
+	const importAll = (require: __WebpackModuleApi.RequireContext) =>
+		require.keys().map((localPath) => require(localPath));
+
+	const basename = (path: string) => {
+		const base = new String(path).substring(path.lastIndexOf('/') + 1);
+		let i = base.lastIndexOf('.');
+		if (base.lastIndexOf('.') === -1) {
+			return base;
+		}
+		while (i > 0 && base[i] === '.') {
+			i--;
+		}
+		return base.substring(0, i + 1);
+	};
+
+	const urls = importAll(require.context('../assets/autoload/phaser', true));
+	for (const url of urls) {
+		phaser.load.image(basename(url), url);
+	}
+}

src/game.ts

@@ -6,7 +6,7 @@ import { SoundSys } from './sound/soundsys';
 import { MusicPlayer } from './sound/musicplayer';
 import { Hex } from './utility/hex';
 import { HexGrid } from './utility/hexgrid';
-import { getUrl } from './assets';
+import { getUrl, use as assetsUse } from './assets';
 import { Player, PlayerColor } from './player';
 import { UI } from './ui/interface';
 import { Creature } from './creature';
@@ -291,21 +291,9 @@ export default class Game {
 
 			if (name == 'Dark Priest') {
 				for (i = 0, count = dpcolor.length; i < count; i++) {
-					this.Phaser.load.image(
-						name + dpcolor[i] + '_cardboard',
-						getUrl('units/cardboards/' + name + ' ' + dpcolor[i]),
-					);
 					this.getImage(getUrl('units/avatars/' + name + ' ' + dpcolor[i]));
 				}
 			} else {
-				if (creature.drop) {
-					this.Phaser.load.image(
-						'drop_' + creature.drop.name,
-						getUrl('drops/' + creature.drop.name),
-					);
-				}
-
-				this.Phaser.load.image(name + '_cardboard', getUrl('units/cardboards/' + name));
 				this.getImage(getUrl('units/avatars/' + name));
 			}
 
@@ -367,58 +355,11 @@ export default class Game {
 		this.Phaser.load.onFileComplete.add(this.loadFinish, this);
 		this.Phaser.load.onLoadComplete.add(onLoadCompleteFn);
 
-		// Health
-		const playerColors: PlayerColor[] = ['red', 'blue', 'orange', 'green'];
-
-		let i;
-		for (i = 0; i < 4; i++) {
-			this.Phaser.load.image('p' + i + '_health', getUrl('interface/rectangle_' + playerColors[i]));
-			this.Phaser.load.image('p' + i + '_plasma', getUrl('interface/capsule_' + playerColors[i]));
-			this.Phaser.load.image(
-				'p' + i + '_frozen',
-				getUrl('interface/rectangle_frozen_' + playerColors[i]),
-			);
-		}
+		assetsUse(this.Phaser);
 
 		// Ability SFX
 		this.Phaser.load.audio('MagmaSpawn0', getUrl('units/sfx/Infernal 0'));
 
-		// Debug help
-		this.Phaser.load.image('pixel', getUrl('interface/pixel'));
-
-		// Grid
-		this.Phaser.load.image('hex', getUrl('interface/hex'));
-		this.Phaser.load.image('hex_dashed', getUrl('interface/hex_dashed'));
-		this.Phaser.load.image('hex_deadzone', getUrl('interface/hex_deadzone'));
-		this.Phaser.load.image('hex_path', getUrl('interface/hex_path'));
-		this.Phaser.load.image('cancel', getUrl('interface/cancel'));
-		this.Phaser.load.image('input', getUrl('interface/hex_input'));
-		for (i = 0; i < 4; i++) {
-			this.Phaser.load.image('hex_p' + i, getUrl('interface/hex_glowing_' + playerColors[i]));
-			this.Phaser.load.image('hex_hover_p' + i, getUrl('interface/hex_outline_' + playerColors[i]));
-		}
-
-		// Traps
-		this.Phaser.load.image('trap_royal-seal', getUrl('units/sprites/Gumble - Royal Seal'));
-		this.Phaser.load.image('trap_mud-bath', getUrl('units/sprites/Swine Thug - Mud Bath'));
-		this.Phaser.load.image(
-			'trap_scorched-ground',
-			getUrl('units/sprites/Infernal - Scorched Ground'),
-		);
-		this.Phaser.load.image('trap_firewall', getUrl('units/sprites/Infernal - Scorched Ground'));
-		this.Phaser.load.image('trap_poisonous-vine', getUrl('units/sprites/Impaler - Poisonous Vine'));
-
-		// Effects
-		this.Phaser.load.image('effects_fiery-touch', getUrl('units/sprites/Abolished - Fiery Touch'));
-		this.Phaser.load.image(
-			'effects_fissure-vent',
-			getUrl('units/sprites/Infernal - Scorched Ground'),
-		);
-		this.Phaser.load.image(
-			'effects_freezing-spit',
-			getUrl('units/sprites/Snow Bunny - Freezing Spit'),
-		);
-
 		// Background
 		this.Phaser.load.image('background', getUrl('locations/' + this.background_image + '/bg'));
 

src/style/styles.less

@@ -75,7 +75,7 @@
 }
 
 #hexesDisplay .displayhex {
-	background: url('~assets/interface/hex.png');
+	background: url('~assets/autoload/phaser/interface/hex.png');
 	transition: opacity 250ms;
 }
 
@@ -138,19 +138,19 @@
 }
 
 #hexesDisplay .adj {
-	background: url('~assets/interface/hex_path.png');
+	background: url('~assets/autoload/phaser/interface/hex_path.png');
 	z-index: 5;
 	opacity: 1;
 }
 
 #hexesDisplay .displayhex.dashed {
-	background: url('~assets/interface/hex_dashed.png');
+	background: url('~assets/autoload/phaser/interface/hex_dashed.png');
 	z-index: 5;
 	opacity: 1 !important;
 }
 
 #hexesDisplay .displayhex.deadzone {
-	background: url('~assets/interface/hex_deadzone.png');
+	background: url('~assets/autoload/phaser/interface/hex_deadzone.png');
 	z-index: 5;
 	opacity: 1 !important;
 }
@@ -171,67 +171,67 @@
 }
 
 #hexesOverlay .displayhex.hover {
-	background: url('~assets/interface/cancel.png');
+	background: url('~assets/autoload/phaser/interface/cancel.png');
 }
 
 /*p0*/
 #hexesOverlay .displayhex.creature.player0.ownCreatureHexShade,
 #hexesOverlay .displayhex.hover.h_player0 {
-	background: url('~assets/interface/hex_glowing_red.png') !important;
+	background: url('~assets/autoload/phaser/interface/hex_p0.png') !important;
 }
 
 #hexesDisplay .displayhex.creature.player0,
 #hexesOverlay .displayhex.creature.active.player0,
 #hexesOverlay .displayhex.creature.selected.player0 {
-	background: url('~assets/interface/hex_outline_red.png');
+	background: url('~assets/autoload/phaser/interface/hex_p0.png');
 }
 
 /*p1*/
 #hexesOverlay .displayhex.creature.player1.ownCreatureHexShade,
 #hexesOverlay .displayhex.hover.h_player1 {
-	background: url('~assets/interface/hex_glowing_blue.png') !important;
+	background: url('~assets/autoload/phaser/interface/hex_p1.png') !important;
 }
 
 #hexesDisplay .displayhex.creature.player1,
 #hexesOverlay .displayhex.creature.active.player1,
 #hexesOverlay .displayhex.creature.selected.player1 {
-	background: url('~assets/interface/hex_outline_blue.png');
+	background: url('~assets/autoload/phaser/interface/hex_hover_p1.png');
 }
 
 /*p2*/
 #hexesOverlay
 	.displayhex.hover.h_player2
 	#hexesOverlay
 	.displayhex.creature.player2.ownCreatureHexShade {
-	background: url('~assets/interface/hex_glowing_orange.png') !important;
+	background: url('~assets/autoload/phaser/interface/hex_p2.png') !important;
 }
 
 #hexesDisplay .displayhex.creature.player2,
 #hexesOverlay .displayhex.creature.active.player2,
 #hexesOverlay .displayhex.creature.selected.player2 {
-	background: url('~assets/interface/hex_outline_orange.png');
+	background: url('~assets/autoload/phaser/interface/hex_hover_p2.png');
 }
 
 /*p3*/
 #hexesOverlay
 	.displayhex.hover.h_player3
 	#hexesOverlay
 	.displayhex.creature.player3.ownCreatureHexShade {
-	background: url('~assets/interface/hex_glowing_green.png') !important;
+	background: url('~assets/autoload/phaser/interface/hex_p3.png') !important;
 }
 
 #hexesDisplay .displayhex.creature.player3,
 #hexesOverlay .displayhex.creature.active.player3,
 #hexesOverlay .displayhex.creature.selected.player3 {
-	background: url('~assets/interface/hex_outline_green.png');
+	background: url('~assets/autoload/phaser/interface/hex_hover_p3.png');
 }
 
 #hexesDisplay .displayhex.creature.hidden {
 	opacity: 0 !important;
 }
 
 #hexesDisplay .displayhex.creature.dashed {
-	background: url('~assets/interface/hex_dashed.png');
+	background: url('~assets/autoload/phaser/interface/hex_dashed.png');
 	z-index: 5;
 	opacity: 1 !important;
 }
@@ -1733,19 +1733,19 @@ span.pure {
 }
 
 .trap.mud-bath {
-	background: url('~assets/units/sprites/Swine Thug - Mud Bath.png');
+	background: url('~assets/autoload/phaser/units/sprites/trap_mud-bath.png');
 }
 
 .trap.royal-seal {
-	background: url('~assets/units/sprites/Gumble - Royal Seal.png');
+	background: url('~assets/autoload/phaser/units/sprites/trap_poisonous-vine.png');
 }
 
 .trap.scorched-ground {
-	background: url('~assets/units/sprites/Infernal - Scorched Ground.png');
+	background: url('~assets/autoload/phaser/units/sprites/trap_scorched-ground.png');
 }
 
 .trap.firewall {
-	background: url('~assets/units/sprites/Infernal - Scorched Ground.png');
+	background: url('~assets/autoload/phaser/units/sprites/trap_scorched-ground.png');
 }
 
 /*------------------Progress Bars-------------------*/