Show icon when saving data

src/ui/saving-icon-handler.ts

@@ -0,0 +1,76 @@
+import BattleScene from "#app/battle-scene";
+import * as Utils from "../utils";
+
+export default class SavingIconHandler extends Phaser.GameObjects.Container {
+  private icon: Phaser.GameObjects.Sprite;
+
+  private animActive: boolean;
+  private shown: boolean;
+
+  constructor(scene: BattleScene) {
+    super(scene, scene.game.canvas.width / 6 - 4, scene.game.canvas.height / 6 - 4);
+  }
+
+  setup(): void {
+    this.icon = this.scene.add.sprite(0, 0, 'saving_icon');
+    this.icon.setOrigin(1, 1);
+
+    this.add(this.icon);
+
+    this.animActive = false;
+    this.shown = false;
+
+    this.setAlpha(0);
+    this.setVisible(false);
+  }
+
+  show(): void {
+    this.shown = true;
+
+    if (this.animActive)
+      return;
+
+    this.animActive = true;
+
+    this.scene.tweens.add({
+      targets: this,
+      alpha: 1,
+      duration: Utils.fixedInt(250),
+      ease: 'Sine.easeInOut',
+      onComplete: () => {
+        this.scene.time.delayedCall(Utils.fixedInt(500), () => {
+          this.animActive = false;
+          if (!this.shown)
+            this.hide();
+        });
+      }
+    });
+  
+    this.setVisible(true);
+    this.shown = true;
+  }
+
+  hide(): void {
+    this.shown = false;
+
+    if (this.animActive)
+      return;
+
+    this.animActive = true;
+
+    this.scene.tweens.add({
+      targets: this,
+      alpha: 0,
+      duration: Utils.fixedInt(250),
+      ease: 'Sine.easeInOut',
+      onComplete: () => {
+        this.animActive = false;
+        this.setVisible(false);
+        if (this.shown)
+          this.show();
+      }
+    });
+  
+    this.shown = false;
+  }
+}

src/ui/ui.ts

@@ -32,6 +32,7 @@ import GameStatsUiHandler from './game-stats-ui-handler';
 import AwaitableUiHandler from './awaitable-ui-handler';
 import SaveSlotSelectUiHandler from './save-slot-select-ui-handler';
 import TitleUiHandler from './title-ui-handler';
+import SavingIconHandler from './saving-icon-handler';
 
 export enum Mode {
   MESSAGE,
@@ -95,6 +96,7 @@ export default class UI extends Phaser.GameObjects.Container {
   private handlers: UiHandler[];
   private overlay: Phaser.GameObjects.Rectangle;
   public achvBar: AchvBar;
+  public savingIcon: SavingIconHandler;
 
   private tooltipContainer: Phaser.GameObjects.Container;
   private tooltipBg: Phaser.GameObjects.NineSlice;
@@ -152,6 +154,11 @@ export default class UI extends Phaser.GameObjects.Container {
     this.achvBar.setup();
    
     (this.scene as BattleScene).uiContainer.add(this.achvBar);
+
+    this.savingIcon = new SavingIconHandler(this.scene as BattleScene);
+    this.savingIcon.setup();
+
+    (this.scene as BattleScene).uiContainer.add(this.savingIcon);
   }
 
   private setupTooltip() {