Skip to content

Commit

Permalink
[UI] Make ME text legible when using the legacy UI theme (pagefaultga…
Browse files Browse the repository at this point in the history
  • Loading branch information
MokaStitcher authored Nov 16, 2024
1 parent 7dc4210 commit ae8efee
Show file tree
Hide file tree
Showing 4 changed files with 40 additions and 12 deletions.
8 changes: 4 additions & 4 deletions src/data/mystery-encounters/utils/encounter-dialogue-utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/ui/mystery-encounter-ui-handler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
3 changes: 2 additions & 1 deletion src/ui/run-info-ui-handler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
37 changes: 32 additions & 5 deletions src/ui/text.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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";
Expand All @@ -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
}
}

Expand Down

0 comments on commit ae8efee

Please sign in to comment.