Modification of the move description window in battle

+ Modification of data layout
  + Adds "power" to visible data
  + No longer uses a "command_fight_labels" image, but directly text (allowing translation by the way)
  + Added i18n
  + Creation of "en" and "fr" locales for fight-ui-handler

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

@@ -0,0 +1,6 @@
+import { SimpleTranslationEntries } from "#app/plugins/i18n";
+
+export const fightUiHandler: SimpleTranslationEntries = {
+    "pp": "PP",
+    "power": "POWER",
+} as const;

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

@@ -0,0 +1,6 @@
+import { SimpleTranslationEntries } from "#app/plugins/i18n";
+
+export const fightUiHandler: SimpleTranslationEntries = {
+    "pp": "PP",
+    "power": "PUISSANCE",
+} as const;

src/plugins/i18n.ts

@@ -34,6 +34,9 @@ import { commandUiHandler as enCommandUiHandler } from '../locales/en/command-ui
 import { commandUiHandler as esCommandUiHandler } from '../locales/es/command-ui-handler';
 import { commandUiHandler as frCommandUiHandler } from '../locales/fr/command-ui-handler';
 
+import { fightUiHandler as enFightUiHandler } from '../locales/en/fight-ui-handler';
+import { fightUiHandler as frFightUiHandler } from '../locales/fr/fight-ui-handler';
+
 export interface SimpleTranslationEntries {
   [key: string]: string
 }
