Merge remote-tracking branch 'remotes/upstream/develop' into tiles-start-positions

front/src/Api/Events/DataLayerEvent.ts

@@ -0,0 +1,12 @@
+import * as tg from "generic-type-guard";
+
+export const isDataLayerEvent = new tg.IsInterface()
+    .withProperties({
+        data: tg.isObject,
+    })
+    .get();
+
+/**
+ * A message sent from the game to the iFrame when the data of the layers change after the iFrame send a message to the game that it want to listen to the data of the layers
+ */
+export type DataLayerEvent = tg.GuardedType<typeof isDataLayerEvent>;

front/src/Api/Events/GameStateEvent.ts

@@ -0,0 +1,16 @@
+import * as tg from "generic-type-guard";
+
+export const isGameStateEvent = new tg.IsInterface()
+    .withProperties({
+        roomId: tg.isString,
+        mapUrl: tg.isString,
+        nickname: tg.isUnion(tg.isString, tg.isNull),
+        uuid: tg.isUnion(tg.isString, tg.isUndefined),
+        startLayerName: tg.isUnion(tg.isString, tg.isNull),
+        tags: tg.isArray(tg.isString),
+    })
+    .get();
+/**
+ * A message sent from the game to the iFrame when the gameState is received by the script
+ */
+export type GameStateEvent = tg.GuardedType<typeof isGameStateEvent>;

front/src/Api/Events/HasPlayerMovedEvent.ts

@@ -0,0 +1,17 @@
+import * as tg from "generic-type-guard";
+
+export const isHasPlayerMovedEvent = new tg.IsInterface()
+    .withProperties({
+        direction: tg.isElementOf("right", "left", "up", "down"),
+        moving: tg.isBoolean,
+        x: tg.isNumber,
+        y: tg.isNumber,
+    })
+    .get();
+
+/**
+ * A message sent from the game to the iFrame to notify a movement from the current player.
+ */
+export type HasPlayerMovedEvent = tg.GuardedType<typeof isHasPlayerMovedEvent>;
+
+export type HasPlayerMovedEventCallback = (event: HasPlayerMovedEvent) => void;

front/src/Api/Events/IframeEvent.ts

@@ -1,57 +1,71 @@
-
-
-import type { ButtonClickedEvent } from './ButtonClickedEvent';
-import type { ChatEvent } from './ChatEvent';
-import type { ClosePopupEvent } from './ClosePopupEvent';
-import type { EnterLeaveEvent } from './EnterLeaveEvent';
-import type { GoToPageEvent } from './GoToPageEvent';
-import type { LoadPageEvent } from './LoadPageEvent';
-import type { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
-import type { OpenPopupEvent } from './OpenPopupEvent';
-import type { OpenTabEvent } from './OpenTabEvent';
-import type { UserInputChatEvent } from './UserInputChatEvent';
-import type { LoadSoundEvent} from "./LoadSoundEvent";
-import type {PlaySoundEvent} from "./PlaySoundEvent";
-
+import type { GameStateEvent } from "./GameStateEvent";
+import type { ButtonClickedEvent } from "./ButtonClickedEvent";
+import type { ChatEvent } from "./ChatEvent";
+import type { ClosePopupEvent } from "./ClosePopupEvent";
+import type { EnterLeaveEvent } from "./EnterLeaveEvent";
+import type { GoToPageEvent } from "./GoToPageEvent";
+import type { LoadPageEvent } from "./LoadPageEvent";
+import type { OpenCoWebSiteEvent } from "./OpenCoWebSiteEvent";
+import type { OpenPopupEvent } from "./OpenPopupEvent";
+import type { OpenTabEvent } from "./OpenTabEvent";
+import type { UserInputChatEvent } from "./UserInputChatEvent";
+import type { DataLayerEvent } from "./DataLayerEvent";
+import type { LayerEvent } from "./LayerEvent";
+import type { SetPropertyEvent } from "./setPropertyEvent";
+import type { LoadSoundEvent } from "./LoadSoundEvent";
+import type { PlaySoundEvent } from "./PlaySoundEvent";
+import type { MenuItemClickedEvent } from "./ui/MenuItemClickedEvent";
+import type { MenuItemRegisterEvent } from "./ui/MenuItemRegisterEvent";
+import type { HasPlayerMovedEvent } from "./HasPlayerMovedEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
-    data: T
+    data: T;
 }
 
 export type IframeEventMap = {
     //getState: GameStateEvent,
     // updateTile: UpdateTileEvent
-    loadPage: LoadPageEvent
-    chat: ChatEvent,
-    openPopup: OpenPopupEvent
-    closePopup: ClosePopupEvent
-    openTab: OpenTabEvent
-    goToPage: GoToPageEvent
-    openCoWebSite: OpenCoWebSiteEvent
-    closeCoWebSite: null
-    disablePlayerControls: null
-    restorePlayerControls: null
-    displayBubble: null
-    removeBubble: null
-    loadSound: LoadSoundEvent
-    playSound: PlaySoundEvent
-    stopSound: null,
-}
+    loadPage: LoadPageEvent;
+    chat: ChatEvent;
+    openPopup: OpenPopupEvent;
+    closePopup: ClosePopupEvent;
+    openTab: OpenTabEvent;
+    goToPage: GoToPageEvent;
+    openCoWebSite: OpenCoWebSiteEvent;
+    closeCoWebSite: null;
+    disablePlayerControls: null;
+    restorePlayerControls: null;
+    displayBubble: null;
+    removeBubble: null;
+    onPlayerMove: undefined;
+    showLayer: LayerEvent;
+    hideLayer: LayerEvent;
+    setProperty: SetPropertyEvent;
+    getDataLayer: undefined;
+    loadSound: LoadSoundEvent;
+    playSound: PlaySoundEvent;
+    stopSound: null;
+    getState: undefined;
+    registerMenuCommand: MenuItemRegisterEvent;
+};
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;
     data: IframeEventMap[T];
 }
 
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isIframeEventWrapper = (event: any): event is IframeEvent<keyof IframeEventMap> => typeof event.type === 'string';
+export const isIframeEventWrapper = (event: any): event is IframeEvent<keyof IframeEventMap> =>
+    typeof event.type === "string";
 
 export interface IframeResponseEventMap {
-    userInputChat: UserInputChatEvent
-    enterEvent: EnterLeaveEvent
-    leaveEvent: EnterLeaveEvent
-    buttonClickedEvent: ButtonClickedEvent
-    // gameState: GameStateEvent
+    userInputChat: UserInputChatEvent;
+    enterEvent: EnterLeaveEvent;
+    leaveEvent: EnterLeaveEvent;
+    buttonClickedEvent: ButtonClickedEvent;
+    gameState: GameStateEvent;
+    hasPlayerMoved: HasPlayerMovedEvent;
+    dataLayer: DataLayerEvent;
+    menuItemClicked: MenuItemClickedEvent;
 }
 export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
     type: T;
