Add Pokemon info display on catch

src/battle-scene.ts

@@ -52,6 +52,8 @@ import { getTypeRgb } from './data/type';
 import PokemonSpriteSparkleHandler from './field/pokemon-sprite-sparkle-handler';
 import CharSprite from './ui/char-sprite';
 import DamageNumberHandler from './field/damage-number-handler';
+import { StatsContainer } from './ui/stats-container';
+import PokemonInfoContainer from './ui/pokemon-info-container';
 
 export const bypassLogin = false;
 export const startingLevel = 5;
@@ -130,6 +132,7 @@ export default class BattleScene extends Phaser.Scene {
 	public currentBattle: Battle;
 	public pokeballCounts: PokeballCounts;
 	public money: integer;
+	public pokemonInfoContainer: PokemonInfoContainer;
 	private party: PlayerPokemon[];
 	private waveCountText: Phaser.GameObjects.Text;
 	private moneyText: Phaser.GameObjects.Text;
@@ -546,6 +549,11 @@ export default class BattleScene extends Phaser.Scene {
 		this.spriteSparkleHandler = new PokemonSpriteSparkleHandler();
 		this.spriteSparkleHandler.setup(this);
 
+		this.pokemonInfoContainer = new PokemonInfoContainer(this, (this.game.canvas.width / 6) + 52, -(this.game.canvas.height / 6) + 66);
+		this.pokemonInfoContainer.setup();
+
+		this.fieldUI.add(this.pokemonInfoContainer);
+
 		this.party = [];
 
 		let loadPokemonAssets = [];

src/egg-hatch-phase.ts

@@ -8,14 +8,10 @@ import EggHatchSceneHandler from "./ui/egg-hatch-scene-handler";
 import { Species } from "./data/enums/species";
 import { PlayerPokemon } from "./field/pokemon";
 import { getPokemonSpecies, speciesStarters } from "./data/pokemon-species";
-import { StatsContainer } from "./ui/stats-container";
-import { TextStyle, addBBCodeTextObject, addTextObject } from "./ui/text";
-import { Gender, getGenderColor, getGenderSymbol } from "./data/gender";
 import { achvs } from "./system/achv";
-import { addWindow } from "./ui/window";
-import { getNatureName } from "./data/nature";
 import { pokemonPrevolutions } from "./data/pokemon-evolutions";
 import { EggTier } from "./data/enums/egg-type";
+import PokemonInfoContainer from "./ui/pokemon-info-container";
 
 export class EggHatchPhase extends Phase {
   private egg: Egg;
@@ -30,8 +26,7 @@ export class EggHatchPhase extends Phase {
   private pokemonSprite: Phaser.GameObjects.Sprite;
   private pokemonShinySparkle: Phaser.GameObjects.Sprite;
 
-  private infoContainer: Phaser.GameObjects.Container;
+  private infoContainer: PokemonInfoContainer;
-  private statsContainer: StatsContainer;
 
   private pokemon: PlayerPokemon;
   private eggMoveIndex: integer;
@@ -99,41 +94,8 @@ export class EggHatchPhase extends Phase {
       this.eggHatchOverlay.setAlpha(0);
       this.scene.fieldUI.add(this.eggHatchOverlay);
 
-      const infoBg = addWindow(this.scene, 0, 0, 104, 132);
+      this.infoContainer = new PokemonInfoContainer(this.scene);
-      infoBg.setOrigin(0.5, 0.5);
+      this.infoContainer.setup();
-
-      this.infoContainer = this.scene.add.container(this.eggHatchBg.displayWidth + infoBg.width / 2, this.eggHatchBg.displayHeight / 2);
-
-      this.statsContainer = new StatsContainer(this.scene, -48, -64, true);
-
-      this.infoContainer.add(infoBg);
-      this.infoContainer.add(this.statsContainer);
-
-      const pokemonGenderLabelText = addTextObject(this.scene, -18, 20, 'Gender:', TextStyle.WINDOW, { fontSize: '64px' });
-      pokemonGenderLabelText.setOrigin(1, 0);
-      pokemonGenderLabelText.setVisible(false);
-      this.infoContainer.add(pokemonGenderLabelText);
-
-      const pokemonGenderText = addTextObject(this.scene, -14, 20, '', TextStyle.WINDOW, { fontSize: '64px' });
-      pokemonGenderText.setOrigin(0, 0);
-      pokemonGenderText.setVisible(false);
-      this.infoContainer.add(pokemonGenderText);
-
-      const pokemonAbilityLabelText = addTextObject(this.scene, -18, 30, 'Ability:', TextStyle.WINDOW, { fontSize: '64px' });
-      pokemonAbilityLabelText.setOrigin(1, 0);
-      this.infoContainer.add(pokemonAbilityLabelText);
-
-      const pokemonAbilityText = addTextObject(this.scene, -14, 30, '', TextStyle.WINDOW, { fontSize: '64px' });
-      pokemonAbilityText.setOrigin(0, 0);
-      this.infoContainer.add(pokemonAbilityText);
-
-      const pokemonNatureLabelText = addTextObject(this.scene, -18, 40, 'Nature:', TextStyle.WINDOW, { fontSize: '64px' });
-      pokemonNatureLabelText.setOrigin(1, 0);
-      this.infoContainer.add(pokemonNatureLabelText);
-
-      const pokemonNatureText = addBBCodeTextObject(this.scene, -14, 40, '', TextStyle.WINDOW, { fontSize: '64px', lineSpacing: 3, maxLines: 2 });
-      pokemonNatureText.setOrigin(0, 0);
-      this.infoContainer.add(pokemonNatureText);
 
       this.eggHatchContainer.add(this.infoContainer);
 
@@ -141,23 +103,6 @@ export class EggHatchPhase extends Phase {
       if (pokemon.fusionSpecies)
         pokemon.clearFusionSpecies();
 
-      if (pokemon.gender > Gender.GENDERLESS) {
-        pokemonGenderText.setText(getGenderSymbol(pokemon.gender));
-        pokemonGenderText.setColor(getGenderColor(pokemon.gender));
-        pokemonGenderText.setShadowColor(getGenderColor(pokemon.gender, true));
-        pokemonGenderLabelText.setVisible(true);
-        pokemonGenderText.setVisible(true);
-      }
-
-      pokemonAbilityText.setText(pokemon.getAbility(true).name);
-      pokemonNatureText.setText(getNatureName(pokemon.nature, true));
-
-      const originalIvs: integer[] = this.scene.gameData.dexData[pokemon.species.speciesId].caughtAttr
-        ? this.scene.gameData.dexData[pokemon.species.speciesId].ivs
-        : null;
-
-      this.statsContainer.updateIvs(pokemon.ivs, originalIvs);
-
       this.pokemonSprite.setVisible(false);
 
       this.pokemon = pokemon;
@@ -283,12 +228,7 @@ export class EggHatchPhase extends Phase {
           });
         }
         this.scene.time.delayedCall(Utils.fixedInt(!isShiny ? 1250 : 1750), () => {
-          this.scene.tweens.add({
+          this.infoContainer.show(this.pokemon);
-            targets: this.infoContainer,
-            duration: Utils.fixedInt(750),
-            ease: 'Cubic.easeInOut',
-            x: this.eggHatchBg.displayWidth - 52
-          });
 
           this.scene.playSoundWithoutBgm('evolution_fanfare');
           

src/phases.ts

@@ -3530,10 +3530,13 @@ export class AttemptCapturePhase extends PokemonPhase {
     if (pokemon.species.mythical)
       this.scene.validateAchv(achvs.CATCH_MYTHICAL);
 
+    this.scene.pokemonInfoContainer.show(pokemon, true);
+
     this.scene.gameData.updateSpeciesDexIvs(pokemon.species.speciesId, pokemon.ivs);
       
     this.scene.ui.showText(`${pokemon.name} was caught!`, null, () => {
       const end = () => {
+        this.scene.pokemonInfoContainer.hide();
         this.removePb();
         this.end();
       };

src/ui/pokemon-info-container.ts

@@ -0,0 +1,191 @@
+import BBCodeText from "phaser3-rex-plugins/plugins/bbcodetext";
+import BattleScene from "../battle-scene";
+import { Gender, getGenderColor, getGenderSymbol } from "../data/gender";
+import Pokemon from "../field/pokemon";
+import { StatsContainer } from "./stats-container";
+import { TextStyle, addBBCodeTextObject, addTextObject } from "./text";
+import { addWindow } from "./window";
+import { getNatureName } from "../data/nature";
+import * as Utils from "../utils";
+import { Type } from "../data/type";
+
+export default class PokemonInfoContainer extends Phaser.GameObjects.Container {
+  private pokemonGenderLabelText: Phaser.GameObjects.Text;
+  private pokemonGenderText: Phaser.GameObjects.Text;
+  private pokemonAbilityLabelText: Phaser.GameObjects.Text;
+  private pokemonAbilityText: Phaser.GameObjects.Text;
+  private pokemonNatureLabelText: Phaser.GameObjects.Text;
+  private pokemonNatureText: BBCodeText;
+  private pokemonMovesContainer: Phaser.GameObjects.Container;
+  private pokemonMovesContainers: Phaser.GameObjects.Container[];
+  private pokemonMoveBgs: Phaser.GameObjects.NineSlice[];
+  private pokemonMoveLabels: Phaser.GameObjects.Text[];
+
+  private initialX: number;
+
+  public statsContainer: StatsContainer;
+
+  public shown: boolean;
+
+  constructor(scene: BattleScene, x: number = 372, y: number = 66) {
+    super(scene, x, y);
+    this.initialX = x;
+  }
+
+  setup(): void {
+    const infoBg = addWindow(this.scene, 0, 0, 104, 132);
+    infoBg.setOrigin(0.5, 0.5);
+
+    this.pokemonMovesContainer = this.scene.add.container(6, 14);
+
+    this.pokemonMovesContainers = [];
+    this.pokemonMoveBgs = [];
+    this.pokemonMoveLabels = [];
+
+    const movesBg = addWindow(this.scene, 0, 0, 58, 52);
+    movesBg.setOrigin(1, 0);
+    this.pokemonMovesContainer.add(movesBg);
+
+    const movesLabel = addTextObject(this.scene, -movesBg.width / 2, 6, 'Moveset', TextStyle.WINDOW, { fontSize: '64px' });
+    movesLabel.setOrigin(0.5, 0);
+    this.pokemonMovesContainer.add(movesLabel);
+
+    for (let m = 0; m < 4; m++) {
+      const moveContainer = this.scene.add.container(-6, 18 + 7 * m);
+      moveContainer.setScale(0.5);
+
+      const moveBg = this.scene.add.nineslice(0, 0, 'type_bgs', 'unknown', 92, 14, 2, 2, 2, 2);
+      moveBg.setOrigin(1, 0);
+
+      const moveLabel = addTextObject(this.scene, -moveBg.width / 2, 0, '-', TextStyle.PARTY);
+      moveLabel.setOrigin(0.5, 0);
+
+      this.pokemonMoveBgs.push(moveBg);
+      this.pokemonMoveLabels.push(moveLabel);
+
+      moveContainer.add(moveBg);
+      moveContainer.add(moveLabel);
+
+      this.pokemonMovesContainers.push(moveContainer);
+      this.pokemonMovesContainer.add(moveContainer);
+    }
+
+    this.add(this.pokemonMovesContainer);
+
+    this.statsContainer = new StatsContainer(this.scene, -48, -64, true);
+
+    this.add(infoBg);
+    this.add(this.statsContainer);
+
+    this.pokemonGenderLabelText = addTextObject(this.scene, -18, 20, 'Gender:', TextStyle.WINDOW, { fontSize: '64px' });
+    this.pokemonGenderLabelText.setOrigin(1, 0);
+    this.pokemonGenderLabelText.setVisible(false);
+    this.add(this.pokemonGenderLabelText);
+
+    this.pokemonGenderText = addTextObject(this.scene, -14, 20, '', TextStyle.WINDOW, { fontSize: '64px' });
+    this.pokemonGenderText.setOrigin(0, 0);
+    this.pokemonGenderText.setVisible(false);
+    this.add(this.pokemonGenderText);
+
+    this.pokemonAbilityLabelText = addTextObject(this.scene, -18, 30, 'Ability:', TextStyle.WINDOW, { fontSize: '64px' });
+    this.pokemonAbilityLabelText.setOrigin(1, 0);
+    this.add(this.pokemonAbilityLabelText);
+
+    this.pokemonAbilityText = addTextObject(this.scene, -14, 30, '', TextStyle.WINDOW, { fontSize: '64px' });
+    this.pokemonAbilityText.setOrigin(0, 0);
+    this.add(this.pokemonAbilityText);
+
+    this.pokemonNatureLabelText = addTextObject(this.scene, -18, 40, 'Nature:', TextStyle.WINDOW, { fontSize: '64px' });
+    this.pokemonNatureLabelText.setOrigin(1, 0);
+    this.add(this.pokemonNatureLabelText);
+
+    this.pokemonNatureText = addBBCodeTextObject(this.scene, -14, 40, '', TextStyle.WINDOW, { fontSize: '64px', lineSpacing: 3, maxLines: 2 });
+    this.pokemonNatureText.setOrigin(0, 0);
+    this.add(this.pokemonNatureText);
+
+    this.setVisible(false);
+  }
+
+  show(pokemon: Pokemon, showMoves: boolean = false): Promise<void> {
+    return new Promise<void>(resolve => {
+      if (pokemon.gender > Gender.GENDERLESS) {
+        this.pokemonGenderText.setText(getGenderSymbol(pokemon.gender));
+        this.pokemonGenderText.setColor(getGenderColor(pokemon.gender));
+        this.pokemonGenderText.setShadowColor(getGenderColor(pokemon.gender, true));
+        this.pokemonGenderLabelText.setVisible(true);
+        this.pokemonGenderText.setVisible(true);
+      }
+
+      this.pokemonAbilityText.setText(pokemon.getAbility(true).name);
+      this.pokemonNatureText.setText(getNatureName(pokemon.nature, true));
+
+      const originalIvs: integer[] = this.scene.gameData.dexData[pokemon.species.speciesId].caughtAttr
+      ? this.scene.gameData.dexData[pokemon.species.speciesId].ivs
+      : null;
+
+      this.statsContainer.updateIvs(pokemon.ivs, originalIvs);
+
+      this.scene.tweens.add({
+        targets: this,
+        duration: Utils.fixedInt(750),
+        ease: 'Cubic.easeInOut',
+        x: this.initialX - 104,
+        onComplete: () => {
+          resolve();
+        }
+      });
+
+      if (showMoves) {
+        this.scene.tweens.add({
+          delay: Utils.fixedInt(325),
+          targets: this.pokemonMovesContainer,
+          duration: Utils.fixedInt(325),
+          ease: 'Cubic.easeInOut',
+          x: '-=57',
+          onComplete: () => resolve()
+        });
+      }
+
+      for (let m = 0; m < 4; m++) {
+        const move = m < pokemon.moveset.length ? pokemon.moveset[m].getMove() : null;
+        this.pokemonMoveBgs[m].setFrame(Type[move ? move.type : Type.UNKNOWN].toString().toLowerCase());
+        this.pokemonMoveLabels[m].setText(move ? move.name : '-');
+        this.pokemonMovesContainers[m].setVisible(!!move);
+      }
+
+      this.setVisible(true);
+      this.shown = true;
+    });
+  }
+
+  hide(): Promise<void> {
+    return new Promise(resolve => {
+      if (!this.shown)
+        return resolve();
+
+      this.scene.tweens.add({
+        targets: this.pokemonMovesContainer,
+        duration: Utils.fixedInt(750),
+        ease: 'Cubic.easeInOut',
+        x: '+=57'
+      });
+
+      this.scene.tweens.add({
+        targets: this,
+        duration: Utils.fixedInt(750),
+        ease: 'Cubic.easeInOut',
+        x: this.initialX,
+        onComplete: () => {
+          this.setVisible(false);
+          resolve();
+        }
+      });  
+
+      this.shown = false;
+    });
+  };
+}
+
+export default interface PokemonInfoContainer {
+  scene: BattleScene
+}