Add move description text scrolling and summary sprite

src/pokemon.ts

@@ -159,13 +159,18 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
       Promise.allSettled(moveIds.map(m => initAnim(m)))
         .then(() => {
           loadMoveAnimAssets(this.scene as BattleScene, moveIds);
-          (this.scene as BattleScene).loadAtlas(this.getSpriteKey(), 'pokemon', this.getAtlasPath());
+          (this.scene as BattleScene).loadAtlas(this.getSpriteKey(), 'pokemon', this.getSpriteAtlasPath());
+          if (this.isPlayer())
+            (this.scene as BattleScene).loadAtlas(this.getBattleSpriteKey(), 'pokemon', this.getBattleSpriteAtlasPath());
           this.scene.load.audio(this.species.speciesId.toString(), `audio/cry/${this.species.speciesId}.mp3`);
           this.scene.load.once(Phaser.Loader.Events.COMPLETE, () => {
             const originalWarn = console.warn;
             // Ignore warnings for missing frames, because there will be a lot
             console.warn = () => {};
             const frameNames = this.scene.anims.generateFrameNames(this.getSpriteKey(), { zeroPad: 4, suffix: ".png", start: 1, end: 256 });
+            const battleFrameNames = this.isPlayer()
+              ? this.scene.anims.generateFrameNames(this.getBattleSpriteKey(), { zeroPad: 4, suffix: ".png", start: 1, end: 256 })
+              : null;
             console.warn = originalWarn;
             this.scene.anims.create({
               key: this.getSpriteKey(),
@@ -173,6 +178,14 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
               frameRate: 12,
               repeat: -1
             });
+            if (this.isPlayer()) {
+              this.scene.anims.create({
+                key: this.getBattleSpriteKey(),
+                frames: battleFrameNames,
+                frameRate: 12,
+                repeat: -1
+              });
+            }
             this.playAnim();
             resolve();
           });
@@ -182,18 +195,30 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
     });
   }
 
