Re-implement UI reskin with working legacy toggle

Re-implement UI reskin with working legacy toggle; add return to title option to menu

src/ui/ability-bar.ts

@@ -2,8 +2,8 @@ import BattleScene from "../battle-scene";
 import Pokemon from "../field/pokemon";
 import { TextStyle, addTextObject } from "./text";
 
-const hiddenX = -91;
-const shownX = 10;
+const hiddenX = -118;
+const shownX = 0;
 const baseY = -116;
 
 export default class AbilityBar extends Phaser.GameObjects.Container {
@@ -20,7 +20,7 @@ export default class AbilityBar extends Phaser.GameObjects.Container {
   }
 
   setup(): void {
-    this.bg = this.scene.add.image(0, 0, 'ability_bar');
+    this.bg = this.scene.add.image(0, 0, 'ability_bar_left');
     this.bg.setOrigin(0, 0);
 
     this.add(this.bg);

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

@@ -2,7 +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";
+import { addWindow } from "./ui-theme";
 
 export interface OptionSelectConfig {
   xOffset?: number;

src/ui/achv-bar.ts

@@ -36,7 +36,7 @@ export default class AchvBar extends Phaser.GameObjects.Container {
     this.scoreText.setOrigin(1, 0);
     this.add(this.scoreText);
 
-    this.descriptionText = addTextObject(this.scene, 43, 16, '', TextStyle.WINDOW, { fontSize: '72px' });
+    this.descriptionText = addTextObject(this.scene, 43, 16, '', TextStyle.WINDOW_ALT, { fontSize: '72px' });
     this.descriptionText.setOrigin(0, 0);
     this.add(this.descriptionText);
 

src/ui/achvs-ui-handler.ts

@@ -3,7 +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";
+import { addWindow } from "./ui-theme";
 
 export default class AchvsUiHandler extends MessageUiHandler {
   private achvsContainer: Phaser.GameObjects.Container;

src/ui/ball-ui-handler.ts

@@ -5,7 +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";
+import { addWindow } from "./ui-theme";
 
 export default class BallUiHandler extends UiHandler {
   private pokeballSelectContainer: Phaser.GameObjects.Container;

src/ui/battle-info.ts

@@ -38,6 +38,7 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
   private levelNumbersContainer: Phaser.GameObjects.Container;
   private hpNumbersContainer: Phaser.GameObjects.Container;
   private expBar: Phaser.GameObjects.Image;
+  private expMaskRect: Phaser.GameObjects.Graphics;
 
   constructor(scene: Phaser.Scene, x: number, y: number, player: boolean) {
     super(scene, x, y);
@@ -119,7 +120,7 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
 
     this.hpBarSegmentDividers = [];
 
-    this.levelNumbersContainer = this.scene.add.container(9.5, 0);
+    this.levelNumbersContainer = this.scene.add.container(9.5, (this.scene as BattleScene).uiTheme ? 0 : -0.5);
     this.levelContainer.add(this.levelNumbersContainer);
 
     if (this.player) {
@@ -128,10 +129,20 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
 
       const expBar = this.scene.add.image(-98, 18, 'overlay_exp');
       expBar.setOrigin(0);
-      expBar.setScale(0, 1);
       this.add(expBar);
 
+      const expMaskRect = this.scene.make.graphics({});
+      expMaskRect.setScale(6);
+      expMaskRect.fillStyle(0xFFFFFF);
+      expMaskRect.beginPath();
+      expMaskRect.fillRect(127, 126, 85, 2);
+
+      const expMask = expMaskRect.createGeometryMask();
+
+      expBar.setMask(expMask);
+
       this.expBar = expBar;
+      this.expMaskRect = expMaskRect;
     }
   }
 
@@ -185,7 +196,7 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
     this.shinyIcon.setVisible(pokemon.isShiny());
 
     if (this.player) {
-      this.expBar.setScale(pokemon.levelExp / getLevelTotalExp(pokemon.level, pokemon.species.growthRate), 1);
+      this.expMaskRect.x = (pokemon.levelExp / getLevelTotalExp(pokemon.level, pokemon.species.growthRate)) * 510;
       this.lastExp = pokemon.exp;
       this.lastLevelExp = pokemon.levelExp;
     }
@@ -237,14 +248,15 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
       this.hpBarSegmentDividers.pop().destroy();
 
     if (this.boss && this.bossSegments > 1) {
+      const uiTheme = (this.scene as BattleScene).uiTheme;
       const maxHp = pokemon.getMaxHp();
       for (let s = 1; s < this.bossSegments; s++) {
         const dividerX = (Math.round((maxHp / this.bossSegments) * s) /  maxHp) * this.hpBar.width;
-        const divider = this.scene.add.rectangle(0, 0, 1, this.hpBar.height, pokemon.bossSegmentIndex >= s ? 0xFFFFFF : 0x404040);
+        const divider = this.scene.add.rectangle(0, 0, 1, this.hpBar.height - (uiTheme ? 0 : 1), pokemon.bossSegmentIndex >= s ? 0xFFFFFF : 0x404040)
         divider.setOrigin(0.5, 0);
         this.add(divider);
 
-        divider.setPositionRelative(this.hpBar, dividerX, 0);
+        divider.setPositionRelative(this.hpBar, dividerX, uiTheme ? 0 : 1);
         this.hpBarSegmentDividers.push(divider);
       }
     }
@@ -402,9 +414,9 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
       if (duration)
         (this.scene as BattleScene).playSound('exp');
       this.scene.tweens.add({
-        targets: this.expBar,
+        targets: this.expMaskRect,
         ease: 'Sine.easeIn',
-        scaleX: ratio,
+        x: ratio * 510,
         duration: duration,
         onComplete: () => {
           if (!this.scene)
@@ -415,7 +427,7 @@ export default class BattleInfo extends Phaser.GameObjects.Container {
             (this.scene as BattleScene).playSound('level_up');
             this.setLevel(this.lastLevel);
             this.scene.time.delayedCall(500 * levelDurationMultiplier, () => {
-              this.expBar.setScale(0, 1);
+              this.expMaskRect.x = 0;
               this.updateInfo(pokemon, instant).then(() => resolve());
             });
             return;

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

@@ -4,7 +4,7 @@ import { 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";
+import { addWindow } from "./ui-theme";
 
 export default class BattleMessageUiHandler extends MessageUiHandler {
   private levelUpStatsContainer: Phaser.GameObjects.Container;
@@ -28,7 +28,7 @@ export default class BattleMessageUiHandler extends MessageUiHandler {
     this.textTimer = null;
     this.textCallbackTimer = null;
 
-    const bg = this.scene.add.image(0, 0, 'bg');
+    const bg = this.scene.add.sprite(0, 0, 'bg', this.scene.windowType + 1);
 		bg.setOrigin(0, 1);
     ui.add(bg);
 

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

@@ -5,7 +5,7 @@ import { addTextObject, TextStyle } from "./text";
 import { Mode } from "./ui";
 import UiHandler from "./ui-handler";
 import * as Utils from "../utils";
-import { addWindow } from "./window";
+import { addWindow } from "./ui-theme";
 
 export default class BiomeSelectUiHandler extends UiHandler {
   private biomeSelectContainer: Phaser.GameObjects.Container;

src/ui/daily-run-scoreboard.ts

@@ -1,6 +1,6 @@
 import BattleScene from "../battle-scene";
 import { TextStyle, addTextObject } from "./text";
-import { WindowVariant, addWindow } from "./window";
+import { WindowVariant, addWindow } from "./ui-theme";
 import * as Utils from "../utils";
 
 interface RankingEntry {

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

@@ -6,7 +6,7 @@ import * as Utils from "../utils";
 import { EGG_SEED, Egg, GachaType, getEggTierDefaultHatchWaves, getEggDescriptor, getLegendaryGachaSpeciesForTimestamp } from "../data/egg";
 import { VoucherType, getVoucherTypeIcon } from "../system/voucher";
 import { getPokemonSpecies } from "../data/pokemon-species";
-import { addWindow } from "./window";
+import { addWindow } from "./ui-theme";
 import { Tutorial, handleTutorial } from "../tutorial";
 import { EggTier } from "../data/enums/egg-type";
 
@@ -88,7 +88,7 @@ export default class EggGachaUiHandler extends MessageUiHandler {
 
       const gachaInfoContainer = this.scene.add.container(160, 46);
 
-      const gachaUpLabel = addTextObject(this.scene, 4, 0, 'UP!', TextStyle.WINDOW);
+      const gachaUpLabel = addTextObject(this.scene, 4, 0, 'UP!', TextStyle.WINDOW_ALT);
       gachaUpLabel.setOrigin(0, 0);
       gachaInfoContainer.add(gachaUpLabel);
 

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

@@ -5,7 +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";
+import { addWindow } from "./ui-theme";
 
 export default class EggListUiHandler extends MessageUiHandler {
   private eggListContainer: Phaser.GameObjects.Container;
@@ -36,7 +36,7 @@ export default class EggListUiHandler extends MessageUiHandler {
     bgColor.setOrigin(0, 0);
     this.eggListContainer.add(bgColor);
 
-    const eggListBg = this.scene.add.image(1, 1, 'egg_list_bg');
+    const eggListBg = this.scene.add.image(0, 0, 'egg_list_bg');
     eggListBg.setOrigin(0, 0);
     this.eggListContainer.add(eggListBg);
 
@@ -48,7 +48,7 @@ export default class EggListUiHandler extends MessageUiHandler {
     this.iconAnimHandler = new PokemonIconAnimHandler();
     this.iconAnimHandler.setup(this.scene);
 
-    this.eggNameText = addTextObject(this.scene, 6, 66, '', TextStyle.SUMMARY);
+    this.eggNameText = addTextObject(this.scene, 8, 66, '', TextStyle.SUMMARY);
     this.eggNameText.setOrigin(0, 0);
     this.eggListContainer.add(this.eggNameText);
 

src/ui/evolution-scene-handler.ts

@@ -23,7 +23,7 @@ export default class EvolutionSceneHandler extends MessageUiHandler {
     this.evolutionContainer = this.scene.add.container(0, -this.scene.game.canvas.height / 6);
     ui.add(this.evolutionContainer);
 
-    const messageBg = this.scene.add.image(0, 0, 'bg');
+    const messageBg = this.scene.add.sprite(0, 0, 'bg', this.scene.windowType + 1);
 		messageBg.setOrigin(0, 1);
     messageBg.setVisible(false);
     ui.add(messageBg);

src/ui/form-modal-ui-handler.ts

@@ -2,7 +2,7 @@ import BattleScene, { Button } from "../battle-scene";
 import { ModalConfig, ModalUiHandler } from "./modal-ui-handler";
 import { Mode } from "./ui";
 import { TextStyle, addTextInputObject, addTextObject, getTextColor } from "./text";
-import { WindowVariant, addWindow } from "./window";
+import { WindowVariant, addWindow } from "./ui-theme";
 import InputText from "phaser3-rex-plugins/plugins/inputtext";
 
 export interface FormModalConfig extends ModalConfig {
@@ -66,8 +66,8 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
     });
 
     this.errorMessage = addTextObject(this.scene, 10, (hasTitle ? 31 : 5) + 20 * (fields.length - 1) + 16, '', TextStyle.TOOLTIP_CONTENT);
-    this.errorMessage.setColor(getTextColor(TextStyle.SUMMARY_PINK));
-    this.errorMessage.setShadowColor(getTextColor(TextStyle.SUMMARY_PINK, true));
+    this.errorMessage.setColor(this.getTextColor(TextStyle.SUMMARY_PINK));
+    this.errorMessage.setShadowColor(this.getTextColor(TextStyle.SUMMARY_PINK, true));
     this.errorMessage.setVisible(false);
     this.modalContainer.add(this.errorMessage);
   }

src/ui/game-stats-ui-handler.ts

@@ -2,7 +2,7 @@ import BattleScene, { Button } from "../battle-scene";
 import { TextStyle, addTextObject, getTextColor } from "./text";
 import { Mode } from "./ui";
 import UiHandler from "./ui-handler";
-import { addWindow } from "./window";
+import { addWindow } from "./ui-theme";
 import * as Utils from "../utils";
 import { DexAttr, GameData } from "../system/game-data";
 import { speciesStarters } from "../data/pokemon-species";

src/ui/menu-ui-handler.ts

@@ -2,7 +2,7 @@ import BattleScene, { Button, bypassLogin } from "../battle-scene";
 import { TextStyle, addTextObject } from "./text";
 import { Mode } from "./ui";
 import * as Utils from "../utils";
-import { addWindow } from "./window";
+import { addWindow } from "./ui-theme";
 import MessageUiHandler from "./message-ui-handler";
 import { GameDataType } from "../system/game-data";
 import { OptionSelectConfig } from "./abstact-option-select-ui-handler";
@@ -18,6 +18,7 @@ export enum MenuOptions {
   EGG_GACHA,
   MANAGE_DATA,
   COMMUNITY,
+  RETURN_TO_TITLE,
   LOG_OUT
 }
 
@@ -45,7 +46,7 @@ export default class MenuUiHandler extends MessageUiHandler {
     this.ignoredMenuOptions = !bypassLogin
       ? [ ]
       : [ MenuOptions.LOG_OUT ];
-    this.menuOptions = Utils.getEnumKeys(MenuOptions).map(m => parseInt(MenuOptions[m]) as MenuOptions).filter(m => this.ignoredMenuOptions.indexOf(m) === -1);
+    this.menuOptions = Utils.getEnumKeys(MenuOptions).map(m => parseInt(MenuOptions[m]) as MenuOptions).filter(m => !this.ignoredMenuOptions.includes(m));
   }
 
   setup() {
@@ -254,6 +255,18 @@ export default class MenuUiHandler extends MessageUiHandler {
           ui.setOverlayMode(Mode.MENU_OPTION_SELECT, this.communityConfig);
           success = true;
           break;
+        case MenuOptions.RETURN_TO_TITLE:
+          if (this.scene.currentBattle) {
+            success = true;
+            ui.showText('You will lose any progress since the beginning of the battle. Proceed?', null, () => {
+              ui.setOverlayMode(Mode.CONFIRM, () => this.scene.reset(true), () => {
+                ui.revertMode();
+                ui.showText(null, 0);
+              }, false, -98);
+            });
+          } else
+            error = true;
+          break;
         case MenuOptions.LOG_OUT:
           success = true;
           const doLogout = () => {

src/ui/modal-ui-handler.ts

@@ -2,7 +2,7 @@ import BattleScene, { Button } from "../battle-scene";
 import { TextStyle, addTextObject } from "./text";
 import { Mode } from "./ui";
 import UiHandler from "./ui-handler";
-import { WindowVariant, addWindow } from "./window";
+import { WindowVariant, addWindow } from "./ui-theme";
 
 export interface ModalConfig {
   buttonActions: Function[];

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

@@ -316,8 +316,8 @@ export default class ModifierSelectUiHandler extends AwaitableUiHandler {
     const canReroll = this.scene.money >= this.rerollCost;
 
     this.rerollCostText.setText(`₽${this.rerollCost.toLocaleString('en-US')}`);
-    this.rerollCostText.setColor(getTextColor(canReroll ? TextStyle.MONEY : TextStyle.PARTY_RED));
-    this.rerollCostText.setShadowColor(getTextColor(canReroll ? TextStyle.MONEY : TextStyle.PARTY_RED, true));
+    this.rerollCostText.setColor(this.getTextColor(canReroll ? TextStyle.MONEY : TextStyle.PARTY_RED));
+    this.rerollCostText.setShadowColor(this.getTextColor(canReroll ? TextStyle.MONEY : TextStyle.PARTY_RED, true));
   }
 
   clear() {
@@ -556,10 +556,11 @@ class ModifierOption extends Phaser.GameObjects.Container {
   }
 
   updateCostText(): void {
-    const textStyle = this.modifierTypeOption.cost <= (this.scene as BattleScene).money ? TextStyle.MONEY : TextStyle.PARTY_RED;
+    const scene = this.scene as BattleScene;
+    const textStyle = this.modifierTypeOption.cost <= scene.money ? TextStyle.MONEY : TextStyle.PARTY_RED;
 
     this.itemCostText.setText(`₽${this.modifierTypeOption.cost.toLocaleString('en-US')}`);
-    this.itemCostText.setColor(getTextColor(textStyle));
-    this.itemCostText.setShadowColor(getTextColor(textStyle, true));
+    this.itemCostText.setColor(getTextColor(textStyle, false, scene.uiTheme));
+    this.itemCostText.setShadowColor(getTextColor(textStyle, true, scene.uiTheme));
   }
 }

src/ui/party-ui-handler.ts

@@ -13,7 +13,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";
+import { addWindow } from "./ui-theme";
 import { SpeciesFormChangeItemTrigger } from "../data/pokemon-forms";
 
 const defaultMessage = 'Choose a Pokémon.';

src/ui/pokemon-info-container.ts

@@ -4,7 +4,7 @@ import { Gender, getGenderColor, getGenderSymbol } from "../data/gender";
 import Pokemon from "../field/pokemon";
 import { StatsContainer } from "./stats-container";
 import { TextStyle, addBBCodeTextObject, addTextObject } from "./text";
-import { addWindow } from "./window";
+import { addWindow } from "./ui-theme";
 import { getNatureName } from "../data/nature";
 import * as Utils from "../utils";
 import { Type } from "../data/type";

src/ui/save-slot-select-ui-handler.ts

@@ -3,7 +3,7 @@ import { gameModes } from "../game-mode";
 import { SessionSaveData } from "../system/game-data";
 import { TextStyle, addTextObject } from "./text";
 import { Mode } from "./ui";
-import { addWindow } from "./window";
+import { addWindow } from "./ui-theme";
 import * as Utils from "../utils";
 import PokemonData from "../system/pokemon-data";
 import { PokemonHeldItemModifier } from "../modifier/modifier";
@@ -172,7 +172,7 @@ export default class SaveSlotSelectUiHandler extends MessageUiHandler {
     let changed = super.setCursor(cursor);
     
     if (!this.cursorObj) {
-      this.cursorObj = this.scene.add.nineslice(0, 0, 'select_cursor_highlight_thick', null, 296, 44, 2, 2, 2, 2);
+      this.cursorObj = this.scene.add.nineslice(0, 0, 'select_cursor_highlight_thick', null, 296, 44, 6, 6, 6, 6);
       this.cursorObj.setOrigin(0, 0);
       this.sessionSlotsContainer.add(this.cursorObj);
     }

src/ui/settings-ui-handler.ts

@@ -1,10 +1,10 @@
 import BattleScene, { Button } from "../battle-scene";
-import { Setting, settingDefaults, settingOptions } from "../system/settings";
+import { Setting, reloadSettings, settingDefaults, settingOptions } from "../system/settings";
 import { hasTouchscreen, isMobile } from "../touch-controls";
-import { TextStyle, addTextObject, getTextColor } from "./text";
+import { TextStyle, addTextObject } from "./text";
 import { Mode } from "./ui";
 import UiHandler from "./ui-handler";
-import { addWindow } from "./window";
+import { addWindow } from "./ui-theme";
 
 export default class SettingsUiHandler extends UiHandler {
   private settingsContainer: Phaser.GameObjects.Container;
@@ -21,8 +21,12 @@ export default class SettingsUiHandler extends UiHandler {
 
   private cursorObj: Phaser.GameObjects.NineSlice;
 
+  private reloadRequired: boolean;
+
   constructor(scene: BattleScene, mode?: Mode) {
     super(scene, mode);
+
+    this.reloadRequired = false;
   }
 
   setup() {
@@ -48,7 +52,11 @@ export default class SettingsUiHandler extends UiHandler {
     this.optionValueLabels = [];
 
     Object.keys(Setting).forEach((setting, s) => {
-      this.settingLabels[s] = addTextObject(this.scene, 8, 28 + s * 16, setting.replace(/\_/g, ' '), TextStyle.SETTINGS_LABEL);
+      let settingName = setting.replace(/\_/g, ' ');
+      if (reloadSettings.includes(Setting[setting]))
+        settingName += ' (Requires Reload)';
+
+      this.settingLabels[s] = addTextObject(this.scene, 8, 28 + s * 16, settingName, TextStyle.SETTINGS_LABEL);
       this.settingLabels[s].setOrigin(0, 0);
 
       this.optionsContainer.add(this.settingLabels[s]);
@@ -157,7 +165,7 @@ export default class SettingsUiHandler extends UiHandler {
     const ret = super.setCursor(cursor);
 
     if (!this.cursorObj) {
-      this.cursorObj = this.scene.add.nineslice(0, 0, 'select_cursor_highlight', null, (this.scene.game.canvas.width / 6) - 10, 16, 1, 1, 1, 1);
+      this.cursorObj = this.scene.add.nineslice(0, 0, 'summary_moves_cursor', null, (this.scene.game.canvas.width / 6) - 10, 16, 1, 1, 1, 1);
       this.cursorObj.setOrigin(0, 0);
       this.optionsContainer.add(this.cursorObj);
     }
@@ -178,17 +186,20 @@ export default class SettingsUiHandler extends UiHandler {
     const lastCursor = this.optionCursors[settingIndex];
 
     const lastValueLabel = this.optionValueLabels[settingIndex][lastCursor];
-    lastValueLabel.setColor(getTextColor(TextStyle.WINDOW));
-    lastValueLabel.setShadowColor(getTextColor(TextStyle.WINDOW, true));
+    lastValueLabel.setColor(this.getTextColor(TextStyle.WINDOW));
+    lastValueLabel.setShadowColor(this.getTextColor(TextStyle.WINDOW, true));
 
     this.optionCursors[settingIndex] = cursor;
 
     const newValueLabel = this.optionValueLabels[settingIndex][cursor];
-    newValueLabel.setColor(getTextColor(TextStyle.SETTINGS_SELECTED));
-    newValueLabel.setShadowColor(getTextColor(TextStyle.SETTINGS_SELECTED, true));
+    newValueLabel.setColor(this.getTextColor(TextStyle.SETTINGS_SELECTED));
+    newValueLabel.setShadowColor(this.getTextColor(TextStyle.SETTINGS_SELECTED, true));
 
-    if (save)
-      this.scene.gameData.saveSetting(setting, cursor);
+    if (save) {
+      this.scene.gameData.saveSetting(setting, cursor)
+      if (reloadSettings.includes(setting))
+        this.reloadRequired = true;
+    }
 
     return true;
   }
@@ -221,6 +232,10 @@ export default class SettingsUiHandler extends UiHandler {
     super.clear();
     this.settingsContainer.setVisible(false);
     this.eraseCursor();
+    if (this.reloadRequired) {
+      this.reloadRequired = false;
+      this.scene.reset(true);
+    } 
   }
 
   eraseCursor() {

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

@@ -13,7 +13,7 @@ import { DexAttr, DexEntry, StarterFormMoveData, StarterMoveset } from "../syste
 import * as Utils from "../utils";
 import PokemonIconAnimHandler, { PokemonIconAnimMode } from "./pokemon-icon-anim-handler";
 import { StatsContainer } from "./stats-container";
-import { addWindow } from "./window";
+import { addWindow } from "./ui-theme";
 import { Nature, getNatureName } from "../data/nature";
 import BBCodeText from "phaser3-rex-plugins/plugins/bbcodetext";
 import { pokemonFormChanges } from "../data/pokemon-forms";
@@ -127,7 +127,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     bgColor.setOrigin(0, 0);
     this.starterSelectContainer.add(bgColor);
 
-    const starterSelectBg = this.scene.add.image(1, 1, 'starter_select_bg');
+    const starterSelectBg = this.scene.add.image(0, 0, 'starter_select_bg');
     starterSelectBg.setOrigin(0, 0);
     this.starterSelectContainer.add(starterSelectBg);
 
@@ -136,10 +136,15 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.shinyOverlay.setVisible(false);
     this.starterSelectContainer.add(this.shinyOverlay);
 
+    const starterContainerWindow = addWindow(this.scene, 141, 1, 178, 178);
+    
     this.starterSelectContainer.add(addWindow(this.scene, 107, 1, 34, 58));
     this.starterSelectContainer.add(addWindow(this.scene, 107, 59, 34, 91));
     this.starterSelectContainer.add(addWindow(this.scene, 107, 145, 34, 34, true));
-    this.starterSelectContainer.add(addWindow(this.scene, 141, 1, 178, 178));
+    this.starterSelectContainer.add(starterContainerWindow);
+
+    if (!this.scene.uiTheme)
+      starterContainerWindow.setVisible(false);
 
     this.iconAnimHandler = new PokemonIconAnimHandler();
     this.iconAnimHandler.setup(this.scene);
@@ -152,7 +157,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.pokemonNameText.setOrigin(0, 0);
     this.starterSelectContainer.add(this.pokemonNameText);
 
-    this.pokemonGrowthRateLabelText = addTextObject(this.scene, 8, 106, 'Growth Rate:', TextStyle.SUMMARY, { fontSize: '36px' });
+    this.pokemonGrowthRateLabelText = addTextObject(this.scene, 8, 106, 'Growth Rate:', TextStyle.SUMMARY_ALT, { fontSize: '36px' });
     this.pokemonGrowthRateLabelText.setOrigin(0, 0);
     this.pokemonGrowthRateLabelText.setVisible(false);
     this.starterSelectContainer.add(this.pokemonGrowthRateLabelText);
@@ -161,38 +166,38 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.pokemonGrowthRateText.setOrigin(0, 0);
     this.starterSelectContainer.add(this.pokemonGrowthRateText);
 
-    this.pokemonGenderText = addTextObject(this.scene, 96, 112, '', TextStyle.SUMMARY);
+    this.pokemonGenderText = addTextObject(this.scene, 96, 112, '', TextStyle.SUMMARY_ALT);
     this.pokemonGenderText.setOrigin(0, 0);
     this.starterSelectContainer.add(this.pokemonGenderText);
 
-    this.pokemonUncaughtText = addTextObject(this.scene, 6, 126, 'Uncaught', TextStyle.SUMMARY, { fontSize: '56px' });
+    this.pokemonUncaughtText = addTextObject(this.scene, 6, 126, 'Uncaught', TextStyle.SUMMARY_ALT, { fontSize: '56px' });
     this.pokemonUncaughtText.setOrigin(0, 0);
     this.starterSelectContainer.add(this.pokemonUncaughtText);
 
-    this.pokemonAbilityLabelText = addTextObject(this.scene, 6, 126, 'Ability:', TextStyle.SUMMARY, { fontSize: '56px' });
+    this.pokemonAbilityLabelText = addTextObject(this.scene, 6, 126, 'Ability:', TextStyle.SUMMARY_ALT, { fontSize: '56px' });
     this.pokemonAbilityLabelText.setOrigin(0, 0);
     this.pokemonAbilityLabelText.setVisible(false);
     this.starterSelectContainer.add(this.pokemonAbilityLabelText);
 
-    this.pokemonAbilityText = addTextObject(this.scene, 30, 126, '', TextStyle.SUMMARY, { fontSize: '56px' });
+    this.pokemonAbilityText = addTextObject(this.scene, 30, 126, '', TextStyle.SUMMARY_ALT, { fontSize: '56px' });
     this.pokemonAbilityText.setOrigin(0, 0);
     this.starterSelectContainer.add(this.pokemonAbilityText);
 
-    this.pokemonNatureLabelText = addTextObject(this.scene, 6, 135, 'Nature:', TextStyle.SUMMARY, { fontSize: '56px' });
+    this.pokemonNatureLabelText = addTextObject(this.scene, 6, 135, 'Nature:', TextStyle.SUMMARY_ALT, { fontSize: '56px' });
     this.pokemonNatureLabelText.setOrigin(0, 0);
     this.pokemonNatureLabelText.setVisible(false);
     this.starterSelectContainer.add(this.pokemonNatureLabelText);
 
-    this.pokemonNatureText = addBBCodeTextObject(this.scene, 30, 135, '', TextStyle.SUMMARY, { fontSize: '56px' });
+    this.pokemonNatureText = addBBCodeTextObject(this.scene, 30, 135, '', TextStyle.SUMMARY_ALT, { fontSize: '56px' });
     this.pokemonNatureText.setOrigin(0, 0);
     this.starterSelectContainer.add(this.pokemonNatureText);
 
-    this.pokemonCaughtCountLabelText = addTextObject(this.scene, 6, 144, 'Caught/Hatched:', TextStyle.SUMMARY, { fontSize: '56px' });
+    this.pokemonCaughtCountLabelText = addTextObject(this.scene, 6, 144, 'Caught/Hatched:', TextStyle.SUMMARY_ALT, { fontSize: '56px' });
     this.pokemonCaughtCountLabelText.setOrigin(0, 0);
     this.pokemonCaughtCountLabelText.setVisible(false);
     this.starterSelectContainer.add(this.pokemonCaughtCountLabelText);
 
-    this.pokemonCaughtCountText = addTextObject(this.scene, 58, 144, '0/0 (0)', TextStyle.SUMMARY, { fontSize: '56px' });
+    this.pokemonCaughtCountText = addTextObject(this.scene, 58, 144, '0/0 (0)', TextStyle.SUMMARY_ALT, { fontSize: '56px' });
     this.pokemonCaughtCountText.setOrigin(0, 0);
     this.starterSelectContainer.add(this.pokemonCaughtCountText);
 
@@ -212,7 +217,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.updateGenOptions();
 
     this.starterSelectGenIconContainers = new Array(gens.length).fill(null).map((_, i) => {
-      const container = this.scene.add.container(149, 9);
+      const container = this.scene.add.container(151, 9);
       if (i)
         container.setVisible(false);
       this.starterSelectContainer.add(container);
@@ -256,7 +261,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     startLabel.setOrigin(0.5, 0);
     this.starterSelectContainer.add(startLabel);
 
-    this.startCursorObj = this.scene.add.nineslice(111, 160, 'select_cursor', null, 26, 15, 1, 1, 1, 1);
+    this.startCursorObj = this.scene.add.nineslice(111, 160, 'select_cursor', null, 26, 15, 6, 6, 6, 6);
     this.startCursorObj.setVisible(false);
     this.startCursorObj.setOrigin(0, 0);
     this.starterSelectContainer.add(this.startCursorObj);
@@ -301,7 +306,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.starterValueLabels = new Array(81).fill(null).map((_, i) => {
       const x = (i % 9) * 18;
       const y = Math.floor(i / 9) * 18;
-      const ret = addTextObject(this.scene, x + 150, y + 11, '0', TextStyle.WINDOW, { fontSize: '32px' });
+      const ret = addTextObject(this.scene, x + 152, y + 11, '0', TextStyle.WINDOW, { fontSize: '32px' });
       ret.setShadowOffset(2, 2);
       ret.setOrigin(0, 0);
       ret.setVisible(false);
@@ -312,7 +317,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.shinyIcons = new Array(81).fill(null).map((_, i) => {
       const x = (i % 9) * 18;
       const y = Math.floor(i / 9) * 18;
-      const ret = this.scene.add.image(x + 161, y + 11, 'shiny_star');
+      const ret = this.scene.add.image(x + 163, y + 11, 'shiny_star');
       ret.setOrigin(0, 0);
       ret.setScale(0.5);
       ret.setVisible(false);
@@ -355,7 +360,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.pokemonEggMovesContainer = this.scene.add.container(102, 85);
     this.pokemonEggMovesContainer.setScale(0.375);
 
-    const eggMovesLabel = addTextObject(this.scene, -46, 0, 'Egg Moves', TextStyle.SUMMARY);
+    const eggMovesLabel = addTextObject(this.scene, -46, 0, 'Egg Moves', TextStyle.SUMMARY_ALT);
     eggMovesLabel.setOrigin(0.5, 0);
     
     this.pokemonEggMovesContainer.add(eggMovesLabel);
@@ -429,7 +434,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
 
         this.pokerusGens.push(species.generation - 1);
         this.pokerusCursors.push(pokerusCursor);
-        this.pokerusCursorObjs[c].setPosition(148 + 18 * (pokerusCursor % 9), 10 + 18 * Math.floor(pokerusCursor / 9));
+        this.pokerusCursorObjs[c].setPosition(150 + 18 * (pokerusCursor % 9), 10 + 18 * Math.floor(pokerusCursor / 9));
       }
     }, 0, date.getTime().toString());
 
@@ -862,8 +867,8 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
               textStyle = TextStyle.SUMMARY_GOLD;
               break;
           }
-          this.starterValueLabels[s].setColor(getTextColor(textStyle));
-          this.starterValueLabels[s].setShadowColor(getTextColor(textStyle, true));
+          this.starterValueLabels[s].setColor(this.getTextColor(textStyle));
+          this.starterValueLabels[s].setShadowColor(this.getTextColor(textStyle, true));
         }
         this.starterValueLabels[s].setVisible(slotVisible);
         this.shinyIcons[s].setVisible(slotVisible && !!(this.scene.gameData.dexData[speciesId].caughtAttr & DexAttr.SHINY));
@@ -871,7 +876,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     } else {
       changed = super.setCursor(cursor);
 
-      this.cursorObj.setPosition(148 + 18 * (cursor % 9), 10 + 18 * Math.floor(cursor / 9));
+      this.cursorObj.setPosition(150 + 18 * (cursor % 9), 10 + 18 * Math.floor(cursor / 9));
 
       this.setSpecies(this.genSpecies[this.getGenCursorWithScroll()][cursor]);
 
@@ -1056,8 +1061,8 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
       }
 
       this.shinyOverlay.setVisible(shiny);
-      this.pokemonNumberText.setColor(getTextColor(shiny ? TextStyle.SUMMARY_GOLD : TextStyle.SUMMARY));
-      this.pokemonNumberText.setShadowColor(getTextColor(shiny ? TextStyle.SUMMARY_GOLD : TextStyle.SUMMARY, true));
+      this.pokemonNumberText.setColor(this.getTextColor(shiny ? TextStyle.SUMMARY_GOLD : TextStyle.SUMMARY, false));
+      this.pokemonNumberText.setShadowColor(this.getTextColor(shiny ? TextStyle.SUMMARY_GOLD : TextStyle.SUMMARY, true));
 
       if (forSeen ? this.speciesStarterDexEntry?.seenAttr : this.speciesStarterDexEntry?.caughtAttr) {
         let starterIndex = -1;
@@ -1111,8 +1116,8 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
         this.pokemonAbilityText.setText(allAbilities[ability].name);
 
         const isHidden = ability === this.lastSpecies.abilityHidden;
-        this.pokemonAbilityText.setColor(getTextColor(!isHidden ? TextStyle.SUMMARY : TextStyle.SUMMARY_GOLD));
-        this.pokemonAbilityText.setShadowColor(getTextColor(!isHidden ? TextStyle.SUMMARY : TextStyle.SUMMARY_GOLD, true));
+        this.pokemonAbilityText.setColor(this.getTextColor(!isHidden ? TextStyle.SUMMARY_ALT : TextStyle.SUMMARY_GOLD));
+        this.pokemonAbilityText.setShadowColor(this.getTextColor(!isHidden ? TextStyle.SUMMARY_ALT : TextStyle.SUMMARY_GOLD, true));
 
         this.pokemonNatureText.setText(getNatureName(natureIndex as unknown as Nature, true, true));
 
@@ -1146,8 +1151,8 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
       }
     } else {
       this.shinyOverlay.setVisible(false);
-      this.pokemonNumberText.setColor(getTextColor(TextStyle.SUMMARY));
-      this.pokemonNumberText.setShadowColor(getTextColor(TextStyle.SUMMARY, true));
+      this.pokemonNumberText.setColor(this.getTextColor(TextStyle.SUMMARY));
+      this.pokemonNumberText.setShadowColor(this.getTextColor(TextStyle.SUMMARY, true));
       this.pokemonGenderText.setText('');
       this.pokemonAbilityText.setText('');
       this.pokemonNatureText.setText('');
@@ -1200,8 +1205,8 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     if (newValueStr.startsWith('0.'))
       newValueStr = newValueStr.slice(1);
     this.valueLimitLabel.setText(`${newValueStr}/10`);
-    this.valueLimitLabel.setColor(getTextColor(!overLimit ? TextStyle.TOOLTIP_CONTENT : TextStyle.SUMMARY_PINK));
-    this.valueLimitLabel.setShadowColor(getTextColor(!overLimit ? TextStyle.TOOLTIP_CONTENT : TextStyle.SUMMARY_PINK, true));
+    this.valueLimitLabel.setColor(this.getTextColor(!overLimit ? TextStyle.TOOLTIP_CONTENT : TextStyle.SUMMARY_PINK));
+    this.valueLimitLabel.setShadowColor(this.getTextColor(!overLimit ? TextStyle.TOOLTIP_CONTENT : TextStyle.SUMMARY_PINK, true));
     if (overLimit) {
       this.scene.time.delayedCall(Utils.fixedInt(500), () => this.tryUpdateValue());
       return false;

src/ui/stats-container.ts

@@ -70,7 +70,7 @@ export class StatsContainer extends Phaser.GameObjects.Container {
         let label = ivs[i].toString();
         if (this.showDiff && originalIvs) {
           if (originalIvs[i] < ivs[i])
-            label += ` ([color=${getTextColor(TextStyle.SUMMARY_BLUE)}][shadow=${getTextColor(TextStyle.SUMMARY_BLUE, true)}]+${ivs[i] - originalIvs[i]}[/shadow][/color])`;
+            label += ` ([color=${getTextColor(TextStyle.SUMMARY_BLUE, false, (this.scene as BattleScene).uiTheme)}][shadow=${getTextColor(TextStyle.SUMMARY_BLUE, true, (this.scene as BattleScene).uiTheme)}]+${ivs[i] - originalIvs[i]}[/shadow][/color])`;
           else
             label += ' (-)';
         }

src/ui/summary-ui-handler.ts

@@ -8,7 +8,7 @@ import { TextStyle, addBBCodeTextObject, addTextObject, getBBCodeFrag, getTextCo
 import Move, { MoveCategory } from "../data/move";
 import { getPokeballAtlasKey } from "../data/pokeball";
 import { getGenderColor, getGenderSymbol } from "../data/gender";
-import { getLevelTotalExp } from "../data/exp";
+import { getLevelRelExp, getLevelTotalExp } from "../data/exp";
 import { Stat, getStatName } from "../data/pokemon-stat";
 import { PokemonHeldItemModifier } from "../modifier/modifier";
 import { StatusEffect } from "../data/status-effect";
@@ -119,11 +119,11 @@ export default class SummaryUiHandler extends UiHandler {
     this.pokeball.setOrigin(0, 1);
     this.summaryContainer.add(this.pokeball);
 
-    this.levelText = addTextObject(this.scene, 36, -18, '', TextStyle.SUMMARY);
+    this.levelText = addTextObject(this.scene, 36, -17, '', TextStyle.SUMMARY_ALT);
     this.levelText.setOrigin(0, 1);
     this.summaryContainer.add(this.levelText);
 
-    this.genderText = addTextObject(this.scene, 96, -18, '', TextStyle.SUMMARY);
+    this.genderText = addTextObject(this.scene, 96, -17, '', TextStyle.SUMMARY);
     this.genderText.setOrigin(0, 1);
     this.summaryContainer.add(this.genderText);
 
@@ -160,11 +160,11 @@ export default class SummaryUiHandler extends UiHandler {
 
     this.moveEffectContainer.add(moveEffectLabels);
 
-    this.movePowerText = addTextObject(this.scene, 99, 27, '0', TextStyle.WINDOW);
+    this.movePowerText = addTextObject(this.scene, 99, 27, '0', TextStyle.WINDOW_ALT);
     this.movePowerText.setOrigin(1, 1);
     this.moveEffectContainer.add(this.movePowerText);
 
-    this.moveAccuracyText = addTextObject(this.scene, 99, 43, '0', TextStyle.WINDOW);
+    this.moveAccuracyText = addTextObject(this.scene, 99, 43, '0', TextStyle.WINDOW_ALT);
     this.moveAccuracyText.setOrigin(1, 1);
     this.moveEffectContainer.add(this.moveAccuracyText);
 
@@ -206,8 +206,8 @@ export default class SummaryUiHandler extends UiHandler {
     this.shinyOverlay.setVisible(this.pokemon.isShiny());
 
     this.numberText.setText(Utils.padInt(this.pokemon.species.speciesId, 4));
-    this.numberText.setColor(getTextColor(!this.pokemon.isShiny() ? TextStyle.SUMMARY : TextStyle.SUMMARY_GOLD));
-    this.numberText.setShadowColor(getTextColor(!this.pokemon.isShiny() ? TextStyle.SUMMARY : TextStyle.SUMMARY_GOLD, true));
+    this.numberText.setColor(this.getTextColor(!this.pokemon.isShiny() ? TextStyle.SUMMARY : TextStyle.SUMMARY_GOLD));
+    this.numberText.setShadowColor(this.getTextColor(!this.pokemon.isShiny() ? TextStyle.SUMMARY : TextStyle.SUMMARY_GOLD, true));
 
     this.pokemonSprite.play(this.pokemon.getSpriteKey(true));
     this.pokemonSprite.pipelineData['teraColor'] = getTypeRgb(this.pokemon.getTeraType());
@@ -502,7 +502,7 @@ export default class SummaryUiHandler extends UiHandler {
         const profileContainer = this.scene.add.container(0, -pageBg.height);
         pageContainer.add(profileContainer);
 
-        const trainerLabel = addTextObject(this.scene, 7, 12, 'OT/', TextStyle.SUMMARY);
+        const trainerLabel = addTextObject(this.scene, 7, 12, 'OT/', TextStyle.SUMMARY_ALT);
         trainerLabel.setOrigin(0, 0);
         profileContainer.add(trainerLabel);
 
@@ -511,11 +511,11 @@ export default class SummaryUiHandler extends UiHandler {
         trainerText.setOrigin(0, 0);
         profileContainer.add(trainerText);
 
-        const trainerIdText = addTextObject(this.scene, 174, 12, this.scene.gameData.trainerId.toString(), TextStyle.SUMMARY);
+        const trainerIdText = addTextObject(this.scene, 174, 12, this.scene.gameData.trainerId.toString(), TextStyle.SUMMARY_ALT);
         trainerIdText.setOrigin(0, 0);
         profileContainer.add(trainerIdText);
 
-        const typeLabel = addTextObject(this.scene, 7, 28, 'Type/', TextStyle.WINDOW);
+        const typeLabel = addTextObject(this.scene, 7, 28, 'Type/', TextStyle.WINDOW_ALT);
         typeLabel.setOrigin(0, 0);
         profileContainer.add(typeLabel);
 
@@ -542,11 +542,11 @@ export default class SummaryUiHandler extends UiHandler {
 
         const ability = this.pokemon.getAbility(true);
 
-        const abilityNameText = addTextObject(this.scene, 7, 66, ability.name, TextStyle.SUMMARY);
+        const abilityNameText = addTextObject(this.scene, 7, 66, ability.name, TextStyle.SUMMARY_ALT);
         abilityNameText.setOrigin(0, 1);
         profileContainer.add(abilityNameText);
 
-        const abilityDescriptionText = addTextObject(this.scene, 7, 69, ability.description, TextStyle.WINDOW, { wordWrap: { width: 1224 } });
+        const abilityDescriptionText = addTextObject(this.scene, 7, 69, ability.description, TextStyle.WINDOW_ALT, { wordWrap: { width: 1224 } });
         abilityDescriptionText.setOrigin(0, 0);
         profileContainer.add(abilityDescriptionText);
 
@@ -574,9 +574,9 @@ export default class SummaryUiHandler extends UiHandler {
           });
         }
 
-        let memoString = `${getBBCodeFrag(Utils.toReadableString(Nature[this.pokemon.nature]), TextStyle.SUMMARY_RED)}${getBBCodeFrag(' nature,', TextStyle.WINDOW)}\n${getBBCodeFrag(`${this.pokemon.metBiome === -1 ? 'apparently ' : ''}met at Lv`, TextStyle.WINDOW)}${getBBCodeFrag(this.pokemon.metLevel.toString(), TextStyle.SUMMARY_RED)}${getBBCodeFrag(',', TextStyle.WINDOW)}\n${getBBCodeFrag(getBiomeName(this.pokemon.metBiome), TextStyle.SUMMARY_RED)}${getBBCodeFrag('.', TextStyle.WINDOW)}`;
+        let memoString = `${getBBCodeFrag(Utils.toReadableString(Nature[this.pokemon.nature]), TextStyle.SUMMARY_RED)}${getBBCodeFrag(' nature,', TextStyle.WINDOW_ALT)}\n${getBBCodeFrag(`${this.pokemon.metBiome === -1 ? 'apparently ' : ''}met at Lv`, TextStyle.WINDOW_ALT)}${getBBCodeFrag(this.pokemon.metLevel.toString(), TextStyle.SUMMARY_RED)}${getBBCodeFrag(',', TextStyle.WINDOW_ALT)}\n${getBBCodeFrag(getBiomeName(this.pokemon.metBiome), TextStyle.SUMMARY_RED)}${getBBCodeFrag('.', TextStyle.WINDOW_ALT)}`;
        
-        const memoText = addBBCodeTextObject(this.scene, 7, 113, memoString, TextStyle.WINDOW);
+        const memoText = addBBCodeTextObject(this.scene, 7, 113, memoString, TextStyle.WINDOW_ALT);
         memoText.setOrigin(0, 0);
         profileContainer.add(memoText);
         break;
@@ -603,7 +603,7 @@ export default class SummaryUiHandler extends UiHandler {
             ? Utils.formatStat(this.pokemon.stats[s])
             : `${Utils.formatStat(this.pokemon.hp, true)}/${Utils.formatStat(this.pokemon.getMaxHp(), true)}`;
 
-          const statValue = addTextObject(this.scene, 120 + 88 * colIndex, 56 + 16 * rowIndex, statValueText, TextStyle.WINDOW);
+          const statValue = addTextObject(this.scene, 120 + 88 * colIndex, 56 + 16 * rowIndex, statValueText, TextStyle.WINDOW_ALT);
           statValue.setOrigin(1, 0);
           statsContainer.add(statValue);
         });
@@ -622,8 +622,8 @@ export default class SummaryUiHandler extends UiHandler {
           icon.on('pointerout', () => (this.scene as BattleScene).ui.hideTooltip());
         });
 
-        const totalLvExp = getLevelTotalExp(this.pokemon.level, this.pokemon.species.growthRate);
-        const expRatio = this.pokemon.level < this.scene.getMaxExpLevel() ? this.pokemon.levelExp / totalLvExp : 0;
+        const relLvExp = getLevelRelExp(this.pokemon.level + 1, this.pokemon.species.growthRate);
+        const expRatio = this.pokemon.level < this.scene.getMaxExpLevel() ? this.pokemon.levelExp / relLvExp : 0;
 
         const expLabel = addTextObject(this.scene, 6, 112, 'EXP. Points', TextStyle.SUMMARY);
         expLabel.setOrigin(0, 0);
@@ -633,14 +633,14 @@ export default class SummaryUiHandler extends UiHandler {
         nextLvExpLabel.setOrigin(0, 0);
         statsContainer.add(nextLvExpLabel);
 
-        const expText = addTextObject(this.scene, 208, 112, this.pokemon.exp.toString(), TextStyle.WINDOW);
+        const expText = addTextObject(this.scene, 208, 112, this.pokemon.exp.toString(), TextStyle.WINDOW_ALT);
         expText.setOrigin(1, 0);
         statsContainer.add(expText);
 
         const nextLvExp = this.pokemon.level < this.scene.getMaxExpLevel()
           ? getLevelTotalExp(this.pokemon.level + 1, this.pokemon.species.growthRate) - this.pokemon.exp
           : 0;
-        const nextLvExpText = addTextObject(this.scene, 208, 128, nextLvExp.toString(), TextStyle.WINDOW);
+        const nextLvExpText = addTextObject(this.scene, 208, 128, nextLvExp.toString(), TextStyle.WINDOW_ALT);
         nextLvExpText.setOrigin(1, 0);
         statsContainer.add(nextLvExpText);
 
@@ -724,7 +724,7 @@ export default class SummaryUiHandler extends UiHandler {
           moveRowContainer.add(ppText);
         }
 
-        this.moveDescriptionText = addTextObject(this.scene, 2, 84, '', TextStyle.WINDOW, { wordWrap: { width: 1212 } });
+        this.moveDescriptionText = addTextObject(this.scene, 2, 84, '', TextStyle.WINDOW_ALT, { wordWrap: { width: 1212 } });
         this.movesContainer.add(this.moveDescriptionText);
 
         const moveDescriptionTextMaskRect = this.scene.make.graphics({});

src/ui/text.ts

@@ -2,14 +2,18 @@ import BBCodeText from "phaser3-rex-plugins/plugins/gameobjects/tagtext/bbcodete
 import InputText from "phaser3-rex-plugins/plugins/inputtext";
 import { ModifierTier } from "../modifier/modifier-tier";
 import { EggTier } from "../data/enums/egg-type";
+import BattleScene from "../battle-scene";
+import { UiTheme } from "../enums/ui-theme";
 
 export enum TextStyle {
   MESSAGE,
   WINDOW,
+  WINDOW_ALT,
   BATTLE_INFO,
   PARTY,
   PARTY_RED,
   SUMMARY,
+  SUMMARY_ALT,
   SUMMARY_RED,
   SUMMARY_BLUE,
   SUMMARY_PINK,
@@ -22,7 +26,7 @@ export enum TextStyle {
 };
 
 export function addTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): Phaser.GameObjects.Text {
-  const [ styleOptions, shadowColor, shadowSize ] = getTextStyleOptions(style, extraStyleOptions);
+  const [ styleOptions, shadowColor, shadowSize ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
 
   const ret = scene.add.text(x, y, content, styleOptions);
   ret.setScale(0.1666666667);
@@ -34,7 +38,7 @@ export function addTextObject(scene: Phaser.Scene, x: number, y: number, content
 }
 
 export function addBBCodeTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): BBCodeText {
-  const [ styleOptions, shadowColor, shadowSize ] = getTextStyleOptions(style, extraStyleOptions);
+  const [ styleOptions, shadowColor, shadowSize ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
 
   const ret = new BBCodeText(scene, x, y, content, styleOptions as BBCodeText.TextStyle);
   scene.add.existing(ret);
@@ -47,7 +51,7 @@ export function addBBCodeTextObject(scene: Phaser.Scene, x: number, y: number, c
 }
 
 export function addTextInputObject(scene: Phaser.Scene, x: number, y: number, width: number, height: number, style: TextStyle, extraStyleOptions?: InputText.IConfig): InputText {
-  const [ styleOptions ] = getTextStyleOptions(style, extraStyleOptions);
+  const [ styleOptions ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
 
   const ret = new InputText(scene, x, y, width, height, styleOptions as InputText.IConfig);
   scene.add.existing(ret);
@@ -56,14 +60,14 @@ export function addTextInputObject(scene: Phaser.Scene, x: number, y: number, wi
   return ret;
 }
 
-function getTextStyleOptions(style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): [ Phaser.Types.GameObjects.Text.TextStyle | InputText.IConfig, string, integer ] {
+function getTextStyleOptions(style: TextStyle, uiTheme: UiTheme, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): [ Phaser.Types.GameObjects.Text.TextStyle | InputText.IConfig, string, integer ] {
   let shadowColor: string;
   let shadowSize = 6;
 
   let styleOptions: Phaser.Types.GameObjects.Text.TextStyle = {
     fontFamily: 'emerald',
     fontSize: '96px',
-    color: getTextColor(style, false),
+    color: getTextColor(style, false, uiTheme),
     padding: {
       bottom: 6
     }
@@ -97,7 +101,7 @@ function getTextStyleOptions(style: TextStyle, extraStyleOptions?: Phaser.Types.
       break;
   }
 
-  shadowColor = getTextColor(style, true);
+  shadowColor = getTextColor(style, true, uiTheme);
 
   if (extraStyleOptions) {
     if (extraStyleOptions.fontSize) {
@@ -114,21 +118,31 @@ export function getBBCodeFrag(content: string, textStyle: TextStyle): string {
   return `[color=${getTextColor(textStyle)}][shadow=${getTextColor(textStyle, true)}]${content}`;
 }
 
-export function getTextColor(textStyle: TextStyle, shadow?: boolean): string {
+export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: UiTheme = UiTheme.DEFAULT): string {
   switch (textStyle) {
     case TextStyle.MESSAGE:
       return !shadow ? '#f8f8f8' : '#6b5a73';
     case TextStyle.WINDOW:
     case TextStyle.TOOLTIP_CONTENT:
+      if (uiTheme)
+        return !shadow ? '#484848' : '#d0d0c8';
+      return !shadow ? '#f8f8f8' : '#6b5a73';
+    case TextStyle.WINDOW_ALT:
       return !shadow ? '#484848' : '#d0d0c8';
     case TextStyle.BATTLE_INFO:
-      return !shadow ? '#404040' : '#ded6b5';
+      if (uiTheme)
+        return !shadow ? '#404040' : '#ded6b5';
+      return !shadow ? '#f8f8f8' : '#6b5a73';
     case TextStyle.PARTY:
       return !shadow ? '#f8f8f8' : '#707070';
     case TextStyle.PARTY_RED:
       return !shadow ? '#f89890' : '#984038';
     case TextStyle.SUMMARY:
       return !shadow ? '#ffffff' : '#636363';
+    case TextStyle.SUMMARY_ALT:
+      if (uiTheme)
+        return !shadow ? '#ffffff' : '#636363';
+      return !shadow ? '#484848' : '#d0d0c8';
     case TextStyle.SUMMARY_RED:
     case TextStyle.TOOLTIP_TITLE:
       return !shadow ? '#e70808' : '#ffbd73';

src/ui/ui-handler.ts

@@ -1,4 +1,5 @@
 import BattleScene, { Button } from "../battle-scene";
+import { TextStyle, getTextColor } from "./text";
 import UI, { Mode } from "./ui";
 
 export default abstract class UiHandler {
@@ -26,6 +27,10 @@ export default abstract class UiHandler {
     return this.scene.ui;
   }
 
+  getTextColor(style: TextStyle, shadow: boolean = false): string {
+    return getTextColor(style, shadow, this.scene.uiTheme);
+  }
+
   getCursor(): integer {
     return this.cursor;
   }

src/ui/ui-theme.ts

@@ -0,0 +1,147 @@
+import { UiTheme } from "#app/enums/ui-theme";
+import BattleScene, { legacyCompatibleImages } from "../battle-scene";
+
+export enum WindowVariant {
+  NORMAL,
+  THIN,
+  XTHIN
+}
+
+export function getWindowVariantSuffix(windowVariant: WindowVariant): string {
+  switch (windowVariant) {
+    case WindowVariant.THIN:
+      return '_thin';
+    case WindowVariant.XTHIN:
+      return '_xthin';
+    default:
+      return '';
+  }
+}
+
+const windowTypeControlColors = {
+  [UiTheme.DEFAULT]: {
+    0: [ '#6b5a73', '#DD5748', '#7E4955' ],
+    1: [ '#6b5a73', '#48DDAA', '#4D7574' ],
+    2: [ '#6b5a73', '#C5C5C5', '#766D7E' ],
+    3: [ '#6b5a73', '#EBC07C', '#836C66' ],
+    4: [ '#686868', '#E8E8E8', '#919191' ]
+  },
+  [UiTheme.LEGACY]: {
+    0: [ '#706880', '#8888c8', '#484868' ],
+    1: [ '#d04028', '#e0a028', '#902008' ],
+    2: [ '#48b840', '#88d880', '#089040' ],
+    3: [ '#2068d0', '#80b0e0', '#104888' ],
+    4: [ '#706880', '#8888c8', '#484868' ]
+  }
+};
+
+export function addWindow(scene: BattleScene, x: number, y: number, width: number, height: number, mergeMaskTop?: boolean, mergeMaskLeft?: boolean, maskOffsetX?: number, maskOffsetY?: number, windowVariant?: WindowVariant): Phaser.GameObjects.NineSlice {
+  if (windowVariant === undefined)
+    windowVariant = WindowVariant.NORMAL;
+
+  const borderSize = scene.uiTheme ? 6 : 8;
+    
+  const window = scene.add.nineslice(x, y, `window_${scene.windowType}${getWindowVariantSuffix(windowVariant)}`, null, width, height, borderSize, borderSize, borderSize, borderSize);
+  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, WindowVariant][] = [];
+  const bgObjects: Phaser.GameObjects.Image[] = [];
+  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, 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')
+      bgObjects.push(object)
+  }
+
+  traverse(scene);
+
+  scene.windowType = windowTypeIndex;
+
+  const rootStyle = document.documentElement.style;
+  [ 'base', 'light', 'dark' ].map((k, i) => rootStyle.setProperty(`--color-${k}`, windowTypeControlColors[scene.uiTheme][windowTypeIndex - 1][i]));
+
+  const windowKey = `window_${windowTypeIndex}`;
+
+  for (let [ window, variant ] of windowObjects)
+    window.setTexture(`${windowKey}${getWindowVariantSuffix(variant)}`);
+
+  for (let bg of bgObjects)
+    bg.setFrame(windowTypeIndex);
+}
+
+export function addUiThemeOverrides(scene: BattleScene): void {
+  const originalAddImage = scene.add.image;
+  scene.add.image = function (x: number, y: number, texture: string | Phaser.Textures.Texture, frame?: string | number): Phaser.GameObjects.Image {
+    let legacy = false;
+    if (typeof texture === 'string' && scene.uiTheme && legacyCompatibleImages.includes(texture)) {
+      legacy = true;
+      texture += '_legacy';
+    }
+    const ret: Phaser.GameObjects.Image = originalAddImage.apply(this, [ x, y, texture, frame ]);
+    if (legacy) {
+      const originalSetTexture = ret.setTexture;
+      ret.setTexture = function (key: string, frame?: string | number) {
+        key += '_legacy';
+        return originalSetTexture.apply(this, [ key, frame ]);
+      };
+    }
+    return ret;
+  };
+
+  const originalAddSprite = scene.add.sprite;
+  scene.add.sprite = function (x: number, y: number, texture: string | Phaser.Textures.Texture, frame?: string | number): Phaser.GameObjects.Sprite {
+    let legacy = false;
+    if (typeof texture === 'string' && scene.uiTheme && legacyCompatibleImages.includes(texture)) {
+      legacy = true;
+      texture += '_legacy';
+    }
+    const ret: Phaser.GameObjects.Sprite = originalAddSprite.apply(this, [ x, y, texture, frame ]);
+    if (legacy) {
+      const originalSetTexture = ret.setTexture;
+      ret.setTexture = function (key: string, frame?: string | number) {
+        key += '_legacy';
+        return originalSetTexture.apply(this, [ key, frame ]);
+      };
+    }
+    return ret;
+  };
+
+  const originalAddNineslice = scene.add.nineslice;
+  scene.add.nineslice = function (x: number, y: number, texture: string | Phaser.Textures.Texture, frame?: string | number, width?: number, height?: number, leftWidth?: number, rightWidth?: number, topHeight?: number, bottomHeight?: number): Phaser.GameObjects.NineSlice {
+    let legacy = false;
+    if (typeof texture === 'string' && scene.uiTheme && legacyCompatibleImages.includes(texture)) {
+      legacy = true;
+      texture += '_legacy';
+    }
+    const ret: Phaser.GameObjects.NineSlice = originalAddNineslice.apply(this, [ x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight ]);
+    if (legacy) {
+      const originalSetTexture = ret.setTexture;
+      ret.setTexture = function (key: string | Phaser.Textures.Texture, frame?: string | number, updateSize?: boolean, updateOrigin?: boolean) {
+        key += '_legacy';
+        return originalSetTexture.apply(this, [ key, frame, updateSize, updateOrigin ]);
+      };
+    }
+    return ret;
+  };
+}

src/ui/ui.ts

@@ -23,7 +23,7 @@ import EggHatchSceneHandler from './egg-hatch-scene-handler';
 import EggListUiHandler from './egg-list-ui-handler';
 import EggGachaUiHandler from './egg-gacha-ui-handler';
 import VouchersUiHandler from './vouchers-ui-handler';
-import { addWindow } from './window';
+import { addWindow } from './ui-theme';
 import LoginFormUiHandler from './login-form-ui-handler';
 import RegistrationFormUiHandler from './registration-form-ui-handler';
 import LoadingModalUiHandler from './loading-modal-ui-handler';

src/ui/vouchers-ui-handler.ts

@@ -3,7 +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";
+import { addWindow } from "./ui-theme";
 
 const itemRows = 4;
 const itemCols = 17;

src/ui/window.ts

@@ -1,73 +0,0 @@
-import BattleScene from "../battle-scene";
-
-export enum WindowVariant {
-  NORMAL,
-  THIN,
-  XTHIN
-}
-
-export function getWindowVariantSuffix(windowVariant: WindowVariant): string {
-  switch (windowVariant) {
-    case WindowVariant.THIN:
-      return '_thin';
-    case WindowVariant.XTHIN:
-      return '_xthin';
-    default:
-      return '';
-  }
-}
-
-const windowTypeControlColors = {
-  0: [ '#706880', '#8888c8', '#484868' ],
-  1: [ '#d04028', '#e0a028', '#902008' ],
-  2: [ '#48b840', '#88d880', '#089040' ],
-  3: [ '#2068d0', '#80b0e0', '#104888' ]
-};
-
-export function addWindow(scene: BattleScene, x: number, y: number, width: number, height: number, mergeMaskTop?: boolean, mergeMaskLeft?: boolean, maskOffsetX?: number, maskOffsetY?: number, windowVariant?: WindowVariant): Phaser.GameObjects.NineSlice {
-  if (windowVariant === undefined)
-    windowVariant = WindowVariant.NORMAL;
-    
-  const window = scene.add.nineslice(x, y, `window_${scene.windowType}${getWindowVariantSuffix(windowVariant)}`, null, width, height, 6, 6, 6, 6);
-  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, WindowVariant][] = [];
-  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, object.texture.key.endsWith(getWindowVariantSuffix(WindowVariant.XTHIN)) ? WindowVariant.XTHIN : object.texture.key.endsWith(getWindowVariantSuffix(WindowVariant.THIN)) ? WindowVariant.THIN : WindowVariant.NORMAL ]);
-    }
-  }
-
-  traverse(scene);
-
-  scene.windowType = windowTypeIndex;
-
-  const rootStyle = document.documentElement.style;
-  [ 'base', 'light', 'dark' ].map((k, i) => rootStyle.setProperty(`--color-${k}`, windowTypeControlColors[windowTypeIndex - 1][i]));
-
-  const windowKey = `window_${windowTypeIndex}`;
-
-  for (let [ window, variant ] of windowObjects)
-    window.setTexture(`${windowKey}${getWindowVariantSuffix(variant)}`);
-}