Merge branch 'metadataScriptingApi' of github.com:thecodingmachine/workadventure into metadataScriptAPIV2

front/src/Api/Events/IframeEvent.ts

@@ -5,9 +5,7 @@ import type { ChatEvent } from './ChatEvent';
 import type { ClosePopupEvent } from './ClosePopupEvent';
 import type { EnterLeaveEvent } from './EnterLeaveEvent';
 import type { GoToPageEvent } from './GoToPageEvent';
-import type { MenuItemClickedEvent } from './MenuItemClickedEvent';
-import type { MenuItemRegisterEvent } from './MenuItemRegisterEvent';
-import type { HasPlayerMovedEvent } from './HasPlayerMovedEvent';
+import type { LoadPageEvent } from './LoadPageEvent';
 import type { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
 import type { OpenPopupEvent } from './OpenPopupEvent';
 import type { OpenTabEvent } from './OpenTabEvent';
@@ -17,16 +15,18 @@ 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";
 import type { ChangeTileEvent } from "./ChangeTileEvent";
 
-
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T
 }
 
 export type IframeEventMap = {
-    getState: GameStateEvent,
-    registerMenuCommand: MenuItemRegisterEvent
+    //getState: GameStateEvent,
+    loadPage: LoadPageEvent
     chat: ChatEvent,
     openPopup: OpenPopupEvent
     closePopup: ClosePopupEvent
@@ -43,11 +43,12 @@ export type IframeEventMap = {
     hideLayer: LayerEvent
     setProperty: SetPropertyEvent
     getDataLayer: undefined
-    //tilsetEvent: TilesetEvent
     loadSound: LoadSoundEvent
     playSound: PlaySoundEvent
     stopSound: null
     changeTile: ChangeTileEvent
+    getState: undefined,
+    registerMenuCommand: MenuItemRegisterEvent
 }
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;

front/src/Api/Events/LoadPageEvent.ts

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

front/src/Api/Events/MenuItemRegisterEvent.ts

@@ -1,10 +0,0 @@
-import * as tg from "generic-type-guard";
-
-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>;

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

@@ -8,3 +8,5 @@ export const isMenuItemClickedEvent =
  * 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,25 @@
+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,30 +1,36 @@
+import {Subject} from "rxjs";
+import {ChatEvent, isChatEvent} from "./Events/ChatEvent";
+import {HtmlUtils} from "../WebRtc/HtmlUtils";
+import type {EnterLeaveEvent} from "./Events/EnterLeaveEvent";
+import {isOpenPopupEvent, OpenPopupEvent} from "./Events/OpenPopupEvent";
+import {isOpenTabEvent, OpenTabEvent} from "./Events/OpenTabEvent";
+import type {ButtonClickedEvent} from "./Events/ButtonClickedEvent";
+import {ClosePopupEvent, isClosePopupEvent} from "./Events/ClosePopupEvent";
+import {scriptUtils} from "./ScriptUtils";
+import {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent";
+import {isOpenCoWebsite, OpenCoWebSiteEvent} from "./Events/OpenCoWebSiteEvent";
+import {
+    IframeEvent,
+    IframeEventMap,
+    IframeResponseEvent,
+    IframeResponseEventMap,
+    isIframeEventWrapper,
+    TypedMessageEvent
+} from "./Events/IframeEvent";
+import type {UserInputChatEvent} from "./Events/UserInputChatEvent";
+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";
+import {ChangeTileEvent, isChangeTileEvent} from "./Events/ChangeTileEvent";
 
-import { Subject } from "rxjs";
-import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
-import { HtmlUtils } from "../WebRtc/HtmlUtils";
-import type { EnterLeaveEvent } from "./Events/EnterLeaveEvent";
-import { isOpenPopupEvent, OpenPopupEvent } from "./Events/OpenPopupEvent";
-import { isOpenTabEvent, OpenTabEvent } from "./Events/OpenTabEvent";
-import type { ButtonClickedEvent } from "./Events/ButtonClickedEvent";
-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 type { UserInputChatEvent } from "./Events/UserInputChatEvent";
-import { isLayerEvent, LayerEvent } from "./Events/LayerEvent";
-import { isSetPropertyEvent, SetPropertyEvent} from "./Events/setPropertyEvent";
-import type { GameStateEvent } from './Events/GameStateEvent';
-import type { HasPlayerMovedEvent } from './Events/HasPlayerMovedEvent';
-import { Math } from 'phaser';
-import type { DataLayerEvent } from "./Events/DataLayerEvent";
-import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent';
-import type { MenuItemClickedEvent } from './Events/MenuItemClickedEvent';
-//import { isTilesetEvent, TilesetEvent } from "./Events/TilesetEvent";
-import { isPlaySoundEvent, PlaySoundEvent } from "./Events/PlaySoundEvent";
-import { isStopSoundEvent, StopSoundEvent } from "./Events/StopSoundEvent";
-import { isLoadSoundEvent, LoadSoundEvent } from "./Events/LoadSoundEvent";
-import { isChangeTileEvent, ChangeTileEvent } from './Events/ChangeTileEvent';
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
  * Also allows to send messages to those iframes.
@@ -43,6 +49,9 @@ 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();
+
     private readonly _openCoWebSiteStream: Subject<OpenCoWebSiteEvent> = new Subject();
     public readonly openCoWebSiteStream = this._openCoWebSiteStream.asObservable();
 
@@ -82,8 +91,8 @@ class IframeListener {
     private readonly _registerMenuCommandStream: Subject<string> = new Subject();
     public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable();
 
-/*    private readonly _tilesetLoaderStream: Subject<TilesetEvent> =  new Subject();
-    public readonly tilesetLoaderStream = this._tilesetLoaderStream.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();
@@ -98,6 +107,7 @@ class IframeListener {
     public readonly changeTileStream = this._changeTileStream.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;
 
@@ -106,14 +116,17 @@ class IframeListener {
             // 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 | null = null;
-            for (const iframe of this.iframes) {
+            let foundSrc: string | undefined;
+
+            let iframe: HTMLIFrameElement;
+            for (iframe of this.iframes) {
                 if (iframe.contentWindow === message.source) {
                     foundSrc = iframe.src;
                     break;
                 }
             }
-            if (!foundSrc) {
+
+            if (foundSrc === undefined) {
                 return;
             }
 
@@ -138,6 +151,9 @@ class IframeListener {
                 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);
                 }
@@ -148,11 +164,7 @@ class IframeListener {
                     this._loadSoundStream.next(payload.data);
                 }
                 else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    const scriptUrl = [...this.scripts.keys()].find(key => {
-                        return this.scripts.get(key)?.contentWindow == message.source
-                    })
-
-                    scriptUtils.openCoWebsite(payload.data.url, scriptUrl || foundSrc);
+                    scriptUtils.openCoWebsite(payload.data.url, foundSrc);
                 }
 
                 else if (payload.type === 'closeCoWebSite') {
@@ -174,6 +186,13 @@ class IframeListener {
                     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)
                 } else if (payload.type == "registerMenuCommand" && isMenuItemRegisterEvent(payload.data)) {
                     this._registerMenuCommandStream.next(payload.data.menutItem)
                 } else if (payload.type == "changeTile" && isChangeTileEvent(payload.data)) {
@@ -192,7 +211,7 @@ class IframeListener {
     }
 
 
-    sendFrozenGameStateEvent(gameStateEvent: GameStateEvent) {
+    sendGameStateEvent(gameStateEvent: GameStateEvent) {
         this.postMessage({
             'type': 'gameState',
             'data': gameStateEvent
@@ -204,9 +223,13 @@ 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);
     }
 
@@ -216,7 +239,7 @@ class IframeListener {
         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.id = IframeListener.getIFrameId(scriptUrl);
             iframe.style.display = 'none';
             iframe.src = '/iframe.html?script=' + encodeURIComponent(scriptUrl);
 
@@ -231,25 +254,24 @@ class IframeListener {
         } else {
             // production code
             const iframe = document.createElement('iframe');
-            iframe.id = this.getIFrameId(scriptUrl);
+            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' +
+            //iframe.src = "data:text/html;charset=utf-8," + escape(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';
 
-            //iframe.src = "data:text/html;charset=utf-8," + escape(html);
-            iframe.srcdoc = html;
-
             document.body.prepend(iframe);
 
             this.scripts.set(scriptUrl, iframe);
@@ -259,12 +281,12 @@ class IframeListener {
 
     }
 
-    private getIFrameId(scriptUrl: string): string {
+    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 + '"');
@@ -275,15 +297,6 @@ class IframeListener {
         this.scripts.delete(scriptUrl);
     }
 
-    sendMenuClickedEvent(menuItem: string) {
-        this.postMessage({
-            'type': 'menuItemClicked',
-            'data': {
-                menuItem: menuItem,
-            } as MenuItemClickedEvent
-        });
-    }
-
     sendUserInputChat(message: string) {
         this.postMessage({
             'type': 'userInputChat',
@@ -333,7 +346,7 @@ class IframeListener {
     /**
      * 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, '*');
         }

front/src/Api/iframe/IframeApiContribution.ts

@@ -0,0 +1,31 @@
+import type * as tg from "generic-type-guard";
+import type { IframeEvent, IframeEventMap, IframeResponseEventMap } from '../Events/IframeEvent';
+
+export function sendToWorkadventure(content: IframeEvent<keyof IframeEventMap>) {
+    window.parent.postMessage(content, "*")
+}
+type GuardedType<Guard extends tg.TypeGuard<unknown>> = Guard extends tg.TypeGuard<infer T> ? T : never
+
+export interface IframeCallback<Key extends keyof IframeResponseEventMap, T = IframeResponseEventMap[Key], Guard = tg.TypeGuard<T>> {
+
+    typeChecker: Guard,
+    callback: (payloadData: T) => void
+}
+
+export interface IframeCallbackContribution<Key extends keyof IframeResponseEventMap> extends IframeCallback<Key> {
+
+    type: Key
+}
+
+/**
+ * !! be aware that the implemented attributes (addMethodsAtRoot and subObjectIdentifier) must be readonly
+ *
+ *
+ */
+
+export abstract class IframeApiContribution<T extends {
+    callbacks: Array<IframeCallbackContribution<keyof IframeResponseEventMap>>,
+}> {
+
+    abstract callbacks: T["callbacks"]
+}

front/src/Api/iframe/Sound/Sound.ts

@@ -0,0 +1,39 @@
+import {sendToWorkadventure} from "../IframeApiContribution";
+import type {LoadSoundEvent} from "../../Events/LoadSoundEvent";
+import type {PlaySoundEvent} from "../../Events/PlaySoundEvent";
+import type {StopSoundEvent} from "../../Events/StopSoundEvent";
+import SoundConfig = Phaser.Types.Sound.SoundConfig;
+
+export class Sound {
+    constructor(private url: string) {
+        sendToWorkadventure({
+            "type": 'loadSound',
+            "data": {
+                url: this.url,
+            } as LoadSoundEvent
+
+        });
+    }
+
+    public play(config: SoundConfig) {
+        sendToWorkadventure({
+            "type": 'playSound',
+            "data": {
+                url: this.url,
+                config
+            } as PlaySoundEvent
+
+        });
+        return this.url;
+    }
+    public stop() {
+        sendToWorkadventure({
+            "type": 'stopSound',
+            "data": {
+                url: this.url,
+            } as StopSoundEvent
+
+        });
+        return this.url;
+    }
+}

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

@@ -0,0 +1,18 @@
+import type {Popup} from "./Popup";
+
+export type ButtonClickedCallback = (popup: Popup) => void;
+
+export interface ButtonDescriptor {
+    /**
+     * The label of the button
+     */
+    label: string,
+    /**
+     * The type of the button. Can be one of "normal", "primary", "success", "warning", "error", "disabled"
+     */
+    className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled",
+    /**
+     * Callback called if the button is pressed
+     */
+    callback: ButtonClickedCallback,
+}

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/Ui/Popup.ts

@@ -0,0 +1,19 @@
+import {sendToWorkadventure} from "../IframeApiContribution";
+import type {ClosePopupEvent} from "../../Events/ClosePopupEvent";
+
+export class Popup {
+    constructor(private id: number) {
+    }
+
+    /**
+     * Closes the popup
+     */
+    public close(): void {
+        sendToWorkadventure({
+            'type': 'closePopup',
+            'data': {
+                'popupId': this.id,
+            } as ClosePopupEvent
+        });
+    }
+}

front/src/Api/iframe/chat.ts

@@ -0,0 +1,38 @@
+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";
+
+const chatStream = new Subject<string>();
+
+class WorkadventureChatCommands extends IframeApiContribution<WorkadventureChatCommands> {
+
+    callbacks = [apiCallback({
+        callback: (event: UserInputChatEvent) => {
+            chatStream.next(event.message);
+        },
+        type: "userInputChat",
+        typeChecker: isUserInputChatEvent
+    })]
+
+
+    sendChatMessage(message: string, author: string) {
+        sendToWorkadventure({
+            type: 'chat',
+            data: {
+                'message': message,
+                'author': author
+            } as ChatEvent
+        })
+    }
+
+    /**
+     * Listen to messages sent by the local user, in the chat.
+     */
+    onChatMessage(callback: (message: string) => void) {
+        chatStream.subscribe(callback);
+    }
+}
+
+export default new WorkadventureChatCommands()

front/src/Api/iframe/controls.ts

@@ -0,0 +1,16 @@
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+
+class WorkadventureControlsCommands extends IframeApiContribution<WorkadventureControlsCommands> {
+    callbacks = []
+
+    disablePlayerControls(): void {
+        sendToWorkadventure({ 'type': 'disablePlayerControls', data: null });
+    }
+
+    restorePlayerControls(): void {
+        sendToWorkadventure({ 'type': 'restorePlayerControls', data: null });
+    }
+}
+
+
+export default new WorkadventureControlsCommands();

front/src/Api/iframe/nav.ts

@@ -0,0 +1,57 @@
+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 = []
+
+
+    openTab(url: string): void {
+        sendToWorkadventure({
+            "type": 'openTab',
+            "data": {
+                url
+            } as OpenTabEvent
+        });
+    }
+
+    goToPage(url: string): void {
+        sendToWorkadventure({
+            "type": 'goToPage',
+            "data": {
+                url
+            } as GoToPageEvent
+        });
+    }
+
+    goToRoom(url: string): void {
+        sendToWorkadventure({
+            "type": 'loadPage',
+            "data": {
+                url
+            } as LoadPageEvent
+        });
+    }
+
+    openCoWebSite(url: string): void {
+        sendToWorkadventure({
+            "type": 'openCoWebSite',
+            "data": {
+                url
+            } as OpenCoWebSiteEvent
+        });
+    }
+
+    closeCoWebSite(): void {
+        sendToWorkadventure({
+            "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/registeredCallbacks.ts

@@ -0,0 +1,16 @@
+import type {IframeResponseEventMap} from "../../Api/Events/IframeEvent";
+import type {IframeCallback} from "../../Api/iframe/IframeApiContribution";
+import type {IframeCallbackContribution} from "../../Api/iframe/IframeApiContribution";
+
+export const registeredCallbacks: { [K in keyof IframeResponseEventMap]?: IframeCallback<K> } = {}
+
+export function apiCallback<T extends keyof IframeResponseEventMap>(callbackData: IframeCallbackContribution<T>): IframeCallbackContribution<keyof IframeResponseEventMap> {
+    const iframeCallback = {
+        typeChecker: callbackData.typeChecker,
+        callback: callbackData.callback
+    } as IframeCallback<T>;
+
+    const newCallback = { [callbackData.type]: iframeCallback };
+    Object.assign(registeredCallbacks, newCallback)
+    return callbackData as unknown as IframeCallbackContribution<keyof IframeResponseEventMap>;
+}

front/src/Api/iframe/room.ts

@@ -0,0 +1,148 @@
+import { Subject } from "rxjs";
+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[]
+}
+
+interface TileDescriptor {
+    x: number
+    y: number
+    tile: number | string
+    layer: 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 = [
+        apiCallback({
+            callback: (payloadData: EnterLeaveEvent) => {
+                enterStreams.get(payloadData.name)?.next();
+            },
+            type: "enterEvent",
+            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);
+        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);
+    }
+    showLayer(layerName: string): void {
+        sendToWorkadventure({type: 'showLayer', data: {'name': layerName} as LayerEvent});
+    }
+    hideLayer(layerName: string): void {
+        sendToWorkadventure({type: 'hideLayer', data: {'name': layerName} as LayerEvent});
+    }
+    setProperty(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {
+        sendToWorkadventure({
+            type: 'setProperty',
+            data: {
+                'layerName': layerName,
+                'propertyName': propertyName,
+                'propertyValue': propertyValue,
+            } as SetPropertyEvent
+        })
+    }
+    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};
+        })
+    }
+    changeTile(tiles: TileDescriptor[]) {
+        sendToWorkadventure({
+            type: 'changeTile',
+            data: tiles
+        })
+    }
+
+}
+
+
+export default new WorkadventureRoomCommands();

front/src/Api/iframe/sound.ts

@@ -0,0 +1,17 @@
+import type { LoadSoundEvent } from '../Events/LoadSoundEvent';
+import type { PlaySoundEvent } from '../Events/PlaySoundEvent';
+import type { StopSoundEvent } from '../Events/StopSoundEvent';
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import {Sound} from "./Sound/Sound";
+
+class WorkadventureSoundCommands extends IframeApiContribution<WorkadventureSoundCommands> {
+    callbacks = []
+
+    loadSound(url: string): Sound {
+        return new Sound(url);
+    }
+
+}
+
+
+export default new WorkadventureSoundCommands();

front/src/Api/iframe/ui.ts

@@ -0,0 +1,106 @@
+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 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 menuCallbacks: Map<string, (command: string) => void> = new Map()
+
+interface ZonedPopupOptions {
+    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);
+            }
+        }
+    }),
+    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++;
+        const popup = new Popup(popupId);
+        const btnMap = new Map<number, () => void>();
+        popupCallbacks.set(popupId, btnMap);
+        let id = 0;
+        for (const button of buttons) {
+            const callback = button.callback;
+            if (callback) {
+                btnMap.set(id, () => {
+                    callback(popup);
+                });
+            }
+            id++;
+        }
+
+        sendToWorkadventure({
+            'type': 'openPopup',
+            'data': {
+                popupId,
+                targetObject,
+                message,
+                buttons: buttons.map((button) => {
+                    return {
+                        label: button.label,
+                        className: button.className
+                    };
+                })
+            }
+        });
+
+        popups.set(popupId, popup)
+        return popup;
+    }
+
+    registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void) {
+        menuCallbacks.set(commandDescriptor, callback);
+        sendToWorkadventure({
+            'type': 'registerMenuCommand',
+            'data': {
+                menutItem: commandDescriptor
+            } as MenuItemRegisterEvent
+        });
+    }
+
+    displayBubble(): void {
+        sendToWorkadventure({ 'type': 'displayBubble', data: null });
+    }
+
+    removeBubble(): void {
+        sendToWorkadventure({ 'type': 'removeBubble', data: null });
+    }
+}
+
+export default new WorkAdventureUiCommands();