added basic WA.camera commands

front/src/Api/Events/CameraFocusOnEvent.ts

@@ -0,0 +1,15 @@
+import * as tg from "generic-type-guard";
+
+export const isCameraFocusOnEvent = new tg.IsInterface()
+    .withProperties({
+        x: tg.isNumber,
+        y: tg.isNumber,
+        width: tg.isNumber,
+        height: tg.isNumber,
+        smooth: tg.isBoolean,
+    })
+    .get();
+/**
+ * A message sent from the iFrame to the game to set the camera focus on certain place.
+ */
+export type CameraFocusOnEvent = tg.GuardedType<typeof isCameraFocusOnEvent>;

front/src/Api/Events/CameraFollowPlayerEvent.ts

@@ -0,0 +1,11 @@
+import * as tg from "generic-type-guard";
+
+export const isCameraFollowPlayerEvent = new tg.IsInterface()
+    .withProperties({
+        smooth: tg.isBoolean,
+    })
+    .get();
+/**
+ * A message sent from the iFrame to the game to make the camera follow player.
+ */
+export type CameraFollowPlayerEvent = tg.GuardedType<typeof isCameraFollowPlayerEvent>;

front/src/Api/Events/CameraSetPositionEvent.ts

@@ -0,0 +1,15 @@
+import * as tg from "generic-type-guard";
+
+export const isCameraSetPositionEvent = new tg.IsInterface()
+    .withProperties({
+        x: tg.isNumber,
+        y: tg.isNumber,
+        width: tg.isNumber,
+        height: tg.isNumber,
+        smooth: tg.isBoolean,
+    })
+    .get();
+/**
+ * A message sent from the iFrame to the game to change the camera position.
+ */
+export type CameraSetPositionEvent = tg.GuardedType<typeof isCameraSetPositionEvent>;

front/src/Api/Events/IframeEvent.ts

@@ -31,6 +31,9 @@ import type { ChangeLayerEvent } from "./ChangeLayerEvent";
 import { isPlayerPosition } from "./PlayerPosition";
 import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
 import type { ChangeZoneEvent } from "./ChangeZoneEvent";