@@ -59,4 +73,6 @@ export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isIframeResponseEventWrapper = (event: { type?: string }): event is IframeResponseEvent<keyof IframeResponseEventMap> => typeof event.type === 'string';
+export const isIframeResponseEventWrapper = (event: {
+    type?: string;
+}): event is IframeResponseEvent<keyof IframeResponseEventMap> => typeof event.type === "string";

front/src/Api/Events/LayerEvent.ts

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

front/src/Api/Events/LoadPageEvent.ts

@@ -1,11 +1,10 @@
 import * as tg from "generic-type-guard";
 
-
-
-export const isLoadPageEvent =
-    new tg.IsInterface().withProperties({
+export const isLoadPageEvent = new tg.IsInterface()
+    .withProperties({
         url: tg.isString,
-    }).get();
+    })
+    .get();
 
 /**
  * A message sent from the iFrame to the game to add a message in the chat.

front/src/Api/Events/setPropertyEvent.ts

@@ -0,0 +1,13 @@
+import * as tg from "generic-type-guard";
+
+export const isSetPropertyEvent = new tg.IsInterface()
+    .withProperties({
+        layerName: tg.isString,
+        propertyName: tg.isString,
+        propertyValue: tg.isUnion(tg.isString, tg.isUnion(tg.isNumber, tg.isUnion(tg.isBoolean, tg.isUndefined))),
+    })
+    .get();
+/**
+ * A message sent from the iFrame to the game to change the value of the property of the layer
+ */
+export type SetPropertyEvent = tg.GuardedType<typeof isSetPropertyEvent>;

front/src/Api/Events/ui/MenuItemClickedEvent.ts

@@ -0,0 +1,11 @@
+import * as tg from "generic-type-guard";
+
+export const isMenuItemClickedEvent = new tg.IsInterface()
+    .withProperties({
+        menuItem: tg.isString,
+    })
+    .get();
+/**
+ * A message sent from the game to the iFrame when a menu item is clicked.
+ */
+export type MenuItemClickedEvent = tg.GuardedType<typeof isMenuItemClickedEvent>;

front/src/Api/Events/ui/MenuItemRegisterEvent.ts

@@ -0,0 +1,26 @@
+import * as tg from "generic-type-guard";
+import { Subject } from "rxjs";
+
+export const isMenuItemRegisterEvent = new tg.IsInterface()
+    .withProperties({
+        menutItem: tg.isString,
+    })
+    .get();
+/**
+ * A message sent from the iFrame to the game to add a new menu item.
+ */
+export type MenuItemRegisterEvent = tg.GuardedType<typeof isMenuItemRegisterEvent>;
+
+export const isMenuItemRegisterIframeEvent = new tg.IsInterface()
+    .withProperties({
+        type: tg.isSingletonString("registerMenuCommand"),
+        data: isMenuItemRegisterEvent,
+    })
+    .get();
+
+const _registerMenuCommandStream: Subject<string> = new Subject();
+export const registerMenuCommandStream = _registerMenuCommandStream.asObservable();
+
+export function handleMenuItemRegistrationEvent(event: MenuItemRegisterEvent) {
+    _registerMenuCommandStream.next(event.menutItem);
+}

front/src/Api/IframeListener.ts

@@ -1,4 +1,3 @@
-
 import { Subject } from "rxjs";
 import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
