[QoL] Move Info Overlay

[prime-dialga]

What are the changes?

Overlays containing infos for currently selected moves have been added to various screens, which previous lacked move descriptions.

What did change?

Those Overlays have been added to the following menus:

• when hovering over a TM on the item selection screen (only visible when pressing Shift or C)
• during the starter selection when selecting and replacing moves
• when using a memory mushroom

In addition, as the UI can get a bit cluttered in certain situations, this behavior can be disabled in the game settings through the "Move Info" option.

Additional changes

To implement the above listed features some core components had to be modified:

• OptionSelectItem have now an optional "onHover" listener, triggered when the cursor is moved to a new element. (This feature needs to be enabled in the OptionSelectConfig with the "supportHover" setting)
• The scene can now register "InfoToggles", a new interface, with the "addInfoToggle" method. Allowing the use of the Button.STATS for other info-related tasks.

Screenshots/Videos

The changes during starter selection...

... when chosing a TM...

... and using a Memory Mushroom

Why am I doing these changes?

I personally thought it bothersome to look up moves.
In addition, Memory Mushrooms and TMs are considered "used" by the time the moves description is normally shown, which can be rather punishing for new and less experienced players.

How to test the changes?

The starter changes can be tested easily, as movesets can always be adjusted and therefore the required menu is accessible.
As for Memory Mushrooms and TMs, as those require a specific item drop, i recommend resetting and exporting a safe file when such an item dropps as the first reward, that way it can be tested somewhat fast. Otherwise modifying the starter money value and rerolling for such an item can also work.

@ edit
A new override for rewards has been added; simply replace the last line in overrides.ts ...

export const ITEM_REWARD_OVERRIDE: Array<String> = [];

... with this:

export const ITEM_REWARD_OVERRIDE: Array<String> = ["MEMORY_MUSHROOM", "TM_COMMON", "TM_ULTRA"];

(requires at least one pokemon in the party to be capable of remembering at least one move and learning one TM)

Checklist

• There is no overlap with another PR?
• The PR is self-contained and cannot be split into smaller PRs?
• Have I provided a clear explanation of the changes?
• Have I tested the changes (manually)?
  • Are all unit tests still passing? (npm run test)
• Are the changes visual?
  • Have I provided screenshots/videos of the changes?

[star-krieg]

This change will be much appreciated because there's multiple moves in the game, I don't expect everyone to just remember them on the fly.

Memory Mushrooms and TMs are used many times in the game and having the option to see the info in-game would a great change.

[Treeck7]

This is a great feature, information about the game should be reasonably accessible within the game. Pokemon has had such readily available information from the start so I see no reason to not attempt to do the same here. The ui could use some retouching, but that is something that can be perfected over time with user feedback rather than needing to be perfect from the start.

[flx-sta]

LGTM 🚀

I just re-rolled till I got a TM as a reward.

edit:
I forgot to test for memory mushroom.

IPhone 12 (emulated in Firefox)

---

Used overrides.ts

import { Species } from "./data/enums/species";
import { Abilities } from "./data/enums/abilities";
import { Biome } from "./data/enums/biome";
import { Moves } from "./data/enums/moves";
import { WeatherType } from "./data/weather";
import { Variant } from "./data/variant";
import { BerryType } from "./data/berry";
import { TempBattleStat } from "./data/temp-battle-stat";
import { Nature } from "./data/nature";
import { Type } from "./data/type";
import { Stat } from "./data/pokemon-stat";
import { PokeballCounts } from "./battle-scene";
import { PokeballType } from "./data/pokeball";
import {TimeOfDay} from "#app/data/enums/time-of-day";
import { Gender } from "./data/gender";
import { TmModifier } from "./modifier/modifier";

/**
* Overrides for testing different in game situations
* if an override name starts with "STARTING", it will apply when a new run begins
*/

/**
* OVERALL OVERRIDES
*/

