Changing the method name from "triggerMessage" to "displayActionMessage".

Generally speaking, I like to call the message at the bottom an "action message".
And things can "trigger" it, but in the case of a method that actually proactively displays the message, I find "displayActionMessage" to be a better name.

Also, removing package-lock files and improving code style

docs/maps/api-ui.md

@@ -92,20 +92,38 @@ WA.ui.registerMenuCommand("test", () => {
 
 ### Awaiting User Confirmation (with space bar)
 
-```typescript
+```
-triggerMessage(message: string, callback: ()=>void): TriggerMessage
+WA.ui.displayActionMessage(message: string, callback: () => void): ActionMessage
 ```
 
 Displays a message at the bottom of the screen (that will disappear when space bar is pressed).
 
+<div class="col">
+    <img src="https://workadventu.re/img/docs/trigger_message.png" class="figure-img img-fluid rounded" alt="" />
+</div>
+
 Example:
 
 ```javascript
-const triggerMessage = WA.ui.triggerMessage("press 'space' to confirm",()=>{
+const triggerMessage = WA.ui.displayActionMessage("press 'space' to confirm", () => {
-     WA.chat.sendChatMessage("confirmed", "trigger message logic")
+    WA.chat.sendChatMessage("confirmed", "trigger message logic")
 });
-setTimeout(()=>{
+
-	// later
+setTimeout(() => {
-	triggerMessage.remove();
+    // later
-},1000)
+    triggerMessage.remove();
-```
+}, 1000)
+```
+
+Please note that `displayActionMessage` returns an object of the `ActionMessage` class.
+
+The `ActionMessage` class contains a single method: `remove(): Promise<void>`. This will obviously remove the message when called.
+
+```javascript
+class ActionMessage {
+    /**
+     * Hides the message
+     */
+    remove() {};
+}
+```

front/src/Api/Events/IframeEvent.ts

@@ -26,11 +26,11 @@ import type { LoadTilesetEvent } from "./LoadTilesetEvent";
 import { isLoadTilesetEvent } from "./LoadTilesetEvent";
 import type {
     MessageReferenceEvent,
-    removeTriggerMessage,
+    removeActionMessage,
-    triggerMessage,
+    triggerActionMessage,
-    TriggerMessageEvent,
+    TriggerActionMessageEvent,
-} from "./ui/TriggerMessageEvent";
+} from "./ui/TriggerActionMessageEvent";
-import { isMessageReferenceEvent, isTriggerMessageEvent } from "./ui/TriggerMessageEvent";
+import { isMessageReferenceEvent, isTriggerActionMessageEvent } from "./ui/TriggerActionMessageEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T;
@@ -63,9 +63,6 @@ export type IframeEventMap = {
     loadTileset: LoadTilesetEvent;
     registerMenuCommand: MenuItemRegisterEvent;
     setTiles: SetTilesEvent;
-
-    triggerMessage: TriggerMessageEvent;
-    removeTriggerMessage: MessageReferenceEvent;
 };
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;
@@ -117,11 +114,11 @@ export const iframeQueryMapTypeGuards = {
         query: isLoadTilesetEvent,
         answer: tg.isNumber,
     },
-    triggerMessage: {
+    triggerActionMessage: {
-        query: isTriggerMessageEvent,
+        query: isTriggerActionMessageEvent,
         answer: tg.isUndefined,
     },
-    removeTriggerMessage: {
+    removeActionMessage: {
         query: isMessageReferenceEvent,
         answer: tg.isUndefined,
     },

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

@@ -1,16 +1,16 @@
 import * as tg from 'generic-type-guard';
 
-export const triggerMessage = 'triggerMessage';
+export const triggerActionMessage = 'triggerActionMessage';
-export const removeTriggerMessage = 'removeTriggerMessage';
+export const removeActionMessage = 'removeActionMessage';
 
-export const isTriggerMessageEvent = new tg.IsInterface()
+export const isTriggerActionMessageEvent = new tg.IsInterface()
     .withProperties({
         message: tg.isString,
         uuid: tg.isString,
     })
     .get();
 
-export type TriggerMessageEvent = tg.GuardedType<typeof isTriggerMessageEvent>;
+export type TriggerActionMessageEvent = tg.GuardedType<typeof isTriggerActionMessageEvent>;
 
 export const isMessageReferenceEvent = new tg.IsInterface()
     .withProperties({

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

@@ -1,22 +1,22 @@
 import {
     isMessageReferenceEvent,
-    isTriggerMessageEvent,
+    isTriggerActionMessageEvent,
-    removeTriggerMessage,
+    removeActionMessage,
-    triggerMessage,
+    triggerActionMessage,
-} from './TriggerMessageEvent';
+} from './TriggerActionMessageEvent';
 
 import * as tg from 'generic-type-guard';
 
 const isTriggerMessageEventObject = new tg.IsInterface()
     .withProperties({
-        type: tg.isSingletonString(triggerMessage),
+        type: tg.isSingletonString(triggerActionMessage),
-        data: isTriggerMessageEvent,
+        data: isTriggerActionMessageEvent,
     })
     .get();
 
 const isTriggerMessageRemoveEventObject = new tg.IsInterface()
     .withProperties({
-        type: tg.isSingletonString(removeTriggerMessage),
+        type: tg.isSingletonString(removeActionMessage),
         data: isMessageReferenceEvent,
     })
     .get();

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

@@ -1,21 +1,21 @@
 import {
     MessageReferenceEvent,
-    removeTriggerMessage,
+    removeActionMessage,
-    triggerMessage,
+    triggerActionMessage,
-    TriggerMessageEvent,
+    TriggerActionMessageEvent,
-} from '../../Events/ui/TriggerMessageEvent';
+} from "../../Events/ui/TriggerActionMessageEvent";
-import { queryWorkadventure } from '../IframeApiContribution';
+import { queryWorkadventure } from "../IframeApiContribution";
 function uuidv4() {
-    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
         const r = (Math.random() * 16) | 0,
-            v = c === 'x' ? r : (r & 0x3) | 0x8;
+            v = c === "x" ? r : (r & 0x3) | 0x8;
         return v.toString(16);
     });
 }
 
-export let triggerMessageInstance: TriggerMessage | undefined = undefined;
+export let triggerMessageInstance: ActionMessage | undefined = undefined;
 
-export class TriggerMessage {
+export class ActionMessage {
     uuid: string;
 
     constructor(private message: string, private callback: () => void) {
@@ -29,18 +29,18 @@ export class TriggerMessage {
 
     async create() {
         await queryWorkadventure({
-            type: triggerMessage,
+            type: triggerActionMessage,
             data: {
                 message: this.message,
                 uuid: this.uuid,
-            } as TriggerMessageEvent,
+            } as TriggerActionMessageEvent,
         });
         this.callback();
     }
 
     async remove() {
         await queryWorkadventure({
-            type: removeTriggerMessage,
+            type: removeActionMessage,
             data: {
                 uuid: this.uuid,
             } as MessageReferenceEvent,

front/src/Api/iframe/room.ts

@@ -1,4 +1,4 @@
-import { Observable, Subject } from "rxjs";
+import { Subject } from "rxjs";
 
 import { EnterLeaveEvent, isEnterLeaveEvent } from "../Events/EnterLeaveEvent";
 

front/src/Api/iframe/ui.ts

@@ -1,10 +1,10 @@
-import { isButtonClickedEvent } from '../Events/ButtonClickedEvent';
+import { isButtonClickedEvent } from "../Events/ButtonClickedEvent";
-import { isMenuItemClickedEvent } from '../Events/ui/MenuItemClickedEvent';
+import { isMenuItemClickedEvent } from "../Events/ui/MenuItemClickedEvent";
-import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
-import { apiCallback } from './registeredCallbacks';
+import { apiCallback } from "./registeredCallbacks";
-import type { ButtonClickedCallback, ButtonDescriptor } from './Ui/ButtonDescriptor';
+import type { ButtonClickedCallback, ButtonDescriptor } from "./Ui/ButtonDescriptor";
-import { Popup } from './Ui/Popup';
+import { Popup } from "./Ui/Popup";
-import { TriggerMessage } from './Ui/TriggerMessage';
+import { ActionMessage } from "./Ui/ActionMessage";
 
 let popupId = 0;
 const popups: Map<number, Popup> = new Map<number, Popup>();
@@ -26,7 +26,7 @@ interface ZonedPopupOptions {
 export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiCommands> {
     callbacks = [
         apiCallback({
-            type: 'buttonClickedEvent',
+            type: "buttonClickedEvent",
             typeChecker: isButtonClickedEvent,
             callback: (payloadData) => {
                 const callback = popupCallbacks.get(payloadData.popupId)?.get(payloadData.buttonId);
@@ -40,7 +40,7 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
             },
         }),
         apiCallback({
-            type: 'menuItemClicked',
+            type: "menuItemClicked",
             typeChecker: isMenuItemClickedEvent,
             callback: (event) => {
                 const callback = menuCallbacks.get(event.menuItem);
@@ -68,7 +68,7 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
         }
 
         sendToWorkadventure({
-            type: 'openPopup',
+            type: "openPopup",
             data: {
                 popupId,
                 targetObject,
@@ -89,7 +89,7 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
     registerMenuCommand(commandDescriptor: string, callback: (commandDescriptor: string) => void) {
         menuCallbacks.set(commandDescriptor, callback);
         sendToWorkadventure({
-            type: 'registerMenuCommand',
+            type: "registerMenuCommand",
             data: {
                 menutItem: commandDescriptor,
             },
@@ -97,15 +97,15 @@ export class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventure
     }
 
     displayBubble(): void {
-        sendToWorkadventure({ type: 'displayBubble', data: null });
+        sendToWorkadventure({ type: "displayBubble", data: null });
     }
 
     removeBubble(): void {
-        sendToWorkadventure({ type: 'removeBubble', data: null });
+        sendToWorkadventure({ type: "removeBubble", data: null });
     }
 
-    triggerMessage(message: string, callback: () => void): TriggerMessage {
+    displayActionMessage(message: string, callback: () => void): ActionMessage {
-        return new TriggerMessage(message, callback);
+        return new ActionMessage(message, callback);
     }
 }
 

front/src/Phaser/Game/GameScene.ts

@@ -87,7 +87,6 @@ import { playersStore } from "../../Stores/PlayersStore";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
 import Tileset = Phaser.Tilemaps.Tileset;
 import { userIsAdminStore } from "../../Stores/GameStore";
-import { isMessageReferenceEvent, isTriggerMessageEvent } from "../../Api/Events/ui/TriggerMessageEvent";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -1153,7 +1152,7 @@ ${escapedMessage}
         });
 
         iframeListener.registerAnswerer(
-            "triggerMessage",
+            "triggerActionMessage",
             (message) =>
                 new Promise((resolver) => {
                     layoutManager.addActionButton(
@@ -1168,7 +1167,7 @@ ${escapedMessage}
                 })
         );
 
-        iframeListener.registerAnswerer("removeTriggerMessage", (message) => {
+        iframeListener.registerAnswerer("removeActionMessage", (message) => {
             layoutManager.removeActionButton(message.uuid, this.userInputManager);
         });
     }
@@ -1295,8 +1294,8 @@ ${escapedMessage}
         iframeListener.unregisterAnswerer("loadTileset");
         iframeListener.unregisterAnswerer("getMapData");
         iframeListener.unregisterAnswerer("getState");
-        iframeListener.unregisterAnswerer("triggerMessage");
+        iframeListener.unregisterAnswerer("triggerActionMessage");
-        iframeListener.unregisterAnswerer("removeTriggerMessage");
+        iframeListener.unregisterAnswerer("removeActionMessage");
         this.sharedVariablesManager?.close();
 
         mediaManager.hideGameOverlay();

maps/tests/TriggerMessageApi/script.js

@@ -2,7 +2,7 @@ WA.onInit().then(() => {
     let message;
 
     WA.room.onEnterZone("carpet", () => {
-        message = WA.ui.triggerMessage("This is a test message. Press space to display a chat message. Walk out to hide the message.", () => {
+        message = WA.ui.displayActionMessage("This is a test message. Press space to display a chat message. Walk out to hide the message.", () => {
             WA.chat.sendChatMessage("Hello world!", "The bot");
         });
     });

maps/tests/script.js

@@ -79,9 +79,9 @@ WA.room.onLeaveZone('popupZone', () => {
     WA.ui.removeBubble();
 })
 
-const message = WA.ui.triggerMessage("testMessage", () => {
+const message = WA.ui.displayActionMessage("testMessage", () => {
     WA.chat.sendChatMessage("triggered", "triggerbot");
 })
 setTimeout(() => {
     message.remove();
-}, 5000)
+}, 5000)