@@ -10,12 +9,28 @@ import { ClosePopupEvent, isClosePopupEvent } from "./Events/ClosePopupEvent";
 import { scriptUtils } from "./ScriptUtils";
 import { GoToPageEvent, isGoToPageEvent } from "./Events/GoToPageEvent";
 import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent";
-import { IframeEventMap, IframeEvent, IframeResponseEvent, IframeResponseEventMap, isIframeEventWrapper, TypedMessageEvent } from "./Events/IframeEvent";
+import {
+    IframeEvent,
+    IframeEventMap,
+    IframeResponseEvent,
+    IframeResponseEventMap,
+    isIframeEventWrapper,
+    TypedMessageEvent,
+} from "./Events/IframeEvent";
 import type { UserInputChatEvent } from "./Events/UserInputChatEvent";
-import { isLoadPageEvent } from './Events/LoadPageEvent';
-import {isPlaySoundEvent, PlaySoundEvent} from "./Events/PlaySoundEvent";
-import {isStopSoundEvent, StopSoundEvent} from "./Events/StopSoundEvent";
-import {isLoadSoundEvent, LoadSoundEvent} from "./Events/LoadSoundEvent";
+//import { isLoadPageEvent } from './Events/LoadPageEvent';
+import { isPlaySoundEvent, PlaySoundEvent } from "./Events/PlaySoundEvent";
+import { isStopSoundEvent, StopSoundEvent } from "./Events/StopSoundEvent";
+import { isLoadSoundEvent, LoadSoundEvent } from "./Events/LoadSoundEvent";
+import { isSetPropertyEvent, SetPropertyEvent } from "./Events/setPropertyEvent";
+import { isLayerEvent, LayerEvent } from "./Events/LayerEvent";
+import { isMenuItemRegisterEvent } from "./Events/ui/MenuItemRegisterEvent";
+import type { DataLayerEvent } from "./Events/DataLayerEvent";
+import type { GameStateEvent } from "./Events/GameStateEvent";
+import type { HasPlayerMovedEvent } from "./Events/HasPlayerMovedEvent";
+import { isLoadPageEvent } from "./Events/LoadPageEvent";
+import { handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent } from "./Events/ui/MenuItemRegisterEvent";
+
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
  * Also allows to send messages to those iframes.
