enter and leave zone events

front/src/Api/Events/ChangeZoneEvent.ts

@@ -0,0 +1,11 @@
+import * as tg from "generic-type-guard";
+
+export const isChangeZoneEvent = 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 ChangeZoneEvent = tg.GuardedType<typeof isChangeZoneEvent>;

front/src/Api/Events/IframeEvent.ts

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

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 { ChangeZoneEvent } from "./Events/ChangeZoneEvent";
 
 type AnswererCallback<T extends keyof IframeQueryMap> = (
     query: IframeQueryMap[T]["query"],
@@ -414,6 +415,24 @@ class IframeListener {
         });
     }
 
+    sendEnterZoneEvent(zoneName: string) {
+        this.postMessage({
+            type: "enterZoneEvent",
+            data: {
+                name: zoneName,
+            } as ChangeZoneEvent,
+        });
+    }
+
+    sendLeaveZoneEvent(zoneName: string) {
+        this.postMessage({
+            type: "leaveZoneEvent",
+            data: {
+                name: zoneName,
+            } as ChangeZoneEvent,
+        });
+    }
+
     hasPlayerMoved(event: HasPlayerMovedEvent) {
         if (this.sendPlayerMove) {
             this.postMessage({

front/src/Phaser/Game/GameMap.ts

@@ -196,9 +196,6 @@ export class GameMap {
      */
     private triggerZonesChange(): void {
         const zones = this.tiledObjects.filter((object) => object.type === "zone");
-
-        // P.H. NOTE: We could also get all of the zones and add properties of occupied tiles to them, so we could later on check collision by using tileKeys
-        // TODO: Change this to an array with currently occupied sone instead of doing elimination process
         const zonesByOldPosition = this.oldPosition
             ? zones.filter((zone) => {
                   if (!this.oldPosition) {

front/src/Phaser/Game/GameScene.ts

@@ -798,9 +798,9 @@ export class GameScene extends DirtyScene {
                             break;
                         }
                     }
-                    // zones.forEach((zone) => {
-                    //     iframeListener.sendEnterLayerEvent(zone.name);
-                    // });
+                    zones.forEach((zone) => {
+                        iframeListener.sendEnterZoneEvent(zone.name);
+                    });
                 });
 
                 this.gameMap.onLeaveZone((zones) => {
@@ -811,9 +811,9 @@ export class GameScene extends DirtyScene {
                             break;
                         }
                     }
-                    // zones.forEach((zone) => {
-                    //     iframeListener.sendEnterLayerEvent(zone.name);
-                    // });
+                    zones.forEach((zone) => {
+                        iframeListener.sendLeaveZoneEvent(zone.name);
+                    });
                 });
 
                 // this.gameMap.onLeaveLayer((layers) => {