From 3d9e2ad49aa39cbd8edd984da25a232e3dafcec5 Mon Sep 17 00:00:00 2001 From: GRL Date: Wed, 2 Jun 2021 16:08:31 +0200 Subject: [PATCH] Save zoom level of the game and restore it when quitting the login scenes SelectCompanionScene with zoom on mobile --- .../SelectCompanion/SelectCompanionScene.svelte | 8 ++++---- front/src/Phaser/Login/CustomizeScene.ts | 16 ++++++++++------ .../Phaser/Login/SelectCharacterMobileScene.ts | 3 +++ front/src/Phaser/Login/SelectCharacterScene.ts | 10 ++++++---- front/src/Phaser/Login/SelectCompanionScene.ts | 7 +++++++ front/src/Phaser/Services/WaScaleManager.ts | 10 ++++++++++ 6 files changed, 40 insertions(+), 14 deletions(-) diff --git a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte index 58207df6..205a18ee 100644 --- a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte +++ b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte @@ -75,11 +75,11 @@ } @media only screen and (max-width: 800px) { - .selectCompanionScene button.selectCharacterButtonLeft{ - left: 10vw; + form.selectCompanionScene button.selectCharacterButtonLeft{ + left: 5vw; } - .selectCompanionScene button.selectCharacterButtonRight{ - right: 10vw; + form.selectCompanionScene button.selectCharacterButtonRight{ + right: 5vw; } } diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index b0a9f00a..a10d2e07 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/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); } diff --git a/front/src/Phaser/Login/SelectCharacterMobileScene.ts b/front/src/Phaser/Login/SelectCharacterMobileScene.ts index 635e0b75..b6371eab 100644 --- a/front/src/Phaser/Login/SelectCharacterMobileScene.ts +++ b/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(); } diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 8c79e51b..34373b57 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/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(); diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts index 6efbbaea..9caa88f7 100644 --- a/front/src/Phaser/Login/SelectCompanionScene.ts +++ b/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 = new Array(); private companionModels: Array = []; + 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); diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index 8ca4ad20..acbecc38 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/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. */