@@ -33,7 +48,6 @@ class IframeListener {
     private readonly _goToPageStream: Subject<GoToPageEvent> = new Subject();
     public readonly goToPageStream = this._goToPageStream.asObservable();
 
-    
     private readonly _loadPageStream: Subject<string> = new Subject();
     public readonly loadPageStream = this._loadPageStream.asObservable();
 
@@ -58,6 +72,27 @@ class IframeListener {
     private readonly _removeBubbleStream: Subject<void> = new Subject();
     public readonly removeBubbleStream = this._removeBubbleStream.asObservable();
 
+    private readonly _showLayerStream: Subject<LayerEvent> = new Subject();
+    public readonly showLayerStream = this._showLayerStream.asObservable();
+
+    private readonly _hideLayerStream: Subject<LayerEvent> = new Subject();
+    public readonly hideLayerStream = this._hideLayerStream.asObservable();
+
+    private readonly _setPropertyStream: Subject<SetPropertyEvent> = new Subject();
+    public readonly setPropertyStream = this._setPropertyStream.asObservable();
+
+    private readonly _gameStateStream: Subject<void> = new Subject();
+    public readonly gameStateStream = this._gameStateStream.asObservable();
+
+    private readonly _dataLayerChangeStream: Subject<void> = new Subject();
+    public readonly dataLayerChangeStream = this._dataLayerChangeStream.asObservable();
+
+    private readonly _registerMenuCommandStream: Subject<string> = new Subject();
+    public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable();
+
+    private readonly _unregisterMenuCommandStream: Subject<string> = new Subject();
+    public readonly unregisterMenuCommandStream = this._unregisterMenuCommandStream.asObservable();
+
     private readonly _playSoundStream: Subject<PlaySoundEvent> = new Subject();
     public readonly playSoundStream = this._playSoundStream.asObservable();
 
@@ -68,21 +103,21 @@ class IframeListener {
     public readonly loadSoundStream = this._loadSoundStream.asObservable();
 
     private readonly iframes = new Set<HTMLIFrameElement>();
+    private readonly iframeCloseCallbacks = new Map<HTMLIFrameElement, (() => void)[]>();
     private readonly scripts = new Map<string, HTMLIFrameElement>();
+    private sendPlayerMove: boolean = false;
 
     init() {
-        window.addEventListener("message", (message: TypedMessageEvent<IframeEvent<keyof IframeEventMap>>) => {
-            // Do we trust the sender of this message?
-            // Let's only accept messages from the iframe that are allowed.
-            // Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain).
-            let foundSrc: string | undefined;
+        window.addEventListener(
+            "message",
+            (message: TypedMessageEvent<IframeEvent<keyof IframeEventMap>>) => {
+                // Do we trust the sender of this message?
+                // Let's only accept messages from the iframe that are allowed.
+                // Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain).
+                let foundSrc: string | undefined;
 
-            foundSrc = [...this.scripts.keys()].find(key => {
-                return this.scripts.get(key)?.contentWindow == message.source
-            });
-
-            if (foundSrc === undefined) {
-                for (const iframe of this.iframes) {
+                let iframe: HTMLIFrameElement;
+                for (iframe of this.iframes) {
                     if (iframe.contentWindow === message.source) {
                         foundSrc = iframe.src;
                         break;
@@ -92,59 +127,77 @@ class IframeListener {
                 if (foundSrc === undefined) {
                     return;
                 }
-            }
 
-            const payload = message.data;
-            if (isIframeEventWrapper(payload)) {
-                if (payload.type === 'chat' && isChatEvent(payload.data)) {
-                    this._chatStream.next(payload.data);
-                } else if (payload.type === 'openPopup' && isOpenPopupEvent(payload.data)) {
-                    this._openPopupStream.next(payload.data);
-                } else if (payload.type === 'closePopup' && isClosePopupEvent(payload.data)) {
-                    this._closePopupStream.next(payload.data);
-                }
-                else if (payload.type === 'openTab' && isOpenTabEvent(payload.data)) {
-                    scriptUtils.openTab(payload.data.url);
-                }
-                else if (payload.type === 'goToPage' && isGoToPageEvent(payload.data)) {
-                    scriptUtils.goToPage(payload.data.url);
-                }
-                else if (payload.type === 'playSound' && isPlaySoundEvent(payload.data)) {
-                    this._playSoundStream.next(payload.data);
-                }
-                else if (payload.type === 'stopSound' && isStopSoundEvent(payload.data)) {
-                    this._stopSoundStream.next(payload.data);
-                }
-                else if (payload.type === 'loadSound' && isLoadSoundEvent(payload.data)) {
-                    this._loadSoundStream.next(payload.data);
-                }
-                else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    scriptUtils.openCoWebsite(payload.data.url, foundSrc);
+                const payload = message.data;
+                if (isIframeEventWrapper(payload)) {
+                    if (payload.type === "showLayer" && isLayerEvent(payload.data)) {
+                        this._showLayerStream.next(payload.data);
+                    } else if (payload.type === "hideLayer" && isLayerEvent(payload.data)) {
+                        this._hideLayerStream.next(payload.data);
+                    } else if (payload.type === "setProperty" && isSetPropertyEvent(payload.data)) {
+                        this._setPropertyStream.next(payload.data);
+                    } else if (payload.type === "chat" && isChatEvent(payload.data)) {
+                        this._chatStream.next(payload.data);
+                    } else if (payload.type === "openPopup" && isOpenPopupEvent(payload.data)) {
+                        this._openPopupStream.next(payload.data);
+                    } else if (payload.type === "closePopup" && isClosePopupEvent(payload.data)) {
+                        this._closePopupStream.next(payload.data);
+                    } else if (payload.type === "openTab" && isOpenTabEvent(payload.data)) {
+                        scriptUtils.openTab(payload.data.url);
+                    } else if (payload.type === "goToPage" && isGoToPageEvent(payload.data)) {
+                        scriptUtils.goToPage(payload.data.url);
+                    } else if (payload.type === "loadPage" && isLoadPageEvent(payload.data)) {
+                        this._loadPageStream.next(payload.data.url);
+                    } else if (payload.type === "playSound" && isPlaySoundEvent(payload.data)) {
+                        this._playSoundStream.next(payload.data);
+                    } else if (payload.type === "stopSound" && isStopSoundEvent(payload.data)) {
+                        this._stopSoundStream.next(payload.data);
+                    } else if (payload.type === "loadSound" && isLoadSoundEvent(payload.data)) {
+                        this._loadSoundStream.next(payload.data);
+                    } else if (payload.type === "openCoWebSite" && isOpenCoWebsite(payload.data)) {
+                        scriptUtils.openCoWebsite(payload.data.url, foundSrc);
+                    } else if (payload.type === "closeCoWebSite") {
+                        scriptUtils.closeCoWebSite();
+                    } else if (payload.type === "disablePlayerControls") {
+                        this._disablePlayerControlStream.next();
+                    } else if (payload.type === "restorePlayerControls") {
+                        this._enablePlayerControlStream.next();
+                    } else if (payload.type === "displayBubble") {
+                        this._displayBubbleStream.next();
+                    } else if (payload.type === "removeBubble") {
+                        this._removeBubbleStream.next();
+                    } else if (payload.type == "getState") {
+                        this._gameStateStream.next();
+                    } else if (payload.type == "onPlayerMove") {
+                        this.sendPlayerMove = true;
+                    } else if (payload.type == "getDataLayer") {
+                        this._dataLayerChangeStream.next();
+                    } else if (isMenuItemRegisterIframeEvent(payload)) {
+                        const data = payload.data.menutItem;
+                        // @ts-ignore
+                        this.iframeCloseCallbacks.get(iframe).push(() => {
+                            this._unregisterMenuCommandStream.next(data);
+                        });
+                        handleMenuItemRegistrationEvent(payload.data);
+                    }
                 }
+            },
+            false
+        );
+    }
 
-                else if (payload.type === 'closeCoWebSite') {
-                    scriptUtils.closeCoWebSite();
-                }
-
-                else if (payload.type === 'disablePlayerControls') {
-                    this._disablePlayerControlStream.next();
-                }
-                else if (payload.type === 'restorePlayerControls') {
-                    this._enablePlayerControlStream.next();
-                }
-                else if (payload.type === 'displayBubble') {
-                    this._displayBubbleStream.next();
-                }
-                else if (payload.type === 'removeBubble') {
-                    this._removeBubbleStream.next();
-                }else if (payload.type === 'loadPage' && isLoadPageEvent(payload.data)){
-                    this._loadPageStream.next(payload.data.url);
-                }
-            }
-
-
-        }, false);
+    sendDataLayerEvent(dataLayerEvent: DataLayerEvent) {
+        this.postMessage({
+            type: "dataLayer",
+            data: dataLayerEvent,
+        });
+    }
 
+    sendGameStateEvent(gameStateEvent: GameStateEvent) {
+        this.postMessage({
+            type: "gameState",
+            data: gameStateEvent,
+        });
     }
 
     /**
@@ -152,25 +205,29 @@ class IframeListener {
      */
     registerIframe(iframe: HTMLIFrameElement): void {
         this.iframes.add(iframe);
+        this.iframeCloseCallbacks.set(iframe, []);
     }
 
     unregisterIframe(iframe: HTMLIFrameElement): void {
+        this.iframeCloseCallbacks.get(iframe)?.forEach((callback) => {
+            callback();
+        });
         this.iframes.delete(iframe);
     }
 
     registerScript(scriptUrl: string): void {
-        console.log('Loading map related script at ', scriptUrl)
+        console.log("Loading map related script at ", scriptUrl);
 
-        if (!process.env.NODE_ENV || process.env.NODE_ENV === 'development') {
+        if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") {
             // Using external iframe mode (
-            const iframe = document.createElement('iframe');
-            iframe.id = this.getIFrameId(scriptUrl);
-            iframe.style.display = 'none';
-            iframe.src = '/iframe.html?script=' + encodeURIComponent(scriptUrl);
+            const iframe = document.createElement("iframe");
+            iframe.id = IframeListener.getIFrameId(scriptUrl);
+            iframe.style.display = "none";
+            iframe.src = "/iframe.html?script=" + encodeURIComponent(scriptUrl);
 
             // We are putting a sandbox on this script because it will run in the same domain as the main website.
-            iframe.sandbox.add('allow-scripts');
-            iframe.sandbox.add('allow-top-navigation-by-user-activation');
+            iframe.sandbox.add("allow-scripts");
+            iframe.sandbox.add("allow-top-navigation-by-user-activation");
 
             document.body.prepend(iframe);
 
@@ -178,41 +235,45 @@ class IframeListener {
             this.registerIframe(iframe);
         } else {
             // production code
-            const iframe = document.createElement('iframe');
-            iframe.id = this.getIFrameId(scriptUrl);
-            iframe.style.display = 'none';
+            const iframe = document.createElement("iframe");
+            iframe.id = IframeListener.getIFrameId(scriptUrl);
+            iframe.style.display = "none";
 
             // We are putting a sandbox on this script because it will run in the same domain as the main website.
-            iframe.sandbox.add('allow-scripts');
-            iframe.sandbox.add('allow-top-navigation-by-user-activation');
-
-            const html = '<!doctype html>\n' +
-                '\n' +
-                '<html lang="en">\n' +
-                '<head>\n' +
-                '<script src="' + window.location.protocol + '//' + window.location.host + '/iframe_api.js" ></script>\n' +
-                '<script src="' + scriptUrl + '" ></script>\n' +
-                '</head>\n' +
-                '</html>\n';
+            iframe.sandbox.add("allow-scripts");
+            iframe.sandbox.add("allow-top-navigation-by-user-activation");
 
             //iframe.src = "data:text/html;charset=utf-8," + escape(html);
-            iframe.srcdoc = html;
+            iframe.srcdoc =
+                "<!doctype html>\n" +
+                "\n" +
+                '<html lang="en">\n' +
+                "<head>\n" +
+                '<script src="' +
+                window.location.protocol +
+                "//" +
+                window.location.host +
+                '/iframe_api.js" ></script>\n' +
+                '<script src="' +
+                scriptUrl +
+                '" ></script>\n' +
+                "<title></title>\n" +
+                "</head>\n" +
+                "</html>\n";
 
             document.body.prepend(iframe);
 
             this.scripts.set(scriptUrl, iframe);
             this.registerIframe(iframe);
         }
-
-
     }
 
-    private getIFrameId(scriptUrl: string): string {
-        return 'script' + btoa(scriptUrl);
+    private static getIFrameId(scriptUrl: string): string {
+        return "script" + btoa(scriptUrl);
     }
 
     unregisterScript(scriptUrl: string): void {
-        const iFrameId = this.getIFrameId(scriptUrl);
+        const iFrameId = IframeListener.getIFrameId(scriptUrl);
         const iframe = HtmlUtils.getElementByIdOrFail<HTMLIFrameElement>(iFrameId);
         if (!iframe) {
             throw new Error('Unknown iframe for script "' + scriptUrl + '"');
@@ -225,50 +286,58 @@ class IframeListener {
 
     sendUserInputChat(message: string) {
         this.postMessage({
-            'type': 'userInputChat',
-            'data': {
-                'message': message,
-            } as UserInputChatEvent
+            type: "userInputChat",
+            data: {
+                message: message,
+            } as UserInputChatEvent,
         });
     }
 
     sendEnterEvent(name: string) {
         this.postMessage({
-            'type': 'enterEvent',
-            'data': {
-                "name": name
-            } as EnterLeaveEvent
+            type: "enterEvent",
+            data: {
+                name: name,
+            } as EnterLeaveEvent,
         });
     }
 
     sendLeaveEvent(name: string) {
         this.postMessage({
-            'type': 'leaveEvent',
-            'data': {
-                "name": name
-            } as EnterLeaveEvent
+            type: "leaveEvent",
+            data: {
+                name: name,
+            } as EnterLeaveEvent,
         });
     }
 
+    hasPlayerMoved(event: HasPlayerMovedEvent) {
+        if (this.sendPlayerMove) {
+            this.postMessage({
+                type: "hasPlayerMoved",
+                data: event,
+            });
+        }
+    }
+
     sendButtonClickedEvent(popupId: number, buttonId: number): void {
         this.postMessage({
-            'type': 'buttonClickedEvent',
-            'data': {
+            type: "buttonClickedEvent",
+            data: {
                 popupId,
-                buttonId
-            } as ButtonClickedEvent
+                buttonId,
+            } as ButtonClickedEvent,
         });
     }
 
     /**
      * Sends the message... to all allowed iframes.
      */
-    private postMessage(message: IframeResponseEvent<keyof IframeResponseEventMap>) {
+    public postMessage(message: IframeResponseEvent<keyof IframeResponseEventMap>) {
         for (const iframe of this.iframes) {
-            iframe.contentWindow?.postMessage(message, '*');
+            iframe.contentWindow?.postMessage(message, "*");
         }
     }
-
 }
 
 export const iframeListener = new IframeListener();

front/src/Api/iframe/Ui/MenuItem.ts

@@ -0,0 +1,11 @@
+import type { MenuItemClickedEvent } from "../../Events/ui/MenuItemClickedEvent";
+import { iframeListener } from "../../IframeListener";
+
+export function sendMenuClickedEvent(menuItem: string) {
+    iframeListener.postMessage({
+        type: "menuItemClicked",
+        data: {
+            menuItem: menuItem,
+        } as MenuItemClickedEvent,
+    });
+}

front/src/Api/iframe/chat.ts

@@ -1,30 +1,30 @@
-import type { ChatEvent } from '../Events/ChatEvent'
-import { isUserInputChatEvent, UserInputChatEvent } from '../Events/UserInputChatEvent'
-import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution'
+import type { ChatEvent } from "../Events/ChatEvent";
+import { isUserInputChatEvent, UserInputChatEvent } from "../Events/UserInputChatEvent";
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
 import { apiCallback } from "./registeredCallbacks";
-import {Subject} from "rxjs";
+import { Subject } from "rxjs";
 
 const chatStream = new Subject<string>();
 
 class WorkadventureChatCommands extends IframeApiContribution<WorkadventureChatCommands> {
-
-    callbacks = [apiCallback({
-        callback: (event: UserInputChatEvent) => {
-            chatStream.next(event.message);
-        },
-        type: "userInputChat",
-        typeChecker: isUserInputChatEvent
-    })]
-
+    callbacks = [
+        apiCallback({
+            callback: (event: UserInputChatEvent) => {
+                chatStream.next(event.message);
+            },
+            type: "userInputChat",
+            typeChecker: isUserInputChatEvent,
+        }),
+    ];
 
     sendChatMessage(message: string, author: string) {
         sendToWorkadventure({
-            type: 'chat',
+            type: "chat",
             data: {
-                'message': message,
-                'author': author
-            } as ChatEvent
-        })
+                message: message,
+                author: author,
+            },
+        });
     }
 
     /**
@@ -35,4 +35,4 @@ class WorkadventureChatCommands extends IframeApiContribution<WorkadventureChatC
     }
 }
 
-export default new WorkadventureChatCommands()
+export default new WorkadventureChatCommands();

front/src/Api/iframe/nav.ts

@@ -1,56 +1,54 @@
-import type { GoToPageEvent } from '../Events/GoToPageEvent';
-import type { OpenTabEvent } from '../Events/OpenTabEvent';
-import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
-import type {OpenCoWebSiteEvent} from "../Events/OpenCoWebSiteEvent";
-
+import type { GoToPageEvent } from "../Events/GoToPageEvent";
+import type { OpenTabEvent } from "../Events/OpenTabEvent";
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
+import type { OpenCoWebSiteEvent } from "../Events/OpenCoWebSiteEvent";
+import type { LoadPageEvent } from "../Events/LoadPageEvent";
 
 class WorkadventureNavigationCommands extends IframeApiContribution<WorkadventureNavigationCommands> {
-    callbacks = []
-
+    callbacks = [];
 
     openTab(url: string): void {
         sendToWorkadventure({
-            "type": 'openTab',
-            "data": {
-                url
-            } as OpenTabEvent
+            type: "openTab",
+            data: {
+                url,
+            },
         });
     }
 
     goToPage(url: string): void {
         sendToWorkadventure({
-            "type": 'goToPage',
-            "data": {
-                url
-            } as GoToPageEvent
+            type: "goToPage",
+            data: {
+                url,
+            },
         });
     }
 
     goToRoom(url: string): void {
         sendToWorkadventure({
-            "type": 'loadPage',
-            "data": {
-                url
-            }
+            type: "loadPage",
+            data: {
+                url,
+            },
         });
     }
 
     openCoWebSite(url: string): void {
         sendToWorkadventure({
-            "type": 'openCoWebSite',
-            "data": {
-                url
-            } as OpenCoWebSiteEvent
+            type: "openCoWebSite",
+            data: {
+                url,
+            },
         });
     }
 
     closeCoWebSite(): void {
         sendToWorkadventure({
-            "type": 'closeCoWebSite',
-            data: null
+            type: "closeCoWebSite",
+            data: null,
         });
     }
 }
 
-
 export default new WorkadventureNavigationCommands();

front/src/Api/iframe/player.ts

@@ -0,0 +1,29 @@
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
+import type { HasPlayerMovedEvent, HasPlayerMovedEventCallback } from "../Events/HasPlayerMovedEvent";
+import { Subject } from "rxjs";
+import { apiCallback } from "./registeredCallbacks";
+import { isHasPlayerMovedEvent } from "../Events/HasPlayerMovedEvent";
+
+const moveStream = new Subject<HasPlayerMovedEvent>();
+
+class WorkadventurePlayerCommands extends IframeApiContribution<WorkadventurePlayerCommands> {
+    callbacks = [
+        apiCallback({
+            type: "hasPlayerMoved",
+            typeChecker: isHasPlayerMovedEvent,
+            callback: (payloadData) => {
+                moveStream.next(payloadData);
+            },
+        }),
+    ];
+
+    onPlayerMove(callback: HasPlayerMovedEventCallback): void {
+        moveStream.subscribe(callback);
+        sendToWorkadventure({
+            type: "onPlayerMove",
+            data: null,
+        });
+    }
+}
+
+export default new WorkadventurePlayerCommands();

front/src/Api/iframe/room.ts

@@ -1,10 +1,52 @@
 import { Subject } from "rxjs";
-import { EnterLeaveEvent, isEnterLeaveEvent } from '../Events/EnterLeaveEvent';
-import { IframeApiContribution } from './IframeApiContribution';
+import { EnterLeaveEvent, isEnterLeaveEvent } from "../Events/EnterLeaveEvent";
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
 import { apiCallback } from "./registeredCallbacks";
+import type { LayerEvent } from "../Events/LayerEvent";
+import type { SetPropertyEvent } from "../Events/setPropertyEvent";
+import type { GameStateEvent } from "../Events/GameStateEvent";
+import type { ITiledMap } from "../../Phaser/Map/ITiledMap";
+import type { DataLayerEvent } from "../Events/DataLayerEvent";
+import { isGameStateEvent } from "../Events/GameStateEvent";
+import { isDataLayerEvent } from "../Events/DataLayerEvent";
 
 const enterStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
 const leaveStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
+const dataLayerResolver = new Subject<DataLayerEvent>();
+const stateResolvers = new Subject<GameStateEvent>();
+
+let immutableData: GameStateEvent;
+
+interface Room {
+    id: string;
+    mapUrl: string;
+    map: ITiledMap;
+    startLayer: string | null;
+}
+
+interface User {
+    id: string | undefined;
+    nickName: string | null;
+    tags: string[];
+}
+
+function getGameState(): Promise<GameStateEvent> {
+    if (immutableData) {
+        return Promise.resolve(immutableData);
+    } else {
+        return new Promise<GameStateEvent>((resolver, thrower) => {
+            stateResolvers.subscribe(resolver);
+            sendToWorkadventure({ type: "getState", data: null });
+        });
+    }
+}
+
+function getDataLayer(): Promise<DataLayerEvent> {
+    return new Promise<DataLayerEvent>((resolver, thrower) => {
+        dataLayerResolver.subscribe(resolver);
+        sendToWorkadventure({ type: "getDataLayer", data: null });
+    });
+}
 
 class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomCommands> {
     callbacks = [
@@ -13,18 +55,30 @@ class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomC
                 enterStreams.get(payloadData.name)?.next();
             },
             type: "enterEvent",
-            typeChecker: isEnterLeaveEvent
+            typeChecker: isEnterLeaveEvent,
         }),
         apiCallback({
             type: "leaveEvent",
             typeChecker: isEnterLeaveEvent,
             callback: (payloadData) => {
                 leaveStreams.get(payloadData.name)?.next();
-            }
-        })
-
-    ]
-
+            },
+        }),
+        apiCallback({
+            type: "gameState",
+            typeChecker: isGameStateEvent,
+            callback: (payloadData) => {
+                stateResolvers.next(payloadData);
+            },
+        }),
+        apiCallback({
+            type: "dataLayer",
+            typeChecker: isDataLayerEvent,
+            callback: (payloadData) => {
+                dataLayerResolver.next(payloadData);
+            },
+        }),
+    ];
 
     onEnterZone(name: string, callback: () => void): void {
         let subject = enterStreams.get(name);
@@ -33,7 +87,6 @@ class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomC
             enterStreams.set(name, subject);
         }
         subject.subscribe(callback);
-
     }
     onLeaveZone(name: string, callback: () => void): void {
         let subject = leaveStreams.get(name);
@@ -43,8 +96,39 @@ class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomC
         }
         subject.subscribe(callback);
     }
-
+    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",
+            data: {
+                layerName: layerName,
+                propertyName: propertyName,
+                propertyValue: propertyValue,
+            },
+        });
+    }
+    getCurrentRoom(): Promise<Room> {
+        return getGameState().then((gameState) => {
+            return getDataLayer().then((mapJson) => {
+                return {
+                    id: gameState.roomId,
+                    map: mapJson.data as ITiledMap,
+                    mapUrl: gameState.mapUrl,
+                    startLayer: gameState.startLayerName,
+                };
+            });
+        });
+    }
+    getCurrentUser(): Promise<User> {
+        return getGameState().then((gameState) => {
+            return { id: gameState.uuid, nickName: gameState.nickname, tags: gameState.tags };
+        });
+    }
 }
 
-
 export default new WorkadventureRoomCommands();

front/src/Api/iframe/ui.ts

@@ -1,40 +1,55 @@
-import { isButtonClickedEvent } from '../Events/ButtonClickedEvent';
-import type { ClosePopupEvent } from '../Events/ClosePopupEvent';
-import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import { isButtonClickedEvent } from "../Events/ButtonClickedEvent";
+import { isMenuItemClickedEvent } from "../Events/ui/MenuItemClickedEvent";
+import type { MenuItemRegisterEvent } from "../Events/ui/MenuItemRegisterEvent";
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
 import { apiCallback } from "./registeredCallbacks";
-import {Popup} from "./Ui/Popup";
-import type {ButtonClickedCallback, ButtonDescriptor} from "./Ui/ButtonDescriptor";
+import type { ButtonClickedCallback, ButtonDescriptor } from "./Ui/ButtonDescriptor";
+import { Popup } from "./Ui/Popup";
 
 let popupId = 0;
 const popups: Map<number, Popup> = new Map<number, Popup>();
-const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<number, Map<number, ButtonClickedCallback>>();
+const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<
+    number,
+    Map<number, ButtonClickedCallback>
+>();
+
+const menuCallbacks: Map<string, (command: string) => void> = new Map();
 
 interface ZonedPopupOptions {
-    zone: string
-    objectLayerName?: string,
-    popupText: string,
-    delay?: number
-    popupOptions: Array<ButtonDescriptor>
+    zone: string;
+    objectLayerName?: string;
+    popupText: string;
+    delay?: number;
+    popupOptions: Array<ButtonDescriptor>;
 }
 
-
 class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiCommands> {
-
-    callbacks = [apiCallback({
-        type: "buttonClickedEvent",
-        typeChecker: isButtonClickedEvent,
-        callback: (payloadData) => {
-            const callback = popupCallbacks.get(payloadData.popupId)?.get(payloadData.buttonId);
-            const popup = popups.get(payloadData.popupId);
-            if (popup === undefined) {
-                throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
-            }
-            if (callback) {
-                callback(popup);
-            }
-        }
-    })];
-
+    callbacks = [
+        apiCallback({
+            type: "buttonClickedEvent",
+            typeChecker: isButtonClickedEvent,
+            callback: (payloadData) => {
+                const callback = popupCallbacks.get(payloadData.popupId)?.get(payloadData.buttonId);
+                const popup = popups.get(payloadData.popupId);
+                if (popup === undefined) {
+                    throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
+                }
+                if (callback) {
+                    callback(popup);
+                }
+            },
+        }),
+        apiCallback({
+            type: "menuItemClicked",
+            typeChecker: isMenuItemClickedEvent,
+            callback: (event) => {
+                const callback = menuCallbacks.get(event.menuItem);
+                if (callback) {
+                    callback(event.menuItem);
+                }
+            },
+        }),
+    ];
 
     openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
         popupId++;
@@ -53,30 +68,40 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
         }
 
         sendToWorkadventure({
-            'type': 'openPopup',
-            'data': {
+            type: "openPopup",
+            data: {
                 popupId,
                 targetObject,
                 message,
                 buttons: buttons.map((button) => {
                     return {
                         label: button.label,
-                        className: button.className
+                        className: button.className,
                     };
-                })
-            }
+                }),
+            },
         });
 
-        popups.set(popupId, popup)
+        popups.set(popupId, popup);
         return popup;
     }
 
+    registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void) {
+        menuCallbacks.set(commandDescriptor, callback);
+        sendToWorkadventure({
+            type: "registerMenuCommand",
+            data: {
+                menutItem: commandDescriptor,
+            },
+        });
+    }
+
     displayBubble(): void {
-        sendToWorkadventure({ 'type': 'displayBubble', data: null });
+        sendToWorkadventure({ type: "displayBubble", data: null });
     }
 
     removeBubble(): void {
-        sendToWorkadventure({ 'type': 'removeBubble', data: null });
+        sendToWorkadventure({ type: "removeBubble", data: null });
     }
 }