Merge branch 'menu-command-api' of github.com:jonnytest1/workadventure into metadataScriptingApi

front/src/Phaser/Menu/MenuScene.ts

@@ -10,6 +10,9 @@ import {GameConnexionTypes} from "../../Url/UrlManager";
 import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Components/WarningContainer";
 import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
 import {menuIconVisible} from "../../Stores/MenuStore";
+import { HtmlUtils } from '../../WebRtc/HtmlUtils';
+import { iframeListener } from '../../Api/IframeListener';
+import { Subscription } from 'rxjs';
 
 export const MenuSceneName = 'MenuScene';
 const gameMenuKey = 'gameMenu';
@@ -36,12 +39,17 @@ export class MenuScene extends Phaser.Scene {
     private menuButton!: Phaser.GameObjects.DOMElement;
     private warningContainer: WarningContainer | null = null;
     private warningContainerTimeout: NodeJS.Timeout | null = null;
-
+    private subscriptions = new Subscription()
     constructor() {
         super({key: MenuSceneName});
 
         this.gameQualityValue = localUserStore.getGameQualityValue();
         this.videoQualityValue = localUserStore.getVideoQualityValue();
+
+        this.subscriptions.add(iframeListener.registerMenuCommandStream.subscribe(menuCommand => {
+            this.addMenuOption(menuCommand);
+
+        }))
     }
 
     preload () {
@@ -53,6 +61,13 @@ export class MenuScene extends Phaser.Scene {
         this.load.html(warningContainerKey, warningContainerHtml);
     }
 
+    reset() {
+        const addedMenuItems=[...this.menuElement.node.querySelectorAll(".fromApi")];
+        for(let index=addedMenuItems.length-1;index>=0;index--){
+            addedMenuItems[index].remove()
+        }
+    }
+
     create() {
         menuIconVisible.set(true);
         this.menuElement = this.add.dom(closedSideMenuX, 30).createFromCache(gameMenuKey);
@@ -268,13 +283,30 @@ export class MenuScene extends Phaser.Scene {
         });
     }
 
-    private onMenuClick(event:MouseEvent) {
-        if((event?.target as HTMLInputElement).classList.contains('not-button')){
+    public addMenuOption(menuText: string) {
+        const wrappingSection = document.createElement("section")
+        const excapedHtml = HtmlUtils.escapeHtml(menuText);
+        wrappingSection.innerHTML = `<button class="fromApi" id="${excapedHtml}">${excapedHtml}</button>`
+        const menuItemContainer = this.menuElement.node.querySelector("#gameMenu main");
+        if (menuItemContainer) {
+            menuItemContainer.querySelector(`#${excapedHtml}.fromApi`)?.remove()
+            menuItemContainer.insertBefore(wrappingSection, menuItemContainer.querySelector("#socialLinks"))
+        }
+    }
+
+    private onMenuClick(event: MouseEvent) {
+        const htmlMenuItem = (event?.target as HTMLInputElement);
+        if (htmlMenuItem.classList.contains('not-button')) {
             return;
         }
         event.preventDefault();
 
-        switch ((event?.target as HTMLInputElement).id) {
+        if (htmlMenuItem.classList.contains("fromApi")) {
+            iframeListener.sendMenuClickedEvent(htmlMenuItem.id)
+            return
+        }
+
+        switch (htmlMenuItem.id) {
             case 'changeNameButton':
                 this.closeSideMenu();
                 gameManager.leaveGame(this, LoginSceneName, new LoginScene());