Merge branch 'develop' of github.com:thecodingmachine/workadventure into main

front/src/Api/Events/ButtonClickedEvent.ts

@@ -4,8 +4,6 @@ export const isButtonClickedEvent =
     new tg.IsInterface().withProperties({
         popupId: tg.isNumber,
         buttonId: tg.isNumber,
-        input : tg.isBoolean,
-        inputValue : 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.

front/src/Api/Events/ClosePopupEvent.ts

@@ -3,7 +3,6 @@ import * as tg from "generic-type-guard";
 export const isClosePopupEvent =
     new tg.IsInterface().withProperties({
         popupId: tg.isNumber,
-        inputValue : tg.isString,
     }).get();
 
 /**

front/src/Api/Events/DataLayerEvent.ts

@@ -0,0 +1,13 @@
+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,15 @@
+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,19 @@
+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,5 +1,5 @@
 
-
+import type { GameStateEvent } from './GameStateEvent';
 import type { ButtonClickedEvent } from './ButtonClickedEvent';
 import type { ChatEvent } from './ChatEvent';
 import type { ClosePopupEvent } from './ClosePopupEvent';
@@ -10,8 +10,14 @@ 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 { 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 {
@@ -33,10 +39,16 @@ export type IframeEventMap = {
     restorePlayerControls: null
     displayBubble: null
     removeBubble: null
-    closeChatMessage : 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;
@@ -52,7 +64,10 @@ export interface IframeResponseEventMap {
     enterEvent: EnterLeaveEvent
     leaveEvent: EnterLeaveEvent
     buttonClickedEvent: ButtonClickedEvent
-    // gameState: GameStateEvent
+    gameState: GameStateEvent
+    hasPlayerMoved: HasPlayerMovedEvent
+    dataLayer: DataLayerEvent
+    menuItemClicked: MenuItemClickedEvent
 }
 export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
     type: T;

front/src/Api/Events/LayerEvent.ts

@@ -0,0 +1,10 @@
+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

@@ -10,4 +10,4 @@ export const isLoadPageEvent =
 /**
  * A message sent from the iFrame to the game to add a message in the chat.
  */
-export type LoadPageEvent = tg.GuardedType<typeof isLoadPageEvent>;
+export type LoadPageEvent = tg.GuardedType<typeof isLoadPageEvent>;

front/src/Api/Events/OpenPopupEvent.ts

@@ -11,8 +11,7 @@ export const isOpenPopupEvent =
         popupId: tg.isNumber,
         targetObject: tg.isString,
         message: tg.isString,
-        buttons: tg.isArray(isButtonDescriptor),
-        input: tg.isBoolean
+        buttons: tg.isArray(isButtonDescriptor)
     }).get();
 
 /**

front/src/Api/Events/setPropertyEvent.ts

@@ -0,0 +1,12 @@
+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,12 @@
+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,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,26 +1,42 @@
-
-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 { isLoadPageEvent } from './Events/LoadPageEvent';
+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 { 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.
  */
 class IframeListener {
+
     private readonly _chatStream: Subject<ChatEvent> = new Subject();
     public readonly chatStream = this._chatStream.asObservable();
 
@@ -33,7 +49,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();
 
@@ -61,9 +76,27 @@ class IframeListener {
     private readonly _unregisterIFrameStream: Subject<void> = new Subject();
     public readonly unregisterIFrameStream = this._unregisterIFrameStream.asObservable();
 
-    private readonly _exitUrlStream: Subject<string> = new Subject();
-    public readonly exitUrlStream = this._exitUrlStream.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();
 
@@ -74,7 +107,9 @@ 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>>) => {
@@ -83,31 +118,31 @@ class IframeListener {
             // 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
-            });
+            let iframe: HTMLIFrameElement;
+            for (iframe of this.iframes) {
+                if (iframe.contentWindow === message.source) {
+                    foundSrc = iframe.src;
+                    break;
+                }
+            }
 
             if (foundSrc === undefined) {
-                for (const iframe of this.iframes) {
-                    if (iframe.contentWindow === message.source) {
-                        foundSrc = iframe.src;
-                        break;
-                    }
-                }
-
-                if (foundSrc === undefined) {
-                    return;
-                }
+                return;
             }
 
             const payload = message.data;
             if (isIframeEventWrapper(payload)) {
-                if (payload.type === 'chat' && isChatEvent(payload.data)) {
+                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)) {
-                    console.log(payload);
                     this._closePopupStream.next(payload.data);
                 }
                 else if (payload.type === 'openTab' && isOpenTabEvent(payload.data)) {
@@ -116,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);
                 }
@@ -128,42 +166,67 @@ class IframeListener {
                 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 === 'closeChatMessage') {
-                    scriptUtils.closeChatMessage();
-                }
+
                 else if (payload.type === 'disablePlayerControls') {
                     this._disablePlayerControlStream.next();
                 }
                 else if (payload.type === 'restorePlayerControls') {
                     this._enablePlayerControlStream.next();
-                }
-                else if (payload.type === 'displayBubble') {
+                } else if (payload.type === 'displayBubble') {
                     this._displayBubbleStream.next();
-                }
-                else if (payload.type === 'removeBubble') {
+                } else if (payload.type === 'removeBubble') {
                     this._removeBubbleStream.next();
-                }else if (payload.type === 'loadPage' && isLoadPageEvent(payload.data)){
-                    this._loadPageStream.next(payload.data.url);
+                } 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);
 
     }
 