@@ -71,11 +74,11 @@ export function initI18n(): void {
 
   /**
    * i18next is a localization library for maintaining and using translation resources.
-   * 
+   *
    * Q: How do I add a new language?
    * A: To add a new language, create a new folder in the locales directory with the language code.
    *    Each language folder should contain a file for each namespace (ex. menu.ts) with the translations.
-   * 
+   *
    * Q: How do I add a new namespace?
    * A: To add a new namespace, create a new file in each language folder with the translations.
    *    Then update the `resources` field in the init() call and the CustomTypeOptions interface.
@@ -98,6 +101,7 @@ export function initI18n(): void {
         pokemon: enPokemon,
         pokemonStat: enPokemonStat,
         commandUiHandler: enCommandUiHandler,
+        fightUiHandler: enFightUiHandler,
       },
       es: {
         menu: esMenu,
@@ -118,6 +122,7 @@ export function initI18n(): void {
         pokemon: frPokemon,
         pokemonStat: frPokemonStat,
         commandUiHandler: frCommandUiHandler,
+        fightUiHandler: frFightUiHandler,
       },
       it: {
         menu: itMenu,
@@ -140,6 +145,7 @@ declare module 'i18next' {
       pokemon: typeof enPokemon;
       pokemonStat: typeof enPokemonStat;
       commandUiHandler: typeof enCommandUiHandler;
+      fightUiHandler: typeof enFightUiHandler;
     };
   }
 }

src/ui/battle-message-ui-handler.ts

@@ -50,9 +50,10 @@ export default class BattleMessageUiHandler extends MessageUiHandler {
     moveDetailsWindow.setOrigin(0, 1);
     this.movesWindowContainer.add(moveDetailsWindow);
 
-    const commandFightLabels = this.scene.add.image(246, -10, 'command_fight_labels');
-    commandFightLabels.setOrigin(0, 1);
-    this.movesWindowContainer.add(commandFightLabels);
+    // TODO: Maybe remove this asset definitively if it's no longer needed?
+    // const commandFightLabels = this.scene.add.image(246, -10, 'command_fight_labels');
+    // commandFightLabels.setOrigin(0, 1);
+    // this.movesWindowContainer.add(commandFightLabels);
 
     ui.add(this.movesWindowContainer);
 

src/ui/fight-ui-handler.ts

@@ -7,11 +7,15 @@ import UiHandler from "./ui-handler";
 import * as Utils from "../utils";
 import { CommandPhase } from "../phases";
 import { MoveCategory } from "#app/data/move.js";
+import i18next from '../plugins/i18n';
 
 export default class FightUiHandler extends UiHandler {
   private movesContainer: 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 cursorObj: Phaser.GameObjects.Image;
   private moveCategoryIcon: Phaser.GameObjects.Sprite;
 
@@ -24,23 +28,39 @@ export default class FightUiHandler extends UiHandler {
 
   setup() {
     const ui = this.getUi();
-    
+
     this.movesContainer = this.scene.add.container(18, -38.7);
     ui.add(this.movesContainer);
 
-    this.typeIcon = this.scene.add.sprite((this.scene.game.canvas.width / 6) - 41, -31, 'types', 'unknown');
+    this.typeIcon = this.scene.add.sprite((this.scene.game.canvas.width / 6) - 57, -34, 'types', 'unknown');
     this.typeIcon.setVisible(false);
     ui.add(this.typeIcon);
 
-    this.moveCategoryIcon = this.scene.add.sprite((this.scene.game.canvas.width / 6) - 19, -31, 'categories', 'physical');
+    this.moveCategoryIcon = this.scene.add.sprite((this.scene.game.canvas.width / 6) - 25, -34, 'categories', 'physical');
     this.moveCategoryIcon.setVisible(false);
     ui.add(this.moveCategoryIcon);
-  
 
-    this.ppText = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 18, -15.5, '    /    ', TextStyle.WINDOW);
+    this.ppLabel = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 70, -22, 'PP', TextStyle.TOOLTIP_CONTENT);
+    this.ppLabel.setOrigin(0.0, 0.5);
+    this.ppLabel.setVisible(false);
+    this.ppLabel.setText(i18next.t('fightUiHandler:pp'));
+    ui.add(this.ppLabel);
+
+    this.ppText = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 12, -22, '--/--', TextStyle.TOOLTIP_CONTENT);
     this.ppText.setOrigin(1, 0.5);
     this.ppText.setVisible(false);
     ui.add(this.ppText);
+
+    this.powerLabel = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 70, -12, 'POWER', TextStyle.TOOLTIP_CONTENT);
+    this.powerLabel.setOrigin(0.0, 0.5);
+    this.powerLabel.setVisible(false);
+    this.powerLabel.setText(i18next.t('fightUiHandler:power'));
+    ui.add(this.powerLabel);
+
+    this.powerText = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 12, -12, '---', TextStyle.TOOLTIP_CONTENT);
+    this.powerText.setOrigin(1, 0.5);
+    this.powerText.setVisible(false);
+    ui.add(this.powerText);
   }
 
   show(args: any[]): boolean {
@@ -127,18 +147,22 @@ export default class FightUiHandler extends UiHandler {
 
     if (hasMove) {
       const pokemonMove = moveset[cursor];
-      this.typeIcon.setTexture('types', Type[pokemonMove.getMove().type].toLowerCase()).setScale(0.65);
-      this.moveCategoryIcon.setTexture('categories', MoveCategory[pokemonMove.getMove().category].toLowerCase()).setScale(0.8);
+      this.typeIcon.setTexture('types', Type[pokemonMove.getMove().type].toLowerCase()).setScale(0.8);
+      this.moveCategoryIcon.setTexture('categories', MoveCategory[pokemonMove.getMove().category].toLowerCase()).setScale(1.0);
 
+      const power = pokemonMove.getMove().power;
       const maxPP = pokemonMove.getMovePp();
       const pp = maxPP - pokemonMove.ppUsed;
-      
 
       this.ppText.setText(`${Utils.padInt(pp, 2, '  ')}/${Utils.padInt(maxPP, 2, '  ')}`);
+      this.powerText.setText(`${power >= 0 ? power : '---'}`);
     }
 
     this.typeIcon.setVisible(hasMove);
+    this.ppLabel.setVisible(hasMove);
     this.ppText.setVisible(hasMove);
+    this.powerLabel.setVisible(hasMove);
+    this.powerText.setVisible(hasMove);
     this.moveCategoryIcon.setVisible(hasMove);
 
     this.cursorObj.setPosition(13 + (cursor % 2 === 1 ? 100 : 0), -31 + (cursor >= 2 ? 15 : 0));
@@ -160,7 +184,10 @@ export default class FightUiHandler extends UiHandler {
     super.clear();
     this.clearMoves();
     this.typeIcon.setVisible(false);
+    this.ppLabel.setVisible(false);
     this.ppText.setVisible(false);
+    this.powerLabel.setVisible(false);
+    this.powerText.setVisible(false);
     this.moveCategoryIcon.setVisible(false);
     this.eraseCursor();
   }