ShuriZma
/
pokerogue
mirror of https://github.com/pagefaultgames/pokerogue.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Moka 2024-11-17 00:34:14 +01:00 committed by GitHub
parent 7dc4210f71
commit ae8efeedf8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/data/mystery-encounters/utils/encounter-dialogue-utils.ts
View File

@ -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;

4
src/ui/mystery-encounter-ui-handler.ts
View File

@ -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) {

3
src/ui/run-info-ui-handler.ts
View File

@ -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

37
src/ui/text.ts
View File

@ -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
}
}