From b00d24dbf7d2ba62cdc3c6e518bd881c3a6abe0a Mon Sep 17 00:00:00 2001 From: Hanusiak Piotr Date: Tue, 7 Dec 2021 12:48:08 +0100 Subject: [PATCH] refocusing on target (if any) in case of an external resize --- front/src/Phaser/Game/CameraManager.ts | 10 +++++++ front/src/Phaser/Services/HdpiManager.ts | 2 +- front/src/Phaser/Services/WaScaleManager.ts | 30 +++++++++++++++++---- front/src/WebRtc/CoWebsiteManager.ts | 1 + front/src/index.ts | 2 ++ 5 files changed, 39 insertions(+), 6 deletions(-) diff --git a/front/src/Phaser/Game/CameraManager.ts b/front/src/Phaser/Game/CameraManager.ts index 00006a7d..15fa76c2 100644 --- a/front/src/Phaser/Game/CameraManager.ts +++ b/front/src/Phaser/Game/CameraManager.ts @@ -31,6 +31,14 @@ export class CameraManager extends Phaser.Events.EventEmitter { this.waScaleManager = waScaleManager; this.initCamera(); + + this.scene.game.events.on("wa-scale-manager:refresh-focus-on-target", () => { + const focusOn = this.waScaleManager.getFocusTarget(); + if (!focusOn) { + return; + } + this.camera.centerOn(focusOn.x + focusOn.width * 0.5, focusOn.y + focusOn.height * 0.5); + }); } public getCamera(): Phaser.Cameras.Scene2D.Camera { @@ -43,6 +51,7 @@ export class CameraManager extends Phaser.Events.EventEmitter { ): void { this.setCameraMode(CameraMode.Focus); this.waScaleManager.saveZoom(); + this.waScaleManager.setFocusTarget(focusOn); this.restoreZoomTween?.stop(); const targetZoomModifier = this.waScaleManager.getTargetZoomModifierFor(focusOn.width, focusOn.height); @@ -62,6 +71,7 @@ export class CameraManager extends Phaser.Events.EventEmitter { } public leaveFocusMode(player: Player): void { + this.waScaleManager.setFocusTarget(); // We are forcing camera.pan to kill previous pan animation on EnterFocusMode this.camera.pan(player.x, player.y, 1, Easing.SineEaseOut, true); this.startFollow(player); diff --git a/front/src/Phaser/Services/HdpiManager.ts b/front/src/Phaser/Services/HdpiManager.ts index 116f6816..9c4e9af4 100644 --- a/front/src/Phaser/Services/HdpiManager.ts +++ b/front/src/Phaser/Services/HdpiManager.ts @@ -94,7 +94,7 @@ export class HdpiManager { /** * We only accept integer but we make an exception for 1.5 */ - private getOptimalZoomLevel(realPixelNumber: number): number { + public getOptimalZoomLevel(realPixelNumber: number): number { const result = Math.sqrt(realPixelNumber / this.minRecommendedGamePixelsNumber); if (1.5 <= result && result < 2) { return 1.5; diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index 838f82d2..574f3b99 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -12,6 +12,8 @@ export class WaScaleManager { private actualZoom: number = 1; private _saveZoom: number = 1; + private focusTarget?: { x: number; y: number; width: number; height: number }; + public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) { this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber); } @@ -23,15 +25,14 @@ export class WaScaleManager { public applyNewSize() { const { width, height } = coWebsiteManager.getGameSize(); - const devicePixelRatio = window.devicePixelRatio ?? 1; - const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({ width: width * devicePixelRatio, height: height * devicePixelRatio, }); this.actualZoom = realSize.width / gameSize.width / devicePixelRatio; + this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio); this.scaleManager.resize(gameSize.width, gameSize.height); @@ -56,6 +57,25 @@ export class WaScaleManager { this.game.markDirty(); } + /** + * Use this in case of resizing while focusing on something + */ + public refreshFocusOnTarget(): void { + if (!this.focusTarget) { + return; + } + this.zoomModifier = this.getTargetZoomModifierFor(this.focusTarget.width, this.focusTarget.height); + this.game.events.emit("wa-scale-manager:refresh-focus-on-target"); + } + + public setFocusTarget(targetDimensions?: { x: number; y: number; width: number; height: number }): void { + this.focusTarget = targetDimensions; + } + + public getFocusTarget(): { x: number; y: number; width: number; height: number } | undefined { + return this.focusTarget; + } + public getTargetZoomModifierFor(viewportWidth: number, viewportHeight: number) { const { width: gameWidth, height: gameHeight } = coWebsiteManager.getGameSize(); const devicePixelRatio = window.devicePixelRatio ?? 1; @@ -64,9 +84,9 @@ export class WaScaleManager { width: gameWidth * devicePixelRatio, height: gameHeight * devicePixelRatio, }); - // P.H. Note: Dunno where this magic 2 comes from - // Always return lowest possible value. Need to add MAX ZOOM MODIFIER value into this. - return Math.min(realSize.width / viewportWidth / 2, realSize.height / viewportHeight / 2); + const desiredZoom = Math.min(realSize.width / viewportWidth, realSize.height / viewportHeight); + const realPixelNumber = gameWidth * devicePixelRatio * gameHeight * devicePixelRatio; + return desiredZoom / (this.hdpiManager.getOptimalZoomLevel(realPixelNumber) || 1); } public get zoomModifier(): number { diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 09de4b41..7a003604 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -642,6 +642,7 @@ class CoWebsiteManager { private fire(): void { this._onResize.next(); waScaleManager.applyNewSize(); + waScaleManager.refreshFocusOnTarget(); } private fullscreen(): void { diff --git a/front/src/index.ts b/front/src/index.ts index 3cb8d048..a2064cd8 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -144,10 +144,12 @@ window.addEventListener("resize", function (event) { coWebsiteManager.resetStyleMain(); waScaleManager.applyNewSize(); + waScaleManager.refreshFocusOnTarget(); }); coWebsiteManager.onResize.subscribe(() => { waScaleManager.applyNewSize(); + waScaleManager.refreshFocusOnTarget(); }); iframeListener.init();