Refactoring and documentation update

docs/maps/api-camera.md

@@ -0,0 +1,23 @@
+{.section-title.accent.text-primary}
+# API Camera functions Reference
+
+### Listen to the camera update
+
+```
+WA.camera.onCameraUpdate(callback: WasCameraUpdatedEventCallback): void
+```
+
+Listens to the updating of the camera linked to the player. It will trigger for every update of the camera's properties (position or scale for instance) or of the Game Object it is linked to (undestand: if the player moves). An event will then be sent.
+
+The event has the following attributes :
+*   **x (number):** coordinate X of the camera's world view (the area looked at by the camera).
+*   **y (number):** coordinate Y of the camera's world view.
+*   **width (number):** the width of the camera's world view.
+*   **height (number):** the height of the camera's world view.
+
+**callback:** the function that will be called when the camera is updated.
+
+Example :
+```javascript
+WA.camera.onCameraUpdate((worldView) => console.log(worldView));
+```

docs/maps/api-reference.md

@@ -10,5 +10,6 @@
 - [UI functions](api-ui.md)
 - [Sound functions](api-sound.md)
 - [Controls functions](api-controls.md)
+- [Camera functions](api-camera.md)
 
 - [List of deprecated functions](api-deprecated.md)

front/src/Api/Events/IframeEvent.ts

@@ -32,7 +32,7 @@ import { isPlayerPropertyEvent } from "./PlayerPropertyEvent";
 import type { ChangeZoneEvent } from "./ChangeZoneEvent";
 import { isColorEvent } from "./ColorEvent";
 import { isPlayerPosition } from "./PlayerPosition";
