move effectiveness to move info container

src/field/pokemon.ts

@@ -1392,7 +1392,7 @@ export default abstract class Pokemon extends Phaser.GameObjects.Container {
     const typeHints = this.scene.typeHints;
     if (typeHints === 0) return undefined;
     const opponents = this.getOpponents();
-    if (opponents.length < 1) return undefined;
+    if (opponents.length <= 0) return undefined;
 
     const opponentTypeEffectivenessList = opponents.map((opponent) => {
       return opponent.getTypes().map((type) => {

src/locales/en/fight-ui-handler.ts

@@ -4,4 +4,5 @@ export const fightUiHandler: SimpleTranslationEntries = {
     "pp": "PP",
     "power": "Power",
     "accuracy": "Accuracy",
+    "effect": "Effect",
 } as const;

src/ui/fight-ui-handler.ts

@@ -1,5 +1,5 @@
 import BattleScene from "../battle-scene";
-import { addTextObject, TextStyle } from "./text";
+import { addTextObject, TEXT_SCALE, TextStyle } from "./text";
 import { Type, TypeDamageMultiplier } from "../data/type";
 import { Command } from "./command-ui-handler";
 import { Mode } from "./ui";
@@ -11,15 +11,17 @@ import i18next from '../plugins/i18n';
 import {Button} from "../enums/buttons";
 import Pokemon, { PokemonMove } from "#app/field/pokemon.js";
 
+const rowSpacing = 8;
+
 export default class FightUiHandler extends UiHandler {
   private movesContainer: Phaser.GameObjects.Container;
+  private moveInfoContainer: Phaser.GameObjects.Container;
   private typeIcon: Phaser.GameObjects.Sprite;
-  private ppLabel: Phaser.GameObjects.Text;
   private ppText: Phaser.GameObjects.Text;
-  private powerLabel: Phaser.GameObjects.Text;
   private powerText: Phaser.GameObjects.Text;
-  private accuracyLabel: Phaser.GameObjects.Text;
   private accuracyText: Phaser.GameObjects.Text;
+  private effectivenessLabel: Phaser.GameObjects.Text;
+  private effectivenessText: Phaser.GameObjects.Text;
   private cursorObj: Phaser.GameObjects.Image;
   private moveCategoryIcon: Phaser.GameObjects.Sprite;
 
@@ -44,38 +46,47 @@ export default class FightUiHandler extends UiHandler {
     this.moveCategoryIcon.setVisible(false);
     ui.add(this.moveCategoryIcon);
 
-    this.ppLabel = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 70, -26, 'PP', TextStyle.MOVE_INFO_CONTENT);
+    this.moveInfoContainer = this.scene.add.container((this.scene.game.canvas.width / 6) - 70, -26);
-    this.ppLabel.setOrigin(0.0, 0.5);
+    this.moveInfoContainer.setVisible(false);
-    this.ppLabel.setVisible(false);
+    ui.add(this.moveInfoContainer);
-    this.ppLabel.setText(i18next.t('fightUiHandler:pp'));
-    ui.add(this.ppLabel);
 
-    this.ppText = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 12, -26, '--/--', TextStyle.MOVE_INFO_CONTENT);
+    const ppLabel = addTextObject(this.scene, 0, 0, 'PP', TextStyle.MOVE_INFO_CONTENT);
+    ppLabel.setOrigin(0.0, 0.5);
+    ppLabel.setText(i18next.t('fightUiHandler:pp'));
+    this.moveInfoContainer.add(ppLabel);
+
+    this.ppText = addTextObject(this.scene, 58, 0, '--/--', TextStyle.MOVE_INFO_CONTENT);
     this.ppText.setOrigin(1, 0.5);
-    this.ppText.setVisible(false);
+    this.moveInfoContainer.add(this.ppText);
-    ui.add(this.ppText);
 
-    this.powerLabel = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 70, -18, 'POWER', TextStyle.MOVE_INFO_CONTENT);
+    const powerLabel = addTextObject(this.scene, 0, rowSpacing, 'POWER', TextStyle.MOVE_INFO_CONTENT);
-    this.powerLabel.setOrigin(0.0, 0.5);
+    powerLabel.setOrigin(0.0, 0.5);
-    this.powerLabel.setVisible(false);
+    powerLabel.setText(i18next.t('fightUiHandler:power'));
-    this.powerLabel.setText(i18next.t('fightUiHandler:power'));
+    this.moveInfoContainer.add(powerLabel);
-    ui.add(this.powerLabel);
 
-    this.powerText = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 12, -18, '---', TextStyle.MOVE_INFO_CONTENT);
+    this.powerText = addTextObject(this.scene, 58, rowSpacing, '---', TextStyle.MOVE_INFO_CONTENT);
     this.powerText.setOrigin(1, 0.5);
-    this.powerText.setVisible(false);
+    this.moveInfoContainer.add(this.powerText);
-    ui.add(this.powerText);
 
-    this.accuracyLabel = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 70, -10, 'ACC', TextStyle.MOVE_INFO_CONTENT);
+    const accuracyLabel = addTextObject(this.scene, 0, rowSpacing * 2, 'ACC', TextStyle.MOVE_INFO_CONTENT);
-    this.accuracyLabel.setOrigin(0.0, 0.5);
+    accuracyLabel.setOrigin(0.0, 0.5);
-    this.accuracyLabel.setVisible(false);
+    accuracyLabel.setText(i18next.t('fightUiHandler:accuracy'))
-    this.accuracyLabel.setText(i18next.t('fightUiHandler:accuracy'))
+    this.moveInfoContainer.add(accuracyLabel);
-    ui.add(this.accuracyLabel);
 
-    this.accuracyText = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 12, -10, '---', TextStyle.MOVE_INFO_CONTENT);
+    this.accuracyText = addTextObject(this.scene, 58, rowSpacing * 2, '---', TextStyle.MOVE_INFO_CONTENT);
     this.accuracyText.setOrigin(1, 0.5);
-    this.accuracyText.setVisible(false);
+    this.moveInfoContainer.add(this.accuracyText);
-    ui.add(this.accuracyText);
+
+    this.effectivenessLabel = addTextObject(this.scene, 0, rowSpacing * 3, 'EFFECT', TextStyle.MOVE_INFO_CONTENT);
+    this.effectivenessLabel.setOrigin(0.0, 0.5);
+    this.effectivenessLabel.setVisible(false);
+    this.effectivenessLabel.setText(i18next.t('fightUiHandler:effect'))
+    this.moveInfoContainer.add(this.effectivenessLabel);
+
+    this.effectivenessText = addTextObject(this.scene, 58, rowSpacing * 3, '---', TextStyle.MOVE_INFO_CONTENT);
+    this.effectivenessText.setOrigin(1, 0.5);
+    this.effectivenessText.setVisible(false);
+    this.moveInfoContainer.add(this.effectivenessText);
   }
 
   show(args: any[]): boolean {
@@ -156,11 +167,14 @@ export default class FightUiHandler extends UiHandler {
       ui.add(this.cursorObj);
     }
 
-    const moveset = (this.scene.getCurrentPhase() as CommandPhase).getPokemon().getMoveset();
+    const pokemon = (this.scene.getCurrentPhase() as CommandPhase).getPokemon();
+    const moveset = pokemon.getMoveset();
 
     const hasMove = cursor < moveset.length;
 
     if (hasMove) {
+      this.updateMoveInfoSize();
+
       const pokemonMove = moveset[cursor];
       this.typeIcon.setTexture('types', Type[pokemonMove.getMove().type].toLowerCase()).setScale(0.8);
       this.moveCategoryIcon.setTexture('categories', MoveCategory[pokemonMove.getMove().category].toLowerCase()).setScale(1.0);
@@ -169,19 +183,18 @@ export default class FightUiHandler extends UiHandler {
       const accuracy = pokemonMove.getMove().accuracy;
       const maxPP = pokemonMove.getMovePp();
       const pp = maxPP - pokemonMove.ppUsed;
+      const effectiveness = this.getEffectivenessText(pokemon, pokemonMove);
 
       this.ppText.setText(`${Utils.padInt(pp, 2, '  ')}/${Utils.padInt(maxPP, 2, '  ')}`);
       this.powerText.setText(`${power >= 0 ? power : '---'}`);
       this.accuracyText.setText(`${accuracy >= 0 ? accuracy : '---'}`);
+      this.effectivenessText.setText(`${effectiveness ? effectiveness : '---'}`);
     }
 
     this.typeIcon.setVisible(hasMove);
-    this.ppLabel.setVisible(hasMove);
+    this.moveInfoContainer.setVisible(hasMove);
-    this.ppText.setVisible(hasMove);
+    this.effectivenessLabel.setVisible(this.scene.typeHints > 0);
-    this.powerLabel.setVisible(hasMove);
+    this.effectivenessText.setVisible(this.scene.typeHints > 0);
-    this.powerText.setVisible(hasMove);
-    this.accuracyLabel.setVisible(hasMove);
-    this.accuracyText.setVisible(hasMove);
     this.moveCategoryIcon.setVisible(hasMove);
 
     this.cursorObj.setPosition(13 + (cursor % 2 === 1 ? 100 : 0), -31 + (cursor >= 2 ? 15 : 0));
@@ -189,6 +202,34 @@ export default class FightUiHandler extends UiHandler {
     return changed;
   }
 
+  private updateMoveInfoSize() {
+    const typeHints = this.scene.typeHints > 0;
+    const spacing = typeHints ? rowSpacing * 0.75 : rowSpacing;
+    const scale = typeHints ? TEXT_SCALE * 0.75 : TEXT_SCALE;
+
+    let row = 0;
+    this.moveInfoContainer.getAll().forEach((object, index) => {
+      const text = object as Phaser.GameObjects.Text;
+      text.y = row * spacing;
+      text.setScale(scale);
+
+      if (index % 2 !== 0) row++;
+    });
+  }
+
+  private getEffectivenessText(pokemon: Pokemon, pokemonMove: PokemonMove): string {
+    const opponents = pokemon.getOpponents();
+    if (opponents.length <= 0) return '';
+
+    const text = opponents.map((opponent) => {
+      return opponent.getMoveEffectiveness(pokemon, pokemonMove);
+    }).filter((effectiveness) => effectiveness !== undefined).map((effectiveness) => {
+      return `${effectiveness}x`;
+    }).join('/');
+
+    return text;
+  }
+
   displayMoves() {
     const pokemon = (this.scene.getCurrentPhase() as CommandPhase).getPokemon();
     const moveset = pokemon.getMoveset();
@@ -199,49 +240,29 @@ export default class FightUiHandler extends UiHandler {
       if (moveIndex < moveset.length) {
         const pokemonMove = moveset[moveIndex];
         moveText.setText(pokemonMove.getName());
-
+        moveText.setColor(this.getMoveColor(pokemon, pokemonMove));
-        if (this.scene.typeHints > 0) {
-          this.setTypeHints(pokemon, pokemonMove, moveText);
-        }
       }
 
       this.movesContainer.add(moveText);
     }
   }
 
-  private setTypeHints(pokemon: Pokemon, pokemonMove: PokemonMove, moveText: Phaser.GameObjects.Text) {
+  private getMoveColor(pokemon: Pokemon, pokemonMove: PokemonMove): string {
+    if (this.scene.typeHints === 0) return 'white';
+
     const opponents = pokemon.getOpponents();
-    if (opponents.length < 1) return;
+    if (opponents.length <= 0) return 'white';
 
-    const move = pokemonMove.getMove();
+    const moveColors = opponents.map((opponent) => {
-    const moveEffectivenessList = opponents.map((opponent) => opponent.getMoveEffectiveness(pokemon, pokemonMove));
+      return opponent.getMoveEffectiveness(pokemon, pokemonMove);
+    }).sort((a, b) => b - a).map((effectiveness) => {
+      return this.getMoveEffectivenessColor(effectiveness);
+    });
 
-    let text = moveText.text;
+    return moveColors[0] ?? 'white';
-    const effectivenessTextList = moveEffectivenessList.map((effectiveness) => this.getMoveEffectivenessText(effectiveness));
-
-    if (effectivenessTextList.every((text) => text === effectivenessTextList[0])) {
-      if (moveEffectivenessList[0] !== 1) {
-        text += effectivenessTextList[0];
-      }
-    } else {
-      moveEffectivenessList.forEach((effectiveness) => {
-        text += this.getMoveEffectivenessText(effectiveness);
-      });
-    }
-    moveText.setText(text);
-
-    const moveColors = moveEffectivenessList.sort((a, b) => b - a).map((effectiveness) => this.getMoveColor(effectiveness));
-    const color = moveColors[0];
-
-    if (color !== undefined) moveText.setColor(color);
   }
 
-  private getMoveEffectivenessText(moveEffectiveness?: TypeDamageMultiplier): string {
+  private getMoveEffectivenessColor(moveEffectiveness?: TypeDamageMultiplier): string | undefined {
-    if (moveEffectiveness === undefined) return '';
-    return ` ${moveEffectiveness}x`;
-  }
-
-  private getMoveColor(moveEffectiveness?: TypeDamageMultiplier): string {
     switch (moveEffectiveness) {
       case 0:
         return 'black';
@@ -266,12 +287,7 @@ export default class FightUiHandler extends UiHandler {
     super.clear();
     this.clearMoves();
     this.typeIcon.setVisible(false);
-    this.ppLabel.setVisible(false);
+    this.moveInfoContainer.setVisible(false);
-    this.ppText.setVisible(false);
-    this.powerLabel.setVisible(false);
-    this.powerText.setVisible(false);
-    this.accuracyLabel.setVisible(false);
-    this.accuracyText.setVisible(false);
     this.moveCategoryIcon.setVisible(false);
     this.eraseCursor();
   }

src/ui/text.ts

@@ -5,6 +5,8 @@ import { EggTier } from "../data/enums/egg-type";
 import BattleScene from "../battle-scene";
 import { UiTheme } from "../enums/ui-theme";
 
+export const TEXT_SCALE = 1 / 6;
+
 export enum TextStyle {
   MESSAGE,
   WINDOW,
@@ -32,7 +34,7 @@ export function addTextObject(scene: Phaser.Scene, x: number, y: number, content
   const [ styleOptions, shadowColor, shadowSize ] = getTextStyleOptions(style, (scene as BattleScene).uiTheme, extraStyleOptions);
 
   const ret = scene.add.text(x, y, content, styleOptions);
-  ret.setScale(0.1666666667);
+  ret.setScale(TEXT_SCALE);
   ret.setShadow(shadowSize, shadowSize, shadowColor);
   if (!(styleOptions as Phaser.Types.GameObjects.Text.TextStyle).lineSpacing)
     ret.setLineSpacing(5);
@@ -45,7 +47,7 @@ export function addBBCodeTextObject(scene: Phaser.Scene, x: number, y: number, c
 
   const ret = new BBCodeText(scene, x, y, content, styleOptions as BBCodeText.TextStyle);
   scene.add.existing(ret);
-  ret.setScale(0.1666666667);
+  ret.setScale(TEXT_SCALE);
   ret.setShadow(shadowSize, shadowSize, shadowColor);
   if (!(styleOptions as BBCodeText.TextStyle).lineSpacing)
     ret.setLineSpacing(10);
@@ -58,7 +60,7 @@ export function addTextInputObject(scene: Phaser.Scene, x: number, y: number, wi
 
   const ret = new InputText(scene, x, y, width, height, styleOptions as InputText.IConfig);
   scene.add.existing(ret);
-  ret.setScale(0.1666666667);
+  ret.setScale(TEXT_SCALE);
 
   return ret;
 }