diff --git a/src/ui/game-stats-ui-handler.ts b/src/ui/game-stats-ui-handler.ts index c28e5d851a2..967b3ae0dc4 100644 --- a/src/ui/game-stats-ui-handler.ts +++ b/src/ui/game-stats-ui-handler.ts @@ -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; diff --git a/src/ui/text.ts b/src/ui/text.ts index c1d7fe091c0..99a0436bba3 100644 --- a/src/ui/text.ts +++ b/src/ui/text.ts @@ -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";