Added container for text with different colors and titles

src/plugins/i18n.ts

@@ -193,6 +193,7 @@ export async function initI18n(): Promise<void> {
       "egg",
       "fightUiHandler",
       "filterBar",
+      "filterText",
       "gameMode",
       "gameStatsUiHandler",
       "growth",
@@ -203,6 +204,7 @@ export async function initI18n(): Promise<void> {
       "move",
       "nature",
       "pokeball",
+      "pokedexUiHandler",
       "pokemon",
       "pokemonForm",
       "pokemonInfo",

src/ui-inputs.ts

@@ -12,6 +12,7 @@ import BattleScene from "./battle-scene";
 import SettingsDisplayUiHandler from "./ui/settings/settings-display-ui-handler";
 import SettingsAudioUiHandler from "./ui/settings/settings-audio-ui-handler";
 import RunInfoUiHandler from "./ui/run-info-ui-handler";
+import PokedexPageUiHandler from "./ui/pokedex-page-ui-handler";
 
 type ActionKeys = Record<Button, () => void>;
 
@@ -142,7 +143,7 @@ export class UiInputs {
   }
 
   buttonGoToFilter(button: Button): void {
-    const whitelist = [ StarterSelectUiHandler ];
+    const whitelist = [ StarterSelectUiHandler, PokedexPageUiHandler ];
     const uiHandler = this.scene.ui?.getHandler();
     if (whitelist.some(handler => uiHandler instanceof handler)) {
       this.scene.ui.processInput(button);
@@ -180,6 +181,7 @@ export class UiInputs {
         this.scene.ui.setOverlayMode(Mode.MENU);
         break;
       case Mode.STARTER_SELECT:
+      case Mode.POKEDEX_PAGE:
         this.buttonTouch();
         break;
       case Mode.MENU:
@@ -192,7 +194,7 @@ export class UiInputs {
   }
 
   buttonCycleOption(button: Button): void {
-    const whitelist = [ StarterSelectUiHandler, SettingsUiHandler, RunInfoUiHandler, SettingsDisplayUiHandler, SettingsAudioUiHandler, SettingsGamepadUiHandler, SettingsKeyboardUiHandler ];
+    const whitelist = [ StarterSelectUiHandler, PokedexPageUiHandler, SettingsUiHandler, RunInfoUiHandler, SettingsDisplayUiHandler, SettingsAudioUiHandler, SettingsGamepadUiHandler, SettingsKeyboardUiHandler ];
     const uiHandler = this.scene.ui?.getHandler();
     if (whitelist.some(handler => uiHandler instanceof handler)) {
       this.scene.ui.processInput(button);

src/ui/filter-text.ts

@@ -92,7 +92,7 @@ export class FilterText extends Phaser.GameObjects.Container {
 
     const paddingX = 6;
     const cursorOffset = 8;
-    const extraSpaceX = 50;
+    const extraSpaceX = 40;
 
     if (this.rows.includes(row)) {
       return false;

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

@@ -0,0 +1,409 @@
+import BattleScene from "../battle-scene";
+import { TextStyle, addTextObject, getTextStyleOptions } from "./text";
+import { Mode } from "./ui";
+import UiHandler from "./ui-handler";
+import { addWindow } from "./ui-theme";
+import * as Utils from "../utils";
+import { Button } from "#enums/buttons";
+
+export interface LockableSelectConfig {
+  xOffset?: number;
+  yOffset?: number;
+  options: LockableSelectItem[];
+  maxOptions?: integer;
+  delay?: integer;
+  noCancel?: boolean;
+  supportHover?: boolean;
+}
+
+export interface LockableSelectItem {
+  label: string;
+  handler: () => boolean;
+  onHover?: () => void;
+  keepOpen?: boolean;
+  overrideSound?: boolean;
+  locked?: boolean;
+  title?: boolean;
+}
+
+const scrollUpLabel = "↑";
+const scrollDownLabel = "↓";
+
+export default class LockableSelectUiHandler extends UiHandler {
+  protected optionSelectContainer: Phaser.GameObjects.Container;
+  protected optionSelectBg: Phaser.GameObjects.NineSlice;
+  protected optionSelectText: Phaser.GameObjects.Text;
+  protected optionSelectIcons: Phaser.GameObjects.Sprite[];
+
+  protected config: LockableSelectConfig | null;
+
+  protected blockInput: boolean;
+
+  protected scrollCursor: integer = 0;
+
+  protected scale: number = 0.1666666667;
+
+  private cursorObj: Phaser.GameObjects.Image | null;
+
+  private textObjects: Phaser.GameObjects.Text[];
+
+  constructor(scene: BattleScene, mode: Mode | null) {
+    super(scene, mode);
+  }
+
+  getWindowWidth(): integer {
+    return 64;
+  }
+
+  getWindowHeight(): integer {
+    return (Math.min((this.config?.options || []).length, this.config?.maxOptions || 99) + 1) * 96 * this.scale;
+  }
+
+  setup() {
+    const ui = this.getUi();
+
+    this.optionSelectContainer = this.scene.add.container(0, 0);
+    this.optionSelectContainer.setName(`option-select-${this.mode ? Mode[this.mode] : "UNKNOWN"}`);
+    this.optionSelectContainer.setVisible(false);
+    ui.add(this.optionSelectContainer);
+
+    this.optionSelectBg = addWindow(this.scene, 0, 0, this.getWindowWidth(), this.getWindowHeight());
+    this.optionSelectBg.setName("option-select-bg");
+    this.optionSelectBg.setOrigin(1, 1);
+    this.optionSelectContainer.add(this.optionSelectBg);
+
+    this.optionSelectIcons = [];
+
+    this.textObjects = [];
+
+    this.scale = getTextStyleOptions(TextStyle.WINDOW, (this.scene as BattleScene).uiTheme).scale;
+
+    this.setCursor(0);
+  }
+
+  protected setupOptions() {
+    const configOptions = this.config?.options ?? [];
+
+    let options: LockableSelectItem[];
+
+    // for performance reasons, this limits how many options we can see at once. Without this, it would try to make text options for every single options
+    // which makes the performance take a hit. If there's not enough options to do this (set to 10 at the moment) and the ui mode !== Mode.AUTO_COMPLETE,
+    // this is ignored and the original code is untouched, with the options array being all the options from the config
+    if (configOptions.length >= 10 && this.scene.ui.getMode() === Mode.AUTO_COMPLETE) {
+      const optionsScrollTotal = configOptions.length;
+      const optionStartIndex = this.scrollCursor;
+      const optionEndIndex = Math.min(optionsScrollTotal, optionStartIndex + (!optionStartIndex || this.scrollCursor + (this.config?.maxOptions! - 1) >= optionsScrollTotal ? this.config?.maxOptions! - 1 : this.config?.maxOptions! - 2));
+      options = configOptions.slice(optionStartIndex, optionEndIndex + 2);
+    } else {
+      options = configOptions;
+    }
+
+    if (false) {
+      if (this.optionSelectText) {
+        this.optionSelectText.destroy();
+      }
+      if (this.optionSelectIcons?.length) {
+        this.optionSelectIcons.map(i => i.destroy());
+        this.optionSelectIcons.splice(0, this.optionSelectIcons.length);
+      }
+    }
+
+    options.forEach((option, index) => {
+      // Calculate position for each text item
+      const xOffset = option.title ? 20 : 0; // Extra offset for titles
+      const yOffset = index * (this.scale * 72); // Spacing between rows
+      console.log("x, y", xOffset, yOffset);
+
+      // Create text style dynamically
+      const textStyle = {
+        color: option.locked ? "#888888" : "#FFFFFF",
+      };
+
+      // Add the text object
+      const textObject = addTextObject(
+        this.scene,
+        0, 0,
+        option.label,
+        TextStyle.WINDOW,
+        textStyle
+      );
+
+      // Add to container
+      this.textObjects.push(textObject);
+      this.optionSelectContainer.add(this.textObjects[index]);
+      //      this.optionSelectContainer.bringToTop(textObject);
+    });
+
+    this.scene.add.text(100, 100, "Test Text", { color: "#FFFFFF", fontSize: "24px", fontFamily: "Arial" });
+    console.log("Scene:", this.scene);
+
+    const debugBg = this.scene.add.rectangle(0, 0, 400, 400, 0xff0000);
+    debugBg.setOrigin(0, 0);
+    this.optionSelectContainer.add(debugBg);
+
+    this.optionSelectContainer.setPosition(this.scene.game.canvas.width / 12, 0);
+
+    console.log(this.textObjects[0]);
+    console.log((this.scene.game.canvas.width / 6) - 1 - (this.config?.xOffset || 0), (this.config?.yOffset || 0));
+    console.log(this.optionSelectBg.originX, this.optionSelectBg.originY);
+    console.log(this.textObjects[0].originX, this.textObjects[0].originY);
+
+    console.log("Container Position:", this.optionSelectContainer.x, this.optionSelectContainer.y);
+    console.log("Game Canvas Size:", this.scene.game.canvas.width, this.scene.game.canvas.height);
+
+
+    // Adjust optionSelectBg width
+    this.optionSelectBg.width = Math.max(
+      this.textObjects.reduce((maxWidth, textObject, index) => {
+        const extraOffset = options[index].title ? 20 : 0; // Adjust offset based on the title
+        const textWidth = textObject.displayWidth; // Use existing text object
+        return Math.max(maxWidth, textWidth + extraOffset);
+      }, 0) + 24,
+      this.getWindowWidth()
+    );
+
+    this.optionSelectBg.height = this.getWindowHeight();
+
+    this.textObjects.forEach((textObject, index) => {
+      textObject.setPositionRelative(
+        this.optionSelectBg,
+        12 + 24 * this.scale + (options[index].title ? 20 : 0),  // Adjust the X offset
+        2 + 42 * this.scale + index * (96 * this.scale) // Adjust the Y offset based on index
+      );
+    });
+
+
+    // Adjust options based on scroll and set individual text objects
+    if (this.config?.options && this.config?.options.length > (this.config?.maxOptions!)) {
+      const visibleOptions = this.getOptionsWithScroll();
+
+      visibleOptions.forEach((option, i) => {
+        this.textObjects[i].setText(option.label);
+
+        // Add icon if locked
+        if (option.locked) {
+          const itemIcon = this.scene.add.sprite(0, 0, "ui", "icon_lock");
+          itemIcon.setScale(3 * this.scale);
+          this.optionSelectIcons.push(itemIcon);
+          this.optionSelectContainer.add(itemIcon);
+
+          // Position the icon relative to the text
+          itemIcon.setPositionRelative(this.textObjects[i], 0, 0);
+        }
+      });
+    }
+
+  }
+
+
+  show(args: any[]): boolean {
+    if (!args.length || !args[0].hasOwnProperty("options") || !args[0].options.length) {
+      return false;
+    }
+
+    super.show(args);
+
+    this.config = args[0] as LockableSelectConfig;
+    this.setupOptions();
+
+    this.scene.ui.bringToTop(this.optionSelectContainer);
+
+    this.optionSelectContainer.setVisible(true);
+    this.scrollCursor = 0;
+    this.setCursor(0);
+
+    if (this.config.delay) {
+      this.blockInput = true;
+      this.optionSelectText.setAlpha(0.5);
+      this.cursorObj?.setAlpha(0.8);
+      this.scene.time.delayedCall(Utils.fixedInt(this.config.delay), () => this.unblockInput());
+    }
+
+    return true;
+  }
+
+  processInput(button: Button): boolean {
+    const ui = this.getUi();
+
+    let success = false;
+
+    const options = this.getOptionsWithScroll();
+
+    let playSound = true;
+
+    if (button === Button.ACTION || button === Button.CANCEL) {
+      if (this.blockInput) {
+        ui.playError();
+        return false;
+      }
+
+      success = true;
+      if (button === Button.CANCEL) {
+        if (this.config?.maxOptions && this.config.options.length > this.config.maxOptions) {
+          this.scrollCursor = (this.config.options.length - this.config.maxOptions) + 1;
+          this.cursor = options.length - 1;
+        } else if (!this.config?.noCancel) {
+          this.setCursor(options.length - 1);
+        } else {
+          return false;
+        }
+      }
+      const option = this.config?.options[this.cursor + (this.scrollCursor - (this.scrollCursor ? 1 : 0))];
+      if (option?.handler()) {
+        if (!option.keepOpen) {
+          this.clear();
+        }
+        playSound = !option.overrideSound;
+      } else {
+        ui.playError();
+      }
+    } else if (button === Button.SUBMIT && ui.getMode() === Mode.AUTO_COMPLETE) {
+      // this is here to differentiate between a Button.SUBMIT vs Button.ACTION within the autocomplete handler
+      // this is here because Button.ACTION is picked up as z on the keyboard, meaning if you're typing and hit z, it'll select the option you've chosen
+      success = true;
+      const option = this.config?.options[this.cursor + (this.scrollCursor - (this.scrollCursor ? 1 : 0))];
+      if (option?.handler()) {
+        if (!option.keepOpen) {
+          this.clear();
+        }
+        playSound = !option.overrideSound;
+      } else {
+        ui.playError();
+      }
+    } else {
+      switch (button) {
+        case Button.UP:
+          if (this.cursor) {
+            success = this.setCursor(this.cursor - 1);
+          } else if (this.cursor === 0) {
+            success = this.setCursor(options.length - 1);
+          }
+          break;
+        case Button.DOWN:
+          if (this.cursor < options.length - 1) {
+            success = this.setCursor(this.cursor + 1);
+          } else {
+            success = this.setCursor(0);
+          }
+          break;
+      }
+      if (this.config?.supportHover) {
+        // handle hover code if the element supports hover-handlers and the option has the optional hover-handler set.
+        this.config?.options[this.cursor + (this.scrollCursor - (this.scrollCursor ? 1 : 0))]?.onHover?.();
+      }
+    }
+
+    if (success && playSound) {
+      ui.playSelect();
+    }
+
+    return success;
+  }
+
+  unblockInput(): void {
+    if (!this.blockInput) {
+      return;
+    }
+
+    this.blockInput = false;
+    this.optionSelectText.setAlpha(1);
+    this.cursorObj?.setAlpha(1);
+  }
+
+  getOptionsWithScroll(): LockableSelectItem[] {
+    if (!this.config) {
+      return [];
+    }
+
+    const options = this.config.options.slice(0);
+
+    if (!this.config.maxOptions || this.config.options.length < this.config.maxOptions) {
+      return options;
+    }
+
+    const optionsScrollTotal = options.length;
+    const optionStartIndex = this.scrollCursor;
+    const optionEndIndex = Math.min(optionsScrollTotal, optionStartIndex + (!optionStartIndex || this.scrollCursor + (this.config.maxOptions - 1) >= optionsScrollTotal ? this.config.maxOptions - 1 : this.config.maxOptions - 2));
+
+    if (this.config?.maxOptions && options.length > this.config.maxOptions) {
+      options.splice(optionEndIndex, optionsScrollTotal);
+      options.splice(0, optionStartIndex);
+      if (optionStartIndex) {
+        options.unshift({
+          label: scrollUpLabel,
+          handler: () => true
+        });
+      }
+      if (optionEndIndex < optionsScrollTotal) {
+        options.push({
+          label: scrollDownLabel,
+          handler: () => true
+        });
+      }
+    }
+
+    return options;
+  }
+
+  setCursor(cursor: integer): boolean {
+    const changed = this.cursor !== cursor;
+
+    let isScroll = false;
+    const options = this.getOptionsWithScroll();
+    if (changed && this.config?.maxOptions && this.config.options.length > this.config.maxOptions) {
+      if (Math.abs(cursor - this.cursor) === options.length - 1) {
+        // Wrap around the list
+        const optionsScrollTotal = this.config.options.length;
+        this.scrollCursor = cursor ? optionsScrollTotal - (this.config.maxOptions - 1) : 0;
+        this.setupOptions();
+      } else {
+        // Move the cursor up or down by 1
+        const isDown = cursor && cursor > this.cursor;
+        if (isDown) {
+          if (options[cursor].label === scrollDownLabel) {
+            isScroll = true;
+            this.scrollCursor++;
+          }
+        } else {
+          if (!cursor && this.scrollCursor) {
+            isScroll = true;
+            this.scrollCursor--;
+          }
+        }
+        if (isScroll && this.scrollCursor === 1) {
+          this.scrollCursor += isDown ? 1 : -1;
+        }
+      }
+    }
+    if (isScroll) {
+      this.setupOptions();
+    } else {
+      this.cursor = cursor;
+    }
+
+    if (!this.cursorObj) {
+      this.cursorObj = this.scene.add.image(0, 0, "cursor");
+      this.optionSelectContainer.add(this.cursorObj);
+    }
+
+    this.cursorObj.setScale(this.scale * 6);
+    this.cursorObj.setPositionRelative(this.optionSelectBg, 12, 102 * this.scale + this.cursor * (114 * this.scale - 3));
+
+    return changed;
+  }
+
+  clear() {
+    super.clear();
+    this.config = null;
+    this.optionSelectContainer.setVisible(false);
+    this.scrollCursor = 0;
+    this.eraseCursor();
+  }
+
+  eraseCursor() {
+    if (this.cursorObj) {
+      this.cursorObj.destroy();
+    }
+    this.cursorObj = null;
+  }
+}

src/ui/pokedex-page-ui-handler.ts

@@ -13,7 +13,7 @@ import { getNatureName } from "#app/data/nature";
 import { pokemonFormChanges } from "#app/data/pokemon-forms";
 import { LevelMoves, pokemonFormLevelMoves, pokemonSpeciesLevelMoves } from "#app/data/balance/pokemon-level-moves";
 import PokemonSpecies, { allSpecies, getPokemonSpeciesForm, getPokerusStarters } from "#app/data/pokemon-species";
-import { getStarterValueFriendshipCap, speciesStarterCosts, POKERUS_STARTER_COUNT } from "#app/data/balance/starters";
+import { getStarterValueFriendshipCap, speciesStarterCosts } from "#app/data/balance/starters";
 import { starterPassiveAbilities } from "#app/data/balance/passives";
 import { Type } from "#enums/type";
 import { GameModes } from "#app/game-mode";
@@ -23,7 +23,7 @@ import { OptionSelectItem } from "#app/ui/abstact-option-select-ui-handler";
 import MessageUiHandler from "#app/ui/message-ui-handler";
 import PokemonIconAnimHandler, { PokemonIconAnimMode } from "#app/ui/pokemon-icon-anim-handler";
 import { StatsContainer } from "#app/ui/stats-container";
-import { TextStyle, addBBCodeTextObject, addTextObject } from "#app/ui/text";
+import { TextStyle, addBBCodeTextObject, addTextObject, getTextStyleOptions } from "#app/ui/text";
 import { Mode } from "#app/ui/ui";
 import { addWindow } from "#app/ui/ui-theme";
 import { Egg } from "#app/data/egg";
@@ -42,6 +42,9 @@ import { StarterContainer } from "#app/ui/starter-container";
 import { getPassiveCandyCount, getValueReductionCandyCounts, getSameSpeciesEggCandyCounts } from "#app/data/balance/starters";
 import { BooleanHolder, capitalizeString, fixedInt, getLocalizedSpriteKey, isNullOrUndefined, NumberHolder, padInt, randIntRange, rgbHexToRgba, toReadableString } from "#app/utils";
 import type { Nature } from "#enums/nature";
+import BgmBar from "./bgm-bar";
+import * as Utils from "../utils";
+import { speciesTmMoves } from "#app/data/balance/tms";
 
 export type StarterSelectCallback = (starters: Starter[]) => void;
 
@@ -118,7 +121,6 @@ const languageSettings: { [key: string]: LanguageSetting } = {
 const valueReductionMax = 2;
 
 // Position of UI elements
-const filterBarHeight = 17;
 const speciesContainerX = 109; // if team on the RIGHT: 109 / if on the LEFT: 143
 
 interface SpeciesDetails {
@@ -131,6 +133,19 @@ interface SpeciesDetails {
   forSeen?: boolean, // default = false
 }
 
+enum MenuOptions {
+  BASE_STATS,
+  ABILITIES,
+  LEVEL_MOVES,
+  EGG_MOVES,
+  TM_MOVES,
+  BIOMES,
+  NATURES,
+  TOGGLE_IVS,
+  EVOLUTIONS
+}
+
+
 export default class PokedexPageUiHandler extends MessageUiHandler {
   private starterSelectContainer: Phaser.GameObjects.Container;
   private shinyOverlay: Phaser.GameObjects.Image;
@@ -219,6 +234,10 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
   private starterAbilityIndexes: integer[] = [];
   private starterNatures: Nature[] = [];
   private starterMovesets: StarterMoveset[] = [];
+  private levelMoves: LevelMoves;
+  private eggMoves: Moves[] = [];
+  private hasEggMoves: boolean[] = [];
+  private tmMoves: Moves[] = [];
   private speciesStarterDexEntry: DexEntry | null;
   private speciesStarterMoves: Moves[];
   private canCycleShiny: boolean;
@@ -230,14 +249,10 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
 
   private assetLoadCancelled: BooleanHolder | null;
   public cursorObj: Phaser.GameObjects.Image;
-  private starterCursorObjs: Phaser.GameObjects.Image[];
-  private pokerusCursorObjs: Phaser.GameObjects.Image[];
-  private valueLimitLabel: Phaser.GameObjects.Text;
-  private startCursorObj: Phaser.GameObjects.NineSlice;
 
   private iconAnimHandler: PokemonIconAnimHandler;
 
-  //variables to keep track of the dynamically rendered list of instruction prompts for starter select
+  // variables to keep track of the dynamically rendered list of instruction prompts for starter select
   private instructionRowX = 0;
   private instructionRowY = 0;
   private instructionRowTextOffset = 9;
@@ -250,6 +265,15 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
 
   protected blockInput: boolean = false;
 
+  // Menu
+  private menuContainer: Phaser.GameObjects.Container;
+  private menuBg: Phaser.GameObjects.NineSlice;
+  protected optionSelectText: Phaser.GameObjects.Text;
+  public bgmBar: BgmBar;
+  private menuOptions: MenuOptions[];
+  protected scale: number = 0.1666666667;
+
+
   constructor(scene: BattleScene) {
     super(scene, Mode.POKEDEX_PAGE);
   }
@@ -277,15 +301,6 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
     this.shinyOverlay.setVisible(false);
     this.starterSelectContainer.add(this.shinyOverlay);
 
-    const starterContainerWindow = addWindow(this.scene, speciesContainerX, filterBarHeight + 1, 175, 161);
-
-    this.starterSelectContainer.add(starterContainerWindow);
-
-
-    if (!this.scene.uiTheme) {
-      starterContainerWindow.setVisible(false);
-    }
-
     this.iconAnimHandler = new PokemonIconAnimHandler();
     this.iconAnimHandler.setup(this.scene);
 
@@ -377,22 +392,6 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
 
     const starterBoxContainer = this.scene.add.container(speciesContainerX + 6, 9); //115
 
-    this.pokerusCursorObjs = new Array(POKERUS_STARTER_COUNT).fill(null).map(() => {
-      const cursorObj = this.scene.add.image(0, 0, "select_cursor_pokerus");
-      cursorObj.setVisible(false);
-      cursorObj.setOrigin(0, 0);
-      starterBoxContainer.add(cursorObj);
-      return cursorObj;
-    });
-
-    this.starterCursorObjs = new Array(6).fill(null).map(() => {
-      const cursorObj = this.scene.add.image(0, 0, "select_cursor_highlight");
-      cursorObj.setVisible(false);
-      cursorObj.setOrigin(0, 0);
-      starterBoxContainer.add(cursorObj);
-      return cursorObj;
-    });
-
     for (const species of allSpecies) {
       if (!speciesStarterCosts.hasOwnProperty(species.speciesId) || !species.isObtainable()) {
         continue;
@@ -636,6 +635,48 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
 
     this.starterSelectContainer.add(this.statsContainer);
 
+
+    // Adding menu container
+    this.menuContainer = this.scene.add.container(-130, 0);
+    this.menuContainer.setName("menu");
+    this.menuContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
+
+    this.bgmBar = new BgmBar(this.scene);
+    this.bgmBar.setup();
+
+    ui.bgmBar = this.bgmBar;
+
+    this.menuContainer.add(this.bgmBar);
+
+    this.menuContainer.setVisible(false);
+
+
+    this.menuOptions = Utils.getEnumKeys(MenuOptions).map(m => parseInt(MenuOptions[m]) as MenuOptions);
+
+    this.optionSelectText = addTextObject(this.scene, 0, 0, this.menuOptions.map(o => `${i18next.t(`pokedexUiHandler:${MenuOptions[o]}`)}`).join("\n"), TextStyle.WINDOW, { maxLines: this.menuOptions.length });
+    this.optionSelectText.setLineSpacing(12);
+
+    this.scale = getTextStyleOptions(TextStyle.WINDOW, (this.scene as BattleScene).uiTheme).scale;
+    this.menuBg = addWindow(this.scene,
+      (this.scene.game.canvas.width / 6) - (this.optionSelectText.displayWidth + 25),
+      0,
+      this.optionSelectText.displayWidth + 19 + 24 * this.scale,
+      (this.scene.game.canvas.height / 6) - 2
+    );
+    console.log("Logging sizes", this.optionSelectText.displayWidth + 25, this.scene.game.canvas.width / 6);
+    this.menuBg.setOrigin(0, 0);
+
+    this.optionSelectText.setPositionRelative(this.menuBg, 10 + 24 * this.scale, 6);
+
+    this.menuContainer.add(this.menuBg);
+
+    this.menuContainer.add(this.optionSelectText);
+
+    ui.add(this.menuContainer);
+
+    this.starterSelectContainer.add(this.menuContainer);
+
+
     // add the info overlay last to be the top most ui element and prevent the IVs from overlaying this
     const overlayScale = 1;
     this.moveInfoOverlay = new MoveInfoOverlay(this.scene, {
@@ -662,11 +703,12 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
       return false;
     } else {
       this.lastSpecies = args[0];
+      this.starterSetup(this.lastSpecies);
       console.log("this.lastSpecies", this.lastSpecies);
     }
 
+    // We want the normal appearence here
     if (!this.starterPreferences) {
-      // starterPreferences haven't been loaded yet
       this.starterPreferences = StarterPrefs.load();
     }
     this.moveInfoOverlay.clear(); // clear this when removing a menu; the cancel button doesn't seem to trigger this automatically on controllers
@@ -676,7 +718,6 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
     super.show(args);
 
     this.starterSelectContainer.setVisible(true);
-
     this.getUi().bringToTop(this.starterSelectContainer);
 
     this.allSpecies.forEach((species, s) => {
@@ -695,6 +736,14 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
       this.setUpgradeAnimation(icon, species);
     });
 
+
+    this.menuOptions = Utils.getEnumKeys(MenuOptions).map(m => parseInt(MenuOptions[m]) as MenuOptions);
+
+    this.menuContainer.setVisible(true);
+
+    this.setCursor(0);
+
+
     this.setSpecies(this.lastSpecies);
     this.updateInstructions();
 
@@ -702,6 +751,14 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
 
   }
 
+
+  starterSetup(species): void {
+    this.levelMoves = pokemonSpeciesLevelMoves[species.speciesId];
+    this.eggMoves = speciesEggMoves[species.speciesId] ?? [];
+    this.hasEggMoves = Array.from({ length: 4 }, (_, em) => (this.scene.gameData.starterData[species.speciesId].eggMoves & (1 << em)) !== 0);
+    this.tmMoves =  speciesTmMoves[species.speciesId].sort() ?? [];
+  }
+
   /**
    * Get the starter attributes for the given PokemonSpecies, after sanitizing them.
    * If somehow a preference is set for a form, variant, gender, ability or nature
@@ -960,6 +1017,8 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
   }
 
   processInput(button: Button): boolean {
+
+
     if (this.blockInput) {
       return false;
     }
@@ -969,8 +1028,6 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
     let success = false;
     let error = false;
 
-    console.log("Processing input", button);
-
     if (button === Button.SUBMIT) {
       success = true;
     } else if (button === Button.CANCEL) {
@@ -991,6 +1048,174 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
       let starterAttributes = this.starterPreferences[this.lastSpecies.speciesId];
 
       if (button === Button.ACTION) {
+
+        console.log("Cursor", this.cursor);
+
+        switch (this.cursor) {
+          case MenuOptions.LEVEL_MOVES:
+
+            this.blockInput = true;
+            console.log("level moves", MenuOptions.LEVEL_MOVES);
+
+            ui.setMode(Mode.POKEDEX_PAGE, "refresh").then(() => {
+              ui.showText(i18next.t("pokedexUiHandler:movesLearntOnLevelUp"), null, () => {
+
+                console.log(this.levelMoves);
+                console.log(this.levelMoves[0]);
+                this.moveInfoOverlay.show(allMoves[this.levelMoves[0][1]]);
+
+                ui.setModeWithoutClear(Mode.OPTION_SELECT, {
+                  options: this.levelMoves.map(m => {
+                    const option: OptionSelectItem = {
+                      label: String(m[0]).padEnd(4, " ") + allMoves[m[1]].name,
+                      handler: () => {
+                        return false;
+                      },
+                      onHover: () => {
+                        this.moveInfoOverlay.show(allMoves[m[1]]);
+                      },
+                    };
+                    return option;
+                  }).concat({
+                    label: i18next.t("menu:cancel"),
+                    handler: () => {
+                      this.moveInfoOverlay.clear();
+                      this.clearText();
+                      ui.setMode(Mode.POKEDEX_PAGE, "refresh");
+                      return true;
+                    },
+                    onHover: () => {
+                      this.moveInfoOverlay.clear();
+                    },
+                  }),
+                  supportHover: true,
+                  maxOptions: 8,
+                  yOffset: 19
+                });
+                console.log("We did the thing");
+                this.blockInput = false;
+              });
+            });
+            break;
+
+          case MenuOptions.EGG_MOVES:
+
+            this.blockInput = true;
+
+            ui.setMode(Mode.POKEDEX_PAGE, "refresh").then(() => {
+
+              if (this.eggMoves.length === 0) {
+                ui.showText(i18next.t("pokedexUiHandler:noEggMoves"));
+                this.blockInput = false;
+                return true;
+              }
+
+              ui.showText(i18next.t("pokedexUiHandler:movesLearntFromEgg"), null, () => {
+
+                this.moveInfoOverlay.show(allMoves[this.eggMoves[0]]);
+
+                ui.setModeWithoutClear(Mode.LOCKABLE_SELECT, {
+                  options: [
+                    // Add the "Common" title option
+                    {
+                      label: "Common",
+                      title: true, // Marks it as a title
+                      locked: false, // Titles are not lockable
+                      handler: () => false, // Non-selectable, but handler is required
+                      onHover: () => {} // No hover behavior for titles
+                    },
+                    // Add the first 3 egg moves
+                    ...this.eggMoves.slice(0, 3).map((m, i) => ({
+                      label: allMoves[m].name,
+                      locked: !this.hasEggMoves[i],
+                      handler: () => false,
+                      onHover: () => this.moveInfoOverlay.show(allMoves[m])
+                    })),
+                    // Add the "Rare" title option
+                    {
+                      label: "Rare",
+                      title: true,
+                      locked: false,
+                      handler: () => false,
+                      onHover: () => {}
+                    },
+                    // Add the remaining egg moves (4th onwards)
+                    {
+                      label: allMoves[this.eggMoves[3]].name,
+                      locked: !this.hasEggMoves[3],
+                      handler: () => false,
+                      onHover: () => this.moveInfoOverlay.show(allMoves[this.eggMoves[3]])
+                    },
+                    // Add the "Cancel" option at the end
+                    {
+                      label: i18next.t("menu:cancel"),
+                      handler: () => {
+                        this.moveInfoOverlay.clear();
+                        this.clearText();
+                        ui.setMode(Mode.POKEDEX_PAGE, "refresh");
+                        return true;
+                      },
+                      onHover: () => this.moveInfoOverlay.clear()
+                    }
+                  ],
+                  supportHover: true,
+                  maxOptions: 8,
+                  yOffset: 19
+                });
+
+                this.blockInput = false;
+              });
+            });
+            break;
+
+          case MenuOptions.TM_MOVES:
+
+            this.blockInput = true;
+
+            ui.setMode(Mode.POKEDEX_PAGE, "refresh").then(() => {
+              ui.showText(i18next.t("pokedexUiHandler:movesLearntFromTM"), null, () => {
+
+                this.moveInfoOverlay.show(allMoves[this.tmMoves[0]]);
+
+                ui.setModeWithoutClear(Mode.OPTION_SELECT, {
+                  options: this.tmMoves.map(m => {
+                    const option: OptionSelectItem = {
+                      label: allMoves[m].name,
+                      handler: () => {
+                        return false;
+                      },
+                      onHover: () => {
+                        this.moveInfoOverlay.show(allMoves[m]);
+                      },
+                    };
+                    return option;
+                  }).concat({
+                    label: i18next.t("menu:cancel"),
+                    handler: () => {
+                      this.moveInfoOverlay.clear();
+                      this.clearText();
+                      ui.setMode(Mode.POKEDEX_PAGE, "refresh");
+                      return true;
+                    },
+                    onHover: () => {
+                      this.moveInfoOverlay.clear();
+                    },
+                  }),
+                  supportHover: true,
+                  maxOptions: 8,
+                  yOffset: 19
+                });
+                this.blockInput = false;
+              });
+            });
+            break;
+
+          default:
+            return true;
+        }
+
+        return true;
+
         if (!this.speciesStarterDexEntry?.caughtAttr) {
           error = true;
         } else if (this.starterSpecies.length <= 6) { // checks to see if the party has 6 or fewer pokemon
@@ -1422,8 +1647,18 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
             }
             break;
           case Button.UP:
+            if (this.cursor) {
+              success = this.setCursor(this.cursor - 1);
+            } else {
+              success = this.setCursor(this.menuOptions.length - 1);
+            }
             break;
           case Button.DOWN:
+            if (this.cursor + 1 < this.menuOptions.length) {
+              success = this.setCursor(this.cursor + 1);
+            } else {
+              success = this.setCursor(0);
+            }
             break;
           case Button.LEFT:
             break;
@@ -1621,27 +1856,21 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
 
 
   setCursor(cursor: integer): boolean {
-    let changed = false;
+    const ret = super.setCursor(cursor);
 
-    cursor = Math.max(Math.min(this.filteredStarterContainers.length - 1, cursor), 0);
-    changed = super.setCursor(cursor);
-
-    const species = this.filteredStarterContainers[cursor]?.species;
-
-    if (species) {
-      const defaultDexAttr = this.getCurrentDexProps(species.speciesId);
-      const defaultProps = this.scene.gameData.getSpeciesDexAttrProps(species, defaultDexAttr);
-      const variant = this.starterPreferences[species.speciesId]?.variant ? this.starterPreferences[species.speciesId].variant as Variant : defaultProps.variant;
-      const tint = getVariantTint(variant);
-      this.pokemonShinyIcon.setFrame(getVariantIcon(variant));
-      this.pokemonShinyIcon.setTint(tint);
-      this.setSpecies(species);
-      this.updateInstructions();
+    if (!this.cursorObj) {
+      this.cursorObj = this.scene.add.image(0, 0, "cursor");
+      this.cursorObj.setOrigin(0, 0);
+      this.menuContainer.add(this.cursorObj);
     }
 
-    return changed;
+    this.cursorObj.setScale(this.scale * 6);
+    this.cursorObj.setPositionRelative(this.menuBg, 7, 6 + (18 + this.cursor * 96) * this.scale);
+
+    return ret;
   }
 
+
   getFriendship(speciesId: number) {
     let currentFriendship = this.scene.gameData.starterData[speciesId].friendship;
     if (!currentFriendship || currentFriendship === undefined) {
@@ -2368,7 +2597,7 @@ export default class PokedexPageUiHandler extends MessageUiHandler {
   clear(): void {
     super.clear();
 
-    StarterPrefs.save(this.starterPreferences);
+    //    StarterPrefs.save(this.starterPreferences);
     this.cursor = -1;
     this.hideInstructions();
     this.activeTooltip = undefined;

src/ui/pokedex-ui-handler.ts

@@ -29,7 +29,6 @@ import { Abilities } from "#enums/abilities";
 import { getPassiveCandyCount, getValueReductionCandyCounts, getSameSpeciesEggCandyCounts } from "#app/data/balance/starters";
 import { BooleanHolder, fixedInt, getLocalizedSpriteKey, isNullOrUndefined, padInt, randIntRange, rgbHexToRgba } from "#app/utils";
 import type { Nature } from "#enums/nature";
-
 import AutoCompleteUiHandler from "./autocomplete-ui-handler";
 import AwaitableUiHandler from "./awaitable-ui-handler";
 import { addWindow, WindowVariant } from "./ui-theme";
@@ -536,7 +535,6 @@ export default class PokedexUiHandler extends MessageUiHandler {
     console.log("POKEDEX calling show");
 
     if (!this.starterPreferences) {
-      // starterPreferences haven't been loaded yet
       this.starterPreferences = StarterPrefs.load();
     }
 
@@ -2135,7 +2133,7 @@ export default class PokedexUiHandler extends MessageUiHandler {
   clear(): void {
     super.clear();
 
-    StarterPrefs.save(this.starterPreferences);
+    //    StarterPrefs.save(this.starterPreferences);
     this.cursor = -1;
     this.activeTooltip = undefined;
     this.scene.ui.hideTooltip();

src/ui/ui.ts

@@ -56,6 +56,7 @@ import { Device } from "#enums/devices";
 import MysteryEncounterUiHandler from "./mystery-encounter-ui-handler";
 import PokedexScanUiHandler from "./pokedex-scan-ui-handler";
 import PokedexPageUiHandler from "./pokedex-page-ui-handler";
+import LockableSelectUiHandler from "./lockable-select-ui-handler";
 
 export enum Mode {
   MESSAGE,
@@ -90,6 +91,7 @@ export enum Mode {
   POKEDEX,
   POKEDEX_SCAN,
   POKEDEX_PAGE,
+  LOCKABLE_SELECT,
   LOGIN_FORM,
   REGISTRATION_FORM,
   LOADING,
@@ -136,6 +138,7 @@ const noTransitionModes = [
   Mode.ACHIEVEMENTS,
   Mode.GAME_STATS,
   Mode.POKEDEX_SCAN,
+  Mode.LOCKABLE_SELECT,
   Mode.LOGIN_FORM,
   Mode.REGISTRATION_FORM,
   Mode.LOADING,
@@ -204,6 +207,7 @@ export default class UI extends Phaser.GameObjects.Container {
       new PokedexUiHandler(scene),
       new PokedexScanUiHandler(scene, Mode.TEST_DIALOGUE),
       new PokedexPageUiHandler(scene),
+      new LockableSelectUiHandler(scene, Mode.LOCKABLE_SELECT),
       new LoginFormUiHandler(scene),
       new RegistrationFormUiHandler(scene),
       new LoadingModalUiHandler(scene),