Merge pull request #1719 from thecodingmachine/focusable-zone-allow-zoom

Focusable zone allow zoom

front/src/Phaser/Game/CameraManager.ts

@@ -23,6 +23,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
     private startFollowTween?: Phaser.Tweens.Tween;
 
     private cameraFollowTarget?: { x: number; y: number };
+    private cameraLocked: boolean;
 
     constructor(scene: GameScene, cameraBounds: { x: number; y: number }, waScaleManager: WaScaleManager) {
         super();
@@ -30,6 +31,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
 
         this.camera = scene.cameras.main;
         this.cameraBounds = cameraBounds;
+        this.cameraLocked = false;
 
         this.waScaleManager = waScaleManager;
 
@@ -56,6 +58,8 @@ export class CameraManager extends Phaser.Events.EventEmitter {
         this.waScaleManager.saveZoom();
         this.waScaleManager.setFocusTarget(focusOn);
 
+        this.cameraLocked = true;
+        this.unlockCameraWithDelay(duration);
         this.restoreZoomTween?.stop();
         this.startFollowTween?.stop();
         const marginMult = 1 + margin;
@@ -79,10 +83,11 @@ export class CameraManager extends Phaser.Events.EventEmitter {
         );
     }
 
-    public leaveFocusMode(player: Player): void {
+    public leaveFocusMode(player: Player, duration = 0): void {
         this.waScaleManager.setFocusTarget();
-        this.startFollow(player, 1000);
+        this.unlockCameraWithDelay(duration);
-        this.restoreZoom(1000);
+        this.startFollow(player, duration);
+        this.restoreZoom(duration);
     }
 
     public startFollow(target: object | Phaser.GameObjects.GameObject, duration: number = 0): void {
@@ -132,7 +137,13 @@ export class CameraManager extends Phaser.Events.EventEmitter {
     }
 
     public isCameraLocked(): boolean {
-        return this.cameraMode === CameraMode.Focus;
+        return this.cameraLocked;
+    }
+
+    private unlockCameraWithDelay(delay: number): void {
+        this.scene.time.delayedCall(delay, () => {
+            this.cameraLocked = false;
+        });
     }
 
     private setCameraMode(mode: CameraMode): void {

front/src/Phaser/Game/GameScene.ts

@@ -12,7 +12,7 @@ import { UserInputManager } from "../UserInput/UserInputManager";
 import { gameManager } from "./GameManager";
 import { touchScreenManager } from "../../Touch/TouchScreenManager";
 import { PinchManager } from "../UserInput/PinchManager";
-import { waScaleManager } from "../Services/WaScaleManager";
+import { waScaleManager, WaScaleManagerEvent } from "../Services/WaScaleManager";
 import { EmoteManager } from "./EmoteManager";
 import { soundManager } from "./SoundManager";
 import { SharedVariablesManager } from "./SharedVariablesManager";
@@ -855,7 +855,7 @@ export class GameScene extends DirtyScene {
                     for (const zone of zones) {
                         const focusable = zone.properties?.find((property) => property.name === "focusable");
                         if (focusable && focusable.value === true) {
-                            this.cameraManager.leaveFocusMode(this.CurrentPlayer);
+                            this.cameraManager.leaveFocusMode(this.CurrentPlayer, 1000);
                             break;
                         }
                     }
@@ -2125,7 +2125,7 @@ ${escapedMessage}
         if (this.cameraManager.isCameraLocked()) {
             return;
         }
-        waScaleManager.zoomModifier *= zoomFactor;
+        waScaleManager.handleZoomByFactor(zoomFactor);
         biggestAvailableAreaStore.recompute();
     }
 

front/src/Phaser/Services/WaScaleManager.ts

@@ -5,6 +5,10 @@ import type { Game } from "../Game/Game";
 import { ResizableScene } from "../Login/ResizableScene";
 import { HtmlUtils } from "../../WebRtc/HtmlUtils";
 
+export enum WaScaleManagerEvent {
+    RefreshFocusOnTarget = "wa-scale-manager:refresh-focus-on-target",
+}
+
 export class WaScaleManager {
     private hdpiManager: HdpiManager;
     private scaleManager!: ScaleManager;
@@ -69,7 +73,7 @@ export class WaScaleManager {
             return;
         }
         this.zoomModifier = this.getTargetZoomModifierFor(this.focusTarget.width, this.focusTarget.height);
-        this.game.events.emit("wa-scale-manager:refresh-focus-on-target", this.focusTarget);
+        this.game.events.emit(WaScaleManagerEvent.RefreshFocusOnTarget, this.focusTarget);
     }
 
     public setFocusTarget(targetDimensions?: { x: number; y: number; width: number; height: number }): void {
@@ -98,6 +102,17 @@ export class WaScaleManager {
         this.applyNewSize();
     }
 
+    public handleZoomByFactor(zoomFactor: number): void {
+        this.zoomModifier *= zoomFactor;
+        if (this.focusTarget) {
+            this.game.events.emit(WaScaleManagerEvent.RefreshFocusOnTarget, this.focusTarget);
+        }
+    }
+
+    public getFocusTarget(): { x: number; y: number; width: number; height: number } | undefined {
+        return this.focusTarget;
+    }
+
     public saveZoom(): void {
         this._saveZoom = this.hdpiManager.zoomModifier;
     }

maps/tests/focusable_zone_map.json

@@ -162,7 +162,7 @@
                         {
                          "name":"zoom_margin",
                          "type":"float",
-                         "value":3
+                         "value":0
                         }],
                  "rotation":0,
                  "type":"zone",