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

front/src/Api/Events/IframeEvent.ts

@@ -5,9 +5,7 @@ import type { ChatEvent } from './ChatEvent';
 import type { ClosePopupEvent } from './ClosePopupEvent';
 import type { EnterLeaveEvent } from './EnterLeaveEvent';
 import type { GoToPageEvent } from './GoToPageEvent';
-import type { MenuItemClickedEvent } from './MenuItemClickedEvent';
-import type { MenuItemRegisterEvent } from './MenuItemRegisterEvent';
-import type { HasPlayerMovedEvent } from './HasPlayerMovedEvent';
+import type { LoadPageEvent } from './LoadPageEvent';
 import type { OpenCoWebSiteEvent } from './OpenCoWebSiteEvent';
 import type { OpenPopupEvent } from './OpenPopupEvent';
 import type { OpenTabEvent } from './OpenTabEvent';
@@ -24,8 +22,9 @@ export interface TypedMessageEvent<T> extends MessageEvent {
 }
 
 export type IframeEventMap = {
-    getState: GameStateEvent,
-    registerMenuCommand: MenuItemRegisterEvent
+    //getState: GameStateEvent,
+    // updateTile: UpdateTileEvent
+    loadPage: LoadPageEvent
     chat: ChatEvent,
     openPopup: OpenPopupEvent
     closePopup: ClosePopupEvent
@@ -44,7 +43,7 @@ export type IframeEventMap = {
     getDataLayer: undefined
     loadSound: LoadSoundEvent
     playSound: PlaySoundEvent
-    stopSound: null
+    stopSound: null,
 }
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;

front/src/Api/IframeListener.ts

@@ -12,17 +12,10 @@ 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 { isLayerEvent, LayerEvent } from "./Events/LayerEvent";
-import { isSetPropertyEvent, SetPropertyEvent} from "./Events/setPropertyEvent";
-import type { GameStateEvent } from './Events/GameStateEvent';
-import type { HasPlayerMovedEvent } from './Events/HasPlayerMovedEvent';
-import { Math } from 'phaser';
-import type { DataLayerEvent } from "./Events/DataLayerEvent";
-import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent';
-import type { MenuItemClickedEvent } from './Events/MenuItemClickedEvent';
-import { isPlaySoundEvent, PlaySoundEvent } from "./Events/PlaySoundEvent";
-import { isStopSoundEvent, StopSoundEvent } from "./Events/StopSoundEvent";
-import { isLoadSoundEvent, LoadSoundEvent } from "./Events/LoadSoundEvent";
+import { isLoadPageEvent } from './Events/LoadPageEvent';
+import {isPlaySoundEvent, PlaySoundEvent} from "./Events/PlaySoundEvent";
+import {isStopSoundEvent, StopSoundEvent} from "./Events/StopSoundEvent";
+import {isLoadSoundEvent, LoadSoundEvent} from "./Events/LoadSoundEvent";
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
  * Also allows to send messages to those iframes.
@@ -102,16 +95,23 @@ class IframeListener {
             // Do we trust the sender of this message?
             // Let's only accept messages from the iframe that are allowed.
             // Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain).
-            let foundSrc: string | null = null;
-            let iframe: HTMLIFrameElement;
+            let foundSrc: string | undefined;
+
+            foundSrc = [...this.scripts.keys()].find(key => {
+                return this.scripts.get(key)?.contentWindow == message.source
+            });
+
+            if (foundSrc === undefined) {
+                let iframe: HTMLIFrameElement;
             for (iframe of this.iframes) {
                 if (iframe.contentWindow === message.source) {
                     foundSrc = iframe.src;
-                    break;
+                    break;}
+                }
+
+                if (foundSrc === undefined) {
+                    return;
                 }
-            }
-            if (!foundSrc) {
-                return;
             }
 
             const payload = message.data;
@@ -145,11 +145,7 @@ class IframeListener {
                     this._loadSoundStream.next(payload.data);
                 }
                 else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    const scriptUrl = [...this.scripts.keys()].find(key => {
-                        return this.scripts.get(key)?.contentWindow == message.source
-                    })
-
-                    scriptUtils.openCoWebsite(payload.data.url, scriptUrl || foundSrc);
+                    scriptUtils.openCoWebsite(payload.data.url, foundSrc);
                 }
 
                 else if (payload.type === 'closeCoWebSite') {

front/src/Api/iframe/IframeApiContribution.ts

@@ -0,0 +1,31 @@
+import type * as tg from "generic-type-guard";
+import type { IframeEvent, IframeEventMap, IframeResponseEventMap } from '../Events/IframeEvent';
+
+export function sendToWorkadventure(content: IframeEvent<keyof IframeEventMap>) {
+    window.parent.postMessage(content, "*")
+}
+type GuardedType<Guard extends tg.TypeGuard<unknown>> = Guard extends tg.TypeGuard<infer T> ? T : never
+
+export interface IframeCallback<Key extends keyof IframeResponseEventMap, T = IframeResponseEventMap[Key], Guard = tg.TypeGuard<T>> {
+
+    typeChecker: Guard,
+    callback: (payloadData: T) => void
+}
+
+export interface IframeCallbackContribution<Key extends keyof IframeResponseEventMap> extends IframeCallback<Key> {
+
+    type: Key
+}
+
+/**
+ * !! be aware that the implemented attributes (addMethodsAtRoot and subObjectIdentifier) must be readonly
+ *
+ *
+ */
+
+export abstract class IframeApiContribution<T extends {
+    callbacks: Array<IframeCallbackContribution<keyof IframeResponseEventMap>>,
+}> {
+
+    abstract callbacks: T["callbacks"]
+}

front/src/Api/iframe/Sound/Sound.ts

@@ -0,0 +1,39 @@
+import {sendToWorkadventure} from "../IframeApiContribution";
+import type {LoadSoundEvent} from "../../Events/LoadSoundEvent";
+import type {PlaySoundEvent} from "../../Events/PlaySoundEvent";
+import type {StopSoundEvent} from "../../Events/StopSoundEvent";
+import SoundConfig = Phaser.Types.Sound.SoundConfig;
+
+export class Sound {
+    constructor(private url: string) {
+        sendToWorkadventure({
+            "type": 'loadSound',
+            "data": {
+                url: this.url,
+            } as LoadSoundEvent
+
+        });
+    }
+
+    public play(config: SoundConfig) {
+        sendToWorkadventure({
+            "type": 'playSound',
+            "data": {
+                url: this.url,
+                config
+            } as PlaySoundEvent
+
+        });
+        return this.url;
+    }
+    public stop() {
+        sendToWorkadventure({
+            "type": 'stopSound',
+            "data": {
+                url: this.url,
+            } as StopSoundEvent
+
+        });
+        return this.url;
+    }
+}

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

@@ -0,0 +1,18 @@
+import type {Popup} from "./Popup";
+
+export type ButtonClickedCallback = (popup: Popup) => void;
+
+export interface ButtonDescriptor {
+    /**
+     * The label of the button
+     */
+    label: string,
+    /**
+     * The type of the button. Can be one of "normal", "primary", "success", "warning", "error", "disabled"
+     */
+    className?: "normal" | "primary" | "success" | "warning" | "error" | "disabled",
+    /**
+     * Callback called if the button is pressed
+     */
+    callback: ButtonClickedCallback,
+}

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

@@ -0,0 +1,19 @@
+import {sendToWorkadventure} from "../IframeApiContribution";
+import type {ClosePopupEvent} from "../../Events/ClosePopupEvent";
+
+export class Popup {
+    constructor(private id: number) {
+    }
+
+    /**
+     * Closes the popup
+     */
+    public close(): void {
+        sendToWorkadventure({
+            'type': 'closePopup',
+            'data': {
+                'popupId': this.id,
+            } as ClosePopupEvent
+        });
+    }
+}

front/src/Api/iframe/chat.ts

@@ -0,0 +1,38 @@
+import type { ChatEvent } from '../Events/ChatEvent'
+import { isUserInputChatEvent, UserInputChatEvent } from '../Events/UserInputChatEvent'
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution'
+import { apiCallback } from "./registeredCallbacks";
+import {Subject} from "rxjs";
+
+const chatStream = new Subject<string>();
+
+class WorkadventureChatCommands extends IframeApiContribution<WorkadventureChatCommands> {
+
+    callbacks = [apiCallback({
+        callback: (event: UserInputChatEvent) => {
+            chatStream.next(event.message);
+        },
+        type: "userInputChat",
+        typeChecker: isUserInputChatEvent
+    })]
+
+
+    sendChatMessage(message: string, author: string) {
+        sendToWorkadventure({
+            type: 'chat',
+            data: {
+                'message': message,
+                'author': author
+            } as ChatEvent
+        })
+    }
+
+    /**
+     * Listen to messages sent by the local user, in the chat.
+     */
+    onChatMessage(callback: (message: string) => void) {
+        chatStream.subscribe(callback);
+    }
+}
+
+export default new WorkadventureChatCommands()

front/src/Api/iframe/controls.ts

@@ -0,0 +1,16 @@
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+
+class WorkadventureControlsCommands extends IframeApiContribution<WorkadventureControlsCommands> {
+    callbacks = []
+
+    disablePlayerControls(): void {
+        sendToWorkadventure({ 'type': 'disablePlayerControls', data: null });
+    }
+
+    restorePlayerControls(): void {
+        sendToWorkadventure({ 'type': 'restorePlayerControls', data: null });
+    }
+}
+
+
+export default new WorkadventureControlsCommands();

front/src/Api/iframe/nav.ts

@@ -0,0 +1,56 @@
+import type { GoToPageEvent } from '../Events/GoToPageEvent';
+import type { OpenTabEvent } from '../Events/OpenTabEvent';
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import type {OpenCoWebSiteEvent} from "../Events/OpenCoWebSiteEvent";
+
+
+class WorkadventureNavigationCommands extends IframeApiContribution<WorkadventureNavigationCommands> {
+    callbacks = []
+
+
+    openTab(url: string): void {
+        sendToWorkadventure({
+            "type": 'openTab',
+            "data": {
+                url
+            } as OpenTabEvent
+        });
+    }
+
+    goToPage(url: string): void {
+        sendToWorkadventure({
+            "type": 'goToPage',
+            "data": {
+                url
+            } as GoToPageEvent
+        });
+    }
+
+    goToRoom(url: string): void {
+        sendToWorkadventure({
+            "type": 'loadPage',
+            "data": {
+                url
+            }
+        });
+    }
+
+    openCoWebSite(url: string): void {
+        sendToWorkadventure({
+            "type": 'openCoWebSite',
+            "data": {
+                url
+            } as OpenCoWebSiteEvent
+        });
+    }
+
+    closeCoWebSite(): void {
+        sendToWorkadventure({
+            "type": 'closeCoWebSite',
+            data: null
+        });
+    }
+}
+
+
+export default new WorkadventureNavigationCommands();

front/src/Api/iframe/registeredCallbacks.ts

@@ -0,0 +1,16 @@
+import type {IframeResponseEventMap} from "../../Api/Events/IframeEvent";
+import type {IframeCallback} from "../../Api/iframe/IframeApiContribution";
+import type {IframeCallbackContribution} from "../../Api/iframe/IframeApiContribution";
+
+export const registeredCallbacks: { [K in keyof IframeResponseEventMap]?: IframeCallback<K> } = {}
+
+export function apiCallback<T extends keyof IframeResponseEventMap>(callbackData: IframeCallbackContribution<T>): IframeCallbackContribution<keyof IframeResponseEventMap> {
+    const iframeCallback = {
+        typeChecker: callbackData.typeChecker,
+        callback: callbackData.callback
+    } as IframeCallback<T>;
+
+    const newCallback = { [callbackData.type]: iframeCallback };
+    Object.assign(registeredCallbacks, newCallback)
+    return callbackData as unknown as IframeCallbackContribution<keyof IframeResponseEventMap>;
+}

front/src/Api/iframe/room.ts

@@ -0,0 +1,50 @@
+import { Subject } from "rxjs";
+import { EnterLeaveEvent, isEnterLeaveEvent } from '../Events/EnterLeaveEvent';
+import { IframeApiContribution } from './IframeApiContribution';
+import { apiCallback } from "./registeredCallbacks";
+
+const enterStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
+const leaveStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
+
+class WorkadventureRoomCommands extends IframeApiContribution<WorkadventureRoomCommands> {
+    callbacks = [
+        apiCallback({
+            callback: (payloadData: EnterLeaveEvent) => {
+                enterStreams.get(payloadData.name)?.next();
+            },
+            type: "enterEvent",
+            typeChecker: isEnterLeaveEvent
+        }),
+        apiCallback({
+            type: "leaveEvent",
+            typeChecker: isEnterLeaveEvent,
+            callback: (payloadData) => {
+                leaveStreams.get(payloadData.name)?.next();
+            }
+        })
+
+    ]
+
+
+    onEnterZone(name: string, callback: () => void): void {
+        let subject = enterStreams.get(name);
+        if (subject === undefined) {
+            subject = new Subject<EnterLeaveEvent>();
+            enterStreams.set(name, subject);
+        }
+        subject.subscribe(callback);
+
+    }
+    onLeaveZone(name: string, callback: () => void): void {
+        let subject = leaveStreams.get(name);
+        if (subject === undefined) {
+            subject = new Subject<EnterLeaveEvent>();
+            leaveStreams.set(name, subject);
+        }
+        subject.subscribe(callback);
+    }
+
+}
+
+
+export default new WorkadventureRoomCommands();

front/src/Api/iframe/sound.ts

@@ -0,0 +1,17 @@
+import type { LoadSoundEvent } from '../Events/LoadSoundEvent';
+import type { PlaySoundEvent } from '../Events/PlaySoundEvent';
+import type { StopSoundEvent } from '../Events/StopSoundEvent';
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import {Sound} from "./Sound/Sound";
+
+class WorkadventureSoundCommands extends IframeApiContribution<WorkadventureSoundCommands> {
+    callbacks = []
+
+    loadSound(url: string): Sound {
+        return new Sound(url);
+    }
+
+}
+
+
+export default new WorkadventureSoundCommands();

front/src/Api/iframe/ui.ts

@@ -0,0 +1,83 @@
+import { isButtonClickedEvent } from '../Events/ButtonClickedEvent';
+import type { ClosePopupEvent } from '../Events/ClosePopupEvent';
+import { IframeApiContribution, sendToWorkadventure } from './IframeApiContribution';
+import { apiCallback } from "./registeredCallbacks";
+import {Popup} from "./Ui/Popup";
+import type {ButtonClickedCallback, ButtonDescriptor} from "./Ui/ButtonDescriptor";
+
+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>>();
+
+interface ZonedPopupOptions {
+    zone: string
+    objectLayerName?: string,
+    popupText: string,
+    delay?: number
+    popupOptions: Array<ButtonDescriptor>
+}
+
+
+class WorkAdventureUiCommands extends IframeApiContribution<WorkAdventureUiCommands> {
+
+    callbacks = [apiCallback({
+        type: "buttonClickedEvent",
+        typeChecker: isButtonClickedEvent,
+        callback: (payloadData) => {
+            const callback = popupCallbacks.get(payloadData.popupId)?.get(payloadData.buttonId);
+            const popup = popups.get(payloadData.popupId);
+            if (popup === undefined) {
+                throw new Error('Could not find popup with ID "' + payloadData.popupId + '"');
+            }
+            if (callback) {
+                callback(popup);
+            }
+        }
+    })];
+
+
+    openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup {
+        popupId++;
+        const popup = new Popup(popupId);
+        const btnMap = new Map<number, () => void>();
+        popupCallbacks.set(popupId, btnMap);
+        let id = 0;
+        for (const button of buttons) {
+            const callback = button.callback;
+            if (callback) {
+                btnMap.set(id, () => {
+                    callback(popup);
+                });
+            }
+            id++;
+        }
+
+        sendToWorkadventure({
+            'type': 'openPopup',
+            'data': {
+                popupId,
+                targetObject,
+                message,
+                buttons: buttons.map((button) => {
+                    return {
+                        label: button.label,
+                        className: button.className
+                    };
+                })
+            }
+        });
+
+        popups.set(popupId, popup)
+        return popup;
+    }
+
+    displayBubble(): void {
+        sendToWorkadventure({ 'type': 'displayBubble', data: null });
+    }
+
+    removeBubble(): void {
+        sendToWorkadventure({ 'type': 'removeBubble', data: null });
+    }
+}
+
+export default new WorkAdventureUiCommands();