-  getAtlasPath(): string {
+  getSpriteAtlasPath(): string {
     return this.getSpriteId().replace(/\_{2}/g, '/');
   }
 
+  getBattleSpriteAtlasPath(): string {
+    return this.getBattleSpriteId().replace(/\_{2}/g, '/');
+  }
+
   getSpriteId(): string {
-    return `${this.isPlayer() ? 'back__' : ''}${this.shiny ? 'shiny__' : ''}${this.species.genderDiffs && !this.gender ? 'female__' : ''}${this.species.speciesId}`;
+    return `${this.shiny ? 'shiny__' : ''}${this.species.genderDiffs && !this.gender ? 'female__' : ''}${this.species.speciesId}`;
+  }
+
+  getBattleSpriteId(): string {
+    return `${this.isPlayer() ? 'back__' : ''}${this.getSpriteId()}`;
   }
 
   getSpriteKey(): string {
     return `pkmn__${this.getSpriteId()}`;
   }
 
+  getBattleSpriteKey(): string {
+    return `pkmn__${this.getBattleSpriteId()}`;
+  }
+
   getIconAtlasKey(): string {
     return `pokemon_icons_${this.species.generation}`;
   }
@@ -219,9 +244,9 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
   }
 
   playAnim() {
-    this.getSprite().play(this.getSpriteKey());
+    this.getSprite().play(this.getBattleSpriteKey());
-    this.getTintSprite().play(this.getSpriteKey());
+    this.getTintSprite().play(this.getBattleSpriteKey());
-    this.getZoomSprite().play(this.getSpriteKey());
+    this.getZoomSprite().play(this.getBattleSpriteKey());
   }
 
   calculateStats() {

src/ui/summary-ui-handler.ts

@@ -21,6 +21,7 @@ export default class SummaryUiHandler extends UiHandler {
   private summaryUiMode: SummaryUiMode;
 
   private summaryContainer: Phaser.GameObjects.Container;
+  private pokemonSprite: Phaser.GameObjects.Sprite;
   private summaryPageContainer: Phaser.GameObjects.Container;
   private movesContainer: Phaser.GameObjects.Container;
   private moveDescriptionText: Phaser.GameObjects.Text;
@@ -30,6 +31,7 @@ export default class SummaryUiHandler extends UiHandler {
   private extraMoveRowContainer: Phaser.GameObjects.Container;
   private summaryPageTransitionContainer: Phaser.GameObjects.Container;
 
+  private moveDescriptionScrollTween: Phaser.Tweens.Tween;
   private moveCursorBlinkTimer: Phaser.Time.TimerEvent;
 
   private pokemon: PlayerPokemon;
@@ -56,6 +58,9 @@ export default class SummaryUiHandler extends UiHandler {
     summaryBg.setOrigin(0, 1);
     this.summaryContainer.add(summaryBg);
 
+    this.pokemonSprite = this.scene.add.sprite(56, -106, `pkmn__sub`);
+    this.summaryContainer.add(this.pokemonSprite);
+
     const getSummaryPageBg = () => {
       const ret = this.scene.add.sprite(0, 0, this.getPageKey(0));
       ret.setOrigin(0, 1);
@@ -85,6 +90,7 @@ export default class SummaryUiHandler extends UiHandler {
     this.summaryContainer.setVisible(true);
     this.cursor = -1;
 
+    this.pokemonSprite.play(this.pokemon.getSpriteKey());
     this.pokemon.cry();
 
     switch (this.summaryUiMode) {
@@ -116,9 +122,10 @@ export default class SummaryUiHandler extends UiHandler {
           if (this.summaryUiMode === SummaryUiMode.LEARN_MOVE)
             this.moveSelectFunction(this.moveCursor);
           else {
-            if (this.selectedMoveIndex === -1)
+            if (this.selectedMoveIndex === -1) {
               this.selectedMoveIndex = this.moveCursor;
-            else {
+              this.setCursor(this.moveCursor);
+            } else {
               if (this.selectedMoveIndex !== this.moveCursor) {
                 const tempMove = this.pokemon.moveset[this.selectedMoveIndex];
                 this.pokemon.moveset[this.selectedMoveIndex] = this.pokemon.moveset[this.moveCursor];
@@ -198,6 +205,27 @@ export default class SummaryUiHandler extends UiHandler {
         const selectedMove = this.getSelectedMove();
 
         this.moveDescriptionText.setText(selectedMove?.effect || '');
+        const moveDescriptionLineCount = Math.floor(this.moveDescriptionText.displayHeight / 14.83);
+
+        if (this.moveDescriptionScrollTween) {
+          this.moveDescriptionScrollTween.remove();
+          this.moveDescriptionScrollTween = null;
+        }
+
+        if (moveDescriptionLineCount > 3) {
+          this.moveDescriptionText.setY(84);
+          this.moveDescriptionScrollTween = this.scene.tweens.add({
+            targets: this.moveDescriptionText,
+            delay: 2000,
+            loop: -1,
+            loopDelay: 2000,
+            duration: (moveDescriptionLineCount - 3) * 2000,
+            y: `-=${14.83 * (moveDescriptionLineCount - 3)}`,
+            onLoop: () => {
+              this.moveDescriptionText.setY(84);
+            }
+          });
+        }
       }
 
       if (!this.moveCursorObj) {
@@ -210,6 +238,7 @@ export default class SummaryUiHandler extends UiHandler {
 
       if (this.moveCursorBlinkTimer)
         this.moveCursorBlinkTimer.destroy();
+      this.moveCursorObj.setVisible(true);
       this.moveCursorBlinkTimer = this.scene.time.addEvent({
         loop: true,
         delay: 600,
@@ -321,15 +350,14 @@ export default class SummaryUiHandler extends UiHandler {
         this.movesContainer.add(this.moveDescriptionText);
 
         const maskRect = this.scene.make.graphics({});
+        maskRect.setScale(6);
         maskRect.fillStyle(0xFFFFFF);
         maskRect.beginPath();
-        maskRect.fillRect(2, 83, 149, 46);
+        maskRect.fillRect(112, 130, 150, 46);
 
         const moveDescriptionTextMask = maskRect.createGeometryMask();
 
         this.moveDescriptionText.setMask(moveDescriptionTextMask);
-
-        console.log(this.moveDescriptionText.displayHeight);
         break;
     }
   }