+import type { CameraSetPositionEvent } from "./CameraSetPositionEvent";
+import type { CameraFocusOnEvent } from "./CameraFocusOnEvent";
+import type { CameraFollowPlayerEvent } from "./CameraFollowPlayerEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T;
@@ -42,6 +45,9 @@ export interface TypedMessageEvent<T> extends MessageEvent {
 export type IframeEventMap = {
     loadPage: LoadPageEvent;
     chat: ChatEvent;
+    cameraFocusOn: CameraFocusOnEvent;
+    cameraFollowPlayer: CameraFollowPlayerEvent;
+    cameraSetPosition: CameraSetPositionEvent;
     openPopup: OpenPopupEvent;
     closePopup: ClosePopupEvent;
     openTab: OpenTabEvent;

front/src/Api/IframeListener.ts

@@ -33,6 +33,9 @@ import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Store
 import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
 import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
 import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent";
+import { CameraSetPositionEvent, isCameraSetPositionEvent } from "./Events/CameraSetPositionEvent";
+import { CameraFocusOnEvent, isCameraFocusOnEvent } from "./Events/CameraFocusOnEvent";
+import { CameraFollowPlayerEvent, isCameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent";
 
 type AnswererCallback<T extends keyof IframeQueryMap> = (
     query: IframeQueryMap[T]["query"],
@@ -56,6 +59,15 @@ class IframeListener {
     private readonly _disablePlayerControlStream: Subject<void> = new Subject();
     public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable();
 
+    private readonly _cameraSetPositionStream: Subject<CameraSetPositionEvent> = new Subject();
+    public readonly cameraSetPositionStream = this._cameraSetPositionStream.asObservable();
+
+    private readonly _cameraFocusOnStream: Subject<CameraFocusOnEvent> = new Subject();
+    public readonly cameraFocusOnStream = this._cameraFocusOnStream.asObservable();
+
+    private readonly _cameraFollowPlayerStream: Subject<CameraFollowPlayerEvent> = new Subject();
+    public readonly cameraFollowPlayerStream = this._cameraFollowPlayerStream.asObservable();
+
     private readonly _enablePlayerControlStream: Subject<void> = new Subject();
     public readonly enablePlayerControlStream = this._enablePlayerControlStream.asObservable();
 
@@ -202,6 +214,12 @@ class IframeListener {
                         this._hideLayerStream.next(payload.data);
                     } else if (payload.type === "setProperty" && isSetPropertyEvent(payload.data)) {
                         this._setPropertyStream.next(payload.data);
+                    } else if (payload.type === "cameraSetPosition" && isCameraSetPositionEvent(payload.data)) {
+                        this._cameraSetPositionStream.next(payload.data);
+                    } else if (payload.type === "cameraFocusOn" && isCameraFocusOnEvent(payload.data)) {
+                        this._cameraFocusOnStream.next(payload.data);
+                    } else if (payload.type === "cameraFollowPlayer" && isCameraFollowPlayerEvent(payload.data)) {
+                        this._cameraFollowPlayerStream.next(payload.data);
                     } else if (payload.type === "chat" && isChatEvent(payload.data)) {
                         scriptUtils.sendAnonymousChat(payload.data);
                     } else if (payload.type === "openPopup" && isOpenPopupEvent(payload.data)) {

front/src/Api/iframe/camera.ts

@@ -17,6 +17,27 @@ export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdven
         }),
     ];
 
+    public setPosition(x: number, y: number, width: number, height: number, smooth: boolean = false): void {
+        sendToWorkadventure({
+            type: "cameraSetPosition",
+            data: { x, y, width, height, smooth },
+        });
+    }
+
+    public focusOn(x: number, y: number, width: number, height: number, smooth: boolean = false): void {
+        sendToWorkadventure({
+            type: "cameraFocusOn",
+            data: { x, y, width, height, smooth },
+        });
+    }
+
+    public followPlayer(smooth: boolean = false): void {
+        sendToWorkadventure({
+            type: "cameraFollowPlayer",
+            data: { smooth },
+        });
+    }
+
     onCameraUpdate(callback: WasCameraUpdatedEventCallback): void {
         moveStream.subscribe(callback);
         sendToWorkadventure({

front/src/Api/iframe/chat.ts

@@ -1,4 +1,3 @@
-import type { ChatEvent } from "../Events/ChatEvent";
 import { isUserInputChatEvent, UserInputChatEvent } from "../Events/UserInputChatEvent";
 import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
 import { apiCallback } from "./registeredCallbacks";

front/src/Phaser/Game/CameraManager.ts

@@ -79,10 +79,10 @@ export class CameraManager extends Phaser.Events.EventEmitter {
         );
     }
 
-    public leaveFocusMode(player: Player): void {
+    public leaveFocusMode(player: Player, duration: number = 1000): void {
         this.waScaleManager.setFocusTarget();
-        this.startFollow(player, 1000);
+        this.startFollow(player, duration);
-        this.restoreZoom(1000);
+        this.restoreZoom(duration);
     }
 
     public startFollow(target: object | Phaser.GameObjects.GameObject, duration: number = 0): void {

front/src/Phaser/Game/GameScene.ts

@@ -1070,6 +1070,29 @@ ${escapedMessage}
             })
         );
 
+        this.iframeSubscriptionList.push(
+            iframeListener.cameraSetPositionStream.subscribe((cameraSetPositionEvent) => {
+                // this.cameraManager.enterFocusMode({ ...cameraSetPositionEvent }, undefined, cameraSetPositionEvent.smooth ? 1000 : 0);
+                console.log("camera set position");
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.cameraFocusOnStream.subscribe((cameraFocusOnEvent) => {
+                this.cameraManager.enterFocusMode(
+                    { ...cameraFocusOnEvent },
+                    undefined,
+                    cameraFocusOnEvent.smooth ? 1000 : 0
+                );
+            })
+        );
+
+        this.iframeSubscriptionList.push(
+            iframeListener.cameraFollowPlayerStream.subscribe((cameraFollowPlayerEvent) => {
+                this.cameraManager.leaveFocusMode(this.CurrentPlayer, cameraFollowPlayerEvent.smooth ? 1000 : 0);
+            })
+        );
+
         this.iframeSubscriptionList.push(
             iframeListener.playSoundStream.subscribe((playSoundEvent) => {
                 const url = new URL(playSoundEvent.url, this.MapUrlFile);