Implement on enter/leave layer events

front/src/Api/Events/ChangeLayerEvent.ts

@@ -0,0 +1,11 @@
+import * as tg from "generic-type-guard";
+
+export const isChangeLayerEvent = new tg.IsInterface()
+    .withProperties({
+        name: tg.isString,
+    })
+    .get();
+/**
+ * A message sent from the game to the iFrame when a user enters or leaves a layer.
+ */
+export type ChangeLayerEvent = tg.GuardedType<typeof isChangeLayerEvent>;

front/src/Api/Events/HasPlayerMovedEvent.ts

@@ -6,6 +6,8 @@ export const isHasPlayerMovedEvent = new tg.IsInterface()
         moving: tg.isBoolean,
         x: tg.isNumber,
         y: tg.isNumber,
+        oldX: tg.isOptional(tg.isNumber),
+        oldY: tg.isOptional(tg.isNumber),
     })
     .get();
 

front/src/Api/Events/IframeEvent.ts

@@ -29,6 +29,7 @@ import type {
 } from "./ui/TriggerActionMessageEvent";
 import { isMessageReferenceEvent, isTriggerActionMessageEvent } from "./ui/TriggerActionMessageEvent";
 import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEvent";
+import type { ChangeLayerEvent } from "./ChangeLayerEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T;
@@ -75,6 +76,8 @@ export interface IframeResponseEventMap {
     userInputChat: UserInputChatEvent;
     enterEvent: EnterLeaveEvent;
     leaveEvent: EnterLeaveEvent;
+    enterLayerEvent: ChangeLayerEvent;
+    leaveLayerEvent: ChangeLayerEvent;
     buttonClickedEvent: ButtonClickedEvent;
     hasPlayerMoved: HasPlayerMovedEvent;
     menuItemClicked: MenuItemClickedEvent;

front/src/Api/IframeListener.ts

@@ -30,6 +30,7 @@ import { SetTilesEvent, isSetTilesEvent } from "./Events/SetTilesEvent";
 import type { SetVariableEvent } from "./Events/SetVariableEvent";
 import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
 import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
+import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
 
 type AnswererCallback<T extends keyof IframeQueryMap> = (
     query: IframeQueryMap[T]["query"],
@@ -395,6 +396,24 @@ class IframeListener {
         });
     }
 
+    sendEnterLayerEvent(layerName: string) {
+        this.postMessage({
+            type: "enterLayerEvent",
+            data: {
+                name: layerName,
+            } as ChangeLayerEvent,
+        });
+    }
+
+    sendLeaveLayerEvent(layerName: string) {
+        this.postMessage({
+            type: "leaveLayerEvent",
+            data: {
+                name: layerName,
+            } as ChangeLayerEvent,
+        });
+    }
+
     hasPlayerMoved(event: HasPlayerMovedEvent) {
         if (this.sendPlayerMove) {
             this.postMessage({

front/src/Api/iframe/room.ts

@@ -1,6 +1,7 @@
 import { Subject } from "rxjs";
 
 import { EnterLeaveEvent, isEnterLeaveEvent } from "../Events/EnterLeaveEvent";
+import { ChangeLayerEvent, isChangeLayerEvent } from "../Events/ChangeLayerEvent";
 
 import { IframeApiContribution, queryWorkadventure, sendToWorkadventure } from "./IframeApiContribution";
 import { apiCallback } from "./registeredCallbacks";
@@ -12,6 +13,9 @@ import website from "./website";
 const enterStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
 const leaveStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
 
+const enterLayerStreams: Map<string, Subject<void>> = new Map<string, Subject<void>>();
+const leaveLayerStreams: Map<string, Subject<void>> = new Map<string, Subject<void>>();
+
 interface TileDescriptor {
     x: number;
     y: number;
@@ -47,8 +51,25 @@ export class WorkadventureRoomCommands extends IframeApiContribution<Workadventu
                 leaveStreams.get(payloadData.name)?.next();
             },
         }),
+        apiCallback({
+            type: "enterLayerEvent",
+            typeChecker: isChangeLayerEvent,
+            callback: (payloadData: ChangeLayerEvent) => {
+                enterLayerStreams.get(payloadData.name)?.next();
+            },
+        }),
+        apiCallback({
+            type: "leaveLayerEvent",
+            typeChecker: isChangeLayerEvent,
+            callback: (payloadData) => {
+                leaveLayerStreams.get(payloadData.name)?.next();
+            },
+        }),
     ];
 
+    /**
+     * @deprecated Use onEnterLayer instead
+     */
     onEnterZone(name: string, callback: () => void): void {
         let subject = enterStreams.get(name);
         if (subject === undefined) {
@@ -57,6 +78,10 @@ export class WorkadventureRoomCommands extends IframeApiContribution<Workadventu
         }
         subject.subscribe(callback);
     }
+
+    /**
+     * @deprecated Use onLeaveLayer instead
+     */
     onLeaveZone(name: string, callback: () => void): void {
         let subject = leaveStreams.get(name);
         if (subject === undefined) {
@@ -65,12 +90,35 @@ export class WorkadventureRoomCommands extends IframeApiContribution<Workadventu
         }
         subject.subscribe(callback);
     }
+
+    onEnterLayer(layerName: string): Subject<void> {
+        let subject = enterLayerStreams.get(layerName);
+        if (subject === undefined) {
+            subject = new Subject<ChangeLayerEvent>();
+            enterLayerStreams.set(layerName, subject);
+        }
+
+        return subject;
+    }
+
+    onLeaveLayer(layerName: string): Subject<void> {
+        let subject = leaveLayerStreams.get(layerName);
+        if (subject === undefined) {
+            subject = new Subject<ChangeLayerEvent>();
+            leaveLayerStreams.set(layerName, subject);
+        }
+
+        return subject;
+    }
+
     showLayer(layerName: string): void {
         sendToWorkadventure({ type: "showLayer", data: { name: layerName } });
     }
+
     hideLayer(layerName: string): void {
         sendToWorkadventure({ type: "hideLayer", data: { name: layerName } });
     }
+
     setProperty(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {
         sendToWorkadventure({
             type: "setProperty",
@@ -81,10 +129,12 @@ export class WorkadventureRoomCommands extends IframeApiContribution<Workadventu
             },
         });
     }
+
     async getTiledMap(): Promise<ITiledMap> {
         const event = await queryWorkadventure({ type: "getMapData", data: undefined });
         return event.data as ITiledMap;
     }
+
     setTiles(tiles: TileDescriptor[]) {
         sendToWorkadventure({
             type: "setTiles",