Refactor windows and add alternate window skins

public/images/ui/windows/trim.ps1

@@ -0,0 +1,3 @@
+Get-ChildItem -Path "*.png" | ForEach-Object {
+	magick.exe convert -trim $_.FullName $_.FullName
+}

src/battle-scene.ts

@@ -76,6 +76,7 @@ export default class BattleScene extends Phaser.Scene {
 	public seVolume: number = 1;
 	public gameSpeed: integer = 1;
 	public showLevelUpStats: boolean = true;
+	public windowType: integer = 1;
 	public quickStart: boolean = quickStart;
 	public finalWave: integer = 200;
 	
@@ -183,11 +184,11 @@ export default class BattleScene extends Phaser.Scene {
 	preload() {
 		// Load menu images
 		this.loadImage('bg', 'ui');
-		this.loadImage('bg_command', 'ui');
-		this.loadImage('bg_fight', 'ui');
+		this.loadImage('command_fight_labels', 'ui');
 		this.loadAtlas('prompt', 'ui');
 		this.loadImage('cursor', 'ui');
-		this.loadImage('window', 'ui');
+		for (let w = 1; w <= 4; w++)
+			this.loadImage(`window_${w}`, 'ui/windows');
 		this.loadImage('namebox', 'ui');
 		this.loadImage('pbinfo_player', 'ui');
 		this.loadImage('pbinfo_player_mini', 'ui');
@@ -219,10 +220,6 @@ export default class BattleScene extends Phaser.Scene {
 		this.loadImage('party_slot_hp_bar', 'ui');
 		this.loadAtlas('party_slot_hp_overlay', 'ui');
 		this.loadAtlas('party_pb', 'ui');
-		this.loadImage('party_message', 'ui');
-		this.loadImage('party_message_large', 'ui');
-		this.loadImage('party_message_options', 'ui');
-		this.loadImage('party_message_options_wide', 'ui');
 		this.loadAtlas('party_cancel', 'ui');
 
 		this.loadImage('summary_bg', 'ui');
@@ -239,9 +236,6 @@ export default class BattleScene extends Phaser.Scene {
 		for (let t = 1; t <= 3; t++)
 			this.loadImage(`summary_tabs_${t}`, 'ui');
 
-		for (let o = 1; o <= 3; o++)
-			this.loadImage(`option_select_window_${o}`, 'ui');
-
 		this.loadImage('starter_select_bg', 'ui');
 		this.loadImage('starter_select_message', 'ui');
 		this.loadImage('starter_select_cursor', 'ui');

src/egg-hatch-phase.ts

@@ -13,6 +13,7 @@ import { StatsContainer } from "./ui/stats-container";
 import { TextStyle, addTextObject } from "./ui/text";
 import { Gender, getGenderColor, getGenderSymbol } from "./data/gender";
 import { achvs } from "./system/achv";
+import { addWindow } from "./ui/window";
 
 export class EggHatchPhase extends BattlePhase {
   private egg: Egg;
@@ -84,7 +85,8 @@ export class EggHatchPhase extends BattlePhase {
       this.eggHatchOverlay.setAlpha(0);
       this.scene.fieldUI.add(this.eggHatchOverlay);
 
-      const infoBg = this.scene.add.nineslice(0, 0, 'window', null, 96, 116, 6, 6, 6, 6);
+      const infoBg = addWindow(this.scene, 0, 0, 96, 116);
+      infoBg.setOrigin(0.5, 0.5);
 
       this.infoContainer = this.scene.add.container(this.eggHatchBg.displayWidth + infoBg.width / 2, this.eggHatchBg.displayHeight / 2);
 

src/system/settings.ts

@@ -1,11 +1,13 @@
 import BattleScene from "../battle-scene";
+import { updateWindowType } from "../ui/window";
 
 export enum Setting {
   Game_Speed = "GAME_SPEED",
   Master_Volume = "MASTER_VOLUME",
   BGM_Volume = "BGM_VOLUME",
   SE_Volume = "SE_VOLUME",
-  Show_Stats_on_Level_Up = "SHOW_LEVEL_UP_STATS"
+  Show_Stats_on_Level_Up = "SHOW_LEVEL_UP_STATS",
+  Window_Type = "WINDOW_TYPE"
 }
 
 export interface SettingOptions {
@@ -21,7 +23,8 @@ export const settingOptions: SettingOptions = {
   [Setting.Master_Volume]: new Array(11).fill(null).map((_, i) => i ? (i * 10).toString() : 'Mute'),
   [Setting.BGM_Volume]: new Array(11).fill(null).map((_, i) => i ? (i * 10).toString() : 'Mute'),
   [Setting.SE_Volume]: new Array(11).fill(null).map((_, i) => i ? (i * 10).toString() : 'Mute'),
-  [Setting.Show_Stats_on_Level_Up]: [ 'Off', 'On' ]
+  [Setting.Show_Stats_on_Level_Up]: [ 'Off', 'On' ],
+  [Setting.Window_Type]: new Array(4).fill(null).map((_, i) => (i + 1).toString())
 };
 
 export const settingDefaults: SettingDefaults = {
@@ -29,7 +32,8 @@ export const settingDefaults: SettingDefaults = {
   [Setting.Master_Volume]: 5,
   [Setting.BGM_Volume]: 10,
   [Setting.SE_Volume]: 10,
-  [Setting.Show_Stats_on_Level_Up]: 1
+  [Setting.Show_Stats_on_Level_Up]: 1,
+  [Setting.Window_Type]: 1
 };
 
 export function setSetting(scene: BattleScene, setting: Setting, value: integer): boolean {
@@ -52,6 +56,9 @@ export function setSetting(scene: BattleScene, setting: Setting, value: integer)
     case Setting.Show_Stats_on_Level_Up:
       scene.showLevelUpStats = settingOptions[setting][value] === 'On';
       break;
+    case Setting.Window_Type:
+      updateWindowType(scene, parseInt(settingOptions[setting][value]));
+      break;
   }
 
   return true;

src/ui/abstact-option-select-ui-handler.ts

@@ -2,6 +2,7 @@ import BattleScene, { Button } from "../battle-scene";
 import { TextStyle, addTextObject } from "./text";
 import { Mode } from "./ui";
 import UiHandler from "./ui-handler";
+import { addWindow } from "./window";
 
 export default abstract class AbstractOptionSelectUiHandler extends UiHandler {
   protected handlers: Function[];
@@ -29,7 +30,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler {
     this.optionSelectContainer.setVisible(false);
     ui.add(this.optionSelectContainer);
 
-    this.optionSelectBg = this.scene.add.nineslice(0, 0, 'window', null, this.getWindowWidth(), this.getWindowHeight(), 6, 6, 6, 6);
+    this.optionSelectBg = addWindow(this.scene, 0, 0, this.getWindowWidth(), this.getWindowHeight());
     this.optionSelectBg.setOrigin(1, 1);
     this.optionSelectContainer.add(this.optionSelectBg);
 

src/ui/achvs-ui-handler.ts

@@ -3,6 +3,7 @@ import { Achv, achvs } from "../system/achv";
 import MessageUiHandler from "./message-ui-handler";
 import { TextStyle, addTextObject } from "./text";
 import { Mode } from "./ui";
+import { addWindow } from "./window";
 
 export default class AchvsUiHandler extends MessageUiHandler {
   private achvsContainer: Phaser.GameObjects.Container;
@@ -27,14 +28,14 @@ export default class AchvsUiHandler extends MessageUiHandler {
 
     this.achvsContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
 
-    const headerBg = this.scene.add.nineslice(0, 0, 'window', null, (this.scene.game.canvas.width / 6) - 2, 24, 6, 6, 6, 6);
+    const headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24);
     headerBg.setOrigin(0, 0);
 
     const headerText = addTextObject(this.scene, 0, 0, 'Achievements', TextStyle.SETTINGS_LABEL);
     headerText.setOrigin(0, 0);
     headerText.setPositionRelative(headerBg, 8, 4);
 
-    this.achvIconsBg = this.scene.add.nineslice(0, headerBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68, 6, 6, 6, 6);
+    this.achvIconsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68);
     this.achvIconsBg.setOrigin(0, 0);
 
     this.achvIconsContainer = this.scene.add.container(6, headerBg.height + 6);
@@ -53,28 +54,28 @@ export default class AchvsUiHandler extends MessageUiHandler {
       this.achvIconsContainer.add(icon);
     }
 
-    const titleBg = this.scene.add.nineslice(0, headerBg.height + this.achvIconsBg.height, 'window', null, 174, 24, 6, 6, 6, 6);
+    const titleBg = addWindow(this.scene, 0, headerBg.height + this.achvIconsBg.height, 174, 24);
     titleBg.setOrigin(0, 0);
 
     this.titleText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW);
     this.titleText.setOrigin(0, 0);
     this.titleText.setPositionRelative(titleBg, 8, 4);
 
-    const scoreBg = this.scene.add.nineslice(titleBg.x + titleBg.width, titleBg.y, 'window', null, 46, 24, 6, 6, 6, 6);
+    const scoreBg = addWindow(this.scene, titleBg.x + titleBg.width, titleBg.y, 46, 24);
     scoreBg.setOrigin(0, 0);
 
     this.scoreText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW);
     this.scoreText.setOrigin(0, 0);
     this.scoreText.setPositionRelative(scoreBg, 8, 4);
 
-    const unlockBg = this.scene.add.nineslice(scoreBg.x + scoreBg.width, scoreBg.y, 'window', null, 98, 24, 6, 6, 6, 6);
+    const unlockBg = addWindow(this.scene, scoreBg.x + scoreBg.width, scoreBg.y, 98, 24);
     unlockBg.setOrigin(0, 0);
 
     this.unlockText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW);
     this.unlockText.setOrigin(0, 0);
     this.unlockText.setPositionRelative(unlockBg, 8, 4);
 
-    const descriptionBg = this.scene.add.nineslice(0, titleBg.y + titleBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, 42, 6, 6, 6, 6);
+    const descriptionBg = addWindow(this.scene, 0, titleBg.y + titleBg.height, (this.scene.game.canvas.width / 6) - 2, 42);
     descriptionBg.setOrigin(0, 0);
 
     const descriptionText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW, { maxLines: 2 });

src/ui/ball-ui-handler.ts

@@ -5,6 +5,7 @@ import { addTextObject, TextStyle } from "./text";
 import { Command } from "./command-ui-handler";
 import { Mode } from "./ui";
 import UiHandler from "./ui-handler";
+import { addWindow } from "./window";
 
 export default class BallUiHandler extends UiHandler {
   private pokeballSelectContainer: Phaser.GameObjects.Container;
@@ -24,7 +25,7 @@ export default class BallUiHandler extends UiHandler {
     this.pokeballSelectContainer.setVisible(false);
     ui.add(this.pokeballSelectContainer);
 
-    this.pokeballSelectBg = this.scene.add.nineslice(0, 0, 'window', null, 114, 96, 6, 6, 6, 6);
+    this.pokeballSelectBg = addWindow(this.scene, 0, 0, 114, 96);
     this.pokeballSelectBg.setOrigin(0, 1);
     this.pokeballSelectContainer.add(this.pokeballSelectBg);
 

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

@@ -4,6 +4,7 @@ import UI, { Mode } from "./ui";
 import * as Utils from "../utils";
 import MessageUiHandler from "./message-ui-handler";
 import { getStatName, Stat } from "../data/pokemon-stat";
+import { addWindow } from "./window";
 
 export default class BattleMessageUiHandler extends MessageUiHandler {
   private levelUpStatsContainer: Phaser.GameObjects.Container;
@@ -12,6 +13,8 @@ export default class BattleMessageUiHandler extends MessageUiHandler {
   private nameText: Phaser.GameObjects.Text;
 
   public bg: Phaser.GameObjects.Image;
+  public commandWindow: Phaser.GameObjects.NineSlice;
+  public movesWindowContainer: Phaser.GameObjects.Container;
   public nameBoxContainer: Phaser.GameObjects.Container;
 
   constructor(scene: BattleScene) {
@@ -30,6 +33,28 @@ export default class BattleMessageUiHandler extends MessageUiHandler {
 
     this.bg = bg;
 
+    this.commandWindow = addWindow(this.scene, 201, -1, 118, 46);
+    this.commandWindow.setOrigin(0, 1);
+    this.commandWindow.setVisible(false);
+    ui.add(this.commandWindow);
+
+    this.movesWindowContainer = this.scene.add.container(1, -1);
+    this.movesWindowContainer.setVisible(false);
+
+    const movesWindow = addWindow(this.scene, 0, 0, 243, 46);
+    movesWindow.setOrigin(0, 1);
+    this.movesWindowContainer.add(movesWindow);
+
+    const moveDetailsWindow = addWindow(this.scene, 238, 0, 80, 46, false, true, 2, 133);
+    moveDetailsWindow.setOrigin(0, 1);
+    this.movesWindowContainer.add(moveDetailsWindow);
+
+    const commandFightLabels = this.scene.add.image(246, -10, 'command_fight_labels');
+    commandFightLabels.setOrigin(0, 1);
+    this.movesWindowContainer.add(commandFightLabels);
+
+    ui.add(this.movesWindowContainer);
+
     const messageContainer = this.scene.add.container(12, -39);
     ui.add(messageContainer);
 
@@ -68,7 +93,7 @@ export default class BattleMessageUiHandler extends MessageUiHandler {
 
     this.levelUpStatsContainer = levelUpStatsContainer;
 
-    const levelUpStatsBg = this.scene.add.nineslice((this.scene.game.canvas.width / 6), -100, 'window', null, 128, 100, 6, 6, 6, 6);
+    const levelUpStatsBg = addWindow(this.scene, (this.scene.game.canvas.width / 6), -100, 128, 100);
     levelUpStatsBg.setOrigin(1, 0);
     levelUpStatsContainer.add(levelUpStatsBg);
 
@@ -98,7 +123,8 @@ export default class BattleMessageUiHandler extends MessageUiHandler {
   show(args: any[]): void {
     super.show(args);
 
-    this.bg.setTexture('bg');
+    this.commandWindow.setVisible(false);
+    this.movesWindowContainer.setVisible(false);
     this.message.setWordWrapWidth(1780);
   }
 

src/ui/biome-select-ui-handler.ts

@@ -4,10 +4,11 @@ import { addTextObject, TextStyle } from "./text";
 import { Mode } from "./ui";
 import UiHandler from "./ui-handler";
 import * as Utils from "../utils";
+import { addWindow } from "./window";
 
 export default class BiomeSelectUiHandler extends UiHandler {
   private biomeSelectContainer: Phaser.GameObjects.Container;
-  private biomeSelectBg: Phaser.GameObjects.Image;
+  private biomeSelectBg: Phaser.GameObjects.NineSlice;
   private biomesText: Phaser.GameObjects.Text;
   private biomeChoices: Biome[];
 
@@ -26,7 +27,7 @@ export default class BiomeSelectUiHandler extends UiHandler {
     this.biomeSelectContainer.setVisible(false);
     ui.add(this.biomeSelectContainer);
 
-    this.biomeSelectBg = this.scene.add.image(0, 0, 'option_select_window_2');
+    this.biomeSelectBg = addWindow(this.scene, 0, 0, 96, 32);
     this.biomeSelectBg.setOrigin(0, 1);
     this.biomeSelectContainer.add(this.biomeSelectBg);
 
@@ -50,7 +51,7 @@ export default class BiomeSelectUiHandler extends UiHandler {
       if (this.biomeChoices.length <= 1)
         return;
 
-      this.biomeSelectBg.setTexture(`option_select_window_${this.biomeChoices.length}`)
+      this.biomeSelectBg.height = (this.biomeChoices.length + 1) * 16;
       this.biomesText.setText(this.biomeChoices.map(b => getBiomeName(b)).join('\n'));
       this.biomesText.setPositionRelative(this.biomeSelectBg, 16, 9);
       this.biomeSelectHandler = args[1] as Function;

src/ui/command-ui-handler.ts

@@ -45,7 +45,8 @@ export default class CommandUiHandler extends UiHandler {
     this.commandsContainer.setVisible(true);
 
     const messageHandler = this.getUi().getMessageHandler();
-    messageHandler.bg.setTexture('bg_command');
+    messageHandler.commandWindow.setVisible(true);
+    messageHandler.movesWindowContainer.setVisible(false);
     messageHandler.message.setWordWrapWidth(1110);
     messageHandler.showText(`What will\n${(this.scene.getCurrentPhase() as CommandPhase).getPokemon().name} do?`, 0);
     this.setCursor(this.getCursor());

src/ui/egg-gacha-ui-handler.ts

@@ -8,6 +8,7 @@ import { EGG_SEED, Egg, GachaType, getEggTierDefaultHatchWaves, getEggDescriptor
 import { Voucher, VoucherType, getVoucherTypeIcon } from "../system/voucher";
 import { getPokemonSpecies } from "../data/pokemon-species";
 import { Type } from "../data/type";
+import { addWindow } from "./window";
 
 const defaultText = 'Select a machine.';
 
@@ -144,7 +145,8 @@ export default class EggGachaUiHandler extends MessageUiHandler {
     this.eggGachaOptionsContainer = this.scene.add.container((this.scene.game.canvas.width / 6), 148);
     this.eggGachaContainer.add(this.eggGachaOptionsContainer);
 
-    this.eggGachaOptionSelectBg = this.scene.add.nineslice(0, 0, 'window', null, 96, 112, 6, 6, 6, 6);
+
+    this.eggGachaOptionSelectBg = addWindow(this.scene, 0, 0, 96, 112);
     this.eggGachaOptionSelectBg.setOrigin(1, 1);
     this.eggGachaOptionsContainer.add(this.eggGachaOptionSelectBg);
 
@@ -167,7 +169,7 @@ export default class EggGachaUiHandler extends MessageUiHandler {
     new Array(Utils.getEnumKeys(VoucherType).length).fill(null).map((_, i) => {
       const container = this.scene.add.container((this.scene.game.canvas.width / 6) - 56 * i, 0);
 
-      const bg = this.scene.add.nineslice(0, 0, 'window', null, 56, 22, 6, 6, 6, 6);
+      const bg = addWindow(this.scene, 0, 0, 56, 22);
       bg.setOrigin(1, 0);
       container.add(bg);
 
@@ -200,7 +202,7 @@ export default class EggGachaUiHandler extends MessageUiHandler {
     const gachaMessageBoxContainer = this.scene.add.container(0, 148);
     this.eggGachaContainer.add(gachaMessageBoxContainer);
 
-    const gachaMessageBox = this.scene.add.nineslice(0, 0, 'window', null, 320, 32, 6, 6, 6, 6);
+    const gachaMessageBox = addWindow(this.scene, 0, 0, 320, 32);
     gachaMessageBox.setOrigin(0, 0);
     gachaMessageBoxContainer.add(gachaMessageBox);
 

src/ui/egg-list-ui-handler.ts

@@ -5,6 +5,7 @@ import { TextStyle, addTextObject } from "./text";
 import MessageUiHandler from "./message-ui-handler";
 import { EGG_SEED, Egg, GachaType, getEggGachaTypeDescriptor, getEggHatchWavesMessage, getEggDescriptor } from "../data/egg";
 import * as Utils from "../utils";
+import { addWindow } from "./window";
 
 export default class EggListUiHandler extends MessageUiHandler {
   private eggListContainer: Phaser.GameObjects.Container;
@@ -39,6 +40,11 @@ export default class EggListUiHandler extends MessageUiHandler {
     starterSelectBg.setOrigin(0, 0);
     this.eggListContainer.add(starterSelectBg);
 
+    this.eggListContainer.add(addWindow(this.scene, 1, 85, 106, 22));
+    this.eggListContainer.add(addWindow(this.scene, 1, 102, 106, 50, true));
+    this.eggListContainer.add(addWindow(this.scene, 1, 147, 106, 32, true));
+    this.eggListContainer.add(addWindow(this.scene, 107, 1, 212, 178));
+
     this.iconAnimHandler = new PokemonIconAnimHandler();
     this.iconAnimHandler.setup(this.scene);
 

src/ui/fight-ui-handler.ts

@@ -42,7 +42,8 @@ export default class FightUiHandler extends UiHandler {
     this.fieldIndex = args.length ? args[0] as integer : 0;
 
     const messageHandler = this.getUi().getMessageHandler();
-    messageHandler.bg.setTexture('bg_fight');
+    messageHandler.commandWindow.setVisible(false);
+    messageHandler.movesWindowContainer.setVisible(true);
     this.setCursor(this.getCursor());
     this.displayMoves();
   }

src/ui/menu-ui-handler.ts

@@ -3,6 +3,7 @@ import { TextStyle, addTextObject } from "./text";
 import { Mode } from "./ui";
 import UiHandler from "./ui-handler";
 import * as Utils from "../utils";
+import { addWindow } from "./window";
 
 export enum MenuOptions {
   SETTINGS,
@@ -31,7 +32,7 @@ export default class MenuUiHandler extends UiHandler {
 
     this.menuContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
 
-    this.menuBg = this.scene.add.nineslice((this.scene.game.canvas.width / 6) - 92, 0, 'window', null, 90, (this.scene.game.canvas.height / 6) - 2, 6, 6, 6, 6);
+    this.menuBg = addWindow(this.scene, (this.scene.game.canvas.width / 6) - 92, 0, 90, (this.scene.game.canvas.height / 6) - 2);
     this.menuBg.setOrigin(0, 0);
 
     this.menuContainer.add(this.menuBg);

src/ui/party-ui-handler.ts

@@ -12,6 +12,7 @@ import { getGenderColor, getGenderSymbol } from "../data/gender";
 import { StatusEffect } from "../data/status-effect";
 import PokemonIconAnimHandler, { PokemonIconAnimMode } from "./pokemon-icon-anim-handler";
 import { pokemonEvolutions } from "../data/pokemon-evolutions";
+import { addWindow } from "./window";
 
 const defaultMessage = 'Choose a Pokémon.';
 
@@ -63,7 +64,7 @@ export default class PartyUiHandler extends MessageUiHandler {
   private partySlotsContainer: Phaser.GameObjects.Container;
   private partySlots: PartySlot[];
   private partyCancelButton: PartyCancelButton;
-  private partyMessageBox: Phaser.GameObjects.Image;
+  private partyMessageBox: Phaser.GameObjects.NineSlice;
 
   private optionsMode: boolean;
   private optionsScroll: boolean;
@@ -131,7 +132,7 @@ export default class PartyUiHandler extends MessageUiHandler {
     const partyMessageBoxContainer = this.scene.add.container(0, -32);
     partyContainer.add(partyMessageBoxContainer);
 
-    const partyMessageBox = this.scene.add.image(1, 31, 'party_message');
+    const partyMessageBox = addWindow(this.scene, 1, 31, 262, 30);
     partyMessageBox.setOrigin(0, 1);
     partyMessageBoxContainer.add(partyMessageBox);
 
@@ -446,10 +447,10 @@ export default class PartyUiHandler extends MessageUiHandler {
       text = defaultMessage;
 
     if (text?.indexOf('\n') === -1) {
-      this.partyMessageBox.setTexture('party_message');
+      this.partyMessageBox.setSize(262, 30);
       this.message.setY(10);
     } else {
-      this.partyMessageBox.setTexture('party_message_large');
+      this.partyMessageBox.setSize(262, 42);
       this.message.setY(-5);
     }
 
@@ -462,10 +463,6 @@ export default class PartyUiHandler extends MessageUiHandler {
     
     this.optionsMode = true;
 
-    const wideOptions = this.partyUiMode === PartyUiMode.MODIFIER_TRANSFER;
-
-    this.partyMessageBox.setTexture(`party_message_options${wideOptions ? '_wide' : ''}`);
-
     let optionsMessage = 'Do what with this Pokémon?';
 
     switch (this.partyUiMode) {
@@ -486,6 +483,10 @@ export default class PartyUiHandler extends MessageUiHandler {
 
     this.updateOptions();
 
+    const wideOptions = this.partyUiMode === PartyUiMode.MODIFIER_TRANSFER;
+
+    this.partyMessageBox.setSize(262 - (wideOptions ? 88 : 38), 30);
+
     this.setCursor(0);
   }
 
@@ -579,7 +580,7 @@ export default class PartyUiHandler extends MessageUiHandler {
 
     this.options.push(PartyOption.CANCEL);
 
-    const optionBg = this.scene.add.nineslice(0, 0, 'window', null, wideOptions ? 144 : 94, 16 * this.options.length + 13, 6, 6, 6, 6);
+    const optionBg = addWindow(this.scene, 0, 0, wideOptions ? 144 : 94, 16 * this.options.length + 13);
     optionBg.setOrigin(1, 1);
 
     this.optionsContainer.add(optionBg);
@@ -701,7 +702,7 @@ export default class PartyUiHandler extends MessageUiHandler {
     this.optionsContainer.removeAll(true);
     this.eraseOptionsCursor();
 
-    this.partyMessageBox.setTexture('party_message');
+    this.partyMessageBox.setSize(262, 30);
     this.showText(null, 0);
   }
 

src/ui/settings-ui-handler.ts

@@ -3,6 +3,7 @@ import { Setting, settingDefaults, settingOptions } from "../system/settings";
 import { TextStyle, addTextObject, getTextColor } from "./text";
 import { Mode } from "./ui";
 import UiHandler from "./ui-handler";
+import { addWindow } from "./window";
 
 export default class SettingsUiHandler extends UiHandler {
   private settingsContainer: Phaser.GameObjects.Container;
@@ -27,14 +28,14 @@ export default class SettingsUiHandler extends UiHandler {
 
     this.settingsContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
 
-    const headerBg = this.scene.add.nineslice(0, 0, 'window', null, (this.scene.game.canvas.width / 6) - 2, 24, 6, 6, 6, 6);
+    const headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24);
     headerBg.setOrigin(0, 0);
 
     const headerText = addTextObject(this.scene, 0, 0, 'Options', TextStyle.SETTINGS_LABEL);
     headerText.setOrigin(0, 0);
     headerText.setPositionRelative(headerBg, 8, 4);
 
-    this.optionsBg = this.scene.add.nineslice(0, headerBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 2, 6, 6, 6, 6);
+    this.optionsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 2);
     this.optionsBg.setOrigin(0, 0);
 
     this.optionsContainer = this.scene.add.container(0, 0);

src/ui/starter-select-ui-handler.ts

@@ -13,6 +13,7 @@ import { DexAttr, DexEntry } from "../system/game-data";
 import * as Utils from "../utils";
 import PokemonIconAnimHandler, { PokemonIconAnimMode } from "./pokemon-icon-anim-handler";
 import { StatsContainer } from "./stats-container";
+import { addWindow } from "./window";
 
 export type StarterSelectCallback = (starters: Starter[]) => void;
 
@@ -96,6 +97,11 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     starterSelectBg.setOrigin(0, 0);
     this.starterSelectContainer.add(starterSelectBg);
 
+    this.starterSelectContainer.add(addWindow(this.scene, 107, 1, 34, 92));
+    this.starterSelectContainer.add(addWindow(this.scene, 107, 93, 34, 57));
+    this.starterSelectContainer.add(addWindow(this.scene, 107, 145, 34, 34, true));
+    this.starterSelectContainer.add(addWindow(this.scene, 141, 1, 178, 178));
+
     this.iconAnimHandler = new PokemonIconAnimHandler();
     this.iconAnimHandler.setup(this.scene);
 

src/ui/ui.ts

@@ -25,6 +25,7 @@ import EggListUiHandler from './egg-list-ui-handler';
 import EggGachaUiHandler from './egg-gacha-ui-handler';
 import VouchersUiHandler from './vouchers-ui-handler';
 import VoucherBar from './voucher-bar';
+import { addWindow } from './window';
 
 export enum Mode {
   MESSAGE,
@@ -134,7 +135,7 @@ export default class UI extends Phaser.GameObjects.Container {
     this.tooltipContainer = this.scene.add.container(0, 0);
     this.tooltipContainer.setVisible(false);
 
-    this.tooltipBg = this.scene.add.nineslice(0, 0, 'window', null, 128, 31, 6, 6, 6, 6);
+    this.tooltipBg = addWindow(this.scene, 0, 0, 128, 31);
     this.tooltipBg.setOrigin(0, 0);
 
     this.tooltipTitle = addTextObject(this.scene, 64, 4, '', TextStyle.TOOLTIP_TITLE);

src/ui/vouchers-ui-handler.ts

@@ -3,6 +3,7 @@ import { Voucher, getVoucherTypeIcon, getVoucherTypeName, vouchers } from "../sy
 import MessageUiHandler from "./message-ui-handler";
 import { TextStyle, addTextObject } from "./text";
 import { Mode } from "./ui";
+import { addWindow } from "./window";
 
 export default class VouchersUiHandler extends MessageUiHandler {
   private vouchersContainer: Phaser.GameObjects.Container;
@@ -26,14 +27,14 @@ export default class VouchersUiHandler extends MessageUiHandler {
 
     this.vouchersContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
 
-    const headerBg = this.scene.add.nineslice(0, 0, 'window', null, (this.scene.game.canvas.width / 6) - 2, 24, 6, 6, 6, 6);
+    const headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24);
     headerBg.setOrigin(0, 0);
 
     const headerText = addTextObject(this.scene, 0, 0, 'Vouchers', TextStyle.SETTINGS_LABEL);
     headerText.setOrigin(0, 0);
     headerText.setPositionRelative(headerBg, 8, 4);
 
-    this.voucherIconsBg = this.scene.add.nineslice(0, headerBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68, 6, 6, 6, 6);
+    this.voucherIconsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68);
     this.voucherIconsBg.setOrigin(0, 0);
 
     this.voucherIconsContainer = this.scene.add.container(6, headerBg.height + 6);
@@ -52,21 +53,21 @@ export default class VouchersUiHandler extends MessageUiHandler {
       this.voucherIconsContainer.add(icon);
     }
 
-    const titleBg = this.scene.add.nineslice(0, headerBg.height + this.voucherIconsBg.height, 'window', null, 220, 24, 6, 6, 6, 6);
+    const titleBg = addWindow(this.scene, 0, headerBg.height + this.voucherIconsBg.height, 220, 24);
     titleBg.setOrigin(0, 0);
 
     this.titleText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW);
     this.titleText.setOrigin(0, 0);
     this.titleText.setPositionRelative(titleBg, 8, 4);
 
-    const unlockBg = this.scene.add.nineslice(titleBg.x + titleBg.width, titleBg.y, 'window', null, 98, 24, 6, 6, 6, 6);
+    const unlockBg = addWindow(this.scene, titleBg.x + titleBg.width, titleBg.y, 98, 24);
     unlockBg.setOrigin(0, 0);
 
     this.unlockText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW);
     this.unlockText.setOrigin(0, 0);
     this.unlockText.setPositionRelative(unlockBg, 8, 4);
 
-    const descriptionBg = this.scene.add.nineslice(0, titleBg.y + titleBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, 42, 6, 6, 6, 6);
+    const descriptionBg = addWindow(this.scene, 0, titleBg.y + titleBg.height, (this.scene.game.canvas.width / 6) - 2, 42);
     descriptionBg.setOrigin(0, 0);
 
     const descriptionText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW, { maxLines: 2 });

src/ui/window.ts

@@ -0,0 +1,43 @@
+import BattleScene from "../battle-scene";
+
+export function addWindow(scene: BattleScene, x: number, y: number, width: number, height: number, mergeMaskTop?: boolean, mergeMaskLeft?: boolean, maskOffsetX?: number, maskOffsetY?: number): Phaser.GameObjects.NineSlice {
+  const window = scene.add.nineslice(x, y, `window_${scene.windowType}`, null, width, height, 8, 8, 8, 8);
+  window.setOrigin(0, 0);
+
+  if (mergeMaskTop || mergeMaskLeft) {
+    const maskRect = scene.make.graphics({});
+    maskRect.setScale(6);
+    maskRect.fillStyle(0xFFFFFF);
+    maskRect.beginPath();
+    maskRect.fillRect(window.x + (mergeMaskLeft ? 2 : 0) + (maskOffsetX || 0), window.y + (mergeMaskTop ? 2 : 0) + (maskOffsetY || 0), window.width - (mergeMaskLeft ? 2 : 0), window.height - (mergeMaskTop ? 2 : 0));
+    window.setMask(maskRect.createGeometryMask());
+  }
+
+  return window;
+}
+
+export function updateWindowType(scene: BattleScene, windowTypeIndex: integer): void {
+  const windowObjects: Phaser.GameObjects.NineSlice[] = [];
+  const traverse = (object: any) => {
+    if (object.hasOwnProperty('children')) {
+      const children = object.children as Phaser.GameObjects.DisplayList;
+      for (let child of children.getAll())
+        traverse(child);
+    } else if (object instanceof Phaser.GameObjects.Container) {
+      for (let child of object.getAll())
+        traverse(child);
+    } else if (object instanceof Phaser.GameObjects.NineSlice) {
+      if (object.texture.key.startsWith('window_'))
+        windowObjects.push(object);
+    }
+  }
+
+  traverse(scene);
+
+  scene.windowType = windowTypeIndex;
+
+  const windowKey = `window_${windowTypeIndex}`;
+
+  for (let window of windowObjects)
+    window.setTexture(windowKey);
+}