Adding the abaility to track users entering/leaving a zone in the script language.

front/src/Api/Events/EnterLeaveEvent.ts

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

front/src/Api/IframeListener.ts

@@ -4,6 +4,7 @@ import {IframeEvent, isIframeEventWrapper} from "./Events/IframeEvent";
 import {UserInputChatEvent} from "./Events/UserInputChatEvent";
 import * as crypto from "crypto";
 import {HtmlUtils} from "../WebRtc/HtmlUtils";
+import {EnterLeaveEvent} from "./Events/EnterLeaveEvent";
 
 
 
@@ -130,6 +131,24 @@ class IframeListener {
         });
     }
 
+    sendEnterEvent(name: string) {
+        this.postMessage({
+            'type': 'enterEvent',
+            'data': {
+                "name": name
+            } as EnterLeaveEvent
+        });
+    }
+
+    sendLeaveEvent(name: string) {
+        this.postMessage({
+            'type': 'leaveEvent',
+            'data': {
+                "name": name
+            } as EnterLeaveEvent
+        });
+    }
+
     /**
      * Sends the message... to all allowed iframes.
      */

front/src/Phaser/Game/GameScene.ts

@@ -725,6 +725,14 @@ export class GameScene extends ResizableScene implements CenterListener {
             this.playAudio(newValue, true);
         });
 
+        this.gameMap.onPropertyChange('zone', (newValue, oldValue) => {
+            if (newValue === undefined || newValue === false || newValue === '') {
+                iframeListener.sendLeaveEvent(oldValue as string);
+            } else {
+                iframeListener.sendEnterEvent(newValue as string);
+            }
+        });
+
     }
 
     private onMapExit(exitKey: string) {

front/src/iframe_api.ts

@@ -2,10 +2,13 @@ import {ChatEvent, isChatEvent} from "./Api/Events/ChatEvent";
 import {isIframeEventWrapper} from "./Api/Events/IframeEvent";
 import {isUserInputChatEvent, UserInputChatEvent} from "./Api/Events/UserInputChatEvent";
 import {Subject} from "rxjs";
+import {EnterLeaveEvent, isEnterLeaveEvent} from "./Api/Events/EnterLeaveEvent";
 
 interface WorkAdventureApi {
     sendChatMessage(message: string, author: string): void;
     onChatMessage(callback: (message: string) => void): void;
+    onEnterZone(name: string, callback: () => void): void;
+    onLeaveZone(name: string, callback: () => void): void;
 }
 
 declare global {
@@ -16,6 +19,8 @@ declare global {
 type ChatMessageCallback = (message: string) => void;
 
 const userInputChatStream: Subject<UserInputChatEvent> = new Subject();
+const enterStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
+const leaveStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
 
 
 window.WA = {
@@ -39,19 +44,42 @@ window.WA = {
         userInputChatStream.subscribe((userInputChatEvent) => {
             callback(userInputChatEvent.message);
         });
-    }
+    },
+    onEnterZone(name: string, callback: () => void): void {
+        let subject = enterStreams.get(name);
+        if (subject === undefined) {
+            subject = new Subject<EnterLeaveEvent>();
+            enterStreams.set(name, subject);
+        }
+        subject.subscribe(callback);
+    },
+    onLeaveZone(name: string, callback: () => void): void {
+        let subject = leaveStreams.get(name);
+        if (subject === undefined) {
+            subject = new Subject<EnterLeaveEvent>();
+            leaveStreams.set(name, subject);
+        }
+        subject.subscribe(callback);
+    },
 }
 
 window.addEventListener('message', message => {
     if (message.source !== window.parent) {
-        console.log('MESSAGE SKIPPED!!!')
         return; // Skip message in this event listener
     }
 
     const payload = message.data;
+
+    console.log(payload);
+
     if (isIframeEventWrapper(payload)) {
-        if (payload.type === 'userInputChat' && isUserInputChatEvent(payload.data)) {
-            userInputChatStream.next(payload.data);
+        const payloadData = payload.data;
+        if (payload.type === 'userInputChat' && isUserInputChatEvent(payloadData)) {
+            userInputChatStream.next(payloadData);
+        } else if (payload.type === 'enterEvent' && isEnterLeaveEvent(payloadData)) {
+            enterStreams.get(payloadData.name)?.next();
+        } else if (payload.type === 'leaveEvent' && isEnterLeaveEvent(payloadData)) {
+            leaveStreams.get(payloadData.name)?.next();
         }
     }