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

front/src/Api/Events/IframeEvent.ts

@@ -15,7 +15,6 @@ 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 { SetTilesEvent } from "./SetTilesEvent";
 import type { SetVariableEvent } from "./SetVariableEvent";
@@ -33,6 +32,7 @@ import type {
     TriggerActionMessageEvent,
 } from "./ui/TriggerActionMessageEvent";
 import { isMessageReferenceEvent, isTriggerActionMessageEvent } from "./ui/TriggerActionMessageEvent";
+import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T;
@@ -63,7 +63,8 @@ export type IframeEventMap = {
     stopSound: null;
     getState: undefined;
     loadTileset: LoadTilesetEvent;
-    registerMenuCommand: MenuItemRegisterEvent;
+    registerMenu: MenuRegisterEvent;
+    unregisterMenu: UnregisterMenuEvent;
     setTiles: SetTilesEvent;
     modifyEmbeddedWebsite: Partial<EmbeddedWebsite>; // Note: name should be compulsory in fact
 };

front/src/Api/Events/SetVariableEvent.ts

@@ -1,5 +1,4 @@
 import * as tg from "generic-type-guard";
-import { isMenuItemRegisterEvent } from "./ui/MenuItemRegisterEvent";
 
 export const isSetVariableEvent = new tg.IsInterface()
     .withProperties({

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

@@ -1,24 +0,0 @@
-import * as tg from "generic-type-guard";
-import { Subject } from "rxjs";
-import { subMenusStore } from "../../../Stores/MenuStore";
-
-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();
-
-export function handleMenuItemRegistrationEvent(event: MenuItemRegisterEvent) {
-    subMenusStore.addMenu(event.menutItem);
-}

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

@@ -0,0 +1,31 @@
+import * as tg from "generic-type-guard";
+
+/**
+ * A message sent from a script to the game to remove a custom menu from the menu
+ */
+export const isUnregisterMenuEvent = new tg.IsInterface()
+    .withProperties({
+        name: tg.isString,
+    })
+    .get();
+
+export type UnregisterMenuEvent = tg.GuardedType<typeof isUnregisterMenuEvent>;
+
+export const isMenuRegisterOptions = new tg.IsInterface()
+    .withProperties({
+        allowApi: tg.isBoolean,
+    })
+    .get();
+
+/**
+ * A message sent from a script to the game to add a custom menu from the menu
+ */
+export const isMenuRegisterEvent = new tg.IsInterface()
+    .withProperties({
+        name: tg.isString,
+        iframe: tg.isUnion(tg.isString, tg.isUndefined),
+        options: isMenuRegisterOptions,
+    })
+    .get();
+
+export type MenuRegisterEvent = tg.GuardedType<typeof isMenuRegisterEvent>;

front/src/Api/IframeListener.ts

@@ -29,12 +29,12 @@ import { isSetPropertyEvent, SetPropertyEvent } from "./Events/setPropertyEvent"
 import { isLayerEvent, LayerEvent } from "./Events/LayerEvent";
 import type { HasPlayerMovedEvent } from "./Events/HasPlayerMovedEvent";
 import { isLoadPageEvent } from "./Events/LoadPageEvent";
-import { handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent } from "./Events/ui/MenuItemRegisterEvent";
+import { isMenuRegisterEvent, isUnregisterMenuEvent } from "./Events/ui/MenuRegisterEvent";
 import { SetTilesEvent, isSetTilesEvent } from "./Events/SetTilesEvent";
 import type { SetVariableEvent } from "./Events/SetVariableEvent";
 import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
 import { EmbeddedWebsite } from "./iframe/Room/EmbeddedWebsite";
-import { subMenusStore } from "../Stores/MenuStore";
+import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
 
 type AnswererCallback<T extends keyof IframeQueryMap> = (
     query: IframeQueryMap[T]["query"],
@@ -258,17 +258,23 @@ class IframeListener {
                         this._removeBubbleStream.next();
                     } else if (payload.type == "onPlayerMove") {
                         this.sendPlayerMove = true;
-                    } else if (isMenuItemRegisterIframeEvent(payload)) {
-                        const data = payload.data.menutItem;
-                        // @ts-ignore
-                        this.iframeCloseCallbacks.get(iframe).push(() => {
-                            subMenusStore.removeMenu(data);
-                        });
-                        handleMenuItemRegistrationEvent(payload.data);
                     } else if (payload.type == "setTiles" && isSetTilesEvent(payload.data)) {
                         this._setTilesStream.next(payload.data);
                     } else if (payload.type == "modifyEmbeddedWebsite" && isEmbeddedWebsiteEvent(payload.data)) {
                         this._modifyEmbeddedWebsiteStream.next(payload.data);
+                    } else if (payload.type == "registerMenu" && isMenuRegisterEvent(payload.data)) {
+                        const dataName = payload.data.name;
+                        this.iframeCloseCallbacks.get(iframe)?.push(() => {
+                            handleMenuUnregisterEvent(dataName);
+                        });
+                        handleMenuRegistrationEvent(
+                            payload.data.name,
+                            payload.data.iframe,
+                            foundSrc,
+                            payload.data.options
+                        );
+                    } else if (payload.type == "unregisterMenu" && isUnregisterMenuEvent(payload.data)) {
+                        handleMenuUnregisterEvent(payload.data.name);
                     }
                 }
             },

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

@@ -0,0 +1,17 @@
+import { sendToWorkadventure } from "../IframeApiContribution";
+
+export class Menu {
+    constructor(private menuName: string) {}
+
+    /**
+     * remove the menu
+     */
+    public remove() {
+        sendToWorkadventure({
+            type: "unregisterMenu",
+            data: {
+                name: this.menuName,
+            },
+        });
+    }
+}

front/src/Api/iframe/state.ts

@@ -62,6 +62,10 @@ export class WorkadventureStateCommands extends IframeApiContribution<Workadvent
         return variables.get(key);
     }
 
