[QoL] Show currently bound controls on starter menu for last active device (#1859)

* show currently bound controls on starter menu for last active device

* add special handling for touch controls

* remove hardcoded controls for all locales

src/battle-scene.ts

@@ -234,6 +234,7 @@ export default class BattleScene extends SceneBase {
   public rngSeedOverride: string = "";
   public rngOffset: integer = 0;
 
+  public inputMethod: string;
   private infoToggles: InfoToggle[] = [];
 
   /**

src/locales/en/starter-select-ui-handler.ts

@@ -30,12 +30,12 @@ export const starterSelectUiHandler: SimpleTranslationEntries = {
   "selectMoveSwapWith": "Select a move to swap with",
   "unlockPassive": "Unlock Passive",
   "reduceCost": "Reduce Cost",
-  "cycleShiny": "R: Cycle Shiny",
+  "cycleShiny": ": Cycle Shiny",
-  "cycleForm": "F: Cycle Form",
+  "cycleForm": ": Cycle Form",
-  "cycleGender": "G: Cycle Gender",
+  "cycleGender": ": Cycle Gender",
-  "cycleAbility": "E: Cycle Ability",
+  "cycleAbility": ": Cycle Ability",
-  "cycleNature": "N: Cycle Nature",
+  "cycleNature": ": Cycle Nature",
-  "cycleVariant": "V: Cycle Variant",
+  "cycleVariant": ": Cycle Variant",
   "enablePassive": "Enable Passive",
   "disablePassive": "Disable Passive",
   "locked": "Locked",

src/locales/es/starter-select-ui-handler.ts

@@ -30,12 +30,12 @@ export const starterSelectUiHandler: SimpleTranslationEntries = {
   "selectMoveSwapWith": "Elige el movimiento que sustituirá a",
   "unlockPassive": "Añadir Pasiva",
   "reduceCost": "Reducir Coste",
-  "cycleShiny": "R: Cambiar Shiny",
+  "cycleShiny": ": Cambiar Shiny",
-  "cycleForm": "F: Cambiar Forma",
+  "cycleForm": ": Cambiar Forma",
-  "cycleGender": "G: Cambiar Género",
+  "cycleGender": ": Cambiar Género",
-  "cycleAbility": "E: Cambiar Habilidad",
+  "cycleAbility": ": Cambiar Habilidad",
-  "cycleNature": "N: Cambiar Naturaleza",
+  "cycleNature": ": Cambiar Naturaleza",
-  "cycleVariant": "V: Cambiar Variante",
+  "cycleVariant": ": Cambiar Variante",
   "enablePassive": "Activar Pasiva",
   "disablePassive": "Desactivar Pasiva",
   "locked": "Bloqueado",

src/locales/fr/starter-select-ui-handler.ts

@@ -30,12 +30,12 @@ export const starterSelectUiHandler: SimpleTranslationEntries = {
   "selectMoveSwapWith": "Sélectionnez laquelle échanger avec",
   "unlockPassive": "Débloquer Passif",
   "reduceCost": "Diminuer le cout",
-  "cycleShiny": "R: » Chromatiques",
+  "cycleShiny": ": » Chromatiques",
-  "cycleForm": "F: » Formes",
+  "cycleForm": ": » Formes",
-  "cycleGender": "G: » Sexes",
+  "cycleGender": ": » Sexes",
-  "cycleAbility": "E: » Talents",
+  "cycleAbility": ": » Talents",
-  "cycleNature": "N: » Natures",
+  "cycleNature": ": » Natures",
-  "cycleVariant": "V: » Variants",
+  "cycleVariant": ": » Variants",
   "enablePassive": "Activer Passif",
   "disablePassive": "Désactiver Passif",
   "locked": "Verrouillé",

src/locales/it/starter-select-ui-handler.ts

@@ -30,12 +30,12 @@ export const starterSelectUiHandler: SimpleTranslationEntries = {
   "selectMoveSwapWith": "Seleziona una mossa da scambiare con",
   "unlockPassive": "Sblocca Passiva",
   "reduceCost": "Riduci Costo",
-  "cycleShiny": "R: Alterna Shiny",
+  "cycleShiny": ": Alterna Shiny",
-  "cycleForm": "F: Alterna Forma",
+  "cycleForm": ": Alterna Forma",
-  "cycleGender": "G: Alterna Sesso",
+  "cycleGender": ": Alterna Sesso",
-  "cycleAbility": "E: Alterna Abilità",
+  "cycleAbility": ": Alterna Abilità",
-  "cycleNature": "N: Alterna Natura",
+  "cycleNature": ": Alterna Natura",
-  "cycleVariant": "V: Alterna Variante",
+  "cycleVariant": ": Alterna Variante",
   "enablePassive": "Attiva Passiva",
   "disablePassive": "Disattiva Passiva",
   "locked": "Bloccato",

src/locales/ko/starter-select-ui-handler.ts

@@ -30,12 +30,12 @@ export const starterSelectUiHandler: SimpleTranslationEntries = {
   "selectMoveSwapWith": "교체될 기술을 선택해주세요. 대상:",
   "unlockPassive": "패시브 해금",
   "reduceCost": "코스트 줄이기",
-  "cycleShiny": "R: 특별한 색",
+  "cycleShiny": ": 특별한 색",
-  "cycleForm": "F: 폼 체인지",
+  "cycleForm": ": 폼 체인지",
-  "cycleGender": "G: 암수 전환",
+  "cycleGender": ": 암수 전환",
-  "cycleAbility": "E: 특성 전환",
+  "cycleAbility": ": 특성 전환",
-  "cycleNature": "N: 성격 전환",
+  "cycleNature": ": 성격 전환",
-  "cycleVariant": "V: 색상 전환",
+  "cycleVariant": ": 색상 전환",
   "enablePassive": "패시브 활성화",
   "disablePassive": "패시브 비활성화",
   "locked": "잠김",

src/locales/pt_BR/starter-select-ui-handler.ts

@@ -30,12 +30,12 @@ export const starterSelectUiHandler: SimpleTranslationEntries = {
   "selectMoveSwapWith": "Escolha o movimento que substituirá",
   "unlockPassive": "Aprender Passiva",
   "reduceCost": "Reduzir Custo",
-  "cycleShiny": "R: » Shiny",
+  "cycleShiny": ": » Shiny",
-  "cycleForm": "F: » Forma",
+  "cycleForm": ": » Forma",
-  "cycleGender": "G: » Gênero",
+  "cycleGender": ": » Gênero",
-  "cycleAbility": "E: » Habilidade",
+  "cycleAbility": ": » Habilidade",
-  "cycleNature": "N: » Natureza",
+  "cycleNature": ": » Natureza",
-  "cycleVariant": "V: » Variante",
+  "cycleVariant": ": » Variante",
   "enablePassive": "Ativar Passiva",
   "disablePassive": "Desativar Passiva",
   "locked": "Bloqueada",

src/locales/zh_CN/starter-select-ui-handler.ts

@@ -30,12 +30,12 @@ export const starterSelectUiHandler: SimpleTranslationEntries = {
   "selectMoveSwapWith": "选择要替换成的招式",
   "unlockPassive": "解锁被动",
   "reduceCost": "降低花费",
-  "cycleShiny": "R: 切换闪光",
+  "cycleShiny": ": 切换闪光",
-  "cycleForm": "F: 切换形态",
+  "cycleForm": ": 切换形态",
-  "cycleGender": "G: 切换性别",
+  "cycleGender": ": 切换性别",
-  "cycleAbility": "E: 切换特性",
+  "cycleAbility": ": 切换特性",
-  "cycleNature": "N: 切换性格",
+  "cycleNature": ": 切换性格",
-  "cycleVariant": "V: 切换变种",
+  "cycleVariant": ": 切换变种",
   "enablePassive": "启用被动",
   "disablePassive": "禁用被动",
   "locked": "未解锁",

src/locales/zh_TW/starter-select-ui-handler.ts

@@ -30,12 +30,12 @@ export const starterSelectUiHandler: SimpleTranslationEntries = {
   "selectMoveSwapWith": "選擇想要替換成的招式",
   "unlockPassive": "解鎖被動",
   "reduceCost": "降低花費",
-  "cycleShiny": "R: 切換閃光",
+  "cycleShiny": ": 切換閃光",
-  "cycleForm": "F: 切換形態",
+  "cycleForm": ": 切換形態",
-  "cycleGender": "G: 切換性別",
+  "cycleGender": ": 切換性別",
-  "cycleAbility": "E: 切換特性",
+  "cycleAbility": ": 切換特性",
-  "cycleNature": "N: 切換性格",
+  "cycleNature": ": 切換性格",
-  "cycleVariant": "V: 切換變種",
+  "cycleVariant": ": 切換變種",
   "enablePassive": "啟用被動",
   "disablePassive": "禁用被動",
   "locked": "未解鎖",

src/touch-controls.ts

@@ -70,12 +70,14 @@ function simulateKeyboardEvent(eventType: string, key: string, events: EventEmit
     events.emit("input_down", {
       controller_type: "keyboard",
       button: button,
+      isTouch: true
     });
     break;
   case "keyup":
     events.emit("input_up", {
       controller_type: "keyboard",
       button: button,
+      isTouch: true
     });
     break;
   }

src/ui-inputs.ts

@@ -30,8 +30,23 @@ export class UiInputs {
     this.listenInputs();
   }
 
+  detectInputMethod(evt): void {
+    if (evt.controller_type === "keyboard") {
+      //if the touch property is present and defined, then this is a simulated keyboard event from the touch screen
+      if (evt.hasOwnProperty("isTouch") && evt.isTouch) {
+        this.scene.inputMethod = "touch";
+      } else {
+        this.scene.inputMethod = "keyboard";
+      }
+    } else if (evt.controller_type === "gamepad") {
+      this.scene.inputMethod = "gamepad";
+    }
+  }
+
   listenInputs(): void {
     this.events.on("input_down", (event) => {
+      this.detectInputMethod(event);
+
       const actions = this.getActionsKeyDown();
       if (!actions.hasOwnProperty(event.button)) {
         return;

src/ui/starter-select-ui-handler.ts

@@ -31,6 +31,8 @@ import { StatsContainer } from "./stats-container";
 import { TextStyle, addBBCodeTextObject, addTextObject } from "./text";
 import { Mode } from "./ui";
 import { addWindow } from "./ui-theme";
+import {SettingKeyboard} from "#app/system/settings/settings-keyboard";
+import {Device} from "#app/enums/devices";
 import * as Challenge from "../data/challenge";
 import MoveInfoOverlay from "./move-info-overlay";
 
@@ -56,7 +58,7 @@ interface LanguageSetting {
 const languageSettings: { [key: string]: LanguageSetting } = {
   "en":{
     starterInfoTextSize: "56px",
-    instructionTextSize: "42px",
+    instructionTextSize: "38px",
   },
   "de":{
     starterInfoTextSize: "56px",
@@ -189,6 +191,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
   private pokemonCaughtCountText: Phaser.GameObjects.Text;
   private pokemonHatchedCountText: Phaser.GameObjects.Text;
   private genOptionsText: Phaser.GameObjects.Text;
+  private instructionsContainer: Phaser.GameObjects.Container;
   private instructionsText: Phaser.GameObjects.Text;
   private starterSelectMessageBox: Phaser.GameObjects.NineSlice;
   private starterSelectMessageBoxContainer: Phaser.GameObjects.Container;
@@ -245,6 +248,11 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
 
   private iconAnimHandler: PokemonIconAnimHandler;
 
+  //variables to keep track of the dynamically rendered list of instruction prompts for starter select
+  private instructionRowX = 0;
+  private instructionRowY = 0;
+  private instructionRowTextOffset = 12;
+
   private starterSelectCallback: StarterSelectCallback;
 
   protected blockInput: boolean = false;
@@ -646,10 +654,9 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.starterSelectContainer.add(this.pokemonEggMovesContainer);
 
     // The font size should be set per language
-    const instructionTextSize = textSettings.instructionTextSize;
+    this.instructionsContainer = this.scene.add.container(4, 156);
-
+    this.instructionsContainer.setVisible(true);
-    this.instructionsText = addTextObject(this.scene, 4, 156, "", TextStyle.PARTY, { fontSize: instructionTextSize });
+    this.starterSelectContainer.add(this.instructionsContainer);
-    this.starterSelectContainer.add(this.instructionsText);
 
     this.starterSelectMessageBoxContainer = this.scene.add.container(0, this.scene.game.canvas.height / 6);
     this.starterSelectMessageBoxContainer.setVisible(false);
@@ -1485,45 +1492,84 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.setSpeciesDetails(this.lastSpecies, undefined, undefined, undefined, undefined, undefined, undefined, false);
   }
 
+  createButtonFromIconText(iconSetting, gamepadType, translatedText, instructionTextSize): void {
+    let iconPath;
+    // touch controls cannot be rebound as is, and are just emulating a keyboard event.
+    // Additionally, since keyboard controls can be rebound (and will be displayed when they are), we need to have special handling for the touch controls
+    if (gamepadType === "touch") {
+      gamepadType = "keyboard";
+      switch (iconSetting) {
+      case SettingKeyboard.Button_Cycle_Shiny:
+        iconPath = "R.png";
+        break;
+      case SettingKeyboard.Button_Cycle_Form:
+        iconPath = "F.png";
+        break;
+      case SettingKeyboard.Button_Cycle_Gender:
+        iconPath = "G.png";
+        break;
+      case SettingKeyboard.Button_Cycle_Ability:
+        iconPath = "E.png";
+        break;
+      case SettingKeyboard.Button_Cycle_Nature:
+        iconPath = "N.png";
+        break;
+      case SettingKeyboard.Button_Cycle_Variant:
+        iconPath = "V.png";
+        break;
+      default:
+        break;
+      }
+    } else {
+      iconPath = this.scene.inputController?.getIconForLatestInputRecorded(iconSetting);
+    }
+    const iconElement = this.scene.add.sprite(this.instructionRowX, this.instructionRowY, gamepadType, iconPath);
+    iconElement.setScale(0.675);
+    iconElement.setOrigin(0.0, 0.0);
+    const controlLabel = addTextObject(this.scene, this.instructionRowX + this.instructionRowTextOffset, this.instructionRowY, translatedText, TextStyle.PARTY, { fontSize: instructionTextSize });
+    this.instructionsContainer.add([iconElement, controlLabel]);
+    this.instructionRowY += 8;
+    if (this.instructionRowY >= 24) {
+      this.instructionRowY = 0;
+      this.instructionRowX += 50;
+    }
+  }
+
   updateInstructions(): void {
-    const instructionLines = [ ];
+    const currentLanguage = i18next.resolvedLanguage;
-    const cycleInstructionLines = [];
+    const langSettingKey = Object.keys(languageSettings).find(lang => currentLanguage.includes(lang));
+    const textSettings = languageSettings[langSettingKey];
+    const instructionTextSize = textSettings.instructionTextSize;
+    this.instructionRowX = 0;
+    this.instructionRowY = 0;
+    this.instructionsContainer.removeAll();
+    let gamepadType;
+    if (this.scene.inputMethod === "gamepad") {
+      gamepadType = this.scene.inputController.getConfig(this.scene.inputController.selectedDevice[Device.GAMEPAD]).padType;
+    } else {
+      gamepadType = this.scene.inputMethod;
+    }
+
     if (this.speciesStarterDexEntry?.caughtAttr) {
       if (this.canCycleShiny) {
-        cycleInstructionLines.push(i18next.t("starterSelectUiHandler:cycleShiny"));
+        this.createButtonFromIconText(SettingKeyboard.Button_Cycle_Shiny, gamepadType, i18next.t("starterSelectUiHandler:cycleShiny"), instructionTextSize);
       }
       if (this.canCycleForm) {
-        cycleInstructionLines.push(i18next.t("starterSelectUiHandler:cycleForm"));
+        this.createButtonFromIconText(SettingKeyboard.Button_Cycle_Form, gamepadType, i18next.t("starterSelectUiHandler:cycleForm"), instructionTextSize);
       }
       if (this.canCycleGender) {
-        cycleInstructionLines.push(i18next.t("starterSelectUiHandler:cycleGender"));
+        this.createButtonFromIconText(SettingKeyboard.Button_Cycle_Gender, gamepadType, i18next.t("starterSelectUiHandler:cycleGender"), instructionTextSize);
       }
       if (this.canCycleAbility) {
-        cycleInstructionLines.push(i18next.t("starterSelectUiHandler:cycleAbility"));
+        this.createButtonFromIconText(SettingKeyboard.Button_Cycle_Ability, gamepadType, i18next.t("starterSelectUiHandler:cycleAbility"), instructionTextSize);
       }
       if (this.canCycleNature) {
-        cycleInstructionLines.push(i18next.t("starterSelectUiHandler:cycleNature"));
+        this.createButtonFromIconText(SettingKeyboard.Button_Cycle_Nature, gamepadType, i18next.t("starterSelectUiHandler:cycleNature"), instructionTextSize);
       }
       if (this.canCycleVariant) {
-        cycleInstructionLines.push(i18next.t("starterSelectUiHandler:cycleVariant"));
+        this.createButtonFromIconText(SettingKeyboard.Button_Cycle_Variant, gamepadType, i18next.t("starterSelectUiHandler:cycleVariant"), instructionTextSize);
       }
     }
-
-    if (cycleInstructionLines.length > 2) {
-      cycleInstructionLines[0] += " | " + cycleInstructionLines.splice(1, 1);
-      if (cycleInstructionLines.length > 2) {
-        cycleInstructionLines[1] += " | " + cycleInstructionLines.splice(2, 1);
-      }
-      if (cycleInstructionLines.length > 2) {
-        cycleInstructionLines[2] += " | " + cycleInstructionLines.splice(3, 1);
-      }
-    }
-
-    for (const cil of cycleInstructionLines) {
-      instructionLines.push(cil);
-    }
-
-    this.instructionsText.setText(instructionLines.join("\n"));
   }
 
   getValueLimit(): integer {