added typedef for subobject types

extracted popup functions

# Conflicts:
#	front/package-lock.json
#	front/package.json
#	front/src/iframe_api.ts

front/src/Api/iframe/IframeApiContribution.ts

@@ -0,0 +1,48 @@
+import type { IframeEvent, IframeEventMap, IframeResponseEventMap } from '../Events/IframeEvent';
+import type * as tg from "generic-type-guard";
+
+
+export type PossibleSubobjects = "zone" | "chat" | "ui"
+
+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 function apiCallback<T extends tg.TypeGuard<unknown>>(callbackData: IframeCallbackContribution<T>) {
+
+    return callbackData
+}
+
+export interface IframeCallbackContribution<Guard extends tg.TypeGuard<unknown>, T = GuardedType<Guard>> {
+
+    type: keyof IframeResponseEventMap,
+    typeChecker: Guard,
+    callback: (payloadData: T) => void
+}
+
+
+/**
+ * !! be aware that the implemented attributes (addMethodsAtRoot and subObjectIdentifier) must be readonly
+ * 
+ * 
+ */
+
+export abstract class IframeApiContribution<T extends {
+    // i think this is specific enough
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    callbacks: Array<IframeCallbackContribution<tg.TypeGuard<any>>>,
+    readonly subObjectIdentifier: PossibleSubobjects,
+    readonly addMethodsAtRoot: boolean | undefined
+}> {
+
+    abstract callbacks: T["callbacks"]
+
+    /**
+     * @deprecated this is only there for backwards compatibility on new apis this should be set to false or ignored
+     */
+    addMethodsAtRoot = false
+
+    abstract readonly subObjectIdentifier: T["subObjectIdentifier"]
+
+}

front/src/Api/iframe/chatmessage.ts

@@ -1,10 +1,24 @@
 import { ChatEvent } from '../Events/ChatEvent'
 import { isUserInputChatEvent, UserInputChatEvent } from '../Events/UserInputChatEvent'
-import { registerWorkadventureCommand, registerWorkadvntureCallback, sendToWorkadventure } from "./iframe-registration"
+import { } from "./iframe-registration"
+import { apiCallback, IframeApiContribution, sendToWorkadventure } from './IframeApiContribution'
 
-let chatMessageCallback: (event: string) => void | undefined
 
