Add themed namebox

public/images/ui/legacy/namebox.json

@@ -0,0 +1,41 @@
+{
+	"textures": [
+		{
+			"image": "namebox.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 20,
+				"h": 20
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "namebox",
+					"rotated": false,
+					"trimmed": false,
+					"sourceSize": {
+						"w": 20,
+						"h": 20
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:b4b88c93438c49a9a290c11e4001b617:11fbe39458bee41a23e8baf1cebcaf96:39bb626d9e1ec7486391b28b387a1b39$"
+	}
+}

public/images/ui/namebox.json

@@ -0,0 +1,125 @@
+{
+	"textures": [
+		{
+			"image": "namebox.png",
+			"format": "RGBA8888",
+			"size": {
+				"w": 100,
+				"h": 20
+			},
+			"scale": 1,
+			"frames": [
+				{
+					"filename": "1",
+					"rotated": false,
+					"trimmed": false,
+					"sourceSize": {
+						"w": 20,
+						"h": 20
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					},
+					"frame": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					}
+				},
+				{
+					"filename": "2",
+					"rotated": false,
+					"trimmed": false,
+					"sourceSize": {
+						"w": 20,
+						"h": 20
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					},
+					"frame": {
+						"x": 20,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					}
+				},
+				{
+					"filename": "3",
+					"rotated": false,
+					"trimmed": false,
+					"sourceSize": {
+						"w": 20,
+						"h": 20
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					},
+					"frame": {
+						"x": 40,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					}
+				},
+				{
+					"filename": "4",
+					"rotated": false,
+					"trimmed": false,
+					"sourceSize": {
+						"w": 20,
+						"h": 20
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					},
+					"frame": {
+						"x": 60,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					}
+				},
+				{
+					"filename": "5",
+					"rotated": false,
+					"trimmed": false,
+					"sourceSize": {
+						"w": 20,
+						"h": 20
+					},
+					"spriteSourceSize": {
+						"x": 0,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					},
+					"frame": {
+						"x": 80,
+						"y": 0,
+						"w": 20,
+						"h": 20
+					}
+				}
+			]
+		}
+	],
+	"meta": {
+		"app": "https://www.codeandweb.com/texturepacker",
+		"version": "3.0",
+		"smartupdate": "$TexturePacker:SmartUpdate:391f73e29df9fea72712e2e50508f3e6:e6997e6b30ca1a347669b8d148c3c7f8:39bb626d9e1ec7486391b28b387a1b39$"
+	}
+}

src/battle-scene.ts

@@ -286,7 +286,7 @@ export default class BattleScene extends Phaser.Scene {
 			for (let w = 1; w <= 5; w++)
 				this.loadImage(`window_${w}${getWindowVariantSuffix(wv)}`, 'ui/windows');
 		}
-		this.loadImage('namebox', 'ui');
+		this.loadAtlas('namebox', 'ui');
 		this.loadImage('pbinfo_player', 'ui');
 		this.loadImage('pbinfo_player_mini', 'ui');
 		this.loadImage('pbinfo_enemy_mini', 'ui');

src/ui/battle-message-ui-handler.ts

@@ -72,7 +72,7 @@ export default class BattleMessageUiHandler extends MessageUiHandler {
     this.nameBoxContainer = this.scene.add.container(0, -16);
     this.nameBoxContainer.setVisible(false);
 
-    this.nameBox = this.scene.add.nineslice(0, 0, 'namebox', null, 72, 16, 8, 8, 5, 5);
+    this.nameBox = this.scene.add.nineslice(0, 0, 'namebox', this.scene.windowType, 72, 16, 8, 8, 5, 5);
     this.nameBox.setOrigin(0, 0);
 
     this.nameText = addTextObject(this.scene, 8, 0, 'Rival', TextStyle.MESSAGE, { maxLines: 1 });

src/ui/ui-theme.ts

@@ -58,7 +58,7 @@ export function addWindow(scene: BattleScene, x: number, y: number, width: numbe
 
 export function updateWindowType(scene: BattleScene, windowTypeIndex: integer): void {
   const windowObjects: [Phaser.GameObjects.NineSlice, WindowVariant][] = [];
-  const bgObjects: Phaser.GameObjects.Image[] = [];
+  const themedObjects: Phaser.GameObjects.Image[] = [];
   const traverse = (object: any) => {
     if (object.hasOwnProperty('children')) {
       const children = object.children as Phaser.GameObjects.DisplayList;
@@ -70,8 +70,10 @@ export function updateWindowType(scene: BattleScene, windowTypeIndex: integer):
     } else if (object instanceof Phaser.GameObjects.NineSlice) {
       if (object.texture.key.startsWith('window_'))
         windowObjects.push([ object, object.texture.key.endsWith(getWindowVariantSuffix(WindowVariant.XTHIN)) ? WindowVariant.XTHIN : object.texture.key.endsWith(getWindowVariantSuffix(WindowVariant.THIN)) ? WindowVariant.THIN : WindowVariant.NORMAL ]);
-    } else if (object instanceof Phaser.GameObjects.Sprite && object.texture?.key === 'bg')
+    } else if (object instanceof Phaser.GameObjects.Sprite) {
-      bgObjects.push(object)
+      if ([ 'bg', 'namebox' ].includes(object.texture?.key))
+        themedObjects.push(object);
+    }
   }
 
   traverse(scene);
@@ -86,8 +88,8 @@ export function updateWindowType(scene: BattleScene, windowTypeIndex: integer):
   for (let [ window, variant ] of windowObjects)
     window.setTexture(`${windowKey}${getWindowVariantSuffix(variant)}`);
 
-  for (let bg of bgObjects)
+  for (let obj of themedObjects)
-    bg.setFrame(windowTypeIndex);
+    obj.setFrame(windowTypeIndex);
 }
 
 export function addUiThemeOverrides(scene: BattleScene): void {