-import type { HasCameraMovedEvent } from "./HasCameraMovedEvent";
+import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T;
@@ -53,7 +53,7 @@ export type IframeEventMap = {
     displayBubble: null;
     removeBubble: null;
     onPlayerMove: undefined;
-    onCameraMove: undefined;
+    onCameraUpdate: undefined;
     showLayer: LayerEvent;
     hideLayer: LayerEvent;
     setProperty: SetPropertyEvent;
@@ -86,7 +86,7 @@ export interface IframeResponseEventMap {
     leaveZoneEvent: ChangeZoneEvent;
     buttonClickedEvent: ButtonClickedEvent;
     hasPlayerMoved: HasPlayerMovedEvent;
-    hasCameraMoved: HasCameraMovedEvent;
+    wasCameraUpdated: WasCameraUpdatedEvent;
     menuItemClicked: MenuItemClickedEvent;
     setVariable: SetVariableEvent;
     messageTriggered: MessageReferenceEvent;

front/src/Api/Events/WasCameraUpdatedEvent.ts

@@ -1,6 +1,6 @@
 import * as tg from "generic-type-guard";
 
-export const isHasCameraMovedEvent = new tg.IsInterface()
+export const isWasCameraUpdatedEvent = new tg.IsInterface()
     .withProperties({
         x: tg.isNumber,
         y: tg.isNumber,
@@ -13,6 +13,6 @@ export const isHasCameraMovedEvent = new tg.IsInterface()
  * A message sent from the game to the iFrame to notify a movement from the camera.
  */
 
-export type HasCameraMovedEvent = tg.GuardedType<typeof isHasCameraMovedEvent>;
+export type WasCameraUpdatedEvent = tg.GuardedType<typeof isWasCameraUpdatedEvent>;
 
-export type HasCameraMovedEventCallback = (event: HasCameraMovedEvent) => void;
+export type WasCameraUpdatedEventCallback = (event: WasCameraUpdatedEvent) => void;

front/src/Api/IframeListener.ts

@@ -31,6 +31,7 @@ import type { SetVariableEvent } from "./Events/SetVariableEvent";
 import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
 import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
 import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
+import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
 import type { HasCameraMovedEvent } from "./Events/HasCameraMovedEvent";
 import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent";
 
@@ -96,7 +97,7 @@ class IframeListener {
     private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>();
     private readonly scripts = new Map<string, HTMLIFrameElement>();
     private sendPlayerMove: boolean = false;
-    private sendCameraMove: boolean = false;
+    private sendCameraUpdate: boolean = false;
 
     // Note: we are forced to type this in unknown and later cast with "as" because of https://github.com/microsoft/TypeScript/issues/31904
     private answerers: {
@@ -228,8 +229,8 @@ class IframeListener {
                         this._removeBubbleStream.next();
                     } else if (payload.type == "onPlayerMove") {
                         this.sendPlayerMove = true;
-                    } else if (payload.type == "onCameraMove") {
+                    } else if (payload.type == "onCameraUpdate") {
-                        this.sendCameraMove = true;
+                        this.sendCameraUpdate = true;
                     } else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
                         this._setTilesStream.next(payload.data);
                     } else if (payload.type == "modifyEmbeddedWebsite" && isEmbeddedWebsiteEvent(payload.data)) {
@@ -446,10 +447,10 @@ class IframeListener {
         }
     }
 
-    hasCameraMoved(event: HasCameraMovedEvent) {
+    sendCameraUpdated(event: WasCameraUpdatedEvent) {
-        if (this.sendCameraMove) {
+        if (this.sendCameraUpdate) {
             this.postMessage({
-                type: "hasCameraMoved",
+                type: "wasCameraUpdated",
                 data: event,
             });
         }

front/src/Api/iframe/camera.ts

@@ -1,26 +1,26 @@
 import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
 import { Subject } from "rxjs";
-import type { HasCameraMovedEvent, HasCameraMovedEventCallback } from "../Events/HasCameraMovedEvent";
+import type { WasCameraUpdatedEvent, WasCameraUpdatedEventCallback } from "../Events/WasCameraUpdatedEvent";
 import { apiCallback } from "./registeredCallbacks";
-import { isHasCameraMovedEvent } from "../Events/HasCameraMovedEvent";
+import { isWasCameraUpdatedEvent } from "../Events/WasCameraUpdatedEvent";
 
-const moveStream = new Subject<HasCameraMovedEvent>();
+const moveStream = new Subject<WasCameraUpdatedEvent>();
 
 export class WorkAdventureCameraCommands extends IframeApiContribution<WorkAdventureCameraCommands> {
     callbacks = [
         apiCallback({
-            type: "hasCameraMoved",
+            type: "wasCameraUpdated",
-            typeChecker: isHasCameraMovedEvent,
+            typeChecker: isWasCameraUpdatedEvent,
             callback: (payloadData) => {
                 moveStream.next(payloadData);
             },
         }),
     ];
 
-    onCameraMove(callback: HasCameraMovedEventCallback): void {
+    onCameraUpdate(callback: WasCameraUpdatedEventCallback): void {
         moveStream.subscribe(callback);
         sendToWorkadventure({
-            type: "onCameraMove",
+            type: "onCameraUpdate",
             data: null,
         });
     }

front/src/Phaser/Game/GameScene.ts

@@ -94,7 +94,7 @@ import { SetPlayerDetailsMessage } from "../../Messages/generated/messages_pb";
 import { followUsersColorStore, followUsersStore } from "../../Stores/FollowStore";
 import { getColorRgbFromHue } from "../../WebRtc/ColorGenerator";
 import Camera = Phaser.Cameras.Scene2D.Camera;
-import type { HasCameraMovedEvent } from "../../Api/Events/HasCameraMovedEvent";
+import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -787,13 +787,13 @@ export class GameScene extends DirtyScene {
 
                 //listen event to share the actual worldView when the camera is updated
                 this.cameras.main.on("followupdate", (camera: Camera) => {
-                    const worldView: HasCameraMovedEvent = {
+                    const worldView: WasCameraUpdatedEvent = {
                         x: camera.worldView.x,
                         y: camera.worldView.y,
                         width: camera.worldView.width,
                         height: camera.worldView.height,
                     };
-                    iframeListener.hasCameraMoved(worldView);
+                    iframeListener.sendCameraUpdated(worldView);
                 });
 
                 // Set up variables manager