-class WorkadvntureChatCommands {
+class WorkadvntureChatCommands extends IframeApiContribution<WorkadvntureChatCommands> {
+    readonly subObjectIdentifier = 'chat'
+
+    readonly addMethodsAtRoot = true
+
+    chatMessageCallback?: (event: string) => void
+
+    callbacks = [apiCallback({
+        callback: (event: UserInputChatEvent) => {
+            this.chatMessageCallback?.(event.message)
+        },
+        type: "userInputChat",
+        typeChecker: isUserInputChatEvent
+    })]
+
 
     sendChatMessage(message: string, author: string) {
         sendToWorkadventure({
@@ -20,16 +34,8 @@ class WorkadvntureChatCommands {
      * Listen to messages sent by the local user, in the chat.
      */
     onChatMessage(callback: (message: string) => void) {
-        chatMessageCallback = callback
+        this.chatMessageCallback = callback
     }
 }
 
-export const commands = registerWorkadventureCommand(new WorkadvntureChatCommands())
-export const callbacks = registerWorkadvntureCallback([{
-    callback: (event: UserInputChatEvent) => {
-        chatMessageCallback?.(event.message)
-    },
-    type: "userInputChat",
-    typeChecker: isUserInputChatEvent
-}])
-
+export default new WorkadvntureChatCommands()

front/src/Api/iframe/iframe-registration.ts

@@ -1,6 +1,6 @@
 import { IframeEvent, IframeEventMap, IframeResponseEventMap } from '../Events/IframeEvent';
 import { registeredCallbacks, WorkAdventureApi } from "../../iframe_api"
-export function registerWorkadventureCommand<T>(commnds: T): T {
+/*export function registerWorkadventureCommand<T>(commnds: T): T {
     const commandPrototype = Object.getPrototypeOf(commnds);
     const commandClassPropertyNames = Object.getOwnPropertyNames(commandPrototype).filter(name => name !== "constructor");
     for (const key of commandClassPropertyNames) {
@@ -8,7 +8,7 @@ export function registerWorkadventureCommand<T>(commnds: T): T {
     }
     return commnds
 }
-
+*/
 
 export function registerWorkadvntureCallback<T extends Function>(callbacks: Array<{
     type: keyof IframeResponseEventMap,
@@ -25,6 +25,3 @@ export function registerWorkadvntureCallback<T extends Function>(callbacks: Arra
 }
 
 
-export function sendToWorkadventure(content: IframeEvent<keyof IframeEventMap>) {
-    window.parent.postMessage(content, "*")
-}

front/src/Api/iframe/popup.ts

@@ -0,0 +1,148 @@
+import { isButtonClickedEvent } from '../Events/ButtonClickedEvent';
+import { ClosePopupEvent } from '../Events/ClosePopupEvent';
+import { apiCallback, IframeApiContribution, IframeCallbackContribution, sendToWorkadventure } from './IframeApiContribution';
+import zoneCommands from "./zone-events"
+class Popup {
+    constructor(private id: number) {
+    }
+
+    /**
+     * Closes the popup
+     */
+    public close(): void {
+        window.parent.postMessage({
+            'type': 'closePopup',
+            'data': {
+                'popupId': this.id,
+            } as ClosePopupEvent
+        }, '*');
+    }
+}
+
+type ButtonClickedCallback = (popup: Popup) => void;
+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,
+}
+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 PopupApiContribution extends IframeApiContribution<PopupApiContribution> {
+
+    readonly subObjectIdentifier = "ui"
+
+    readonly addMethodsAtRoot = true
+    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;
+    }
+
+
+
+    popupInZone(options: ZonedPopupOptions) {
+        const objectLayerName = options.objectLayerName || options.zone
+
+        let lastOpened = 0;
+
+        let popup: Popup | undefined;
+        zoneCommands.onEnterZone(options.zone, () => {
+            if (options.delay) {
+                if (lastOpened + options.delay > Date.now()) {
+                    return;
+                }
+            }
+            lastOpened = Date.now();
+            popup = this.openPopup(objectLayerName, options.popupText, options.popupOptions.map(option => {
+                const callback = option.callback;
+                const popupOptions = {
+                    ...option,
+                    className: option.className || 'normal',
+                    callback: () => {
+                        if (callback && popup) {
+                            callback(popup);
+                        }
+                        popup?.close();
+                        popup = undefined;
+                    }
+                };
+
+                return popupOptions;
+            }));
+        });
+        zoneCommands.onLeaveZone(options.zone, () => {
+            if (popup) {
+                popup.close();
+                popup = undefined;
+            }
+        });
+    }
+
+}
+
+export default new PopupApiContribution()

front/src/Api/iframe/zone-events.ts

@@ -1,27 +1,54 @@
 import { EnterLeaveEvent, isEnterLeaveEvent } from '../Events/EnterLeaveEvent'
-import { registerWorkadventureCommand, registerWorkadvntureCallback, sendToWorkadventure } from "./iframe-registration"
+import { apiCallback as apiCallback, IframeApiContribution } from './IframeApiContribution'
+import { Subject } from "rxjs";
+
+
+const enterStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
+const leaveStreams: Map<string, Subject<EnterLeaveEvent>> = new Map<string, Subject<EnterLeaveEvent>>();
+
+class WorkadventureZoneCommands extends IframeApiContribution<WorkadventureZoneCommands> {
+
+    readonly subObjectIdentifier = "zone"
+
+    readonly addMethodsAtRoot = true
+    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();
+            }
+        })
+
+    ]
 
-class WorkadventureZoneCommands {
 
     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 const commands = registerWorkadventureCommand(new WorkadventureZoneCommands())
-export const callbacks = registerWorkadvntureCallback([{
-    callback: (enterEvent: EnterLeaveEvent) => {
-
-    },
-    type: "enterEvent",
-    typeChecker: isEnterLeaveEvent
-},])
-
+export default new WorkadventureZoneCommands();