Add character sprite system with female rival

src/ui/char-sprite.ts

@@ -0,0 +1,106 @@
+import BattleScene from "../battle-scene";
+
+export default class CharSprite extends Phaser.GameObjects.Container {
+  private sprite: Phaser.GameObjects.Sprite;
+  private transitionSprite: Phaser.GameObjects.Sprite;
+
+  public key: string;
+  public variant: string;
+  public shown: boolean;
+
+  constructor(scene: BattleScene) {
+    super(scene, (scene.game.canvas.width / 6) + 32, -42);
+  }
+
+  setup(): void {
+    [ this.sprite, this.transitionSprite ] = new Array(2).fill(null).map(() => {
+      const ret = this.scene.add.sprite(0, 0, '', '');
+      ret.setOrigin(0.5, 1);
+      this.add(ret);
+      return ret;
+    });
+
+    this.transitionSprite.setVisible(false);
+
+    this.setVisible(false);
+    this.shown = false;
+  }
+
+  showCharacter(key: string, variant: string): Promise<void> {
+    return new Promise(resolve => {
+      if (!key.startsWith('c_'))
+        key = `c_${key}`;
+      if (this.shown) {
+        if (key === this.key && variant === this.variant)
+          return resolve();
+        if (key !== this.key)
+          return this.hide().then(() => this.showCharacter(key, variant));
+        this.setVariant(variant).then(() => resolve());
+        return;
+      }
+
+      this.sprite.setTexture(key, variant);
+
+      (this.scene as BattleScene).fieldUI.bringToTop(this);
+
+      this.scene.tweens.add({
+        targets: this,
+        x: (this.scene.game.canvas.width / 6) - 102,
+        duration: 750,
+        ease: 'Cubic.easeOut',
+        onComplete: () => {
+          resolve();
+        }
+      });
+    
+      this.setVisible(this.scene.textures.get(key).key !== '__MISSING');
+      this.shown = true;
+
+      this.key = key;
+      this.variant = variant;
+    });
+  }
+
+  setVariant(variant: string): Promise<void> {
+    return new Promise(resolve => {
+      (this.scene as BattleScene).fieldUI.bringToTop(this);
+
+      this.transitionSprite.setTexture(this.key, variant);
+      this.transitionSprite.setAlpha(0);
+      this.transitionSprite.setVisible(true);
+      this.scene.tweens.add({
+        targets: this.transitionSprite,
+        alpha: 1,
+        duration: 250,
+        ease: 'Sine.easeIn',
+        onComplete: () => {
+          this.sprite.setTexture(this.key, variant);
+          this.transitionSprite.setVisible(false);
+          resolve();
+        }
+      });
+      this.variant = variant;
+    });
+  }
+
+  hide(): Promise<void> {
+    return new Promise(resolve => {
+      if (!this.shown)
+        return resolve();
+
+      this.scene.tweens.add({
+        targets: this,
+        x: (this.scene.game.canvas.width / 6) + 32,
+        duration: 750,
+        ease: 'Cubic.easeIn',
+        onComplete: () => {
+          if (!this.shown)
+            this.setVisible(false);
+          resolve();
+        }
+      });
+
+      this.shown = false;
+    });
+  };
+}

src/ui/message-ui-handler.ts

@@ -28,12 +28,16 @@ export default abstract class MessageUiHandler extends AwaitableUiHandler {
   private showTextInternal(text: string, delay: integer, callback: Function, callbackDelay: integer, prompt: boolean, promptDelay: integer) {
     if (delay === null || delay === undefined)
       delay = 20;
+    let charVarMap = new Map<integer, string>();
     let delayMap = new Map<integer, integer>();
     let soundMap = new Map<integer, string>();
-    const actionPattern = /@(d|s)\{(.*?)\}/;
+    const actionPattern = /@(c|d|s)\{(.*?)\}/;
     let actionMatch: RegExpExecArray;
     while ((actionMatch = actionPattern.exec(text))) {
       switch (actionMatch[1]) {
+        case 'c':
+          charVarMap.set(actionMatch.index, actionMatch[2]);
+          break;
         case 'd':
           delayMap.set(actionMatch.index, parseInt(actionMatch[2]));
           break;
@@ -67,10 +71,13 @@ export default abstract class MessageUiHandler extends AwaitableUiHandler {
         delay: delay,
         callback: () => {
           const charIndex = text.length - this.textTimer.repeatCount;
+          const charVar = charVarMap.get(charIndex);
           const charSound = soundMap.get(charIndex);
           const charDelay = delayMap.get(charIndex);
           this.message.setText(text.slice(0, charIndex));
           const advance = () => {
+            if (charVar)
+              this.scene.charSprite.setVariant(charVar);
             if (charSound)
               this.scene.playSound(charSound);
             if (callback && !this.textTimer.repeatCount) {