menu command api

docs/maps/api-ui.md

@@ -65,3 +65,26 @@ WA.room.onLeaveZone('myZone', () => {
     helloWorldPopup.close();
 });
 ```
+
+### register additional menu entries
+
+adds an additional Entry to the main menu , these exist until the map is unloaded
+
+
+```typescript
+registerMenuCommand(menuCommand: string, callback: (menuCommand: string) => void): void
+```
+Example:
+
+
+```javascript
+
+WA.registerMenuCommand("test", () => {
+    WA.sendChatMessage("test clicked", "menu cmd")
+})
+
+```
+
+<div class="col">
+    <img src="./assets/menu-command.png" class="figure-img img-fluid rounded" alt="" />
+</div>

front/src/Api/Events/IframeEvent.ts

@@ -6,12 +6,14 @@ import type { ClosePopupEvent } from './ClosePopupEvent';
 import type { EnterLeaveEvent } from './EnterLeaveEvent';
 import type { GoToPageEvent } from './GoToPageEvent';
 import type { LoadPageEvent } from './LoadPageEvent';
+import type { LoadSoundEvent } from "./LoadSoundEvent";
 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 { MenuItemClickedEvent } from './ui/MenuItemClickedEvent';
+import type { MenuItemRegisterEvent } from './ui/MenuItemRegisterEvent';
+import type { UserInputChatEvent } from './UserInputChatEvent';
 
 
 export interface TypedMessageEvent<T> extends MessageEvent {
@@ -36,6 +38,7 @@ export type IframeEventMap = {
     loadSound: LoadSoundEvent
     playSound: PlaySoundEvent
     stopSound: null,
+    registerMenuCommand: MenuItemRegisterEvent
 }
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;
@@ -52,6 +55,7 @@ export interface IframeResponseEventMap {
     leaveEvent: EnterLeaveEvent
     buttonClickedEvent: ButtonClickedEvent
     // gameState: GameStateEvent
+    menuItemClicked: MenuItemClickedEvent
 }
 export interface IframeResponseEvent<T extends keyof IframeResponseEventMap> {
     type: T;

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

@@ -0,0 +1,21 @@
+import * as tg from "generic-type-guard";
+import { iframeListener } from '../../IframeListener';
+
+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>;
+
+
+export function sendMenuClickedEvent(menuItem: string) {
+    iframeListener.postMessage({
+        'type': 'menuItemClicked',
+        'data': {
+            menuItem: menuItem,
+        } as MenuItemClickedEvent
+    });
+}

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,21 +1,22 @@
 
 import { Subject } from "rxjs";
-import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
+import type { ButtonClickedEvent } from "./Events/ButtonClickedEvent";
+import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
+import { ClosePopupEvent, isClosePopupEvent } from "./Events/ClosePopupEvent";
 import type { EnterLeaveEvent } from "./Events/EnterLeaveEvent";
+import { GoToPageEvent, isGoToPageEvent } from "./Events/GoToPageEvent";
+import { IframeEvent, IframeEventMap, IframeResponseEvent, IframeResponseEventMap, isIframeEventWrapper, TypedMessageEvent } from "./Events/IframeEvent";
+import { isLoadPageEvent } from './Events/LoadPageEvent';
+import { isLoadSoundEvent, LoadSoundEvent } from "./Events/LoadSoundEvent";
+import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent";
 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 { isPlaySoundEvent, PlaySoundEvent } from "./Events/PlaySoundEvent";
 import { isStopSoundEvent, StopSoundEvent } from "./Events/StopSoundEvent";
-import {isLoadSoundEvent, LoadSoundEvent} from "./Events/LoadSoundEvent";
+import { handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent } from './Events/ui/MenuItemRegisterEvent';
+import type { UserInputChatEvent } from "./Events/UserInputChatEvent";
+import { scriptUtils } from "./ScriptUtils";
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
  * Also allows to send messages to those iframes.
@@ -139,7 +140,9 @@ class IframeListener {
                     this._removeBubbleStream.next();
                 } else if (payload.type === 'loadPage' && isLoadPageEvent(payload.data)) {
                     this._loadPageStream.next(payload.data.url);
-                }
+                } else if (isMenuItemRegisterIframeEvent(payload)) [
+                    handleMenuItemRegistrationEvent(payload.data)
+                ]
             }
 
 
@@ -263,7 +266,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.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 { 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 });
     }

front/src/Phaser/Game/GameScene.ts

@@ -1,4 +1,10 @@
-import {gameManager, HasMovedEvent} from "./GameManager";
+import { Queue } from 'queue-typescript';
+import type { Subscription } from "rxjs";
+import { ConsoleGlobalMessageManager } from "../../Administration/ConsoleGlobalMessageManager";
+import { GlobalMessageManager } from "../../Administration/GlobalMessageManager";
+import { userMessageManager } from "../../Administration/UserMessageManager";
+import { iframeListener } from "../../Api/IframeListener";
+import { connectionManager } from "../../Connexion/ConnectionManager";
 import type {
     GroupCreatedUpdatedMessageInterface,
     MessageUserJoined,
@@ -9,13 +15,50 @@ import type {
     PositionInterface,
     RoomJoinedMessageInterface
 } from "../../Connexion/ConnexionModels";
-import {hasMovedEventName, Player, requestEmoteEventName} from "../Player/Player";
+import { localUserStore } from "../../Connexion/LocalUserStore";
+import { Room } from "../../Connexion/Room";
+import type { RoomConnection } from "../../Connexion/RoomConnection";
+import { worldFullMessageStream } from "../../Connexion/WorldFullMessageStream";
 import {
     DEBUG_MODE,
     JITSI_PRIVATE_MODE,
     MAX_PER_GROUP,
-    POSITION_DELAY,
+    POSITION_DELAY
 } from "../../Enum/EnvironmentVariable";
+import { TextureError } from "../../Exception/TextureError";
+import type { UserMovedMessage } from "../../Messages/generated/messages_pb";
+import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils";
+import { peerStore } from "../../Stores/PeerStore";
+import { touchScreenManager } from "../../Touch/TouchScreenManager";
+import { urlManager } from "../../Url/UrlManager";
+import { audioManager } from "../../WebRtc/AudioManager";
+import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
+import { HtmlUtils } from "../../WebRtc/HtmlUtils";
+import { jitsiFactory } from "../../WebRtc/JitsiFactory";
+import {
+    AUDIO_LOOP_PROPERTY, AUDIO_VOLUME_PROPERTY, CenterListener,
+    JITSI_MESSAGE_PROPERTIES,
+    layoutManager,
+    LayoutMode,
+    ON_ACTION_TRIGGER_BUTTON,
+    TRIGGER_JITSI_PROPERTIES,
+    TRIGGER_WEBSITE_PROPERTIES,
+    WEBSITE_MESSAGE_PROPERTIES
+} from "../../WebRtc/LayoutManager";
+import { mediaManager } from "../../WebRtc/MediaManager";
+import { SimplePeer, UserSimplePeerInterface } from "../../WebRtc/SimplePeer";
+import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
+import { ChatModeIcon } from "../Components/ChatModeIcon";
+import { addLoader } from "../Components/Loader";
+import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey } from "../Components/MobileJoystick";
+import { OpenChatIcon, openChatIconName } from "../Components/OpenChatIcon";
+import { PresentationModeIcon } from "../Components/PresentationModeIcon";
+import { TextUtils } from "../Components/TextUtils";
+import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
+import { RemotePlayer } from "../Entity/RemotePlayer";
+import type { ActionableItem } from "../Items/ActionableItem";
+import type { ItemFactoryInterface } from "../Items/ItemFactoryInterface";
+import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene";
 import type {
     ITiledMap,
     ITiledMapLayer,
@@ -24,56 +67,23 @@ import type {
     ITiledMapTileLayer,
     ITiledTileSet
 } from "../Map/ITiledMap";
-import type {AddPlayerInterface} from "./AddPlayerInterface";
+import { MenuScene, MenuSceneName } from '../Menu/MenuScene';
 import { PlayerAnimationDirections } from "../Player/Animation";
+import { hasMovedEventName, Player, requestEmoteEventName } from "../Player/Player";
+import { ErrorSceneName } from "../Reconnecting/ErrorScene";
+import { ReconnectingSceneName } from "../Reconnecting/ReconnectingScene";
+import { waScaleManager } from "../Services/WaScaleManager";
+import { PinchManager } from "../UserInput/PinchManager";
+import { UserInputManager } from "../UserInput/UserInputManager";
+import type { AddPlayerInterface } from "./AddPlayerInterface";
+import { DEPTH_OVERLAY_INDEX } from "./DepthIndexes";
+import { DirtyScene } from "./DirtyScene";
+import { EmoteManager } from "./EmoteManager";
+import { gameManager, HasMovedEvent } from "./GameManager";
+import { GameMap } from "./GameMap";
 import { PlayerMovement } from "./PlayerMovement";
 import { PlayersPositionInterpolator } from "./PlayersPositionInterpolator";
-import {RemotePlayer} from "../Entity/RemotePlayer";
-import {Queue} from 'queue-typescript';
-import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
-import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
-import {lazyLoadPlayerCharacterTextures, loadCustomTexture} from "../Entity/PlayerTexturesLoadingManager";
-import {
-    CenterListener,
-    JITSI_MESSAGE_PROPERTIES,
-    layoutManager,
-    LayoutMode,
-    ON_ACTION_TRIGGER_BUTTON,
-    TRIGGER_JITSI_PROPERTIES,
-    TRIGGER_WEBSITE_PROPERTIES,
-    WEBSITE_MESSAGE_PROPERTIES,
-    AUDIO_VOLUME_PROPERTY,
-    AUDIO_LOOP_PROPERTY
-} from "../../WebRtc/LayoutManager";
-import {GameMap} from "./GameMap";
-import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
-import {mediaManager} from "../../WebRtc/MediaManager";
-import type {ItemFactoryInterface} from "../Items/ItemFactoryInterface";
-import type {ActionableItem} from "../Items/ActionableItem";
-import {UserInputManager} from "../UserInput/UserInputManager";
 import { soundManager } from "./SoundManager";
-import type {UserMovedMessage} from "../../Messages/generated/messages_pb";
-import {ProtobufClientUtils} from "../../Network/ProtobufClientUtils";
-import {connectionManager} from "../../Connexion/ConnectionManager";
-import type {RoomConnection} from "../../Connexion/RoomConnection";
-import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
-import {userMessageManager} from "../../Administration/UserMessageManager";
-import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
-import {ResizableScene} from "../Login/ResizableScene";
-import {Room} from "../../Connexion/Room";
-import {jitsiFactory} from "../../WebRtc/JitsiFactory";
-import {urlManager} from "../../Url/UrlManager";
-import {audioManager} from "../../WebRtc/AudioManager";
-import {PresentationModeIcon} from "../Components/PresentationModeIcon";
-import {ChatModeIcon} from "../Components/ChatModeIcon";
-import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
-import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene";
-import {TextureError} from "../../Exception/TextureError";
-import {addLoader} from "../Components/Loader";
-import {ErrorSceneName} from "../Reconnecting/ErrorScene";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {iframeListener} from "../../Api/IframeListener";
-import {HtmlUtils} from "../../WebRtc/HtmlUtils";
 import Texture = Phaser.Textures.Texture;
 import Sprite = Phaser.GameObjects.Sprite;
 import CanvasTexture = Phaser.Textures.CanvasTexture;
@@ -81,20 +91,8 @@ import GameObject = Phaser.GameObjects.GameObject;
 import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
 import DOMElement = Phaser.GameObjects.DOMElement;
 import EVENT_TYPE = Phaser.Scenes.Events
-import type {Subscription} from "rxjs";
-import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
-import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
 import RenderTexture = Phaser.GameObjects.RenderTexture;
 import Tilemap = Phaser.Tilemaps.Tilemap;
-import {DirtyScene} from "./DirtyScene";
-import {TextUtils} from "../Components/TextUtils";
-import {touchScreenManager} from "../../Touch/TouchScreenManager";
-import {PinchManager} from "../UserInput/PinchManager";
-import {joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey} from "../Components/MobileJoystick";
-import {DEPTH_OVERLAY_INDEX} from "./DepthIndexes";
-import {waScaleManager} from "../Services/WaScaleManager";
-import {peerStore} from "../../Stores/PeerStore";
-import {EmoteManager} from "./EmoteManager";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null,
@@ -900,20 +898,17 @@ ${escapedMessage}
             this.userInputManager.disableControls();
         }));
 
-       this.iframeSubscriptionList.push(iframeListener.playSoundStream.subscribe((playSoundEvent)=>
+        this.iframeSubscriptionList.push(iframeListener.playSoundStream.subscribe((playSoundEvent) => {
-       {
             const url = new URL(playSoundEvent.url, this.MapUrlFile);
             soundManager.playSound(this.load, this.sound, url.toString(), playSoundEvent.config);
         }))
 
-        this.iframeSubscriptionList.push(iframeListener.stopSoundStream.subscribe((stopSoundEvent)=>
+        this.iframeSubscriptionList.push(iframeListener.stopSoundStream.subscribe((stopSoundEvent) => {
-        {
             const url = new URL(stopSoundEvent.url, this.MapUrlFile);
             soundManager.stopSound(this.sound, url.toString());
         }))
 
-        this.iframeSubscriptionList.push(iframeListener.loadSoundStream.subscribe((loadSoundEvent)=>
+        this.iframeSubscriptionList.push(iframeListener.loadSoundStream.subscribe((loadSoundEvent) => {
-        {
             const url = new URL(loadSoundEvent.url, this.MapUrlFile);
             soundManager.loadSound(this.load, this.sound, url.toString());
         }))
@@ -951,6 +946,8 @@ ${escapedMessage}
         const { roomId, hash } = Room.getIdFromIdentifier(exitKey, this.MapUrlFile, this.instance);
         if (!roomId) throw new Error('Could not find the room from its exit key: ' + exitKey);
         urlManager.pushStartLayerNameToUrl(hash);
+        const menuScene: MenuScene = this.scene.get(MenuSceneName) as MenuScene
+        menuScene.reset()
         if (roomId !== this.scene.key) {
             if (this.scene.get(roomId) === null) {
                 console.error("next room not loaded", exitKey);

front/src/Phaser/Menu/MenuScene.ts

@@ -1,16 +1,20 @@
+import { Subscription } from 'rxjs';
+import { sendMenuClickedEvent } from '../../Api/Events/ui/MenuItemClickedEvent';
+import { registerMenuCommandStream } from '../../Api/Events/ui/MenuItemRegisterEvent';
+import { connectionManager } from "../../Connexion/ConnectionManager";
+import { localUserStore } from "../../Connexion/LocalUserStore";
+import { worldFullWarningStream } from "../../Connexion/WorldFullWarningStream";
+import { videoConstraintStore } from "../../Stores/MediaStore";
+import { menuIconVisible } from "../../Stores/MenuStore";
+import { GameConnexionTypes } from "../../Url/UrlManager";
+import { HtmlUtils } from '../../WebRtc/HtmlUtils';
+import { mediaManager } from "../../WebRtc/MediaManager";
+import { WarningContainer, warningContainerHtml, warningContainerKey } from "../Components/WarningContainer";
+import { gameManager } from "../Game/GameManager";
 import { LoginScene, LoginSceneName } from "../Login/LoginScene";
 import { SelectCharacterScene, SelectCharacterSceneName } from "../Login/SelectCharacterScene";
 import { SelectCompanionScene, SelectCompanionSceneName } from "../Login/SelectCompanionScene";
-import {gameManager} from "../Game/GameManager";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {mediaManager} from "../../WebRtc/MediaManager";
 import { gameReportKey, gameReportRessource, ReportMenu } from "./ReportMenu";
-import {connectionManager} from "../../Connexion/ConnectionManager";
-import {GameConnexionTypes} from "../../Url/UrlManager";
-import {WarningContainer, warningContainerHtml, warningContainerKey} from "../Components/WarningContainer";
-import {worldFullWarningStream} from "../../Connexion/WorldFullWarningStream";
-import {menuIconVisible} from "../../Stores/MenuStore";
-import {videoConstraintStore} from "../../Stores/MediaStore";
 
 export const MenuSceneName = 'MenuScene';
 const gameMenuKey = 'gameMenu';
@@ -37,12 +41,35 @@ 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(registerMenuCommandStream.subscribe(menuCommand => {
+            this.addMenuOption(menuCommand);
+
+        }))
+    }
+
+    reset() {
+        const addedMenuItems = [...this.menuElement.node.querySelectorAll(".fromApi")];
+        for (let index = addedMenuItems.length - 1; index >= 0; index--) {
+            addedMenuItems[index].remove()
+        }
+    }
+
+    public addMenuOption(menuText: string) {
+        const wrappingSection = document.createElement("section")
+        const escapedHtml = HtmlUtils.escapeHtml(menuText);
+        wrappingSection.innerHTML = `<button class="fromApi" id="${escapedHtml}">${escapedHtml}</button>`
+        const menuItemContainer = this.menuElement.node.querySelector("#gameMenu main");
+        if (menuItemContainer) {
+            menuItemContainer.querySelector(`#${escapedHtml}.fromApi`)?.remove()
+            menuItemContainer.insertBefore(wrappingSection, menuItemContainer.querySelector("#socialLinks"))
+        }
     }
 
     preload() {
@@ -270,11 +297,17 @@ export class MenuScene extends Phaser.Scene {
     }
 
     private onMenuClick(event: MouseEvent) {
-        if((event?.target as HTMLInputElement).classList.contains('not-button')){
+        const htmlMenuItem = (event?.target as HTMLInputElement);
+        if (htmlMenuItem.classList.contains('not-button')) {
             return;
         }
         event.preventDefault();
 
+        if (htmlMenuItem.classList.contains("fromApi")) {
+            sendMenuClickedEvent(htmlMenuItem.id)
+            return
+        }
+
         switch ((event?.target as HTMLInputElement).id) {
             case 'changeNameButton':
                 this.closeSideMenu();