mika/pokerogue
1
0
Fork 0
mirror of https://github.com/pagefaultgames/pokerogue.git synced 2025-08-19 22:09:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Reduced variables to the minimum

Browse Source
This commit is contained in:
Wlowscha 2025-08-17 15:35:45 +02:00
parent 96bc26880b
commit 0c4a96cec5
No known key found for this signature in database
GPG Key ID: 3C8F1AD330565D04
3 changed files with 74 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/ui/move-info-overlay.ts
View File

@ -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
descY, // Container local y
globalMaskX, // Global mask X
globalMaskY, // Global mask Y
visibleWidth, // Mask width (unscaled)
visibleHeight, // Mask height (already scaled)
descBoxX,
descBoxY,
descBoxWidth,
descBoxHeight,
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() : "---");

100
src/ui/pokedex-info-overlay.ts
View File

@ -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.descBg = addWindow(0, 0, this.width, DESC_HEIGHT);
this.descBg.setOrigin(0, 0);
this.add(this.descBg);
// set up the description; wordWrap uses true pixels, unaffected by any scaling, while other values are affected
this.desc = addTextObject(BORDER, BORDER - 2, "", TextStyle.BATTLE_INFO, {
wordWrap: { width: (this.width - (BORDER - 2) * 2) * GLOBAL_SCALE },
});
// 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.desc = new ScrollingText(
globalScene,
descBoxX,
descBoxY,
descBoxWidth,
descBoxHeight,
3, // maxLineCount
"", // initial content
TextStyle.BATTLE_INFO,
);
this.textMaskRect.setScale(6);
const textMask = this.createGeometryMask(this.textMaskRect);
this.desc.createMask(globalScene, this.x, this.y);
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.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)}`,
});
}
this.desc.activate();
if (!this.options.delayVisibility) {
this.setVisible(true);

64
src/ui/scrolling-text.ts
View File

@ -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,
globalMaskY: number,
visibleWidth: number,
visibleHeight: number,
width: number,
height: 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);
}
}