[Enhancement] Fixes sizing and legacy theme problem for bgm-bar (#2603)

* Adds TextStyle for bgm-bar ui

* Makes the ui bgm-bar truly dynamic + cleans up unused code

  + Removes all hard-coded characters from the string to allow for different typographical rules in different languages

* Applies the necessary modifications to locales following the deletion of the hard-coded character to form strings

* Use same style as above + reduce shadow offset

* Creates and loads a resource for the bgm-bar ui

  + Can be redesigned by someone with more talent if needed, since it won't affect the ability bar

* Using the new resource in bgm-bar ui

* Use of more space by default following deletion of the 'noteText' text zone

src/loading-scene.ts

@@ -78,6 +78,7 @@ export class LoadingScene extends SceneBase {
     this.loadImage("overlay_exp", "ui");
     this.loadImage("icon_owned", "ui");
     this.loadImage("ability_bar_left", "ui");
+    this.loadImage("bgm_bar", "ui");
     this.loadImage("party_exp_bar", "ui");
     this.loadImage("achv_bar", "ui");
     this.loadImage("achv_bar_2", "ui");

src/locales/de/bgm-name.ts

@@ -1,7 +1,7 @@
 import { SimpleTranslationEntries } from "#app/interfaces/locales";
 
 export const bgmName: SimpleTranslationEntries = {
-  "music": "Musik",
+  "music": "Musik: ",
   "missing_entries" : "{{name}}",
   "battle_kanto_champion": "S2W2 Vs. Kanto Champion",
   "battle_johto_champion": "S2W2 Vs. Johto Champion",

src/locales/en/bgm-name.ts

@@ -1,7 +1,7 @@
 import { SimpleTranslationEntries } from "#app/interfaces/locales";
 
 export const bgmName: SimpleTranslationEntries = {
-  "music": "Music",
+  "music": "Music: ",
   "missing_entries" : "{{name}}",
   "battle_kanto_champion": "B2W2 Kanto Champion Battle",
   "battle_johto_champion": "B2W2 Johto Champion Battle",

src/locales/es/bgm-name.ts

@@ -1,7 +1,7 @@
 import { SimpleTranslationEntries } from "#app/interfaces/locales";
 
 export const bgmName: SimpleTranslationEntries = {
-  "music": "Música",
+  "music": "Música: ",
   "missing_entries" : "{{name}}",
   "battle_kanto_champion": "B2W2 - ¡Vs Campeón de Kanto!",
   "battle_johto_champion": "B2W2 - ¡Vs Campeón de Johto!",

src/locales/fr/bgm-name.ts

@@ -1,7 +1,7 @@
 import { SimpleTranslationEntries } from "#app/interfaces/locales";
 
 export const bgmName: SimpleTranslationEntries = {
-  "music": "Musique ",
+  "music": "Musique : ",
   "missing_entries" : "{{name}}",
   "battle_kanto_champion": "N2B2 - Vs. Maitre de Kanto",
   "battle_johto_champion": "N2B2 - Vs. Maitre de Johto",

src/locales/it/bgm-name.ts

@@ -1,7 +1,7 @@
 import { SimpleTranslationEntries } from "#app/interfaces/locales";
 
 export const bgmName: SimpleTranslationEntries = {
-  "music": "Music",
+  "music": "Music: ",
   "missing_entries" : "{{name}}",
   "battle_kanto_champion": "B2W2 Kanto Champion Battle",
   "battle_johto_champion": "B2W2 Johto Champion Battle",

src/locales/ko/bgm-name.ts

@@ -1,7 +1,7 @@
 import { SimpleTranslationEntries } from "#app/interfaces/locales";
 
 export const bgmName: SimpleTranslationEntries = {
-  "music": "Music",
+  "music": "Music: ",
   "missing_entries" : "{{name}}",
   "battle_kanto_champion": "BW2 관동 챔피언 배틀",
   "battle_johto_champion": "BW2 성도 챔피언 배틀",

src/locales/pt_BR/bgm-name.ts

@@ -1,7 +1,7 @@
 import { SimpleTranslationEntries } from "#app/interfaces/locales";
 
 export const bgmName: SimpleTranslationEntries = {
-  "music": "Music",
+  "music": "Music: ",
   "missing_entries" : "{{name}}",
   "battle_kanto_champion": "B2W2 Kanto Champion Battle",
   "battle_johto_champion": "B2W2 Johto Champion Battle",

src/locales/zh_CN/bgm-name.ts

@@ -1,7 +1,7 @@
 import { SimpleTranslationEntries } from "#app/interfaces/locales";
 
 export const bgmName: SimpleTranslationEntries = {
-  "music": "BGM",
+  "music": "BGM: ",
   "missing_entries" : "{{name}}",
   "battle_kanto_champion": "黑2白2「决战！关都冠军」",
   "battle_johto_champion": "黑2白2「决战！城都冠军」",

src/locales/zh_TW/bgm-name.ts

@@ -1,7 +1,7 @@
 import { SimpleTranslationEntries } from "#app/interfaces/locales";
 
 export const bgmName: SimpleTranslationEntries = {
-  "music": "Music",
+  "music": "Music: ",
   "missing_entries" : "{{name}}",
   "battle_kanto_champion": "B2W2 Kanto Champion Battle",
   "battle_johto_champion": "B2W2 Johto Champion Battle",

src/ui/bgm-bar.ts

@@ -3,24 +3,16 @@ import {addTextObject, TextStyle} from "./text";
 import i18next from "i18next";
 import * as Utils from "#app/utils";
 
-
 const hiddenX = -150;
 const shownX = 0;
 const baseY = 0;
 
-
 export default class BgmBar extends Phaser.GameObjects.Container {
   private defaultWidth: number;
   private defaultHeight: number;
 
   private bg: Phaser.GameObjects.NineSlice;
   private musicText: Phaser.GameObjects.Text;
-  private noteText: Phaser.GameObjects.Text;
-
-  private tween: Phaser.Tweens.Tween;
-  private autoHideTimer: NodeJS.Timeout;
-  private queue: (string)[] = [];
-
 
   public shown: boolean;
 
@@ -29,19 +21,15 @@ export default class BgmBar extends Phaser.GameObjects.Container {
   }
 
   setup(): void {
-    this.defaultWidth = 200;
+    this.defaultWidth = 230;
     this.defaultHeight = 100;
 
-    this.bg = this.scene.add.nineslice(-5, -5, "ability_bar_left", null, this.defaultWidth, this.defaultHeight, 0, 0, 10, 10);
+    this.bg = this.scene.add.nineslice(-5, -5, "bgm_bar", null, this.defaultWidth, this.defaultHeight, 0, 0, 10, 10);
     this.bg.setOrigin(0, 0);
 
     this.add(this.bg);
 
-    this.noteText = addTextObject(this.scene, 5, 5, "", TextStyle.MESSAGE, {fontSize: "72px"});
+    this.musicText = addTextObject(this.scene, 5, 5, "", TextStyle.BGM_BAR);
-    this.noteText.setOrigin(0, 0);
-    this.add(this.noteText);
-
-    this.musicText = addTextObject(this.scene, 30, 5, "", TextStyle.MESSAGE, {fontSize: "72px"});
     this.musicText.setOrigin(0, 0);
     this.musicText.setWordWrapWidth(650, true);
 
@@ -56,16 +44,15 @@ export default class BgmBar extends Phaser.GameObjects.Container {
     * @param {string} bgmName The name of the BGM to set.
    */
   setBgmToBgmBar(bgmName: string): void {
-    this.noteText.setText(`${i18next.t("bgmName:music")}:`);
+    this.musicText.setText(`${i18next.t("bgmName:music")}${this.getRealBgmName(bgmName)}`);
-    this.musicText.setText(`${this.getRealBgmName(bgmName)}`);
     if (!(this.scene as BattleScene).showBgmBar) {
       return;
     }
 
     this.musicText.width = this.bg.width - 20;
     this.musicText.setWordWrapWidth(this.defaultWidth * 4);
-    this.bg.width = Math.min(this.defaultWidth, this.noteText.displayWidth + this.musicText.displayWidth + 30);
 
+    this.bg.width = Math.min(this.defaultWidth, this.musicText.displayWidth + 23);
     this.bg.height = Math.min(this.defaultHeight, this.musicText.displayHeight + 20);
 
     (this.scene as BattleScene).fieldUI.bringToTop(this);
@@ -97,5 +84,3 @@ export default class BgmBar extends Phaser.GameObjects.Container {
     return i18next.t([`bgmName:${bgmName}`, "bgmName:missing_entries"], {name: Utils.formatText(bgmName)});
   }
 }
-
-

src/ui/text.ts

@@ -34,7 +34,8 @@ export enum TextStyle {
   MOVE_PP_HALF_FULL,
   MOVE_PP_NEAR_EMPTY,
   MOVE_PP_EMPTY,
-  SMALLER_WINDOW_ALT
+  SMALLER_WINDOW_ALT,
+  BGM_BAR
 }
 
 export function addTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): Phaser.GameObjects.Text {
@@ -146,6 +147,11 @@ export function getTextStyleOptions(style: TextStyle, uiTheme: UiTheme, extraSty
     shadowXpos = 3;
     shadowYpos = 3;
     break;
+  case TextStyle.BGM_BAR:
+    styleOptions.fontSize = defaultFontSize - 24;
+    shadowXpos = 3;
+    shadowYpos = 3;
+    break;
   }
 
   const shadowColor = getTextColor(style, true, uiTheme);
@@ -235,6 +241,8 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui
     return !shadow ? "#f88880" : "#f83018";
   case TextStyle.SMALLER_WINDOW_ALT:
     return !shadow ? "#484848" : "#d0d0c8";
+  case TextStyle.BGM_BAR:
+    return !shadow ? "#f8f8f8" : "#6b5a73";
   }
 }