Add outage handling

src/ui/ui.ts

@@ -33,6 +33,7 @@ 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';
+import UnavailableModalUiHandler from './unavailable-modal-ui-handler';
 
 export enum Mode {
   MESSAGE,
@@ -61,7 +62,8 @@ export enum Mode {
   EGG_GACHA,
   LOGIN_FORM,
   REGISTRATION_FORM,
-  LOADING
+  LOADING,
+  UNAVAILABLE
 };
 
 const transitionModes = [
@@ -87,7 +89,8 @@ const noTransitionModes = [
   Mode.VOUCHERS,
   Mode.LOGIN_FORM,
   Mode.REGISTRATION_FORM,
-  Mode.LOADING
+  Mode.LOADING,
+  Mode.UNAVAILABLE
 ];
 
 export default class UI extends Phaser.GameObjects.Container {
@@ -137,7 +140,8 @@ export default class UI extends Phaser.GameObjects.Container {
       new EggGachaUiHandler(scene),
       new LoginFormUiHandler(scene),
       new RegistrationFormUiHandler(scene),
-      new LoadingModalUiHandler(scene)
+      new LoadingModalUiHandler(scene),
+      new UnavailableModalUiHandler(scene)
     ];
   }
 

src/ui/unavailable-modal-ui-handler.ts

@@ -0,0 +1,68 @@
+import BattleScene from "../battle-scene";
+import { ModalConfig, ModalUiHandler } from "./modal-ui-handler";
+import { addTextObject, TextStyle } from "./text";
+import { Mode } from "./ui";
+import { updateUserInfo } from "#app/account";
+
+export default class UnavailableModalUiHandler extends ModalUiHandler {
+  private reconnectTimer: number;
+  private reconnectCallback: () => void;
+
+  constructor(scene: BattleScene, mode?: Mode) {
+    super(scene, mode);
+  }
+
+  getModalTitle(): string {
+    return '';
+  }
+
+  getWidth(): number {
+    return 160;
+  }
+
+  getHeight(): number {
+    return 64;
+  }
+
+  getMargin(): [number, number, number, number] {
+    return [ 0, 0, 48, 0 ];
+  }
+
+  getButtonLabels(): string[] {
+    return [ ];
+  }
+
+  setup(): void {
+    super.setup();
+
+    const label = addTextObject(this.scene, this.getWidth() / 2, this.getHeight() / 2, 'Oops! There was an issue contacting the server.\n\nYou may leave this window open,\nthe game will automatically reconnect.', TextStyle.WINDOW, { fontSize: '48px', align: 'center' });
+    label.setOrigin(0.5, 0.5);
+
+    this.modalContainer.add(label);
+  }
+
+  show(args: any[]): boolean {
+    if (args.length >= 1 && args[0] instanceof Function) {
+      const config: ModalConfig = {
+        buttonActions: []
+      };
+
+      this.reconnectCallback = args[0];
+
+      this.reconnectTimer = setInterval(() => {
+        updateUserInfo().then(response => {
+          if (response[0] || [200, 400].includes(response[1])) {
+            clearInterval(this.reconnectTimer);
+            this.reconnectTimer = null;
+            this.scene.playSound('pb_bounce_1');
+            this.reconnectCallback();
+          }
+        })
+      }, 5000);
+
+      return super.show([ config ]);
+    }
+
+    return false;
+  }
+}