Reduced variables to the minimum

src/ui/move-info-overlay.ts

@@ -36,15 +36,11 @@ export interface MoveInfoOverlaySettings {
 const EFF_HEIGHT = 48;
 const EFF_WIDTH = 82;
 const DESC_HEIGHT = 48;
-const BORDER = 8;
 
 export class MoveInfoOverlay extends Phaser.GameObjects.Container implements InfoToggle {
   public active = false;
 
-  private move: Move;
-
   private desc: ScrollingText;
-  private descScroll: Phaser.Tweens.Tween | null = null;
 
   private val: Phaser.GameObjects.Container;
   private pp: Phaser.GameObjects.Text;
@@ -52,7 +48,6 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf
   private acc: Phaser.GameObjects.Text;
   private typ: Phaser.GameObjects.Sprite;
   private cat: Phaser.GameObjects.Sprite;
-  private descBg: Phaser.GameObjects.NineSlice;
 
   private options: MoveInfoOverlaySettings;
 
@@ -66,50 +61,22 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf
 
     const descBoxX = options?.onSide && !options?.right ? EFF_WIDTH : 0;
     const descBoxY = options?.top ? EFF_HEIGHT : 0;
-    // we always want this to be half a window wide
     const width = options?.width || MoveInfoOverlay.getWidth();
     const descBoxWidth = width - (options?.onSide ? EFF_WIDTH : 0);
     const descBoxHeight = DESC_HEIGHT;
 
     // prepare the description box
-    this.descBg = addWindow(descBoxX, descBoxY, descBoxWidth, descBoxHeight);
-    this.descBg.setOrigin(0, 0);
-    this.add(this.descBg);
-
-    const x = options?.x || 0;
-    const y = options?.y || 0;
-    const descX = (options?.onSide && !options?.right ? EFF_WIDTH : 0) + BORDER;
-    const descY = (options?.top ? EFF_HEIGHT : 0) + BORDER - 2;
-
-    const visibleX = x < 0 ? x + globalScene.scaledCanvas.width : x;
-    const visibleY = y < 0 ? y + globalScene.scaledCanvas.height : y;
-
-    const globalMaskX = visibleX + descX;
-    const globalMaskY = visibleY + descY;
-    const wrapWidth = (descBoxWidth - (BORDER - 2) * 2) * 6;
-    const visibleWidth = descBoxWidth - (BORDER - 2) * 2;
-    const visibleHeight = DESC_HEIGHT - (BORDER - 2) * 2;
-
-    // set up the description; wordWrap uses true pixels, unaffected by any scaling, while other values are affected
     this.desc = new ScrollingText(
       globalScene,
-      descX, // Container local x
+      descBoxX,
-      descY, // Container local y
+      descBoxY,
-      globalMaskX, // Global mask X
+      descBoxWidth,
-      globalMaskY, // Global mask Y
+      descBoxHeight,
-      visibleWidth, // Mask width (unscaled)
-      visibleHeight, // Mask height (already scaled)
       3, // maxLineCount
-      96 / 72 / 14.83, // scale_property
       "", // initial content
       TextStyle.BATTLE_INFO,
-      {
-        wordWrap: {
-          width: wrapWidth,
-        },
-      },
     );
-    this.desc.text.setLineSpacing(i18next.resolvedLanguage === "ja" ? 25 : 5);
+    this.desc.createMask(globalScene, this.x, this.y);
     this.add(this.desc);
 
     // prepare the effect box
@@ -163,7 +130,7 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf
     }
 
     if (options?.hideBg) {
-      this.descBg.setVisible(false);
+      this.desc.hideBg();
     }
 
     // hide this component for now
@@ -175,7 +142,6 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf
     if (!globalScene.enableMoveInfo) {
       return false; // move infos have been disabled // TODO:: is `false` correct? i used to be `undeefined`
     }
-    this.move = move;
     this.pow.setText(move.power >= 0 ? move.power.toString() : "---");
     this.acc.setText(move.accuracy >= 0 ? move.accuracy.toString() : "---");
     this.pp.setText(move.pp >= 0 ? move.pp.toString() : "---");

src/ui/pokedex-info-overlay.ts

@@ -1,9 +1,8 @@
 import type { InfoToggle } from "#app/battle-scene";
 import { globalScene } from "#app/global-scene";
 import { TextStyle } from "#enums/text-style";
-import { addTextObject } from "#ui/text";
-import { addWindow } from "#ui/ui-theme";
 import { fixedInt } from "#utils/common";
+import ScrollingText from "./scrolling-text";
 
 export interface PokedexInfoOverlaySettings {
   delayVisibility?: boolean; // if true, showing the overlay will only set it to active and populate the fields and the handler using this field has to manually call setVisible later.
@@ -14,17 +13,14 @@ export interface PokedexInfoOverlaySettings {
   width?: number;
   /** Determines whether to display the small secondary box */
   hideEffectBox?: boolean;
-  hideBg?: boolean;
 }
 
 const DESC_HEIGHT = 48;
-const BORDER = 8;
-const GLOBAL_SCALE = 6;
 
 export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements InfoToggle {
   public active = false;
 
-  private desc: Phaser.GameObjects.Text;
+  private desc: ScrollingText;
   private descScroll: Phaser.Tweens.Tween | null = null;
 
   private descBg: Phaser.GameObjects.NineSlice;
@@ -35,52 +31,31 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements
 
   private maskPointOriginX: number;
   private maskPointOriginY: number;
-  public width: number;
 
   constructor(options?: PokedexInfoOverlaySettings) {
     super(globalScene, options?.x, options?.y);
     this.setScale(1);
     this.options = options || {};
 
+    const descBoxX = 0;
+    const descBoxY = 0;
+    const width = options?.width || PokedexInfoOverlay.getWidth();
+    const descBoxWidth = width;
+    const descBoxHeight = DESC_HEIGHT;
+
     // prepare the description box
-    this.width = options?.width || PokedexInfoOverlay.getWidth(); // we always want this to be half a window wide
+    this.desc = new ScrollingText(
-    this.descBg = addWindow(0, 0, this.width, DESC_HEIGHT);
+      globalScene,
-    this.descBg.setOrigin(0, 0);
+      descBoxX,
-    this.add(this.descBg);
+      descBoxY,
-
+      descBoxWidth,
-    // set up the description; wordWrap uses true pixels, unaffected by any scaling, while other values are affected
+      descBoxHeight,
-    this.desc = addTextObject(BORDER, BORDER - 2, "", TextStyle.BATTLE_INFO, {
+      3, // maxLineCount
-      wordWrap: { width: (this.width - (BORDER - 2) * 2) * GLOBAL_SCALE },
+      "", // initial content
-    });
+      TextStyle.BATTLE_INFO,
-
-    // limit the text rendering, required for scrolling later on
-    this.maskPointOriginX = options?.x || 0;
-    this.maskPointOriginY = options?.y || 0;
-
-    if (this.maskPointOriginX < 0) {
-      this.maskPointOriginX += globalScene.scaledCanvas.width;
-    }
-    if (this.maskPointOriginY < 0) {
-      this.maskPointOriginY += globalScene.scaledCanvas.height;
-    }
-
-    this.textMaskRect = globalScene.make.graphics();
-    this.textMaskRect.fillStyle(0xff0000);
-    this.textMaskRect.fillRect(
-      this.maskPointOriginX + BORDER,
-      this.maskPointOriginY + (BORDER - 2),
-      this.width - BORDER * 2,
-      DESC_HEIGHT - (BORDER - 2) * 2,
     );
-    this.textMaskRect.setScale(6);
+    this.desc.createMask(globalScene, this.x, this.y);
-    const textMask = this.createGeometryMask(this.textMaskRect);
-
     this.add(this.desc);
-    this.desc.setMask(textMask);
-
-    if (options?.hideBg) {
-      this.descBg.setVisible(false);
-    }
 
     // hide this component for now
     this.setVisible(false);
@@ -92,45 +67,10 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements
       return false; // move infos have been disabled // TODO:: is `false` correct? i used to be `undeefined`
     }
 
-    this.desc.setText(text ?? "");
+    this.desc.text.setText(text ?? "");
 
     // stop previous scrolling effects and reset y position
-    if (this.descScroll) {
+    this.desc.activate();
-      this.descScroll.remove();
-      this.descScroll = null;
-      this.desc.y = BORDER - 2;
-    }
-
-    // determine if we need to add new scrolling effects
-    const lineCount = Math.floor((this.desc.displayHeight * (96 / 72)) / 14.83);
-
-    const newHeight = lineCount >= 3 ? 48 : lineCount === 2 ? 36 : 24;
-    this.textMaskRect.clear();
-    this.textMaskRect.fillStyle(0xff0000);
-    this.textMaskRect.fillRect(
-      this.maskPointOriginX + BORDER,
-      this.maskPointOriginY + (BORDER - 2) + (48 - newHeight),
-      this.width - BORDER * 2,
-      newHeight - (BORDER - 2) * 2,
-    );
-    const updatedMask = this.createGeometryMask(this.textMaskRect);
-    this.desc.setMask(updatedMask);
-
-    this.descBg.setSize(this.descBg.width, newHeight);
-    this.descBg.setY(48 - newHeight);
-    this.desc.setY(BORDER - 2 + (48 - newHeight));
-
-    if (lineCount > 3) {
-      // generate scrolling effects
-      this.descScroll = globalScene.tweens.add({
-        targets: this.desc,
-        delay: fixedInt(2000),
-        loop: -1,
-        hold: fixedInt(2000),
-        duration: fixedInt((lineCount - 3) * 2000),
-        y: `-=${14.83 * (72 / 96) * (lineCount - 3)}`,
-      });
-    }
 
     if (!this.options.delayVisibility) {
       this.setVisible(true);

src/ui/scrolling-text.ts

@@ -1,47 +1,75 @@
 import { globalScene } from "#app/global-scene";
 import { fixedInt } from "#app/utils/common";
 import type { TextStyle } from "#enums/text-style";
+import i18next from "i18next";
 import { addTextObject } from "./text";
+import { addWindow } from "./ui-theme";
 
 /*
+This takes various coordinates:
+- The x and y coordinates relative to the parent container, this is typical behavior for Phaser.GameObjects.Container.
+- The width and height of the box; these are needed to create the background.
+The mask is not created right away (although this is possible in principle). Instead, we have a separate function,
+which takes as input the _global_ coordinates of the parent. This is necessary to correctly position the mask in the scene.
  */
 
+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 {
+  private descBg: Phaser.GameObjects.NineSlice;
   public text: Phaser.GameObjects.Text;
   private descScroll: Phaser.Tweens.Tween | null = null;
   private maxLineCount: number;
-  private scale_property: number;
 
   constructor(
     scene: Phaser.Scene,
     x: number,
     y: number,
-    globalMaskX: number,
+    width: number,
-    globalMaskY: number,
+    height: number,
-    visibleWidth: number,
-    visibleHeight: number,
     maxLineCount: number,
-    scale_property: number,
     content: string,
     style: TextStyle,
-    extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle,
   ) {
     super(scene, x, y);
 
-    this.text = addTextObject(0, 0, content, style, extraStyleOptions);
+    // Adding the background
+    this.descBg = addWindow(0, 0, width, height);
+    this.descBg.setOrigin(0, 0);
+    this.descBg.setVisible(true);
+    this.add(this.descBg);
+
+    // Adding the text element
+    const wrapWidth = (width - (DESC_X - 2) * 2) * 6;
+
+    this.text = addTextObject(DESC_X, DESC_Y, content, style, {
+      wordWrap: {
+        width: wrapWidth,
+      },
+    });
     this.maxLineCount = maxLineCount;
-    this.scale_property = scale_property;
+    this.text.setLineSpacing(i18next.resolvedLanguage === "ja" ? 25 : 5);
     this.add(this.text);
+  }
+
+  createMask(scene: Phaser.Scene, parentX: number, parentY: number) {
+    // 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 globalMaskY = visibleY + this.y + DESC_Y;
+
+    const visibleWidth = this.descBg.width - (BORDER - 2) * 2;
+    const visibleHeight = this.descBg.height - (BORDER - 2) * 2;
 
     const maskGraphics = scene.make.graphics({ x: 0, y: 0 });
-    //TODO: Remove, this line is for testing
-    maskGraphics.fillStyle(0xffffff);
     maskGraphics.fillRect(globalMaskX, globalMaskY, visibleWidth, visibleHeight);
-
     maskGraphics.setScale(6);
 
     scene.add.existing(maskGraphics);
-
     const mask = this.createGeometryMask(maskGraphics);
     this.text.setMask(mask);
   }
@@ -51,11 +79,11 @@ export default class ScrollingText extends Phaser.GameObjects.Container {
     if (this.descScroll) {
       this.descScroll.remove();
       this.descScroll = null;
-      this.text.y = 0;
+      this.text.y = BORDER - 2;
     }
 
     // determine if we need to add new scrolling effects
-    const lineCount = Math.floor(this.text.displayHeight * this.scale_property);
+    const lineCount = Math.floor(this.text.displayHeight * SCALE_PROPERTY);
 
     if (lineCount > this.maxLineCount) {
       // generate scrolling effects
@@ -65,8 +93,12 @@ export default class ScrollingText extends Phaser.GameObjects.Container {
         loop: -1,
         hold: fixedInt(2000),
         duration: fixedInt((lineCount - this.maxLineCount) * 2000),
-        y: `-=${(lineCount - this.maxLineCount) / this.scale_property}`,
+        y: `-=${(lineCount - this.maxLineCount) / SCALE_PROPERTY}`,
       });
     }
   }
+
+  hideBg() {
+    this.descBg.setVisible(false);
+  }
 }