diff --git a/src/ui/move-info-overlay.ts b/src/ui/move-info-overlay.ts index d65602b5f88..9726f9c5ae3 100644 --- a/src/ui/move-info-overlay.ts +++ b/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); } diff --git a/src/ui/pokedex-info-overlay.ts b/src/ui/pokedex-info-overlay.ts index a46b94198df..9bfb531a060 100644 --- a/src/ui/pokedex-info-overlay.ts +++ b/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); diff --git a/src/ui/scrolling-text.ts b/src/ui/scrolling-text.ts index 9f5eeaaea1c..a76530ae7c5 100644 --- a/src/ui/scrolling-text.ts +++ b/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 globalMaskY = visibleY + this.y + DESC_Y; + const globalMaskX = visibleX + this.x + this.offsetX; + const globalMaskY = visibleY + this.y + this.offsetY; - const visibleWidth = this.descBg.width - (BORDER - 2) * 2; - const visibleHeight = this.descBg.height - (BORDER - 2) * 2; + const visibleWidth = this.descBg.width - (this.offsetX - 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); - } } diff --git a/src/ui/summary-ui-handler.ts b/src/ui/summary-ui-handler.ts index b6ce0a706f8..689f691f62b 100644 --- a/src/ui/summary-ui-handler.ts +++ b/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.descriptionText?.setVisible(!this.abilityContainer.descriptionText.visible); + this.abilityContainer.nameText?.setVisible(!this.abilityContainer.description?.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.descriptionText?.setVisible(!this.passiveContainer.descriptionText.visible); + this.passiveContainer.nameText?.setVisible(!this.passiveContainer.description?.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 || ""); - const moveDescriptionLineCount = Math.floor(this.moveDescriptionText.displayHeight / 14.83); + this.moveDescription.text.setText(selectedMove?.effect || ""); - if (this.descriptionScrollTween) { - 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)}`, - }); - } + this.moveDescription.activate(); 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, { - wordWrap: { width: 1224 }, - }); // TODO: is this bang correct? - abilityInfo.descriptionText.setOrigin(0, 0); - profileContainer.add(abilityInfo.descriptionText); + abilityInfo.description = new ScrollingText( + globalScene, + 7, + 71, + 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 - 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)}`, - }); - } + abilityInfo.description.activate(); }); + // 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.movesContainer.add(this.moveDescriptionText); - - const moveDescriptionTextMaskRect = globalScene.make.graphics({}); - moveDescriptionTextMaskRect.setScale(6); - moveDescriptionTextMaskRect.fillStyle(0xffffff); - moveDescriptionTextMaskRect.beginPath(); - moveDescriptionTextMaskRect.fillRect(112, 130, 202, 46); - - const moveDescriptionTextMask = moveDescriptionTextMaskRect.createGeometryMask(); - - this.moveDescriptionText.setMask(moveDescriptionTextMask); + this.moveDescription = new ScrollingText( + globalScene, + 2, + 84, + 202, + 46, + 3, // maxLineCount + "", // initial content + TextStyle.WINDOW_ALT, + ); + this.moveDescription.createMask(globalScene, 112 - 2, 130 - 84); + 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();