[UI] Make ME text legible when using the legacy UI theme (#4847)

src/data/mystery-encounters/utils/encounter-dialogue-utils.ts

@@ -7,22 +7,22 @@ import i18next from "i18next";
 /**
  * Will inject all relevant dialogue tokens that exist in the {@linkcode BattleScene.currentBattle.mysteryEncounter.dialogueTokens}, into i18n text.
  * Also adds BBCodeText fragments for colored text, if applicable
- * @param scene
  * @param keyOrString
  * @param primaryStyle Can define a text style to be applied to the entire string. Must be defined for BBCodeText styles to be applied correctly
- * @param uiTheme
  */
-export function getEncounterText(scene: BattleScene, keyOrString?: string, primaryStyle?: TextStyle, uiTheme: UiTheme = UiTheme.DEFAULT): string | null {
+export function getEncounterText(scene: BattleScene, keyOrString?: string, primaryStyle?: TextStyle): string | null {
   if (isNullOrUndefined(keyOrString)) {
     return null;
   }
 
+  const uiTheme = scene.uiTheme ?? UiTheme.DEFAULT;
+
   let textString: string | null = getTextWithDialogueTokens(scene, keyOrString);
 
   // Can only color the text if a Primary Style is defined
   // primaryStyle is applied to all text that does not have its own specified style
   if (primaryStyle && textString) {
-    textString = getTextWithColors(textString, primaryStyle, uiTheme);
+    textString = getTextWithColors(textString, primaryStyle, uiTheme, true);
   }
 
   return textString;

src/ui/mystery-encounter-ui-handler.ts

@@ -369,9 +369,9 @@ export default class MysteryEncounterUiHandler extends UiHandler {
       let text: string | null;
       if (option.hasRequirements() && this.optionsMeetsReqs[i] && (option.optionMode === MysteryEncounterOptionMode.DEFAULT_OR_SPECIAL || option.optionMode === MysteryEncounterOptionMode.DISABLED_OR_SPECIAL)) {
         // Options with special requirements that are met are automatically colored green
-        text = getEncounterText(this.scene, label, TextStyle.SUMMARY_GREEN);
+        text = getEncounterText(this.scene, label, TextStyle.ME_OPTION_SPECIAL);
       } else {
-        text = getEncounterText(this.scene, label, optionDialogue.style ? optionDialogue.style : TextStyle.WINDOW);
+        text = getEncounterText(this.scene, label, optionDialogue.style ? optionDialogue.style : TextStyle.ME_OPTION_DEFAULT);
       }
 
       if (text) {

src/ui/run-info-ui-handler.ts

@@ -518,7 +518,8 @@ export default class RunInfoUiHandler extends UiHandler {
     const runTime = Utils.getPlayTimeString(this.runInfo.playTime);
     runInfoText.appendText(`${i18next.t("runHistory:runLength")}: ${runTime}`, false);
     const runMoney = Utils.formatMoney(this.scene.moneyFormat, this.runInfo.money);
-    runInfoText.appendText(`[color=${getTextColor(TextStyle.MONEY)}]${i18next.t("battleScene:moneyOwned", { formattedMoney : runMoney })}[/color]`);
+    const moneyTextColor = getTextColor(TextStyle.MONEY_WINDOW, false, this.scene.uiTheme);
+    runInfoText.appendText(`[color=${moneyTextColor}]${i18next.t("battleScene:moneyOwned", { formattedMoney : runMoney })}[/color]`);
     runInfoText.setPosition(7, 70);
     runInfoTextContainer.add(runInfoText);
     // Luck

src/ui/text.ts

@@ -22,7 +22,8 @@ export enum TextStyle {
   SUMMARY_GOLD,
   SUMMARY_GRAY,
   SUMMARY_GREEN,
-  MONEY,
+  MONEY, // Money default styling (pale yellow)
+  MONEY_WINDOW, // Money displayed in Windows (needs different colors based on theme)
   STATS_LABEL,
   STATS_VALUE,
   SETTINGS_VALUE,
@@ -38,7 +39,9 @@ export enum TextStyle {
   MOVE_PP_EMPTY,
   SMALLER_WINDOW_ALT,
   BGM_BAR,
-  PERFECT_IV
+  PERFECT_IV,
+  ME_OPTION_DEFAULT, // Default style for choices in ME
+  ME_OPTION_SPECIAL, // Style for choices with special requirements in ME
 }
 
 export interface TextStyleOptions {
@@ -139,6 +142,8 @@ export function getTextStyleOptions(style: TextStyle, uiTheme: UiTheme, extraSty
     case TextStyle.SUMMARY_GREEN:
     case TextStyle.WINDOW:
     case TextStyle.WINDOW_ALT:
+    case TextStyle.ME_OPTION_DEFAULT:
+    case TextStyle.ME_OPTION_SPECIAL:
       shadowXpos = 3;
       shadowYpos = 3;
       break;
@@ -177,6 +182,7 @@ export function getTextStyleOptions(style: TextStyle, uiTheme: UiTheme, extraSty
       break;
     case TextStyle.BATTLE_INFO:
     case TextStyle.MONEY:
+    case TextStyle.MONEY_WINDOW:
     case TextStyle.TOOLTIP_TITLE:
       styleOptions.fontSize = defaultFontSize - 24;
       shadowXpos = 3.5;
@@ -238,13 +244,22 @@ export function getBBCodeFrag(content: string, textStyle: TextStyle, uiTheme: Ui
  * - "red text" with TextStyle.SUMMARY_RED applied
  * @param content string with styling that need to be applied for BBCodeTextObject
  * @param primaryStyle Primary style is required in order to escape BBCode styling properly.
- * @param uiTheme
+ * @param uiTheme the {@linkcode UiTheme} to get TextStyle for
+ * @param forWindow set to `true` if the text is to be displayed in a window ({@linkcode BattleScene.addWindow})
+ *  it will replace all instances of the default MONEY TextStyle by {@linkcode TextStyle.MONEY_WINDOW}
  */
-export function getTextWithColors(content: string, primaryStyle: TextStyle, uiTheme: UiTheme = UiTheme.DEFAULT): string {
+export function getTextWithColors(content: string, primaryStyle: TextStyle, uiTheme: UiTheme, forWindow?: boolean): string {
   // Apply primary styling before anything else
   let text = getBBCodeFrag(content, primaryStyle, uiTheme) + "[/color][/shadow]";
   const primaryStyleString = [ ...text.match(new RegExp(/\[color=[^\[]*\]\[shadow=[^\[]*\]/i))! ][0];
 
+  /* For money text displayed in game windows, we can't use the default {@linkcode TextStyle.MONEY}
+   * or it will look wrong in legacy mode because of the different window background color
+   * So, for text to be displayed in windows replace all "@[MONEY]" with "@[MONEY_WINDOW]" */
+  if (forWindow) {
+    text = text.replace(/@\[MONEY\]/g, (_substring: string) => "@[MONEY_WINDOW]");
+  }
+
   // Set custom colors
   text = text.replace(/@\[([^{]*)\]{([^}]*)}/gi, (substring, textStyle: string, textToColor: string) => {
     return "[/color][/shadow]" + getBBCodeFrag(textToColor, TextStyle[textStyle], uiTheme) + "[/color][/shadow]" + primaryStyleString;
@@ -310,7 +325,12 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui
       return !shadow ? "#f89890" : "#984038";
     case TextStyle.SUMMARY_GOLD:
     case TextStyle.MONEY:
-      return !shadow ? "#e8e8a8" : "#a0a060";
+      return !shadow ? "#e8e8a8" : "#a0a060"; // Pale Yellow/Gold
+    case TextStyle.MONEY_WINDOW:
+      if (isLegacyTheme) {
+        return !shadow ? "#f8b050" : "#c07800"; // Gold
+      }
+      return !shadow ? "#e8e8a8" : "#a0a060"; // Pale Yellow/Gold
     case TextStyle.SETTINGS_LOCKED:
     case TextStyle.SUMMARY_GRAY:
       return !shadow ? "#a0a0a0" : "#636363";
@@ -332,6 +352,13 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui
       return !shadow ? "#484848" : "#d0d0c8";
     case TextStyle.BGM_BAR:
       return !shadow ? "#f8f8f8" : "#6b5a73";
+    case TextStyle.ME_OPTION_DEFAULT:
+      return !shadow ? "#f8f8f8" : "#6b5a73"; // White
+    case TextStyle.ME_OPTION_SPECIAL:
+      if (isLegacyTheme) {
+        return !shadow ? "#f8b050" : "#c07800"; // Gold
+      }
+      return !shadow ? "#78c850" : "#306850"; // Green
   }
 }