Add ability bar UI

src/ui/ability-bar.ts

@@ -0,0 +1,72 @@
+import BattleScene from "../battle-scene";
+import Pokemon from "../pokemon";
+import { TextStyle, addTextObject } from "./text";
+
+export default class AbilityBar extends Phaser.GameObjects.Container {
+  private bg: Phaser.GameObjects.Image;
+  private pokemonNameText: Phaser.GameObjects.Text;
+  private abilityNameText: Phaser.GameObjects.Text;
+
+  private tween: Phaser.Tweens.Tween;
+
+  public shown: boolean;
+
+  constructor(scene: BattleScene) {
+    super(scene, -91, (-scene.game.canvas.height / 6) + 64);
+  }
+
+  setup(): void {
+    this.bg = this.scene.add.image(0, 0, 'ability_bar');
+    this.bg.setOrigin(0, 0);
+
+    this.add(this.bg);
+
+    this.pokemonNameText = addTextObject(this.scene, 5, 3, 'Pokemon', TextStyle.MESSAGE, { fontSize: '72px' });
+    this.pokemonNameText.setOrigin(0, 0);
+    this.add(this.pokemonNameText);
+
+    this.abilityNameText = addTextObject(this.scene, 87, 16, 'Chlorophyll', TextStyle.WINDOW, { fontSize: '72px' });
+    this.abilityNameText.setOrigin(1, 0);
+    this.add(this.abilityNameText);
+
+    this.setVisible(false);
+    this.shown = false;
+  }
+
+  showAbility(pokemon: Pokemon) {
+    this.pokemonNameText.setText(`${pokemon.name}'s`);
+    this.abilityNameText.setText(pokemon.getAbility().name);
+
+    if (this.tween)
+      this.tween.stop();
+
+    this.tween = this.scene.tweens.add({
+      targets: this,
+      x: 10,
+      duration: 500,
+      ease: 'Sine.easeOut',
+      onComplete: () => this.tween = null
+    });
+
+    this.setVisible(true);
+    this.shown = true;
+  }
+
+  hide() {
+    if (this.tween)
+      this.tween.stop();
+
+    this.tween = this.scene.tweens.add({
+      targets: this,
+      x: -91,
+      duration: 500,
+      ease: 'Sine.easeIn',
+      onComplete: () => {
+        this.tween = null;
+        this.setVisible(false);
+      }
+    });
+
+    this.shown = false;
+  }
+}

src/ui/starter-select-ui-handler.ts

@@ -576,7 +576,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
 
         if (defaultDexEntry) {
           const ability = this.lastSpecies.getAbility(abilityIndex);
-          this.pokemonAbilityText.setText(abilities[ability].name.toUpperCase());
+          this.pokemonAbilityText.setText(abilities[ability].name);
 
           const isHidden = ability === this.lastSpecies.abilityHidden;
           this.pokemonAbilityText.setColor(getTextColor(!isHidden ? TextStyle.SUMMARY : TextStyle.SUMMARY_GOLD));

src/ui/summary-ui-handler.ts

@@ -437,7 +437,7 @@ export default class SummaryUiHandler extends UiHandler {
 
         const ability = abilities[this.pokemon.species.getAbility(this.pokemon.abilityIndex)];
 
-        const abilityNameText = addTextObject(this.scene, 7, 66, ability.name.toUpperCase(), TextStyle.SUMMARY);
+        const abilityNameText = addTextObject(this.scene, 7, 66, ability.name, TextStyle.SUMMARY);
         abilityNameText.setOrigin(0, 1);
         profileContainer.add(abilityNameText);