Using scrolling text in summary too

src/ui/move-info-overlay.ts

@@ -75,6 +75,7 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf
       3, // maxLineCount
       "", // initial content
       TextStyle.BATTLE_INFO,
+      !options?.hideBg,
     );
     this.desc.createMask(globalScene, this.x, this.y);
     this.add(this.desc);
@@ -129,10 +130,6 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf
       this.val.setVisible(false);
     }
 
-    if (options?.hideBg) {
-      this.desc.hideBg();
-    }
-
     // hide this component for now
     this.setVisible(false);
   }

src/ui/pokedex-info-overlay.ts

@@ -53,6 +53,7 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements
       3, // maxLineCount
       "", // initial content
       TextStyle.BATTLE_INFO,
+      true,
     );
     this.desc.createMask(globalScene, this.x, this.y);
     this.add(this.desc);

src/ui/scrolling-text.ts

@@ -14,8 +14,6 @@ which takes as input the _global_ coordinates of the parent. This is necessary t
  */
 
 const BORDER = 8;
-const DESC_X = BORDER;
-const DESC_Y = BORDER - 2;
 const SCALE_PROPERTY = 96 / 72 / 14.83;
 
 export default class ScrollingText extends Phaser.GameObjects.Container {
@@ -24,6 +22,9 @@ export default class ScrollingText extends Phaser.GameObjects.Container {
   private descScroll: Phaser.Tweens.Tween | null = null;
   private maxLineCount: number;
 
+  private offsetX: number;
+  private offsetY: number;
+
   constructor(
     scene: Phaser.Scene,
     x: number,
@@ -33,24 +34,29 @@ export default class ScrollingText extends Phaser.GameObjects.Container {
     maxLineCount: number,
     content: string,
     style: TextStyle,
+    hasBackground = false,
   ) {
     super(scene, x, y);
 
+    this.offsetX = hasBackground ? BORDER : 0;
+    this.offsetY = hasBackground ? BORDER - 2 : 0;
+
     // Adding the background
     this.descBg = addWindow(0, 0, width, height);
     this.descBg.setOrigin(0, 0);
-    this.descBg.setVisible(true);
+    this.descBg.setVisible(hasBackground);
     this.add(this.descBg);
 
     // Adding the text element
-    const wrapWidth = (width - (DESC_X - 2) * 2) * 6;
+    const wrapWidth = (width - (this.offsetX - 2) * 2) * 6;
 
-    this.text = addTextObject(DESC_X, DESC_Y, content, style, {
+    this.text = addTextObject(this.offsetX, this.offsetY, content, style, {
       wordWrap: {
         width: wrapWidth,
       },
     });
     this.maxLineCount = maxLineCount;
+    // TODO: change this based on which text is being used, etc
     this.text.setLineSpacing(i18next.resolvedLanguage === "ja" ? 25 : 5);
     this.add(this.text);
   }
@@ -59,11 +65,11 @@ export default class ScrollingText extends Phaser.GameObjects.Container {
     // Adding the mask for the scrolling effect
     const visibleX = parentX < 0 ? parentX + globalScene.scaledCanvas.width : parentX;
     const visibleY = parentY < 0 ? parentY + globalScene.scaledCanvas.height : parentY;
-    const globalMaskX = visibleX + this.x + DESC_X;
+    const globalMaskX = visibleX + this.x + this.offsetX;
-    const globalMaskY = visibleY + this.y + DESC_Y;
+    const globalMaskY = visibleY + this.y + this.offsetY;
 
-    const visibleWidth = this.descBg.width - (BORDER - 2) * 2;
+    const visibleWidth = this.descBg.width - (this.offsetX - 2) * 2;
-    const visibleHeight = this.descBg.height - (BORDER - 2) * 2;
+    const visibleHeight = this.descBg.height - this.offsetY * 2;
 
     const maskGraphics = scene.make.graphics({ x: 0, y: 0 });
     maskGraphics.fillRect(globalMaskX, globalMaskY, visibleWidth, visibleHeight);
@@ -79,10 +85,11 @@ export default class ScrollingText extends Phaser.GameObjects.Container {
     if (this.descScroll) {
       this.descScroll.remove();
       this.descScroll = null;
-      this.text.y = BORDER - 2;
+      this.text.y = this.offsetY;
     }
 
     // determine if we need to add new scrolling effects
+    // TODO: The scale property may need to be adjusted based on the height of the font
     const lineCount = Math.floor(this.text.displayHeight * SCALE_PROPERTY);
 
     if (lineCount > this.maxLineCount) {
@@ -97,8 +104,4 @@ export default class ScrollingText extends Phaser.GameObjects.Container {
       });
     }
   }
-
-  hideBg() {
-    this.descBg.setVisible(false);
-  }
 }

src/ui/summary-ui-handler.ts

@@ -40,6 +40,7 @@ import { getEnumValues } from "#utils/enums";
 import { toTitleCase } from "#utils/strings";
 import { argbFromRgba } from "@material/material-color-utilities";
 import i18next from "i18next";
+import ScrollingText from "./scrolling-text";
 
 enum Page {
   PROFILE,
@@ -61,7 +62,7 @@ interface abilityContainer {
   /** The text object displaying the name of the ability */
   nameText: Phaser.GameObjects.Text | null;
   /** The text object displaying the description of the ability */
-  descriptionText: Phaser.GameObjects.Text | null;
+  description: ScrollingText | null;
 }
 
 export class SummaryUiHandler extends UiHandler {
@@ -94,7 +95,7 @@ export class SummaryUiHandler extends UiHandler {
   private passiveContainer: abilityContainer;
   private summaryPageContainer: Phaser.GameObjects.Container;
   private movesContainer: Phaser.GameObjects.Container;
-  private moveDescriptionText: Phaser.GameObjects.Text;
+  private moveDescription: ScrollingText;
   private moveCursorObj: Phaser.GameObjects.Sprite | null;
   private selectedMoveCursorObj: Phaser.GameObjects.Sprite | null;
   private moveRowsContainer: Phaser.GameObjects.Container;
@@ -583,12 +584,12 @@ export class SummaryUiHandler extends UiHandler {
         } else if (this.cursor === Page.PROFILE && this.pokemon?.hasPassive()) {
           // if we're on the PROFILE page and this pokemon has a passive unlocked..
           // Since abilities are displayed by default, all we need to do is toggle visibility on all elements to show passives
-          this.abilityContainer.nameText?.setVisible(!this.abilityContainer.descriptionText?.visible);
+          this.abilityContainer.nameText?.setVisible(!this.abilityContainer.description?.visible);
-          this.abilityContainer.descriptionText?.setVisible(!this.abilityContainer.descriptionText.visible);
+          this.abilityContainer.description?.setVisible(!this.abilityContainer.description.visible);
           this.abilityContainer.labelImage.setVisible(!this.abilityContainer.labelImage.visible);
 
-          this.passiveContainer.nameText?.setVisible(!this.passiveContainer.descriptionText?.visible);
+          this.passiveContainer.nameText?.setVisible(!this.passiveContainer.description?.visible);
-          this.passiveContainer.descriptionText?.setVisible(!this.passiveContainer.descriptionText.visible);
+          this.passiveContainer.description?.setVisible(!this.passiveContainer.description.visible);
           this.passiveContainer.labelImage.setVisible(!this.passiveContainer.labelImage.visible);
         } else if (this.cursor === Page.STATS) {
           //Show IVs
@@ -668,7 +669,6 @@ export class SummaryUiHandler extends UiHandler {
       const selectedMove = this.getSelectedMove();
 
       if (selectedMove) {
-        this.moveDescriptionText.setY(84);
         this.movePowerText.setText(selectedMove.power >= 0 ? selectedMove.power.toString() : "---");
         this.moveAccuracyText.setText(selectedMove.accuracy >= 0 ? selectedMove.accuracy.toString() : "---");
         this.moveCategoryIcon.setFrame(MoveCategory[selectedMove.category].toLowerCase());
@@ -677,24 +677,9 @@ export class SummaryUiHandler extends UiHandler {
         this.hideMoveEffect();
       }
 
-      this.moveDescriptionText.setText(selectedMove?.effect || "");
+      this.moveDescription.text.setText(selectedMove?.effect || "");
-      const moveDescriptionLineCount = Math.floor(this.moveDescriptionText.displayHeight / 14.83);
 
-      if (this.descriptionScrollTween) {
+      this.moveDescription.activate();
-        this.descriptionScrollTween.remove();
-        this.descriptionScrollTween = null;
-      }
-
-      if (moveDescriptionLineCount > 3) {
-        this.descriptionScrollTween = globalScene.tweens.add({
-          targets: this.moveDescriptionText,
-          delay: fixedInt(2000),
-          loop: -1,
-          hold: fixedInt(2000),
-          duration: fixedInt((moveDescriptionLineCount - 3) * 2000),
-          y: `-=${14.83 * (moveDescriptionLineCount - 3)}`,
-        });
-      }
 
       if (!this.moveCursorObj) {
         this.moveCursorObj = globalScene.add.sprite(-2, 0, "summary_moves_cursor", "highlight");
@@ -888,7 +873,7 @@ export class SummaryUiHandler extends UiHandler {
           labelImage: globalScene.add.image(0, 0, "summary_profile_ability"),
           ability: this.pokemon?.getAbility(true)!, // TODO: is this bang correct?
           nameText: null,
-          descriptionText: null,
+          description: null,
         };
 
         const allAbilityInfo = [this.abilityContainer]; // Creates an array to iterate through
@@ -898,7 +883,7 @@ export class SummaryUiHandler extends UiHandler {
             labelImage: globalScene.add.image(0, 0, "summary_profile_passive"),
             ability: this.pokemon.getPassiveAbility(),
             nameText: null,
-            descriptionText: null,
+            description: null,
           };
           allAbilityInfo.push(this.passiveContainer);
 
@@ -924,42 +909,26 @@ export class SummaryUiHandler extends UiHandler {
           abilityInfo.nameText.setOrigin(0, 1);
           profileContainer.add(abilityInfo.nameText);
 
-          abilityInfo.descriptionText = addTextObject(7, 71, abilityInfo.ability?.description!, TextStyle.WINDOW_ALT, {
+          abilityInfo.description = new ScrollingText(
-            wordWrap: { width: 1224 },
+            globalScene,
-          }); // TODO: is this bang correct?
+            7,
-          abilityInfo.descriptionText.setOrigin(0, 0);
+            71,
-          profileContainer.add(abilityInfo.descriptionText);
+            206,
+            31,
+            2, // maxLineCount
+            abilityInfo.ability?.description!, // initial content
+            TextStyle.WINDOW_ALT,
+          );
+          abilityInfo.description.createMask(globalScene, 110 - 7, 90.5 - 71);
+          profileContainer.add(abilityInfo.description);
 
-          // Sets up the mask that hides the description text to give an illusion of scrolling
+          abilityInfo.description.activate();
-          const descriptionTextMaskRect = globalScene.make.graphics({});
-          descriptionTextMaskRect.setScale(6);
-          descriptionTextMaskRect.fillStyle(0xffffff);
-          descriptionTextMaskRect.beginPath();
-          descriptionTextMaskRect.fillRect(110, 90.5, 206, 31);
-
-          const abilityDescriptionTextMask = descriptionTextMaskRect.createGeometryMask();
-
-          abilityInfo.descriptionText.setMask(abilityDescriptionTextMask);
-
-          const abilityDescriptionLineCount = Math.floor(abilityInfo.descriptionText.displayHeight / 14.83);
-
-          // Animates the description text moving upwards
-          if (abilityDescriptionLineCount > 2) {
-            abilityInfo.descriptionText.setY(69);
-            this.descriptionScrollTween = globalScene.tweens.add({
-              targets: abilityInfo.descriptionText,
-              delay: fixedInt(2000),
-              loop: -1,
-              hold: fixedInt(2000),
-              duration: fixedInt((abilityDescriptionLineCount - 2) * 2000),
-              y: `-=${14.83 * (abilityDescriptionLineCount - 2)}`,
-            });
-          }
         });
+
         // Turn off visibility of passive info by default
         this.passiveContainer?.labelImage.setVisible(false);
         this.passiveContainer?.nameText?.setVisible(false);
-        this.passiveContainer?.descriptionText?.setVisible(false);
+        this.passiveContainer?.description?.setVisible(false);
 
         const closeFragment = getBBCodeFrag("", TextStyle.WINDOW_ALT);
         const rawNature = toTitleCase(Nature[this.pokemon?.getNature()!]); // TODO: is this bang correct?
@@ -1182,18 +1151,18 @@ export class SummaryUiHandler extends UiHandler {
           moveRowContainer.add(ppText);
         }
 
-        this.moveDescriptionText = addTextObject(2, 84, "", TextStyle.WINDOW_ALT, { wordWrap: { width: 1212 } });
+        this.moveDescription = new ScrollingText(
-        this.movesContainer.add(this.moveDescriptionText);
+          globalScene,
-
+          2,
-        const moveDescriptionTextMaskRect = globalScene.make.graphics({});
+          84,
-        moveDescriptionTextMaskRect.setScale(6);
+          202,
-        moveDescriptionTextMaskRect.fillStyle(0xffffff);
+          46,
-        moveDescriptionTextMaskRect.beginPath();
+          3, // maxLineCount
-        moveDescriptionTextMaskRect.fillRect(112, 130, 202, 46);
+          "", // initial content
-
+          TextStyle.WINDOW_ALT,
-        const moveDescriptionTextMask = moveDescriptionTextMaskRect.createGeometryMask();
+        );
-
+        this.moveDescription.createMask(globalScene, 112 - 2, 130 - 84);
-        this.moveDescriptionText.setMask(moveDescriptionTextMask);
+        this.movesContainer.add(this.moveDescription);
         break;
       }
     }
@@ -1255,7 +1224,7 @@ export class SummaryUiHandler extends UiHandler {
 
     this.moveSelect = false;
     this.extraMoveRowContainer.setVisible(false);
-    this.moveDescriptionText.setText("");
+    this.moveDescription.text.setText("");
 
     this.destroyBlinkCursor();
     this.hideMoveEffect();