Prevent saving on an outdated client

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "pokemon-rogue-battle",
 	"private": true,
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"type": "module",
 	"scripts": {
 		"start": "vite",

src/phases.ts

@@ -379,6 +379,16 @@ export class UnavailablePhase extends Phase {
   }
 }
 
+export class OutdatedPhase extends Phase {
+  constructor(scene: BattleScene) {
+    super(scene);
+  }
+
+  start(): void {
+    this.scene.ui.setMode(Mode.OUTDATED);
+  }
+}
+
 export class SelectGenderPhase extends Phase {
   constructor(scene: BattleScene) {
     super(scene);

src/system/game-data.ts

@@ -27,6 +27,7 @@ import { Moves } from "../data/enums/moves";
 import { speciesEggMoves } from "../data/egg-moves";
 import { allMoves } from "../data/move";
 import { TrainerVariant } from "../field/trainer";
+import { OutdatedPhase, UnavailablePhase } from "#app/phases";
 
 const saveKey = 'x0i2O7WRiANTqPmZ'; // Temporary; secure encryption is not yet necessary
 
@@ -269,6 +270,10 @@ export class GameData {
             .then(error => {
               this.scene.ui.savingIcon.hide();
               if (error) {
+                if (error.startsWith('client version out of date')) {
+                  this.scene.clearPhaseQueue();
+                  this.scene.unshiftPhase(new OutdatedPhase(this.scene));
+                }
                 console.error(error);
                 return resolve(false);
               }

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

@@ -0,0 +1,47 @@
+import BattleScene from "../battle-scene";
+import { ModalConfig, ModalUiHandler } from "./modal-ui-handler";
+import { addTextObject, TextStyle } from "./text";
+import { Mode } from "./ui";
+
+export default class OutdatedModalUiHandler extends ModalUiHandler {
+  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, 'Your client is currently outdated.\nPlease reload to update the game.\n\nIf this error persists, please clear your browser cache.', TextStyle.WINDOW, { fontSize: '48px', align: 'center' });
+    label.setOrigin(0.5, 0.5);
+
+    this.modalContainer.add(label);
+  }
+
+  show(args: any[]): boolean {
+    const config: ModalConfig = {
+      buttonActions: []
+    };
+
+    return super.show([ config ]);
+  }
+}

src/ui/ui.ts

@@ -34,6 +34,7 @@ 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';
+import OutdatedModalUiHandler from './outdated-modal-ui-handler';
 
 export enum Mode {
   MESSAGE,
@@ -63,7 +64,8 @@ export enum Mode {
   LOGIN_FORM,
   REGISTRATION_FORM,
   LOADING,
-  UNAVAILABLE
+  UNAVAILABLE,
+  OUTDATED
 };
 
 const transitionModes = [
@@ -90,7 +92,8 @@ const noTransitionModes = [
   Mode.LOGIN_FORM,
   Mode.REGISTRATION_FORM,
   Mode.LOADING,
-  Mode.UNAVAILABLE
+  Mode.UNAVAILABLE,
+  Mode.OUTDATED
 ];
 
 export default class UI extends Phaser.GameObjects.Container {
@@ -141,7 +144,8 @@ export default class UI extends Phaser.GameObjects.Container {
       new LoginFormUiHandler(scene),
       new RegistrationFormUiHandler(scene),
       new LoadingModalUiHandler(scene),
-      new UnavailableModalUiHandler(scene)
+      new UnavailableModalUiHandler(scene),
+      new OutdatedModalUiHandler(scene)
     ];
   }