mirror of
https://github.com/pagefaultgames/pokerogue.git
synced 2025-01-17 22:40:59 +00:00
[QoL] Add arrows in the Stats screen to show it is scrollable (#3489)
* [qol] add animated arrows in the Stats screen to show that the list is scrollable * make legacy theme checks more explicit * add some documentation + code cleanup
This commit is contained in:
parent
872f05d2a7
commit
1e4b3a45dd
@ -9,6 +9,7 @@ import { DexAttr, GameData } from "../system/game-data";
|
||||
import { speciesStarters } from "../data/pokemon-species";
|
||||
import {Button} from "#enums/buttons";
|
||||
import i18next from "i18next";
|
||||
import { UiTheme } from "#app/enums/ui-theme";
|
||||
|
||||
interface DisplayStat {
|
||||
label_key?: string;
|
||||
@ -218,6 +219,9 @@ export default class GameStatsUiHandler extends UiHandler {
|
||||
private statLabels: Phaser.GameObjects.Text[];
|
||||
private statValues: Phaser.GameObjects.Text[];
|
||||
|
||||
private arrowUp: Phaser.GameObjects.Sprite;
|
||||
private arrowDown: Phaser.GameObjects.Sprite;
|
||||
|
||||
constructor(scene: BattleScene, mode: Mode | null = null) {
|
||||
super(scene, mode);
|
||||
|
||||
@ -241,11 +245,9 @@ export default class GameStatsUiHandler extends UiHandler {
|
||||
|
||||
const statsBgWidth = ((this.scene.game.canvas.width / 6) - 2) / 2;
|
||||
const [ statsBgLeft, statsBgRight ] = new Array(2).fill(null).map((_, i) => {
|
||||
let width = statsBgWidth;
|
||||
if (!i) {
|
||||
width += 5;
|
||||
}
|
||||
const statsBg = addWindow(this.scene, statsBgWidth * i, headerBg.height, width, (this.scene.game.canvas.height / 6) - headerBg.height - 2, false, !!i, 2);
|
||||
const width = statsBgWidth + 2;
|
||||
const height = Math.floor((this.scene.game.canvas.height / 6) - headerBg.height - 2);
|
||||
const statsBg = addWindow(this.scene, (statsBgWidth - 2) * i, headerBg.height, width, height, false, false, i>0?-3:0, 1);
|
||||
statsBg.setOrigin(0, 0);
|
||||
return statsBg;
|
||||
});
|
||||
@ -272,6 +274,14 @@ export default class GameStatsUiHandler extends UiHandler {
|
||||
this.gameStatsContainer.add(statsBgRight);
|
||||
this.gameStatsContainer.add(this.statsContainer);
|
||||
|
||||
// arrows to show that we can scroll through the stats
|
||||
const isLegacyTheme = this.scene.uiTheme === UiTheme.LEGACY;
|
||||
this.arrowDown = this.scene.add.sprite(statsBgWidth, this.scene.game.canvas.height / 6 - (isLegacyTheme? 9 : 5), "prompt");
|
||||
this.gameStatsContainer.add(this.arrowDown);
|
||||
this.arrowUp = this.scene.add.sprite(statsBgWidth, headerBg.height + (isLegacyTheme? 7 : 3), "prompt");
|
||||
this.arrowUp.flipY = true;
|
||||
this.gameStatsContainer.add(this.arrowUp);
|
||||
|
||||
ui.add(this.gameStatsContainer);
|
||||
|
||||
this.setCursor(0);
|
||||
@ -286,6 +296,15 @@ export default class GameStatsUiHandler extends UiHandler {
|
||||
|
||||
this.updateStats();
|
||||
|
||||
this.arrowUp.play("prompt");
|
||||
this.arrowDown.play("prompt");
|
||||
if (this.scene.uiTheme === UiTheme.LEGACY) {
|
||||
this.arrowUp.setTint(0x484848);
|
||||
this.arrowDown.setTint(0x484848);
|
||||
}
|
||||
|
||||
this.updateArrows();
|
||||
|
||||
this.gameStatsContainer.setVisible(true);
|
||||
|
||||
this.getUi().moveTo(this.gameStatsContainer, this.getUi().length - 1);
|
||||
@ -311,6 +330,17 @@ export default class GameStatsUiHandler extends UiHandler {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Show arrows at the top / bottom of the page if it's possible to scroll in that direction
|
||||
*/
|
||||
updateArrows(): void {
|
||||
const showUpArrow = this.cursor > 0;
|
||||
this.arrowUp.setVisible(showUpArrow);
|
||||
|
||||
const showDownArrow = this.cursor < Math.ceil((Object.keys(displayStats).length - 18) / 2);
|
||||
this.arrowDown.setVisible(showDownArrow);
|
||||
}
|
||||
|
||||
processInput(button: Button): boolean {
|
||||
const ui = this.getUi();
|
||||
|
||||
@ -346,6 +376,7 @@ export default class GameStatsUiHandler extends UiHandler {
|
||||
|
||||
if (ret) {
|
||||
this.updateStats();
|
||||
this.updateArrows();
|
||||
}
|
||||
|
||||
return ret;
|
||||
|
@ -5,7 +5,7 @@ import BBCodeText from "phaser3-rex-plugins/plugins/gameobjects/tagtext/bbcodete
|
||||
import InputText from "phaser3-rex-plugins/plugins/inputtext";
|
||||
import BattleScene from "../battle-scene";
|
||||
import { ModifierTier } from "../modifier/modifier-tier";
|
||||
import i18next from "#app/plugins/i18n.js";
|
||||
import i18next from "#app/plugins/i18n";
|
||||
|
||||
export enum TextStyle {
|
||||
MESSAGE,
|
||||
@ -227,6 +227,7 @@ export function getBBCodeFrag(content: string, textStyle: TextStyle, uiTheme: Ui
|
||||
}
|
||||
|
||||
export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: UiTheme = UiTheme.DEFAULT): string {
|
||||
const isLegacyTheme = uiTheme === UiTheme.LEGACY;
|
||||
switch (textStyle) {
|
||||
case TextStyle.MESSAGE:
|
||||
return !shadow ? "#f8f8f8" : "#6b5a73";
|
||||
@ -235,29 +236,29 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui
|
||||
case TextStyle.MOVE_PP_FULL:
|
||||
case TextStyle.TOOLTIP_CONTENT:
|
||||
case TextStyle.SETTINGS_VALUE:
|
||||
if (uiTheme) {
|
||||
if (isLegacyTheme) {
|
||||
return !shadow ? "#484848" : "#d0d0c8";
|
||||
}
|
||||
return !shadow ? "#f8f8f8" : "#6b5a73";
|
||||
case TextStyle.MOVE_PP_HALF_FULL:
|
||||
if (uiTheme) {
|
||||
if (isLegacyTheme) {
|
||||
return !shadow ? "#a68e17" : "#ebd773";
|
||||
}
|
||||
return !shadow ? "#ccbe00" : "#6e672c";
|
||||
case TextStyle.MOVE_PP_NEAR_EMPTY:
|
||||
if (uiTheme) {
|
||||
if (isLegacyTheme) {
|
||||
return !shadow ? "#d64b00" : "#f7b18b";
|
||||
}
|
||||
return !shadow ? "#d64b00" : "#69402a";
|
||||
case TextStyle.MOVE_PP_EMPTY:
|
||||
if (uiTheme) {
|
||||
if (isLegacyTheme) {
|
||||
return !shadow ? "#e13d3d" : "#fca2a2";
|
||||
}
|
||||
return !shadow ? "#e13d3d" : "#632929";
|
||||
case TextStyle.WINDOW_ALT:
|
||||
return !shadow ? "#484848" : "#d0d0c8";
|
||||
case TextStyle.BATTLE_INFO:
|
||||
if (uiTheme) {
|
||||
if (isLegacyTheme) {
|
||||
return !shadow ? "#404040" : "#ded6b5";
|
||||
}
|
||||
return !shadow ? "#f8f8f8" : "#6b5a73";
|
||||
@ -268,7 +269,7 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui
|
||||
case TextStyle.SUMMARY:
|
||||
return !shadow ? "#f8f8f8" : "#636363";
|
||||
case TextStyle.SUMMARY_ALT:
|
||||
if (uiTheme) {
|
||||
if (isLegacyTheme) {
|
||||
return !shadow ? "#f8f8f8" : "#636363";
|
||||
}
|
||||
return !shadow ? "#484848" : "#d0d0c8";
|
||||
@ -288,6 +289,9 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui
|
||||
case TextStyle.STATS_LABEL:
|
||||
return !shadow ? "#f8b050" : "#c07800";
|
||||
case TextStyle.STATS_VALUE:
|
||||
if (isLegacyTheme) {
|
||||
return !shadow ? "#484848" : "#d0d0c8";
|
||||
}
|
||||
return !shadow ? "#f8f8f8" : "#6b5a73";
|
||||
case TextStyle.SUMMARY_GREEN:
|
||||
return !shadow ? "#78c850" : "#306850";
|
||||
|
Loading…
x
Reference in New Issue
Block a user