[Enhancement] Update instruction for gamepad in run history UI (#4053)

* update instruction for pad in run history UI

* move getGamepadType function to ui.ts

* Update src/ui/ui.ts

Co-authored-by: Adrian T. <68144167+torranx@users.noreply.github.com>

---------

Co-authored-by: Adrian T. <68144167+torranx@users.noreply.github.com>

src/ui/run-info-ui-handler.ts

@@ -21,6 +21,7 @@ import { getVariantTint } from "#app/data/variant";
 import * as Modifier from "../modifier/modifier";
 import { Species } from "#enums/species";
 import { PlayerGender } from "#enums/player-gender";
+import { SettingKeyboard } from "#app/system/settings/settings-keyboard";
 
 /**
  * RunInfoUiMode indicates possible overlays of RunInfoUiHandler.
@@ -151,7 +152,13 @@ export default class RunInfoUiHandler extends UiHandler {
       const headerBgCoords = headerBg.getTopRight();
       const abilityButtonContainer = this.scene.add.container(0, 0);
       const abilityButtonText = addTextObject(this.scene, 8, 0, i18next.t("runHistory:viewHeldItems"), TextStyle.WINDOW, {fontSize:"34px"});
-      const abilityButtonElement = new Phaser.GameObjects.Sprite(this.scene, 0, 2, "keyboard", "E.png");
+      const gamepadType = this.getUi().getGamepadType();
+      let abilityButtonElement: Phaser.GameObjects.Sprite;
+      if (gamepadType === "touch") {
+        abilityButtonElement = new Phaser.GameObjects.Sprite(this.scene, 0, 2, "keyboard", "E.png");
+      } else {
+        abilityButtonElement = new Phaser.GameObjects.Sprite(this.scene, 0, 2, gamepadType, this.scene.inputController?.getIconForLatestInputRecorded(SettingKeyboard.Button_Cycle_Ability));
+      }
       abilityButtonContainer.add([abilityButtonText, abilityButtonElement]);
       abilityButtonContainer.setPosition(headerBgCoords.x - abilityButtonText.displayWidth - abilityButtonElement.displayWidth - 8, 10);
       this.runContainer.add(abilityButtonContainer);
@@ -180,11 +187,19 @@ export default class RunInfoUiHandler extends UiHandler {
     if (this.isVictory) {
       const hallofFameInstructionContainer = this.scene.add.container(0, 0);
       const shinyButtonText = addTextObject(this.scene, 8, 0, i18next.t("runHistory:viewHallOfFame"), TextStyle.WINDOW, {fontSize:"65px"});
-      const shinyButtonElement = new Phaser.GameObjects.Sprite(this.scene, 0, 4, "keyboard", "R.png");
+      const formButtonText = addTextObject(this.scene, 8, 12, i18next.t("runHistory:viewEndingSplash"), TextStyle.WINDOW, {fontSize:"65px"});
+      const gamepadType = this.getUi().getGamepadType();
+      let shinyButtonElement: Phaser.GameObjects.Sprite;
+      let formButtonElement: Phaser.GameObjects.Sprite;
+      if (gamepadType === "touch") {
+        shinyButtonElement = new Phaser.GameObjects.Sprite(this.scene, 0, 4, "keyboard", "R.png");
+        formButtonElement = new Phaser.GameObjects.Sprite(this.scene, 0, 16, "keyboard", "F.png");
+      } else {
+        shinyButtonElement = new Phaser.GameObjects.Sprite(this.scene, 0, 4, gamepadType, this.scene.inputController?.getIconForLatestInputRecorded(SettingKeyboard.Button_Cycle_Shiny));
+        formButtonElement = new Phaser.GameObjects.Sprite(this.scene, 0, 16, gamepadType, this.scene.inputController?.getIconForLatestInputRecorded(SettingKeyboard.Button_Cycle_Form));
+      }
       hallofFameInstructionContainer.add([shinyButtonText, shinyButtonElement]);
 
-      const formButtonText = addTextObject(this.scene, 8, 12, i18next.t("runHistory:viewEndingSplash"), TextStyle.WINDOW, {fontSize:"65px"});
-      const formButtonElement = new Phaser.GameObjects.Sprite(this.scene, 0, 16, "keyboard", "F.png");
       hallofFameInstructionContainer.add([formButtonText, formButtonElement]);
 
       hallofFameInstructionContainer.setPosition(12, 25);

src/ui/ui.ts

@@ -52,6 +52,7 @@ import RunInfoUiHandler from "./run-info-ui-handler";
 import EggSummaryUiHandler from "./egg-summary-ui-handler";
 import TestDialogueUiHandler from "#app/ui/test-dialogue-ui-handler";
 import AutoCompleteUiHandler from "./autocomplete-ui-handler";
+import { Device } from "#enums/devices";
 
 export enum Mode {
   MESSAGE,
@@ -578,4 +579,20 @@ export default class UI extends Phaser.GameObjects.Container {
   public getModeChain(): Mode[] {
     return this.modeChain;
   }
+
+  /**
+   * getGamepadType - returns the type of gamepad being used
+   * inputMethod could be "keyboard" or "touch" or "gamepad"
+   * if inputMethod is "keyboard" or "touch", then the inputMethod is returned
+   * if inputMethod is "gamepad", then the gamepad type is returned it could be "xbox" or "dualshock"
+   * @returns gamepad type
+   */
+  public getGamepadType(): string {
+    const scene = this.scene as BattleScene;
+    if (scene.inputMethod === "gamepad") {
+      return scene.inputController.getConfig(scene.inputController.selectedDevice[Device.GAMEPAD]).padType;
+    } else {
+      return scene.inputMethod;
+    }
+  }
 }