[Enhancement] Fix - Adjusts the color of the remaining PPs correctly to the theme (#2045)

+ Choose colors adapted to provide a contrast that facilitates reading (ratio of 3.0 or more)
    Tool used: https://webaim.org/resources/contrastchecker/
  + Refactoring of the condition to avoid unnecessarily assigning variable several times depending on the contents of 'ppPercentLeft'
This commit is contained in:
Dakurei 2024-06-10 19:30:02 +02:00 committed by GitHub
parent f672ecc8ed
commit c2375a0f5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 37 additions and 16 deletions

View File

@ -10,7 +10,6 @@ import { MoveCategory } from "#app/data/move.js";
import i18next from "../plugins/i18n";
import {Button} from "../enums/buttons";
import Pokemon, { PokemonMove } from "#app/field/pokemon.js";
import { UiTheme } from "#app/enums/ui-theme.js";
export default class FightUiHandler extends UiHandler {
private movesContainer: Phaser.GameObjects.Container;
@ -180,23 +179,25 @@ export default class FightUiHandler extends UiHandler {
const pp = maxPP - pokemonMove.ppUsed;
this.ppText.setText(`${Utils.padInt(pp, 2, " ")}/${Utils.padInt(maxPP, 2, " ")}`);
const ppPercentLeft = pp / maxPP;
let ppColor = this.scene.uiTheme === UiTheme.DEFAULT ? "white" : "black";
if (ppPercentLeft <= 0.5) {
ppColor = "yellow";
}
if (ppPercentLeft <= 0.25) {
ppColor = "orange";
}
if (pp === 0) {
ppColor = "red";
}
this.ppText.setColor(ppColor);
this.powerText.setText(`${power >= 0 ? power : "---"}`);
this.accuracyText.setText(`${accuracy >= 0 ? accuracy : "---"}`);
const ppPercentLeft = pp / maxPP;
//** Determines TextStyle according to percentage of PP remaining */
let ppColorStyle = TextStyle.MOVE_PP_FULL;
if (ppPercentLeft > 0.25 && ppPercentLeft <= 0.5) {
ppColorStyle = TextStyle.MOVE_PP_HALF_FULL;
} else if (ppPercentLeft > 0 && ppPercentLeft <= 0.25) {
ppColorStyle = TextStyle.MOVE_PP_NEAR_EMPTY;
} else if (ppPercentLeft === 0) {
ppColorStyle = TextStyle.MOVE_PP_EMPTY;
}
//** Changes the text color and shadow according to the determined TextStyle */
this.ppText.setColor(this.getTextColor(ppColorStyle, false));
this.ppText.setShadowColor(this.getTextColor(ppColorStyle, true));
pokemon.getOpponents().forEach((opponent) => {
opponent.updateEffectiveness(this.getEffectivenessText(pokemon, opponent, pokemonMove));
});

View File

@ -29,7 +29,11 @@ export enum TextStyle {
SETTINGS_LOCKED,
TOOLTIP_TITLE,
TOOLTIP_CONTENT,
MOVE_INFO_CONTENT
MOVE_INFO_CONTENT,
MOVE_PP_FULL,
MOVE_PP_HALF_FULL,
MOVE_PP_NEAR_EMPTY,
MOVE_PP_EMPTY
}
interface LanguageSetting {
@ -204,11 +208,27 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui
return !shadow ? "#f8f8f8" : "#6b5a73";
case TextStyle.WINDOW:
case TextStyle.MOVE_INFO_CONTENT:
case TextStyle.MOVE_PP_FULL:
case TextStyle.TOOLTIP_CONTENT:
if (uiTheme) {
return !shadow ? "#484848" : "#d0d0c8";
}
return !shadow ? "#f8f8f8" : "#6b5a73";
case TextStyle.MOVE_PP_HALF_FULL:
if (uiTheme) {
return !shadow ? "#a68e17" : "#ebd773";
}
return !shadow ? "#ccbe00" : "#6e672c";
case TextStyle.MOVE_PP_NEAR_EMPTY:
if (uiTheme) {
return !shadow ? "#d64b00" : "#f7b18b";
}
return !shadow ? "#d64b00" : "#69402a";
case TextStyle.MOVE_PP_EMPTY:
if (uiTheme) {
return !shadow ? "#e13d3d" : "#fca2a2";
}
return !shadow ? "#e13d3d" : "#632929";
case TextStyle.WINDOW_ALT:
return !shadow ? "#484848" : "#d0d0c8";
case TextStyle.BATTLE_INFO: