[Enhancement] Refactor egg counter (#1996)

* refactor egg counter

* add documentation

src/egg-hatch-phase.ts

@@ -12,7 +12,8 @@ import { achvs } from "./system/achv";
 import { pokemonPrevolutions } from "./data/pokemon-evolutions";
 import { EggTier } from "./data/enums/egg-type";
 import PokemonInfoContainer from "./ui/pokemon-info-container";
-import EggsToHatchCountContainer from "./ui/eggs-to-hatch-count-container";
+import EggCounterContainer from "./ui/egg-counter-container";
+import { EggCountChangedEvent } from "./events/egg";
 
 /**
  * Class that represents egg hatching
@@ -24,7 +25,7 @@ export class EggHatchPhase extends Phase {
   /** The number of eggs that are hatching */
   private eggsToHatchCount: integer;
   /** The container that lists how many eggs are hatching */
-  private eggsToHatchCountContainer: EggsToHatchCountContainer;
+  private eggCounterContainer: EggCounterContainer;
 
   /** The scene handler for egg hatching */
   private eggHatchHandler: EggHatchSceneHandler;
@@ -110,10 +111,8 @@ export class EggHatchPhase extends Phase {
       this.eggContainer.add(this.eggLightraysOverlay);
       this.eggHatchContainer.add(this.eggContainer);
 
-      this.eggsToHatchCountContainer = new EggsToHatchCountContainer(this.scene, this.eggsToHatchCount);
-      this.eggsToHatchCountContainer.setup();
-
-      this.eggHatchContainer.add(this.eggsToHatchCountContainer);
+      this.eggCounterContainer = new EggCounterContainer(this.scene, this.eggsToHatchCount);
+      this.eggHatchContainer.add(this.eggCounterContainer);
 
       const getPokemonSprite = () => {
         const ret = this.scene.add.sprite(this.eggHatchBg.displayWidth / 2, this.eggHatchBg.displayHeight / 2, "pkmn__sub");
@@ -308,13 +307,6 @@ export class EggHatchPhase extends Phase {
    * Function to do the logic and animation of completing a hatch and revealing the Pokemon
    */
   doReveal(): void {
-    // Update/reduce count of hatching eggs when revealed if count is at least 1
-    // If count is 0, hide eggsToHatchCountContainer instead
-    if (this.eggsToHatchCount > 1) {
-      this.eggsToHatchCount -= 1;
-    } else {
-      this.eggsToHatchCountContainer.setVisible(false);
-    }
     const isShiny = this.pokemon.isShiny();
     if (this.pokemon.species.subLegendary) {
       this.scene.validateAchv(achvs.HATCH_SUB_LEGENDARY);
@@ -336,10 +328,8 @@ export class EggHatchPhase extends Phase {
     this.pokemonSprite.setPipelineData("variant", this.pokemon.variant);
     this.pokemonSprite.setVisible(true);
     this.scene.time.delayedCall(Utils.fixedInt(250), () => {
-      if (this.eggsToHatchCount < 10) {
-        this.eggsToHatchCountContainer.setWindowToDefaultSize();
-      }
-      this.eggsToHatchCountContainer.eggCountText.setText(`${this.eggsToHatchCount}`);
+      this.eggsToHatchCount--;
+      this.eggHatchHandler.eventTarget.dispatchEvent(new EggCountChangedEvent(this.eggsToHatchCount));
       this.pokemon.cry();
       if (isShiny) {
         this.scene.time.delayedCall(Utils.fixedInt(500), () => {

src/events/egg.ts

@@ -0,0 +1,21 @@
+export enum EggEventType {
+  /**
+   * Triggers when egg count is changed.
+   * @see {@linkcode MoveUsedEvent}
+   */
+  EGG_COUNT_CHANGED = "onEggCountChanged"
+}
+
+/**
+ * Container class for {@linkcode EggEventType.EGG_COUNT_CHANGED} events
+ * @extends Event
+*/
+export class EggCountChangedEvent extends Event {
+  /** The updated egg count. */
+  public eggCount: integer;
+
+  constructor(eggCount: number) {
+    super(EggEventType.EGG_COUNT_CHANGED);
+    this.eggCount = eggCount;
+  }
+}

src/phases.ts

@@ -5191,15 +5191,15 @@ export class EggLapsePhase extends Phase {
       return Overrides.IMMEDIATE_HATCH_EGGS_OVERRIDE ? true : --egg.hatchWaves < 1;
     });
 
-    let eggsToHatchCount: integer = eggsToHatch.length;
+    let eggCount: integer = eggsToHatch.length;
 
-    if (eggsToHatchCount) {
+    if (eggCount) {
       this.scene.queueMessage(i18next.t("battle:eggHatching"));
 
       for (const egg of eggsToHatch) {
-        this.scene.unshiftPhase(new EggHatchPhase(this.scene, egg, eggsToHatchCount));
-        if (eggsToHatchCount > 0) {
-          eggsToHatchCount--;
+        this.scene.unshiftPhase(new EggHatchPhase(this.scene, egg, eggCount));
+        if (eggCount > 0) {
+          eggCount--;
         }
       }
 

src/ui/egg-counter-container.ts

@@ -0,0 +1,88 @@
+import BattleScene from "#app/battle-scene.js";
+import { addWindow } from "./ui-theme";
+import { addTextObject, TextStyle } from "./text";
+import { EggCountChangedEvent, EggEventType } from "#app/events/egg.js";
+import EggHatchSceneHandler from "./egg-hatch-scene-handler";
+
+/**
+ * A container that displays the count of hatching eggs.
+ * Extends Phaser.GameObjects.Container.
+ */
+export default class EggCounterContainer extends Phaser.GameObjects.Container {
+  private readonly WINDOW_DEFAULT_WIDTH = 37;
+  private readonly WINDOW_MEDIUM_WIDTH = 42;
+  private readonly WINDOW_HEIGHT = 26;
+  private readonly onEggCountChangedEvent = (event: Event) => this.onEggCountChanged(event);
+
+  private battleScene: BattleScene;
+  private eggCount: integer;
+  private eggCountWindow: Phaser.GameObjects.NineSlice;
+  private eggCountText: Phaser.GameObjects.Text;
+
+  /**
+   * @param {BattleScene} scene - The scene to which this container belongs.
+   * @param {number} eggCount - The number of eggs to hatch.
+   */
+  constructor(scene: BattleScene, eggCount: integer) {
+    super(scene, 0, 0);
+    this.eggCount = eggCount;
+    this.battleScene = scene;
+
+    const uiHandler = this.battleScene.ui.getHandler() as EggHatchSceneHandler;
+
+    uiHandler.eventTarget.addEventListener(EggEventType.EGG_COUNT_CHANGED, this.onEggCountChangedEvent);
+    this.setup();
+  }
+
+  /**
+   * Sets up the container, creating the window, egg sprite, and egg count text.
+   */
+  private setup(): void {
+    const windowWidth = this.eggCount > 9 ? this.WINDOW_MEDIUM_WIDTH : this.WINDOW_DEFAULT_WIDTH;
+
+    this.eggCountWindow = addWindow(this.battleScene, 5, 5, windowWidth, this.WINDOW_HEIGHT);
+    this.setVisible(this.eggCount > 1);
+
+    this.add(this.eggCountWindow);
+
+    const eggSprite = this.battleScene.add.sprite(19, 18, "egg", "egg_0");
+    eggSprite.setScale(0.32);
+
+    this.eggCountText = addTextObject(this.battleScene, 28, 13, `${this.eggCount}`, TextStyle.MESSAGE, { fontSize: "66px" });
+
+    this.add(eggSprite);
+    this.add(this.eggCountText);
+  }
+
+  /**
+   * Resets the window size to the default width and height.
+   */
+  private setWindowToDefaultSize(): void {
+    this.eggCountWindow.setSize(this.WINDOW_DEFAULT_WIDTH, this.WINDOW_HEIGHT);
+  }
+
+  /**
+   * Handles window size, the egg count to show, and whether it should be displayed.
+   *
+   * @param event {@linkcode Event} being sent
+   * @returns void
+   */
+  private onEggCountChanged(event: Event): void {
+    const eggCountChangedEvent = event as EggCountChangedEvent;
+    if (!eggCountChangedEvent) {
+      return;
+    }
+
+    const eggCount = eggCountChangedEvent.eggCount;
+
+    if (eggCount < 10) {
+      this.setWindowToDefaultSize();
+    }
+
+    if (eggCount > 0) {
+      this.eggCountText.setText(eggCount.toString());
+    } else {
+      this.eggCountText.setVisible(false);
+    }
+  }
+}

src/ui/egg-hatch-scene-handler.ts

@@ -7,6 +7,14 @@ import {Button} from "../enums/buttons";
 export default class EggHatchSceneHandler extends UiHandler {
   public eggHatchContainer: Phaser.GameObjects.Container;
 
+  /**
+   * Allows subscribers to listen for events
+   *
+   * Current Events:
+   * - {@linkcode EggEventType.EGG_COUNT_CHANGED} {@linkcode EggCountChangedEvent}
+   */
+  public readonly eventTarget: EventTarget = new EventTarget();
+
   constructor(scene: BattleScene) {
     super(scene, Mode.EGG_HATCH_SCENE);
   }

src/ui/eggs-to-hatch-count-container.ts

@@ -1,54 +0,0 @@
-import BattleScene from "#app/battle-scene.js";
-import { addWindow } from "./ui-theme";
-import { addTextObject, TextStyle } from "./text";
-
-/**
- * A container that displays the count of hatching eggs.
- * Extends Phaser.GameObjects.Container.
- */
-export default class EggsToHatchCountContainer extends Phaser.GameObjects.Container {
-  private readonly WINDOW_DEFAULT_WIDTH = 37;
-  private readonly WINDOW_MEDIUM_WIDTH = 42;
-  private readonly WINDOW_HEIGHT = 26;
-
-  private eggsToHatchCount: integer;
-  private eggsToHatchCountWindow: Phaser.GameObjects.NineSlice;
-
-  public eggCountText: Phaser.GameObjects.Text;
-
-  /**
-   * @param {BattleScene} scene - The scene to which this container belongs.
-   * @param {number} eggsToHatchCount - The number of eggs to hatch.
-   */
-  constructor(scene: BattleScene, eggsToHatchCount: integer) {
-    super(scene, 0, 0);
-    this.eggsToHatchCount = eggsToHatchCount;
-  }
-
-  /**
-   * Sets up the container, creating the window, egg sprite, and egg count text.
-   */
-  setup(): void {
-    const windowWidth = this.eggsToHatchCount > 9 ? this.WINDOW_MEDIUM_WIDTH : this.WINDOW_DEFAULT_WIDTH;
-
-    this.eggsToHatchCountWindow = addWindow(this.scene as BattleScene, 5, 5, windowWidth, this.WINDOW_HEIGHT);
-    this.setVisible(this.eggsToHatchCount > 1);
-
-    this.add(this.eggsToHatchCountWindow);
-
-    const eggSprite = this.scene.add.sprite(19, 18, "egg", "egg_0");
-    eggSprite.setScale(0.32);
-
-    this.eggCountText = addTextObject(this.scene, 28, 13, `${this.eggsToHatchCount}`, TextStyle.MESSAGE, { fontSize: "66px" });
-
-    this.add(eggSprite);
-    this.add(this.eggCountText);
-  }
-
-  /**
-   * Resets the window size to the default width and height.
-   */
-  setWindowToDefaultSize(): void {
-    this.eggsToHatchCountWindow.setSize(this.WINDOW_DEFAULT_WIDTH, this.WINDOW_HEIGHT);
-  }
-}