[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

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;

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