+    sendDataLayerEvent(dataLayerEvent: DataLayerEvent) {
+        this.postMessage({
+            'type' : 'dataLayer',
+            'data' : dataLayerEvent
+        })
+    }
+
+
+    sendGameStateEvent(gameStateEvent: GameStateEvent) {
+        this.postMessage({
+            'type': 'gameState',
+            'data': gameStateEvent
+        });
+    }
+
     /**
      * Allows the passed iFrame to send/receive messages via the API.
      */
     registerIframe(iframe: HTMLIFrameElement): void {
         this.iframes.add(iframe);
+        this.iframeCloseCallbacks.set(iframe, []);
     }
 
     unregisterIframe(iframe: HTMLIFrameElement): void {
-	this._unregisterIFrameStream.next();
+        this._unregisterIFrameStream.next();
+        this.iframeCloseCallbacks.get(iframe)?.forEach(callback => {
+            callback();
+        });
         this.iframes.delete(iframe);
     }
 
@@ -173,7 +236,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);
 
@@ -189,25 +252,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);
@@ -217,12 +279,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 + '"');
@@ -260,14 +322,21 @@ class IframeListener {
         });
     }
 
-    sendButtonClickedEvent(popupId: number, buttonId: number, input : boolean, inputValue : string | null): void {
+    hasPlayerMoved(event: HasPlayerMovedEvent) {
+        if (this.sendPlayerMove) {
+            this.postMessage({
+                'type': 'hasPlayerMoved',
+                'data': event
+            });
+        }
+    }
+
+    sendButtonClickedEvent(popupId: number, buttonId: number): void {
         this.postMessage({
             'type': 'buttonClickedEvent',
             'data': {
                 popupId,
-                buttonId,
-                input,
-                inputValue,
+                buttonId
             } as ButtonClickedEvent
         });
     }
@@ -275,7 +344,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/ScriptUtils.ts

@@ -1,6 +1,4 @@
 import {coWebsiteManager} from "../WebRtc/CoWebsiteManager";
-// import {discussionManager} from "../WebRtc/DiscussionManager";
-
 
 class ScriptUtils {
 
@@ -20,10 +18,6 @@ class ScriptUtils {
     public closeCoWebSite(){
         coWebsiteManager.closeCoWebsite();
     }
-
-    public closeChatMessage(){
-       // discussionManager.hideDiscussion();
-    }
 }
 
 export const scriptUtils = new ScriptUtils();

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

@@ -23,7 +23,7 @@ class WorkadventureChatCommands extends IframeApiContribution<WorkadventureChatC
             data: {
                 'message': message,
                 'author': author
-            } as ChatEvent
+            }
         })
     }
 

front/src/Api/iframe/nav.ts

@@ -2,6 +2,7 @@ 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> {
@@ -13,7 +14,7 @@ class WorkadventureNavigationCommands extends IframeApiContribution<Workadventur
             "type": 'openTab',
             "data": {
                 url
-            } as OpenTabEvent
+            }
         });
     }
 
@@ -22,7 +23,7 @@ class WorkadventureNavigationCommands extends IframeApiContribution<Workadventur
             "type": 'goToPage',
             "data": {
                 url
-            } as GoToPageEvent
+            }
         });
     }
 
@@ -40,7 +41,7 @@ class WorkadventureNavigationCommands extends IframeApiContribution<Workadventur
             "type": 'openCoWebSite',
             "data": {
                 url
-            } as OpenCoWebSiteEvent
+            }
         });
     }
 

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,54 @@
 import { Subject } from "rxjs";
 import { EnterLeaveEvent, isEnterLeaveEvent } from '../Events/EnterLeaveEvent';
-import { IframeApiContribution } from './IframeApiContribution';
+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 = [
@@ -21,8 +65,21 @@ class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomC
             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);
+            }
+        }),
     ]
 
 
@@ -43,6 +100,34 @@ 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};
+        })
+    }
 
 }
 

front/src/Api/iframe/ui.ts

@@ -1,14 +1,17 @@
 import { isButtonClickedEvent } from '../Events/ButtonClickedEvent';
-import type { ClosePopupEvent } from '../Events/ClosePopupEvent';
+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 menuCallbacks: Map<string, (command: string) => void> = new Map()
+
 interface ZonedPopupOptions {
     zone: string
     objectLayerName?: string,
@@ -33,10 +36,20 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
                 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[], input: boolean = false): Popup {
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
         popupId++;
         const popup = new Popup(popupId);
         const btnMap = new Map<number, () => void>();
@@ -63,8 +76,7 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
                         label: button.label,
                         className: button.className
                     };
-                }),
-                input : input
+                })
             }
         });
 
@@ -72,6 +84,16 @@ class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiComma
         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 });
     }