Auto-generate avatars.less

package.json

@@ -79,7 +79,8 @@
 		"node": "20.x"
 	},
 	"scripts": {
-		"build": "webpack --mode=production",
+		"generate:avatars": "node scripts/generateAvatar.js",
+		"build": "npm run generate:avatars && webpack --mode=production",
 		"build:dev": "webpack --mode=development",
 		"start": "cross-env NODE_ENV=production webpack-dev-server",
 		"start:dev": "cross-env NODE_ENV=development webpack-dev-server",

scripts/generateAvatar.js

@@ -0,0 +1,35 @@
+// AUTO-GENERATED FILE — DO NOT EDIT
+// Use `node scripts/generateAvatar.js` to regenerate
+
+const fs = require('fs');
+const path = require('path');
+
+const AVATAR_DIR = path.join(__dirname, '../assets/units/avatars');
+const OUTPUT_FILE = path.join(__dirname, '../src/style/avatars.less');
+
+// Helper: turn "Dark Angel.jpg" into "avatar-dark-angel"
+function toClassName(filename) {
+	return (
+		'avatar-' +
+		filename
+			.replace(/\.[^/.]+$/, '') // remove extension
+			.toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-') // replace non-alphanumerics with -
+			.replace(/^-+|-+$/g, '')
+	);
+}
+
+function generate() {
+	const files = fs.readdirSync(AVATAR_DIR).filter((file) => /\.(jpg|jpeg|png)$/i.test(file));
+
+	const lines = files.map((file) => {
+		const className = toClassName(file);
+		const relativePath = `/assets/units/avatars/${file}`;
+		return `.${className}[set="default"] {\n  background-image: url('${relativePath}');\n}`;
+	});
+
+	fs.writeFileSync(OUTPUT_FILE, lines.join('\n\n'), 'utf8');
+	console.log(`✅ avatars.less generated with ${files.length} avatars.`);
+}
+
+generate();

src/assets.ts

@@ -10,14 +10,33 @@ import { phaserAutoloadAssetPaths, assetPaths } from '../assets/index';
  */
 export function use(phaser: Phaser.Game): void {
 	const assets = Object.entries(phaserAutoloadAssetPaths ?? {});
-
 	const loadedKeys = new Set<string>();
 
 	for (const [path, url] of assets) {
-		if (!/\.(png|jpg|jpeg|svg)$/i.test(path)) continue; // Only load images
+		if (!/\.(png|jpg|jpeg|svg)$/i.test(path)) continue;
 
 		const key = getBasename(path);
 
+		// Special rule for avatars: if in /units/avatars/, use "<name>_cardboard"
+		if (path.includes('/units/avatars/')) {
+			const baseKey = key;
+			const cardKey = baseKey + '_cardboard';
+
+			// Ensure both base and card keys are loaded
+			if (!loadedKeys.has(baseKey)) {
+				phaser.load.image(baseKey, url); // Load Wisp (or other creature)
+				loadedKeys.add(baseKey);
+			}
+
+			if (!loadedKeys.has(cardKey)) {
+				phaser.load.image(cardKey, url); // Load Wisp_cardboard
+				loadedKeys.add(cardKey);
+			}
+
+			continue; // Skip to next asset, since avatar assets are handled above
+		}
+
+		// Regular asset handling (non-avatar)
 		if (loadedKeys.has(key)) {
 			console.warn(`[assets.ts] Duplicate key skipped: "${key}" from path: ${path}`);
 			continue;

src/game.ts

@@ -742,6 +742,15 @@ export default class Game {
 			$j('.lobby-match-list').append(_matchBtn);
 		});
 	}
+	/**
+	 * Function to refresh the avatar UI
+	 */
+
+	refreshAvatarGrid() {
+		if (this.UI && typeof this.UI.refreshAvatarGrid === 'function') {
+			this.UI.refreshAvatarGrid();
+		}
+	}
 	/**
 	 * Resize the combat frame
 	 */
@@ -794,7 +803,8 @@ export default class Game {
 
 					const last = this.activeCreature;
 					this.activeCreature = next; // Set new activeCreature
-
+					this.refreshAvatarGrid(); // trigger the grid refresh whenever a new creature becomes active
+					this.UI?.refreshAvatarGrid?.();
 					if (!last.dead) {
 						last.updateHealth(); // Update health display due to active creature change
 					}