diff --git a/src/plugins/i18n.ts b/src/plugins/i18n.ts index 845739dfcac..574cb6f8c4f 100644 --- a/src/plugins/i18n.ts +++ b/src/plugins/i18n.ts @@ -193,6 +193,7 @@ export async function initI18n(): Promise { "egg", "fightUiHandler", "filterBar", + "filterText", "gameMode", "gameStatsUiHandler", "growth", @@ -203,6 +204,7 @@ export async function initI18n(): Promise { "move", "nature", "pokeball", + "pokedexUiHandler", "pokemon", "pokemonForm", "pokemonInfo", diff --git a/src/ui-inputs.ts b/src/ui-inputs.ts index 92b1653df3d..2c8f8ea4057 100644 --- a/src/ui-inputs.ts +++ b/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 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); diff --git a/src/ui/filter-text.ts b/src/ui/filter-text.ts index 3e4d62cc82a..5c20010b39a 100644 --- a/src/ui/filter-text.ts +++ b/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; diff --git a/src/ui/lockable-select-ui-handler.ts b/src/ui/lockable-select-ui-handler.ts new file mode 100644 index 00000000000..1bdf3f4706a --- /dev/null +++ b/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; + } +} diff --git a/src/ui/pokedex-page-ui-handler.ts b/src/ui/pokedex-page-ui-handler.ts index dd86d20a07b..4f961eb5c88 100644 --- a/src/ui/pokedex-page-ui-handler.ts +++ b/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; diff --git a/src/ui/pokedex-ui-handler.ts b/src/ui/pokedex-ui-handler.ts index 4df2ddbe7ad..b578343c701 100644 --- a/src/ui/pokedex-ui-handler.ts +++ b/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(); diff --git a/src/ui/ui.ts b/src/ui/ui.ts index 05015b72390..c656b2d7f89 100644 --- a/src/ui/ui.ts +++ b/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),