send camera update event from CameraManager

front/src/Phaser/Game/CameraManager.ts

@@ -20,6 +20,18 @@ export enum CameraMode {
     Focus = "Focus",
 }
 
+export enum CameraManagerEvent {
+    CameraUpdate = "CameraUpdate",
+}
+
+export interface CameraManagerEventCameraUpdateData {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    zoom: number;
+}
+
 export class CameraManager extends Phaser.Events.EventEmitter {
     private scene: GameScene;
     private camera: Phaser.Cameras.Scene2D.Camera;
@@ -78,6 +90,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
             (camera, progress, x, y) => {
                 if (this.cameraMode === CameraMode.Positioned) {
                     this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
+                    this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
                 }
                 if (progress === 1) {
                     this.playerToFollow?.once(hasMovedEventName, () => {
@@ -125,6 +138,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
             true,
             (camera, progress, x, y) => {
                 this.waScaleManager.zoomModifier = currentZoomModifier + progress * zoomModifierChange;
+                this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
             }
         );
     }
@@ -157,6 +171,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
                 const shiftY =
                     (this.playerToFollow.y - this.camera.worldView.height * 0.5 - oldPos.y) * tween.getValue();
                 this.camera.setScroll(oldPos.x + shiftX, oldPos.y + shiftY);
+                this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
             },
             onComplete: () => {
                 this.camera.startFollow(player, true);
@@ -205,6 +220,7 @@ export class CameraManager extends Phaser.Events.EventEmitter {
             ease: Easing.SineEaseOut,
             onUpdate: (tween: Phaser.Tweens.Tween) => {
                 this.waScaleManager.zoomModifier = tween.getValue();
+                this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
             },
         });
     }
@@ -222,7 +238,26 @@ export class CameraManager extends Phaser.Events.EventEmitter {
                     return;
                 }
                 this.camera.centerOn(focusOn.x + focusOn.width * 0.5, focusOn.y + focusOn.height * 0.5);
+                this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
             }
         );
+
+        this.camera.on("followupdate", () => {
+            this.sendCameraUpdateEvent();
+        });
+    }
+
+    private sendCameraUpdateEvent(): void {
+        this.emit(CameraManagerEvent.CameraUpdate, this.getCameraUpdateEventData());
+    }
+
+    private getCameraUpdateEventData(): CameraManagerEventCameraUpdateData {
+        return {
+            x: this.camera.worldView.x,
+            y: this.camera.worldView.y,
+            width: this.camera.worldView.width,
+            height: this.camera.worldView.height,
+            zoom: this.camera.scaleManager.zoom,
+        };
     }
 }

front/src/Phaser/Game/GameScene.ts

@@ -65,7 +65,7 @@ import type { ActionableItem } from "../Items/ActionableItem";
 import type { ItemFactoryInterface } from "../Items/ItemFactoryInterface";
 import type { ITiledMap, ITiledMapLayer, ITiledMapProperty, ITiledMapObject, ITiledTileSet } from "../Map/ITiledMap";
 import type { AddPlayerInterface } from "./AddPlayerInterface";
-import { CameraManager } from "./CameraManager";
+import { CameraManager, CameraManagerEvent, CameraManagerEventCameraUpdateData } from "./CameraManager";
 import type { HasPlayerMovedEvent } from "../../Api/Events/HasPlayerMovedEvent";
 import type { Character } from "../Entity/Character";
 
@@ -1102,13 +1102,15 @@ ${escapedMessage}
         this.iframeSubscriptionList.push(
             iframeListener.trackCameraUpdateStream.subscribe(() => {
                 if (!this.firstCameraUpdateSent) {
-                    this.cameras.main.on("followupdate", (camera: Camera) => {
+                    this.cameraManager.on(
+                        CameraManagerEvent.CameraUpdate,
+                        (data: CameraManagerEventCameraUpdateData) => {
                             const cameraEvent: WasCameraUpdatedEvent = {
-                            x: camera.worldView.x,
-                            y: camera.worldView.y,
-                            width: camera.worldView.width,
-                            height: camera.worldView.height,
-                            zoom: camera.scaleManager.zoom,
+                                x: data.x,
+                                y: data.y,
+                                width: data.width,
+                                height: data.height,
+                                zoom: data.zoom,
                             };
                             if (
                                 this.lastCameraEvent?.x == cameraEvent.x &&
@@ -1123,7 +1125,8 @@ ${escapedMessage}
                             this.lastCameraEvent = cameraEvent;
                             iframeListener.sendCameraUpdated(cameraEvent);
                             this.firstCameraUpdateSent = true;
-                    });
+                        }
+                    );
 
                     iframeListener.sendCameraUpdated(this.cameras.main);
                 }

maps/tests/CameraApi/script.php

@@ -4,7 +4,8 @@
     <script src="<?php echo $_SERVER["FRONT_URL"] ?>/iframe_api.js"></script>
     <script>
         window.addEventListener('load', () => {
-            console.log('On load');
+            //@ts-ignore
+            WA.camera.onCameraUpdate((worldView) => console.log(worldView));
             WA.onInit().then(() => {
                 console.log('After WA init');
                 const setPositionButton = document.getElementById('setPositionButton');