diff --git a/src/field/pokemon.ts b/src/field/pokemon.ts index 0a5e0a6a991..4b9a3af9f3a 100644 --- a/src/field/pokemon.ts +++ b/src/field/pokemon.ts @@ -48,6 +48,7 @@ import { BerryType } from '../data/berry'; import i18next from '../plugins/i18n'; import { speciesEggMoves } from '../data/egg-moves'; import { ModifierTier } from '../modifier/modifier-tier'; +import BattleFlyout, { EnemyBattleFlyout, PlayerBattleFlyout } from '#app/ui/battle-flyout.js'; export enum FieldPosition { CENTER, @@ -66,6 +67,7 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container { public variant: Variant; public pokeball: PokeballType; protected battleInfo: BattleInfo; + protected battleFlyout: BattleFlyout; public level: integer; public exp: integer; public levelExp: integer; @@ -215,7 +217,16 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container { this.initBattleInfo(); + this.scene.fieldUI.addAt(this.battleFlyout, 0); this.scene.fieldUI.addAt(this.battleInfo, 0); + this.scene.fieldUI.moveBelow(this.battleFlyout, this.battleInfo); + this.scene.fieldUI.moveDown(this.battleFlyout); + this.scene.fieldUI.moveDown(this.battleFlyout); + this.scene.fieldUI.moveDown(this.battleFlyout); + this.scene.fieldUI.moveDown(this.battleFlyout); + this.scene.fieldUI.moveDown(this.battleFlyout); + this.scene.fieldUI.moveDown(this.battleFlyout); + const getSprite = (hasShadow?: boolean) => { const ret = this.scene.addPokemonSprite(this, 0, 0, `pkmn__${this.isPlayer() ? 'back__' : ''}sub`, undefined, true); @@ -523,6 +534,9 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container { this.battleInfo.setMini(fieldPosition !== FieldPosition.CENTER); this.battleInfo.setOffset(fieldPosition === FieldPosition.RIGHT); + this.battleFlyout.setMini(fieldPosition !== FieldPosition.CENTER); + this.battleFlyout.setOffset(fieldPosition === FieldPosition.RIGHT); + const newOffset = this.getFieldPositionOffset(); let relX = newOffset[0] - initialOffset[0]; @@ -1349,25 +1363,51 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container { ease: 'Cubic.easeOut' }); } + if (!this.battleFlyout.visible) { + this.battleFlyout.setX(this.battleFlyout.x + (this.isPlayer() ? 150 : !this.isBoss() ? -150 : -198)); + this.battleFlyout.setVisible(true); + this.scene.tweens.add({ + targets: this.battleFlyout, + x: this.isPlayer() ? '-=150' : `+=${!this.isBoss() ? 150 : 246}`, + duration: 1000, + ease: 'Cubic.easeOut' + }); + } } hideInfo(): Promise { return new Promise(resolve => { - if (this.battleInfo.visible) { - this.scene.tweens.add({ - targets: [ this.battleInfo, this.battleInfo.expMaskRect ], - x: this.isPlayer() ? '+=150' : `-=${!this.isBoss() ? 150 : 246}`, - duration: 500, - ease: 'Cubic.easeIn', - onComplete: () => { - if (this.isPlayer()) - this.battleInfo.expMaskRect.x -= 150; - this.battleInfo.setVisible(false); - this.battleInfo.setX(this.battleInfo.x - (this.isPlayer() ? 150 : !this.isBoss() ? -150 : -198)); - resolve(); - } - }); - } else + if (this.battleInfo.visible || this.battleFlyout.visible) { + if (this.battleInfo.visible) { + this.scene.tweens.add({ + targets: [ this.battleInfo, this.battleInfo.expMaskRect ], + x: this.isPlayer() ? '+=150' : `-=${!this.isBoss() ? 150 : 246}`, + duration: 500, + ease: 'Cubic.easeIn', + onComplete: () => { + if (this.isPlayer()) + this.battleInfo.expMaskRect.x -= 150; + this.battleInfo.setVisible(false); + this.battleInfo.setX(this.battleInfo.x - (this.isPlayer() ? 150 : !this.isBoss() ? -150 : -198)); + resolve(); + } + }); + } + /* if(this.battleFlyout.visible) { + this.scene.tweens.add({ + targets: this.battleFlyout, + x: this.isPlayer() ? '+=150' : `-=${!this.isBoss() ? 150 : 246}`, + duration: 500, + ease: 'Cubic.easeIn', + onComplete: () => { + this.battleFlyout.setVisible(false); + this.battleFlyout.setX(this.battleFlyout.x - (this.isPlayer() ? 150 : !this.isBoss() ? -150 : -198)); + resolve(); + } + }); + } */ + } + else resolve(); }); } @@ -1378,6 +1418,7 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container { toggleStats(visible: boolean): void { this.battleInfo.toggleStats(visible); + this.battleFlyout.toggleFlyout(visible); } addExp(exp: integer) { @@ -2513,6 +2554,7 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container { destroy(): void { this.battleInfo?.destroy(); + this.battleFlyout?.destroy(); super.destroy(); } } @@ -2542,6 +2584,9 @@ export class PlayerPokemon extends Pokemon { initBattleInfo(): void { this.battleInfo = new PlayerBattleInfo(this.scene); this.battleInfo.initInfo(this); + + this.battleFlyout = new PlayerBattleFlyout(this.scene); + this.battleFlyout.initInfo(this); } isPlayer(): boolean { @@ -2915,6 +2960,9 @@ export class EnemyPokemon extends Pokemon { this.battleInfo = new EnemyBattleInfo(this.scene); this.battleInfo.updateBossSegments(this); this.battleInfo.initInfo(this); + + this.battleFlyout = new EnemyBattleFlyout(this.scene); + this.battleFlyout.initInfo(this); } else this.battleInfo.updateBossSegments(this); } diff --git a/src/ui/battle-flyout.ts b/src/ui/battle-flyout.ts new file mode 100644 index 00000000000..76134760229 --- /dev/null +++ b/src/ui/battle-flyout.ts @@ -0,0 +1,119 @@ +import Pokemon from "#app/field/pokemon.js"; +import { addTextObject, TextStyle } from "./text"; +import * as Utils from '../utils'; + +export default class BattleFlyout extends Phaser.GameObjects.Container { + private player: boolean; + private mini: boolean; + private boss: boolean; + private offset: boolean; + + private translationX = 100; + private anchorX: number; + private anchorY: number; + + private flyoutParent: Phaser.GameObjects.Container; + private flyoutContainer: Phaser.GameObjects.Container; + + private flyoutPlaceholder: Phaser.GameObjects.Rectangle; + private flyoutTextPlaceholder: Phaser.GameObjects.Text; + + constructor(scene: Phaser.Scene, x: number, y: number, player: boolean) { + super(scene, x, y); + this.player = player; + this.mini = !player; + this.boss = false; + this.offset = false; + + // Initially invisible and shown via Pokemon.showInfo + this.setVisible(false); + this.setDepth(-15); + + this.anchorX = this.player ? -130 : 0; + this.anchorY = this.player ? -18.5 : -13; + + this.flyoutParent = this.scene.add.container(this.anchorX - this.translationX, this.anchorY); + this.flyoutParent.setAlpha(0); + this.flyoutParent.setDepth(-15); + + this.add(this.flyoutParent); + + this.flyoutContainer = this.scene.add.container(this.player ? -75 : 0, 0); + + this.flyoutParent.add(this.flyoutContainer); + + /* const color = this.player ? 0x00FF00 : 0xFF0000; + const maxX = 22 * (this.player ? -1 : 1); + this.flyoutContainer.add(this.scene.add.rectangle( 0, 0, 1, 1, color - 200, 0.75).setOrigin(0.5, 0.5)); + this.flyoutContainer.add(this.scene.add.rectangle(maxX, 0, 1, 1, color, 0.75).setOrigin(0.5, 0.5)); + this.flyoutContainer.add(this.scene.add.rectangle( 0, 22, 1, 1, color, 0.75).setOrigin(0.5, 0.5)); + this.flyoutContainer.add(this.scene.add.rectangle(maxX, 22, 1, 1, color + 200, 0.75).setOrigin(0.5, 0.5)); */ + + this.flyoutPlaceholder = this.scene.add.rectangle(0, 0, 75, 22, 0xFFFFFF, 0.5); + this.flyoutPlaceholder.setOrigin(0, 0); + + this.flyoutContainer.add(this.flyoutPlaceholder); + + this.flyoutTextPlaceholder = addTextObject(this.scene, 5, 0, `Text Goes\nHere!`, TextStyle.BATTLE_INFO); + this.flyoutTextPlaceholder.setOrigin(0, 0); + + this.flyoutContainer.add(this.flyoutTextPlaceholder); + + // Sets up the mask that hides the description text to give an illusion of scrolling + const flyoutMaskRect = this.scene.make.graphics({fillStyle: {color: 0xFFFFFF, alpha: 0.75}}); + //flyoutMaskRect.setScale(6); + flyoutMaskRect.beginPath(); + flyoutMaskRect.fillRect(this.flyoutParent.getWorldTransformMatrix().tx, this.flyoutParent.getWorldTransformMatrix().ty * -1, 100, 50); + + //this.flyoutContainer.setMask(this.flyoutContainer.createGeometryMask(flyoutMaskRect)); + } + + initInfo(pokemon: Pokemon) { + this.name = `Flyout ${pokemon.name}`; + this.flyoutParent.name = `Flyout Parent ${pokemon.name}`; + } + + setMini(mini: boolean): void { + if (this.mini === mini) + return; + + this.mini = mini; + + if (this.player) + this.y -= 12 * (mini ? 1 : -1); + } + + setOffset(offset: boolean): void { + if (this.offset === offset) + return; + + this.offset = offset; + + this.x += 10 * (this.offset === this.player ? 1 : -1); + this.y += 27 * (this.offset ? 1 : -1); + } + + toggleFlyout(visible: boolean): void { + this.scene.tweens.add({ + targets: this.flyoutParent, + x: visible ? this.anchorX : this.anchorX + (this.player ? this.translationX : -this.translationX), + duration: Utils.fixedInt(125), + ease: 'Sine.easeInOut', + alpha: visible ? 1 : 0, + }); + } +} + +export class PlayerBattleFlyout extends BattleFlyout { + constructor(scene: Phaser.Scene) { + super(scene, Math.floor(scene.game.canvas.width / 6) - 10, -72, true); + } +} + +export class EnemyBattleFlyout extends BattleFlyout { + constructor(scene: Phaser.Scene) { + super(scene, 140, -141, false); + } + + setMini(mini: boolean): void { } // Always mini +} \ No newline at end of file diff --git a/src/ui/battle-info.ts b/src/ui/battle-info.ts index 88bc3230ce3..893e02e2668 100644 --- a/src/ui/battle-info.ts +++ b/src/ui/battle-info.ts @@ -214,6 +214,9 @@ export default class BattleInfo extends Phaser.GameObjects.Container { this.updateNameText(pokemon); const nameTextWidth = this.nameText.displayWidth; + this.name = pokemon.name + this.box.name = pokemon.name; + this.genderText.setText(getGenderSymbol(pokemon.gender)); this.genderText.setColor(getGenderColor(pokemon.gender)); this.genderText.setPositionRelative(this.nameText, nameTextWidth, 0);