Save zoom level of the game and restore it when quitting the login scenes

SelectCompanionScene with zoom on mobile

front/src/Components/SelectCompanion/SelectCompanionScene.svelte

@@ -75,11 +75,11 @@
   }
 
   @media only screen and (max-width: 800px) {
-    .selectCompanionScene button.selectCharacterButtonLeft{
+    form.selectCompanionScene button.selectCharacterButtonLeft{
-      left: 10vw;
+      left: 5vw;
     }
-    .selectCompanionScene button.selectCharacterButtonRight{
+    form.selectCompanionScene button.selectCharacterButtonRight{
-      right: 10vw;
+      right: 5vw;
     }
   }
 

front/src/Phaser/Login/CustomizeScene.ts

@@ -13,6 +13,8 @@ import { MenuScene } from "../Menu/MenuScene";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
 import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
+import {waScaleManager} from "../Services/WaScaleManager";
+import {isMobile} from "../../Enum/EnvironmentVariable";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -52,11 +54,16 @@ export class CustomizeScene extends AbstractCharacterScene {
         addLoader(this);
     }
 
-    create() {
+    create(data: { from: string; }) {
         customCharacterSceneVisibleStore.set(true);
-
         this.events.addListener('wake', () => { customCharacterSceneVisibleStore.set(true); });
 
+        if (data.from === 'NoScene') {
+            //Save the zoom level only if the previous scene didn't already save it
+            waScaleManager.saveZoom();
+        }
+        waScaleManager.zoomModifier = isMobile() ? 2 : 1;
+
         this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
         this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
         this.add.existing(this.Rectangle);
@@ -214,10 +221,6 @@ export class CustomizeScene extends AbstractCharacterScene {
                 this.containersRow[i][j].add(children);
             }
         }
-    }
-
-    update(time: number, delta: number): void {
-
     }
 
      public onResize(): void {
@@ -242,6 +245,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
             gameManager.setCharacterLayers(layers);
             this.scene.sleep(CustomizeSceneName);
+            waScaleManager.restoreZoom();
             gameManager.tryResumingGame(this, EnableCameraSceneName);
             customCharacterSceneVisibleStore.set(false);
     }

front/src/Phaser/Login/SelectCharacterMobileScene.ts

@@ -1,9 +1,12 @@
 import { SelectCharacterScene } from "./SelectCharacterScene";
+import {waScaleManager} from "../Services/WaScaleManager";
 
 export class SelectCharacterMobileScene extends SelectCharacterScene {
 
     create(){
         super.create();
+        waScaleManager.zoomModifier = 2;
+        this.onResize();
         this.selectedRectangle.destroy();
     }
 

front/src/Phaser/Login/SelectCharacterScene.ts

@@ -13,6 +13,7 @@ import {PinchManager} from "../UserInput/PinchManager";
 import {MenuScene} from "../Menu/MenuScene";
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
+import {waScaleManager} from "../Services/WaScaleManager";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -58,6 +59,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             new PinchManager(this);
         }
 
+        waScaleManager.saveZoom();
+        waScaleManager.zoomModifier = 1;
+
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
         this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
         this.selectedRectangle.setDepth(2);
@@ -91,6 +95,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             return;
         }
         this.scene.stop(SelectCharacterSceneName);
+        waScaleManager.restoreZoom();
         gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.players = [];
@@ -102,7 +107,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             return;
         }
         this.scene.sleep(SelectCharacterSceneName);
-        this.scene.run(CustomizeSceneName);
+        this.scene.run(CustomizeSceneName, {from: 'SelectCharacter'});
         selectCharacterSceneVisibleStore.set(false);
     }
 
@@ -223,9 +228,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
     }
 
-    update(time: number, delta: number): void {
-    }
-
     public onResize(): void {
         //move position of user
         this.moveUser();

front/src/Phaser/Login/SelectCompanionScene.ts

@@ -11,6 +11,8 @@ import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import { MenuScene } from "../Menu/MenuScene";
 import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore";
+import {waScaleManager} from "../Services/WaScaleManager";
+import {isMobile} from "../../Enum/EnvironmentVariable";
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
@@ -18,6 +20,7 @@ export class SelectCompanionScene extends ResizableScene {
     private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
     private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
     private companionModels: Array<CompanionResourceDescriptionInterface> = [];
+    private saveZoom: number = 0;
 
     private currentCompanion = 0;
 
@@ -40,6 +43,9 @@ export class SelectCompanionScene extends ResizableScene {
 
         selectCompanionSceneVisibleStore.set(true);
 
+        waScaleManager.saveZoom();
+        waScaleManager.zoomModifier = isMobile() ? 2 : 1;
+
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
@@ -79,6 +85,7 @@ export class SelectCompanionScene extends ResizableScene {
     public closeScene(){
         // next scene
         this.scene.stop(SelectCompanionSceneName);
+        waScaleManager.restoreZoom();
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.scene.remove(SelectCompanionSceneName);
         selectCompanionSceneVisibleStore.set(false);

front/src/Phaser/Services/WaScaleManager.ts

@@ -10,6 +10,7 @@ class WaScaleManager {
     private scaleManager!: ScaleManager;
     private game!: Game;
     private actualZoom: number = 1;
+    private _saveZoom: number = 1;
 
     public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
         this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber);
@@ -57,6 +58,15 @@ class WaScaleManager {
         this.applyNewSize();
     }
 
+    public saveZoom(): void {
+        this._saveZoom = this.hdpiManager.zoomModifier;
+    }
+
+    public restoreZoom(): void{
+        this.hdpiManager.zoomModifier = this._saveZoom;
+        this.applyNewSize();
+    }
+
     /**
      * This is used to scale back the ui components to counter-act the zoom.
      */