// a specific seed (default: a random string of 24 characters)
export const SEED_OVERRIDE: string = "";
export const WEATHER_OVERRIDE: WeatherType = WeatherType.NONE;
export const DOUBLE_BATTLE_OVERRIDE: boolean = true;
export const STARTING_WAVE_OVERRIDE: integer = 10;
export const STARTING_BIOME_OVERRIDE: Biome = Biome.TOWN;
export const ARENA_TINT_OVERRIDE: TimeOfDay = null;
// Multiplies XP gained by this value including 0. Set to null to ignore the override
export const XP_MULTIPLIER_OVERRIDE: number = null;
export const IMMEDIATE_HATCH_EGGS_OVERRIDE: boolean = false;
// default 1000
export const STARTING_MONEY_OVERRIDE: integer = 500000;
export const POKEBALL_OVERRIDE: { active: boolean, pokeballs: PokeballCounts } = {
active: false,
pokeballs: {
  [PokeballType.POKEBALL]: 5,
  [PokeballType.GREAT_BALL]: 0,
  [PokeballType.ULTRA_BALL]: 0,
  [PokeballType.ROGUE_BALL]: 0,
  [PokeballType.MASTER_BALL]: 0,
}
};

/**
* PLAYER OVERRIDES
*/

// forms can be found in pokemon-species.ts
export const STARTER_FORM_OVERRIDE: integer = 0;
// default 5 or 20 for Daily
export const STARTING_LEVEL_OVERRIDE: integer = 50;
/**
* SPECIES OVERRIDE
* will only apply to the first starter in your party or each enemy pokemon
* default is 0 to not override
* @example SPECIES_OVERRIDE = Species.Bulbasaur;
*/
export const STARTER_SPECIES_OVERRIDE: Species | integer = 0;
export const ABILITY_OVERRIDE: Abilities = Abilities.NONE;
export const PASSIVE_ABILITY_OVERRIDE: Abilities = Abilities.NONE;
export const GENDER_OVERRIDE: Gender = null;
export const MOVESET_OVERRIDE: Array<Moves> = [];
export const SHINY_OVERRIDE: boolean = false;
export const VARIANT_OVERRIDE: Variant = 0;

/**
* OPPONENT / ENEMY OVERRIDES
*/

export const OPP_SPECIES_OVERRIDE: Species | integer = 0;
export const OPP_LEVEL_OVERRIDE: number = 0;
export const OPP_ABILITY_OVERRIDE: Abilities = Abilities.NONE;
export const OPP_PASSIVE_ABILITY_OVERRIDE = Abilities.NONE;
export const OPP_GENDER_OVERRIDE: Gender = null;
export const OPP_MOVESET_OVERRIDE: Array<Moves> = [];
export const OPP_SHINY_OVERRIDE: boolean = false;
export const OPP_VARIANT_OVERRIDE: Variant = 0;

/**
* MODIFIER / ITEM OVERRIDES
* if count is not provided, it will default to 1
* @example Modifier Override [{name: "EXP_SHARE", count: 2}]
* @example Held Item Override [{name: "LUCKY_EGG"}]
*
* Some items are generated based on a sub-type (i.e. berries), to override those:
* @example [{name: "BERRY", count: 5, type: BerryType.SITRUS}]
* types are listed in interface below
* - TempBattleStat is for TEMP_STAT_BOOSTER / X Items (Dire hit is separate)
* - Stat is for BASE_STAT_BOOSTER / Vitamin
* - Nature is for MINT
* - Type is for TERA_SHARD or ATTACK_TYPE_BOOSTER (type boosting items i.e Silk Scarf)
* - BerryType is for BERRY
*/
interface ModifierOverride {
  name: string,
  count?: integer
  type?: TempBattleStat|Stat|Nature|Type|BerryType
}
export const STARTING_MODIFIER_OVERRIDE: Array<ModifierOverride> = [
{name: "TM", count: 1, type: Type.FIGHTING}
];
export const OPP_MODIFIER_OVERRIDE: Array<ModifierOverride> = [];

export const STARTING_HELD_ITEMS_OVERRIDE: Array<ModifierOverride> = [];
export const OPP_HELD_ITEMS_OVERRIDE: Array<ModifierOverride> = [];

[brain-frog]

Has this been tested with other languages to make sure the text displays well

[Fasin78]

Tested with all other languages in order, also chose a move that has a long text description. They all displayed well.

