Show icon when saving data

src/loading-scene.ts

@@ -97,6 +97,8 @@ export class LoadingScene extends SceneBase {
     this.loadImage('select_gen_cursor', 'ui');
     this.loadImage('select_gen_cursor_highlight', 'ui');
 
+    this.loadImage('saving_icon', 'ui');
+
     this.loadImage('default_bg', 'arenas');
     // Load arena images
     Utils.getEnumValues(Biome).map(bt => {

src/system/game-data.ts

@@ -223,9 +223,12 @@ export class GameData {
 
   public saveSystem(): Promise<boolean> {
     return new Promise<boolean>(resolve => {
+      this.scene.ui.savingIcon.show();
       updateUserInfo().then((success: boolean) => {
-        if (!success)
+        if (!success) {
+          this.scene.ui.savingIcon.hide();
           return resolve(false);
+        }
         const data: SystemSaveData = {
           trainerId: this.trainerId,
           secretId: this.secretId,
@@ -250,6 +253,7 @@ export class GameData {
           Utils.apiPost(`savedata/update?datatype=${GameDataType.SYSTEM}`, systemData)
             .then(response => response.text())
             .then(error => {
+              this.scene.ui.savingIcon.hide();
               if (error) {
                 console.error(error);
                 return resolve(false);
@@ -261,6 +265,8 @@ export class GameData {
 
           localStorage.setItem('data', btoa(systemData));
 
+          this.scene.ui.savingIcon.hide();
+
           resolve(true);
         }
       });

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() {