[QoL] Show move description via info button (#4165)

* Show move desc via info button

* Update src/ui/move-info-overlay.ts

Co-authored-by: NightKev <34855794+DayKev@users.noreply.github.com>

---------

Co-authored-by: NightKev <34855794+DayKev@users.noreply.github.com>
Co-authored-by: flx-sta <50131232+flx-sta@users.noreply.github.com>

src/ui/fight-ui-handler.ts

@@ -1,4 +1,4 @@
-import BattleScene from "../battle-scene";
+import BattleScene, { InfoToggle } from "../battle-scene";
 import { addTextObject, TextStyle } from "./text";
 import { getTypeDamageMultiplierColor, Type } from "../data/type";
 import { Command } from "./command-ui-handler";
@@ -10,9 +10,10 @@ import i18next from "i18next";
 import {Button} from "#enums/buttons";
 import Pokemon, { PokemonMove } from "#app/field/pokemon";
 import { CommandPhase } from "#app/phases/command-phase";
+import MoveInfoOverlay from "./move-info-overlay";
 import { BattleType } from "#app/battle";
 
-export default class FightUiHandler extends UiHandler {
+export default class FightUiHandler extends UiHandler implements InfoToggle {
   public static readonly MOVES_CONTAINER_NAME = "moves";
 
   private movesContainer: Phaser.GameObjects.Container;
@@ -26,6 +27,7 @@ export default class FightUiHandler extends UiHandler {
   private accuracyText: Phaser.GameObjects.Text;
   private cursorObj: Phaser.GameObjects.Image | null;
   private moveCategoryIcon: Phaser.GameObjects.Sprite;
+  private moveInfoOverlay : MoveInfoOverlay;
 
   protected fieldIndex: integer = 0;
   protected cursor2: integer = 0;
@@ -85,6 +87,24 @@ export default class FightUiHandler extends UiHandler {
     this.accuracyText.setOrigin(1, 0.5);
     this.accuracyText.setVisible(false);
     this.moveInfoContainer.add(this.accuracyText);
+
+    // prepare move overlay
+    const overlayScale = 1;
+    this.moveInfoOverlay = new MoveInfoOverlay(this.scene, {
+      delayVisibility: true,
+      scale: overlayScale,
+      onSide: true,
+      right: true,
+      x: 0,
+      y: -MoveInfoOverlay.getHeight(overlayScale, true),
+      width: (this.scene.game.canvas.width / 6) + 4,
+      hideEffectBox: true,
+      hideBg: true
+    });
+    ui.add(this.moveInfoOverlay);
+    // register the overlay to receive toggle events
+    this.scene.addInfoToggle(this.moveInfoOverlay);
+    this.scene.addInfoToggle(this);
   }
 
   show(args: any[]): boolean {
@@ -103,6 +123,8 @@ export default class FightUiHandler extends UiHandler {
       this.setCursor(this.getCursor());
     }
     this.displayMoves();
+    this.toggleInfo(false); // in case cancel was pressed while info toggle is active
+    this.active = true;
     return true;
   }
 
@@ -160,6 +182,27 @@ export default class FightUiHandler extends UiHandler {
     return success;
   }
 
+  toggleInfo(visible: boolean): void {
+    if (visible) {
+      this.movesContainer.setVisible(false);
+      this.cursorObj?.setVisible(false);
+    }
+    this.scene.tweens.add({
+      targets: [this.movesContainer, this.cursorObj],
+      duration: Utils.fixedInt(125),
+      ease: "Sine.easeInOut",
+      alpha: visible ? 0 : 1
+    });
+    if (!visible) {
+      this.movesContainer.setVisible(true);
+      this.cursorObj?.setVisible(true);
+    }
+  }
+
+  isActive(): boolean {
+    return this.active;
+  }
+
   getCursor(): integer {
     return !this.fieldIndex ? this.cursor : this.cursor2;
   }
@@ -167,6 +210,7 @@ export default class FightUiHandler extends UiHandler {
   setCursor(cursor: integer): boolean {
     const ui = this.getUi();
 
+    this.moveInfoOverlay.clear();
     const changed = this.getCursor() !== cursor;
     if (changed) {
       if (!this.fieldIndex) {
@@ -220,6 +264,7 @@ export default class FightUiHandler extends UiHandler {
       //** Changes the text color and shadow according to the determined TextStyle */
       this.ppText.setColor(this.getTextColor(ppColorStyle, false));
       this.ppText.setShadowColor(this.getTextColor(ppColorStyle, true));
+      this.moveInfoOverlay.show(pokemonMove.getMove());
 
       pokemon.getOpponents().forEach((opponent) => {
         opponent.updateEffectiveness(this.getEffectivenessText(pokemon, opponent, pokemonMove));
@@ -307,8 +352,10 @@ export default class FightUiHandler extends UiHandler {
     this.accuracyLabel.setVisible(false);
     this.accuracyText.setVisible(false);
     this.moveCategoryIcon.setVisible(false);
+    this.moveInfoOverlay.clear();
     messageHandler.bg.setVisible(true);
     this.eraseCursor();
+    this.active = false;
   }
 
   clearMoves() {

src/ui/move-info-overlay.ts

@@ -15,12 +15,16 @@ export interface MoveInfoOverlaySettings {
     //location and width of the component; unaffected by scaling
     x?: number;
     y?: number;
-    width?: number; // default is always half the screen, regardless of scale
+    /** Default is always half the screen, regardless of scale */
+    width?: number;
+    /** Determines whether to display the small secondary box */
+    hideEffectBox?: boolean;
+    hideBg?: boolean;
 }
 
-const EFF_HEIGHT = 46;
+const EFF_HEIGHT = 48;
 const EFF_WIDTH = 82;
-const DESC_HEIGHT = 46;
+const DESC_HEIGHT = 48;
 const BORDER = 8;
 const GLOBAL_SCALE = 6;
 
@@ -38,6 +42,7 @@ export default class MoveInfoOverlay extends Phaser.GameObjects.Container implem
   private acc: Phaser.GameObjects.Text;
   private typ: Phaser.GameObjects.Sprite;
   private cat: Phaser.GameObjects.Sprite;
+  private descBg: Phaser.GameObjects.NineSlice;
 
   private options : MoveInfoOverlaySettings;
 
@@ -52,9 +57,9 @@ export default class MoveInfoOverlay extends Phaser.GameObjects.Container implem
 
     // prepare the description box
     const width = (options?.width || MoveInfoOverlay.getWidth(scale, scene)) / scale; // divide by scale as we always want this to be half a window wide
-    const descBg = addWindow(scene,  (options?.onSide && !options?.right ? EFF_WIDTH : 0), options?.top ? EFF_HEIGHT : 0, width - (options?.onSide ? EFF_WIDTH : 0), DESC_HEIGHT);
+    this.descBg = addWindow(scene,  (options?.onSide && !options?.right ? EFF_WIDTH : 0), options?.top ? EFF_HEIGHT : 0, width - (options?.onSide ? EFF_WIDTH : 0), DESC_HEIGHT);
-    descBg.setOrigin(0, 0);
+    this.descBg.setOrigin(0, 0);
-    this.add(descBg);
+    this.add(this.descBg);
 
     // set up the description; wordWrap uses true pixels, unaffected by any scaling, while other values are affected
     this.desc = addTextObject(scene, (options?.onSide && !options?.right ? EFF_WIDTH : 0) + BORDER, (options?.top ? EFF_HEIGHT : 0) + BORDER - 2, "", TextStyle.BATTLE_INFO, { wordWrap: { width: (width - (BORDER - 2) * 2 - (options?.onSide ? EFF_WIDTH : 0)) * GLOBAL_SCALE } });
@@ -125,6 +130,14 @@ export default class MoveInfoOverlay extends Phaser.GameObjects.Container implem
     this.acc.setOrigin(1, 0.5);
     this.val.add(this.acc);
 
+    if (options?.hideEffectBox) {
+      this.val.setVisible(false);
+    }
+
+    if (options?.hideBg) {
+      this.descBg.setVisible(false);
+    }
+
     // hide this component for now
     this.setVisible(false);
   }
@@ -176,8 +189,19 @@ export default class MoveInfoOverlay extends Phaser.GameObjects.Container implem
     this.active = false;
   }
 
-  toggleInfo(force?: boolean): void {
+  toggleInfo(visible: boolean): void {
-    this.setVisible(force ?? !this.visible);
+    if (visible) {
+      this.setVisible(true);
+    }
+    this.scene.tweens.add({
+      targets: this.desc,
+      duration: Utils.fixedInt(125),
+      ease: "Sine.easeInOut",
+      alpha: visible ? 1 : 0
+    });
+    if (!visible) {
+      this.setVisible(false);
+    }
   }
 
   isActive(): boolean {