[Fasin78]

Tested with memory mushroom. Working.

[prime-dialga]

Has this been tested with other languages to make sure the text displays well

It technically uses scrolling text in cases where the text requires more than 3 lines (like in the status-screen). Though i think that currently only happens in some cases for the memory mushroom.

[bennybroseph]

We'll need some major changes to how this looks at the moment. Some of it probably means implementation changes due to how badly the message boxes overlaps with everything else or is placed in a random spot above it. The move info just looks like a page of the Move Summary screen got copy pasted in a little window.

What's up with this overlap?

Something like this conveys the same info and matches the current UI, why not match this?

I'm not even sure this can be fixed, I'd rather this be in a separate PR because it looks so cluttered

More strange overlap

[prime-dialga]

Well, there is overlap, as it's its own UI element and an overlay.
Though i adjusted the noted points:

I kept the hard numbers on the left to closer mirror the move inspector on the status menu, though switching sides wouldn't be hard.

Reduced the width to remove the overlap for the 6th pokemon in the party.

Made some adjustments to the size and scale to closer resemble to other UI elements. Some other ideas which might look better than the current solution for the starter selection:

• Only appear when pressing C/Shift and overlay the menu / text in the bottom row (similar to the TM selection). Though it seems rather bothersome, since, if you want to check one move, you probably want to check all moves and it would cover the move list you are currently working with.
• Reduce the size a bit more to align with the right most border of the party list box. That might cause a few additional move infos to be cut of and scrolling.

---

Also a new override for rewards has been added; simply replace the last line in overrides.ts ...

export const ITEM_REWARD_OVERRIDE: Array<String> = [];

... with this:

export const ITEM_REWARD_OVERRIDE: Array<String> = ["MEMORY_MUSHROOM", "TM_COMMON", "TM_ULTRA"];

(requires at least one pokemon in the party to be capable of remembering at least one move and learning one TM)

---

I kept this as a draft until i got a bit more feedback regarding the design. That way we don't need to set is as draft again, in case further changes are needed.

[bennybroseph]

This looks so much better now, I really like it.

For the first image, let's swap sides to match the Command UI layout since that is the element that we're mirroring.

Well, there is overlap, as it's its own UI element and an overlay.

If it was as simple as that then these new screenshots wouldn't have adjusted the positions and alignment of the UI elements to no longer overlap. You've fixed the problem which is all that matters, but to say there was none is strange. Anyway, we should do the same for the second image now as well. It's currently covering up text behind it.

Lastly, I don't see a need for this to be an overlay accessible on a press and hold of a button. I think this should just be a setting enabled by default. Especially in the shop menu, this currently has no downside for simply being there by default. The others may be something people would like to turn off.

[prime-dialga]

I didn't say there was no overlap, just that there is overlap (and implied that i personally didn't mind the overlap as overlay = covers what is behind it; well, different tastes and all that).

Anyway, settings option is present, TM overlay is swapped, rest as before:

• Starter: when the in game cursor is hovering over a move its description is displayed
• Memory Mushrooms: same as for Starters.
• TMs: hovering a TM and pressing C/Shift will show the description. (As it might not be perfectly clear to people without deeper knowledge of pokemon, what TMs are; so "teaches X to a pokemon" might still be a useful info.)

[bennybroseph]

can we either update the original images or post images of how these changes look now in all situations?

[prime-dialga]

Here a summery of the how it appears with the latest commit:

TM:

Shroom:

Starter:

Settings:

[bennybroseph]

would like to get this working in the new settings menu and then we're good to go

[prime-dialga]

Fixed the new settings menu. Though it looks visually the same.

[bennybroseph]

should put this in the new Accessibility settings instead of general

[prime-dialga]

moved to accessibility

[bennybroseph]

there's a lot of formatting changes here. did something happen?

[prime-dialga]

it seems like originally tabs ("\t") were used for those indention.
as i personally also use tabs and need to replace those with two blanks (" ") before commiting (as eslint doesn't automatically replace tabs). eslint now found those unusual indentions and adjusted them to how they are expected to look like.
so i don't think it's an issue?

[bennybroseph]

@prime-dialga What is your name on Discord?