refocusing on target (if any) in case of an external resize

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);

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;

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 {

front/src/WebRtc/CoWebsiteManager.ts

@@ -642,6 +642,7 @@ class CoWebsiteManager {
     private fire(): void {
         this._onResize.next();
         waScaleManager.applyNewSize();
+        waScaleManager.refreshFocusOnTarget();
     }
 
     private fullscreen(): void {

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();