+    hasVariable(key: string): boolean {
+        return variables.has(key);
+    }
+
     onVariableChange(key: string): Observable<unknown> {
         let subject = variableSubscribers.get(key);
         if (subject === undefined) {
@@ -85,6 +89,12 @@ const proxyCommand = new Proxy(new WorkadventureStateCommands(), {
         target.saveVariable(p.toString(), value);
         return true;
     },
+    has(target: WorkadventureStateCommands, p: PropertyKey): boolean {
+        if (p in target) {
+            return true;
+        }
+        return target.hasVariable(p.toString());
+    },
 }) as WorkadventureStateCommands & { [key: string]: unknown };
 
 export default proxyCommand;

front/src/Api/iframe/ui.ts

@@ -6,6 +6,8 @@ import type { ButtonClickedCallback, ButtonDescriptor } from "./Ui/ButtonDescrip
 import { Popup } from "./Ui/Popup";
 import { ActionMessage } from "./Ui/ActionMessage";
 import { isMessageReferenceEvent } from "../Events/ui/TriggerActionMessageEvent";
+import { Menu } from "./Ui/Menu";
+import type { RequireOnlyOne } from "../types";
 
 let popupId = 0;
 const popups: Map<number, Popup> = new Map<number, Popup>();
@@ -14,9 +16,18 @@ const popupCallbacks: Map<number, Map<number, ButtonClickedCallback>> = new Map<
     Map<number, ButtonClickedCallback>
 >();
 
+const menus: Map<string, Menu> = new Map<string, Menu>();
 const menuCallbacks: Map<string, (command: string) => void> = new Map();
 const actionMessages = new Map<string, ActionMessage>();
 
+interface MenuDescriptor {
+    callback?: (commandDescriptor: string) => void;
+    iframe?: string;
+    allowApi?: boolean;
+}
+
+export type MenuOptions = RequireOnlyOne<MenuDescriptor, "callback" | "iframe">;
+
 interface ZonedPopupOptions {
     zone: string;
     objectLayerName?: string;
@@ -53,6 +64,10 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
             typeChecker: isMenuItemClickedEvent,
             callback: (event) => {
                 const callback = menuCallbacks.get(event.menuItem);
+                const menu = menus.get(event.menuItem);
+                if (menu === undefined) {
+                    throw new Error('Could not find menu named "' + event.menuItem + '"');
+                }
                 if (callback) {
                     callback(event.menuItem);
                 }
@@ -106,14 +121,53 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
         return popup;
     }
 
-    registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void) {
-        menuCallbacks.set(commandDescriptor, callback);
-        sendToWorkadventure({
-            type: "registerMenuCommand",
-            data: {
-                menutItem: commandDescriptor,
-            },
-        });
+    registerMenuCommand(commandDescriptor: string, options: MenuOptions | ((commandDescriptor: string) => void)): Menu {
+        const menu = new Menu(commandDescriptor);
+
+        if (typeof options === "function") {
+            menuCallbacks.set(commandDescriptor, options);
+            sendToWorkadventure({
+                type: "registerMenu",
+                data: {
+                    name: commandDescriptor,
+                    options: {
+                        allowApi: false,
+                    },
+                },
+            });
+        } else {
+            options.allowApi = options.allowApi === undefined ? options.iframe !== undefined : options.allowApi;
+
+            if (options.iframe !== undefined) {
+                sendToWorkadventure({
+                    type: "registerMenu",
+                    data: {
+                        name: commandDescriptor,
+                        iframe: options.iframe,
+                        options: {
+                            allowApi: options.allowApi,
+                        },
+                    },
+                });
+            } else if (options.callback !== undefined) {
+                menuCallbacks.set(commandDescriptor, options.callback);
+                sendToWorkadventure({
+                    type: "registerMenu",
+                    data: {
+                        name: commandDescriptor,
+                        options: {
+                            allowApi: options.allowApi,
+                        },
+                    },
+                });
+            } else {
+                throw new Error(
+                    "When adding a menu with WA.ui.registerMenuCommand, you must pass either an iframe or a callback"
+                );
+            }
+        }
+        menus.set(commandDescriptor, menu);
+        return menu;
     }
 
     displayBubble(): void {

front/src/Api/types.ts

@@ -0,0 +1,4 @@
+export type RequireOnlyOne<T, keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, keys>> &
+    {
+        [K in keys]-?: Required<Pick<T, K>> & Partial<Record<Exclude<keys, K>, undefined>>;
+    }[keys];

front/src/Components/Menu/CustomSubMenu.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    import {onDestroy, onMount} from "svelte";
+    import {iframeListener} from "../../Api/IframeListener";
+
+    export let url: string;
+    export let allowApi: boolean;
+
+    let HTMLIframe: HTMLIFrameElement;
+
+    onMount( () => {
+        if (allowApi) {
+            iframeListener.registerIframe(HTMLIframe);
+        }
+    })
+
+    onDestroy( () => {
+        if (allowApi) {
+            iframeListener.unregisterIframe(HTMLIframe);
+        }
+    })
+</script>
+
+
+<iframe title="customSubMenu" src="{url}" bind:this={HTMLIframe}></iframe>
+
+<style lang="scss">
+  iframe {
+    border: none;
+    height: calc(100% - 56px);
+    width: 100%;
+    margin: 0;
+  }
+</style>

front/src/Components/Menu/Menu.svelte

@@ -6,18 +6,34 @@
     import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
     import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
     import ContactSubMenu from "./ContactSubMenu.svelte";
-    import {menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
-    import {onMount} from "svelte";
+    import CustomSubMenu from "./CustomSubMenu.svelte"
+    import {customMenuIframe, menuVisiblilityStore, SubMenusInterface, subMenusStore} from "../../Stores/MenuStore";
+    import {onDestroy, onMount} from "svelte";
     import {get} from "svelte/store";
+    import type {Unsubscriber} from "svelte/store";
     import {sendMenuClickedEvent} from "../../Api/iframe/Ui/MenuItem";
 
     let activeSubMenu: string = SubMenusInterface.settings;
-    let activeComponent: typeof SettingsSubMenu = SettingsSubMenu;
+    let activeComponent: typeof SettingsSubMenu | typeof CustomSubMenu = SettingsSubMenu;
+    let props: { url: string, allowApi: boolean };
+    let unsubscriberSubMenuStore: Unsubscriber;
 
     onMount(() => {
+        unsubscriberSubMenuStore = subMenusStore.subscribe(() => {
+            if(!get(subMenusStore).includes(activeSubMenu)) {
+                switchMenu(SubMenusInterface.settings);
+            }
+        })
+
         switchMenu(SubMenusInterface.settings);
     })
 
+    onDestroy(() => {
+        if(unsubscriberSubMenuStore) {
+            unsubscriberSubMenuStore();
+        }
+    })
+
     function switchMenu(menu: string) {
         if (get(subMenusStore).find((subMenu) => subMenu === menu)) {
             activeSubMenu = menu;
@@ -41,8 +57,14 @@
                     activeComponent = ContactSubMenu;
                     break;
                 default:
-                    sendMenuClickedEvent(menu);
-                    menuVisiblilityStore.set(false);
+                    const customMenu = customMenuIframe.get(menu);
+                    if (customMenu !== undefined) {
+                        props = { url: customMenu.url, allowApi: customMenu.allowApi };
+                        activeComponent = CustomSubMenu;
+                    } else {
+                        sendMenuClickedEvent(menu);
+                        menuVisiblilityStore.set(false);
+                    }
                     break;
             }
         } else throw ("There is no menu called " + menu);
@@ -74,7 +96,7 @@
     </div>
     <div class="menu-submenu-container nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
         <h2>{activeSubMenu}</h2>
-        <svelte:component this={activeComponent}/>
+        <svelte:component this={activeComponent} {...props}/>
     </div>
 </div>
 

front/src/Phaser/Game/GameMap.ts

@@ -80,8 +80,11 @@ export class GameMap {
             return;
         }
         this.key = key;
+        this.triggerAll();
+    }
 
-        const newProps = this.getProperties(key);
+    private triggerAll(): void {
+        const newProps = this.getProperties(this.key ?? 0);
         const oldProps = this.lastProperties;
         this.lastProperties = newProps;
 
@@ -253,4 +256,34 @@ export class GameMap {
         }
         return this.tileNameMap.get(tile);
     }
+
+    public setLayerProperty(
+        layerName: string,
+        propertyName: string,
+        propertyValue: string | number | undefined | boolean
+    ) {
+        const layer = this.findLayer(layerName);
+        if (layer === undefined) {
+            console.warn('Could not find layer "' + layerName + '" when calling setProperty');
+            return;
+        }
+        if (layer.properties === undefined) {
+            layer.properties = [];
+        }
+        const property = layer.properties.find((property) => property.name === propertyName);
+        if (property === undefined) {
+            if (propertyValue === undefined) {
+                return;
+            }
+            layer.properties.push({ name: propertyName, type: typeof propertyValue, value: propertyValue });
+            return;
+        }
+        if (propertyValue === undefined) {
+            const index = layer.properties.indexOf(property);
+            layer.properties.splice(index, 1);
+        }
+        property.value = propertyValue;
+
+        this.triggerAll();
+    }
 }

front/src/Phaser/Game/GameScene.ts

@@ -1276,30 +1276,10 @@ export class GameScene extends DirtyScene {
         propertyName: string,
         propertyValue: string | number | boolean | undefined
     ): void {
-        const layer = this.gameMap.findLayer(layerName);
-        if (layer === undefined) {
-            console.warn('Could not find layer "' + layerName + '" when calling setProperty');
-            return;
-        }
         if (propertyName === "exitUrl" && typeof propertyValue === "string") {
             this.loadNextGameFromExitUrl(propertyValue);
         }
-        if (layer.properties === undefined) {
-            layer.properties = [];
-        }
-        const property = layer.properties.find((property) => property.name === propertyName);
-        if (property === undefined) {
-            if (propertyValue === undefined) {
-                return;
-            }
-            layer.properties.push({ name: propertyName, type: typeof propertyValue, value: propertyValue });
-            return;
-        }
-        if (propertyValue === undefined) {
-            const index = layer.properties.indexOf(property);
-            layer.properties.splice(index, 1);
-        }
-        property.value = propertyValue;
+        this.gameMap.setLayerProperty(layerName, propertyName, propertyValue);
     }
 
     private setLayerVisibility(layerName: string, visible: boolean): void {

front/src/Stores/MenuStore.ts

@@ -82,3 +82,35 @@ function checkSubMenuToShow() {
 }
 
 checkSubMenuToShow();
+
+export const customMenuIframe = new Map<string, { url: string; allowApi: boolean }>();
+
+export function handleMenuRegistrationEvent(
+    menuName: string,
+    iframeUrl: string | undefined = undefined,
+    source: string | undefined = undefined,
+    options: { allowApi: boolean }
+) {
+    if (get(subMenusStore).includes(menuName)) {
+        console.warn("The menu " + menuName + " already exist.");
+        return;
+    }
+
+    subMenusStore.addMenu(menuName);
+
+    if (iframeUrl !== undefined) {
+        const url = new URL(iframeUrl, source);
+        customMenuIframe.set(menuName, { url: url.toString(), allowApi: options.allowApi });
+    }
+}
+
+export function handleMenuUnregisterEvent(menuName: string) {
+    const subMenuGeneral: string[] = Object.values(SubMenusInterface);
+    if (subMenuGeneral.includes(menuName)) {
+        console.warn("The menu " + menuName + " is a mandatory menu. It can't be remove");
+        return;
+    }
+
+    subMenusStore.removeMenu(menuName);
+    customMenuIframe.delete(menuName);
+}

front/src/types.ts

@@ -1,10 +1,10 @@
 import type Phaser from "phaser";
 
 export type CursorKey = {
-    isDown: boolean
-}
+    isDown: boolean;
+};
 
-export type Direction =  'left' | 'right' | 'up' | 'down'
+export type Direction = "left" | "right" | "up" | "down";
 
 export interface CursorKeys extends Record<Direction, CursorKey> {
     left: CursorKey;
@@ -21,4 +21,3 @@ export interface IVirtualJoystick extends Phaser.GameObjects.GameObject {
     visible: boolean;
     createCursorKeys: () => CursorKeys;
 }
-