Merge branch 'menu-commands-apiref' of github.com:jonnytest1/workadventure into metadataScriptingApi

front/src/Api/Events/IframeEvent.ts

@@ -15,7 +15,8 @@ import type { LayerEvent } from './LayerEvent';
 import type { SetPropertyEvent } from "./setPropertyEvent";
 import type { LoadSoundEvent } from "./LoadSoundEvent";
 import type { PlaySoundEvent } from "./PlaySoundEvent";
-import type { MenuItemClickedEvent } from "./MenuItemClickedEvent";
+import type { MenuItemClickedEvent } from "./ui/MenuItemClickedEvent";
+import type { MenuItemRegisterEvent } from './ui/MenuItemRegisterEvent';
 import type { HasPlayerMovedEvent } from "./HasPlayerMovedEvent";
 
 
@@ -47,7 +48,7 @@ export type IframeEventMap = {
     playSound: PlaySoundEvent
     stopSound: null,
     getState: undefined,
-    registerMenuCommand: undefined
+    registerMenuCommand: MenuItemRegisterEvent
 }
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;

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

@@ -24,12 +24,12 @@ 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/MenuItemRegisterEvent";
+import {isMenuItemRegisterEvent,} from "./Events/ui/MenuItemRegisterEvent";
 import type {DataLayerEvent} from "./Events/DataLayerEvent";
 import type {GameStateEvent} from "./Events/GameStateEvent";
-import type {MenuItemClickedEvent} from "./Events/MenuItemClickedEvent";
 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.
@@ -115,21 +115,16 @@ 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
-            });
-
-            if (foundSrc === undefined) {
-                let iframe: HTMLIFrameElement;
+            let iframe: HTMLIFrameElement;
             for (iframe of this.iframes) {
                 if (iframe.contentWindow === message.source) {
                     foundSrc = iframe.src;
-                    break;}
+                    break;
                 }
+            }
 
-                if (foundSrc === undefined) {
-                    return;
-                }
+            if (foundSrc === undefined) {
+                return;
             }
 
             const payload = message.data;
@@ -188,13 +183,13 @@ class IframeListener {
                     this.sendPlayerMove = true
                 } else if (payload.type == "getDataLayer") {
                     this._dataLayerChangeStream.next();
-                } else if (payload.type == "registerMenuCommand" && isMenuItemRegisterEvent(payload.data)) {
+                } else if (isMenuItemRegisterIframeEvent(payload)) {
                     const data = payload.data.menutItem;
                     // @ts-ignore
                     this.iframeCloseCallbacks.get(iframe).push(() => {
                         this._unregisterMenuCommandStream.next(data);
                     })
-                    this._registerMenuCommandStream.next(payload.data.menutItem)
+                    handleMenuItemRegistrationEvent(payload.data)
                 }
             }
         }, false);
@@ -295,15 +290,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',
@@ -353,7 +339,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/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.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,6 +36,16 @@ 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)
+            }
+        }
     })];
 
 
@@ -71,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
+            } as MenuItemRegisterEvent
+        });
+    }
+
     displayBubble(): void {
         sendToWorkadventure({ 'type': 'displayBubble', data: null });
     }