Implement new cowbesite system on API

front/src/Api/Events/CloseCoWebsiteEvent.ts

@@ -0,0 +1,12 @@
+import * as tg from "generic-type-guard";
+
+export const isCloseCoWebsite = new tg.IsInterface()
+    .withProperties({
+        id: tg.isOptional(tg.isString)
+    })
+    .get();
+
+/**
+ * A message sent from the iFrame to the game to add a message in the chat.
+ */
+export type CloseCoWebsiteEvent = tg.GuardedType<typeof isCloseCoWebsite>;

front/src/Api/Events/IframeEvent.ts

@@ -5,11 +5,10 @@ import type { ClosePopupEvent } from "./ClosePopupEvent";
 import type { EnterLeaveEvent } from "./EnterLeaveEvent";
 import type { GoToPageEvent } from "./GoToPageEvent";
 import type { LoadPageEvent } from "./LoadPageEvent";
-import type { OpenCoWebSiteEvent } from "./OpenCoWebSiteEvent";
+import { coWebsite, isOpenCoWebsiteEvent } from "./OpenCoWebsiteEvent";
 import type { OpenPopupEvent } from "./OpenPopupEvent";
 import type { OpenTabEvent } from "./OpenTabEvent";
 import type { UserInputChatEvent } from "./UserInputChatEvent";
-import type { MapDataEvent } from "./MapDataEvent";
 import type { LayerEvent } from "./LayerEvent";
 import type { SetPropertyEvent } from "./setPropertyEvent";
 import type { LoadSoundEvent } from "./LoadSoundEvent";
@@ -27,9 +26,6 @@ import type { LoadTilesetEvent } from "./LoadTilesetEvent";
 import { isLoadTilesetEvent } from "./LoadTilesetEvent";
 import type {
     MessageReferenceEvent,
-    removeActionMessage,
-    triggerActionMessage,
-    TriggerActionMessageEvent,
 } from "./ui/TriggerActionMessageEvent";
 import { isMessageReferenceEvent, isTriggerActionMessageEvent } from "./ui/TriggerActionMessageEvent";
 import type { MenuRegisterEvent, UnregisterMenuEvent } from "./ui/MenuRegisterEvent";
@@ -48,8 +44,6 @@ export type IframeEventMap = {
     closePopup: ClosePopupEvent;
     openTab: OpenTabEvent;
     goToPage: GoToPageEvent;
-    openCoWebSite: OpenCoWebSiteEvent;
-    closeCoWebSite: null;
     disablePlayerControls: null;
     restorePlayerControls: null;
     displayBubble: null;
@@ -118,6 +112,22 @@ export const iframeQueryMapTypeGuards = {
         query: isLoadTilesetEvent,
         answer: tg.isNumber,
     },
+    openCoWebsite: {
+        query: isOpenCoWebsiteEvent,
+        answer: coWebsite
+    },
+    getCoWebsites: {
+        query: tg.isUndefined,
+        answer:  tg.isArray(coWebsite)
+    },
+    closeCoWebsite: {
+        query: tg.isString,
+        answer: tg.isUndefined
+    },
+    closeCoWebsites: {
+        query: tg.isUndefined,
+        answer: tg.isUndefined
+    },
     triggerActionMessage: {
         query: isTriggerActionMessageEvent,
         answer: tg.isUndefined,

front/src/Api/Events/OpenCoWebSiteEvent.ts

@@ -1,14 +0,0 @@
-import * as tg from "generic-type-guard";
-
-export const isOpenCoWebsite = new tg.IsInterface()
-    .withProperties({
-        url: tg.isString,
-        allowApi: tg.isBoolean,
-        allowPolicy: tg.isString,
-    })
-    .get();
-
-/**
- * A message sent from the iFrame to the game to add a message in the chat.
- */
-export type OpenCoWebSiteEvent = tg.GuardedType<typeof isOpenCoWebsite>;

front/src/Api/Events/OpenCoWebsiteEvent.ts

@@ -0,0 +1,22 @@
+import * as tg from "generic-type-guard";
+
+export const isOpenCoWebsiteEvent = new tg.IsInterface()
+    .withProperties({
+        url: tg.isString,
+        allowApi: tg.isOptional(tg.isBoolean),
+        allowPolicy: tg.isOptional(tg.isString),
+        position: tg.isOptional(tg.isNumber)
+    })
+    .get();
+
+export const coWebsite = new tg.IsInterface()
+    .withProperties({
+        id: tg.isString,
+        position: tg.isNumber,
+    })
+    .get();
+
+/**
+ * A message sent from the iFrame to the game to add a message in the chat.
+ */
+export type OpenCoWebsiteEvent = tg.GuardedType<typeof isOpenCoWebsiteEvent>;

front/src/Api/IframeListener.ts

@@ -1,6 +1,5 @@
 import { Subject } from "rxjs";
-import type * as tg from "generic-type-guard";
-import { ChatEvent, isChatEvent } from "./Events/ChatEvent";
+import { isChatEvent } from "./Events/ChatEvent";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
 import type { EnterLeaveEvent } from "./Events/EnterLeaveEvent";
 import { isOpenPopupEvent, OpenPopupEvent } from "./Events/OpenPopupEvent";
@@ -8,18 +7,15 @@ 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 { isGoToPageEvent } from "./Events/GoToPageEvent";
+import { isCloseCoWebsite, CloseCoWebsiteEvent } from "./Events/CloseCoWebsiteEvent";
 import {
     IframeErrorAnswerEvent,
-    IframeEvent,
-    IframeEventMap,
     IframeQueryMap,
     IframeResponseEvent,
     IframeResponseEventMap,
     isIframeEventWrapper,
     isIframeQueryWrapper,
-    TypedMessageEvent,
 } from "./Events/IframeEvent";
 import type { UserInputChatEvent } from "./Events/UserInputChatEvent";
 import { isPlaySoundEvent, PlaySoundEvent } from "./Events/PlaySoundEvent";
@@ -33,7 +29,6 @@ import { isMenuRegisterEvent, isUnregisterMenuEvent } from "./Events/ui/MenuRegi
 import { SetTilesEvent, isSetTilesEvent } from "./Events/SetTilesEvent";
 import type { SetVariableEvent } from "./Events/SetVariableEvent";
 import { ModifyEmbeddedWebsiteEvent, isEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
-import { EmbeddedWebsite } from "./iframe/Room/EmbeddedWebsite";
 import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
 
 type AnswererCallback<T extends keyof IframeQueryMap> = (
@@ -53,10 +48,7 @@ class IframeListener {
     public readonly openTabStream = this._openTabStream.asObservable();
 
     private readonly _loadPageStream: Subject<string> = new Subject();
-    public readonly loadPageStream = this._loadPageStream.asObservable();
-
-    private readonly _openCoWebSiteStream: Subject<OpenCoWebSiteEvent> = new Subject();
-    public readonly openCoWebSiteStream = this._openCoWebSiteStream.asObservable();
+    public readonly loadPageStream = this._loadPageStream.asObservable()
 
     private readonly _disablePlayerControlStream: Subject<void> = new Subject();
     public readonly disablePlayerControlStream = this._disablePlayerControlStream.asObservable();
@@ -138,8 +130,6 @@ class IframeListener {
                     return;
                 }
 
-                foundSrc = this.getBaseUrl(foundSrc, message.source);
-
                 if (isIframeQueryWrapper(payload)) {
                     const queryId = payload.id;
                     const query = payload.query;
@@ -224,15 +214,6 @@ class IframeListener {
                         this._stopSoundStream.next(payload.data);
                     } else if (payload.type === "loadSound" && isLoadSoundEvent(payload.data)) {
                         this._loadSoundStream.next(payload.data);
-                    } else if (payload.type === "openCoWebSite" && isOpenCoWebsite(payload.data)) {
-                        scriptUtils.openCoWebsite(
-                            payload.data.url,
-                            foundSrc,
-                            payload.data.allowApi,
-                            payload.data.allowPolicy
-                        );
-                    } else if (payload.type === "closeCoWebSite") {
-                        scriptUtils.closeCoWebSite();
                     } else if (payload.type === "disablePlayerControls") {
                         this._disablePlayerControlStream.next();
                     } else if (payload.type === "restorePlayerControls") {
@@ -252,6 +233,9 @@ class IframeListener {
                         this.iframeCloseCallbacks.get(iframe)?.push(() => {
                             handleMenuUnregisterEvent(dataName);
                         });
+
+                        foundSrc = this.getBaseUrl(foundSrc, message.source);
+
                         handleMenuRegistrationEvent(
                             payload.data.name,
                             payload.data.iframe,
@@ -354,6 +338,20 @@ class IframeListener {
         return src;
     }
 
+    public getBaseUrlFromSource(source: MessageEventSource): string {
+        let foundSrc: string | undefined;
+        let iframe: HTMLIFrameElement | undefined;
+
+        for (iframe of this.iframes) {
+            if (iframe.contentWindow === source) {
+                foundSrc = iframe.src;
+                break;
+            }
+        }
+
+        return this.getBaseUrl(foundSrc ?? "", source);
+    }
+
     private static getIFrameId(scriptUrl: string): string {
         return "script" + btoa(scriptUrl);
     }

front/src/Api/ScriptUtils.ts

@@ -1,4 +1,4 @@
-import { coWebsiteManager } from "../WebRtc/CoWebsiteManager";
+import { coWebsiteManager, CoWebsite } from "../WebRtc/CoWebsiteManager";
 import { playersStore } from "../Stores/PlayersStore";
 import { chatMessagesStore } from "../Stores/ChatStore";
 import type { ChatEvent } from "./Events/ChatEvent";
@@ -12,14 +12,6 @@ class ScriptUtils {
         window.location.href = url;
     }
 
-    public openCoWebsite(url: string, base: string, api: boolean, policy: string) {
-        coWebsiteManager.loadCoWebsite(url, base, api, policy);
-    }
-
-    public closeCoWebSite() {
-        coWebsiteManager.closeCoWebsite();
-    }
-
     public sendAnonymousChat(chatEvent: ChatEvent) {
         const userId = playersStore.addFacticePlayer(chatEvent.author);
         chatMessagesStore.addExternalMessage(userId, chatEvent.message);

front/src/Api/iframe/nav.ts

@@ -1,8 +1,4 @@
-import type { GoToPageEvent } from "../Events/GoToPageEvent";
-import type { OpenTabEvent } from "../Events/OpenTabEvent";
-import { IframeApiContribution, sendToWorkadventure } from "./IframeApiContribution";
-import type { OpenCoWebSiteEvent } from "../Events/OpenCoWebSiteEvent";
-import type { LoadPageEvent } from "../Events/LoadPageEvent";
+import { IframeApiContribution, sendToWorkadventure, queryWorkadventure } from "./IframeApiContribution";
 
 export class WorkadventureNavigationCommands extends IframeApiContribution<WorkadventureNavigationCommands> {
     callbacks = [];
@@ -34,21 +30,61 @@ export class WorkadventureNavigationCommands extends IframeApiContribution<Worka
         });
     }
 
-    openCoWebSite(url: string, allowApi: boolean = false, allowPolicy: string = ""): void {
-        sendToWorkadventure({
-            type: "openCoWebSite",
+    /**
+     * @deprecated Use openCoWebsite instead
+     */
+    openCoWebSite(url: string, allowApi?: boolean, allowPolicy?: string) {
+        return queryWorkadventure({
+            type: "openCoWebsite",
             data: {
                 url,
                 allowApi,
                 allowPolicy,
+                position: undefined,
             },
         });
     }
 
-    closeCoWebSite(): void {
-        sendToWorkadventure({
-            type: "closeCoWebSite",
-            data: null,
+    openCoWebsite(url: string, allowApi?: boolean, allowPolicy?: string, position?: number) {
+        return queryWorkadventure({
+            type: "openCoWebsite",
+            data: {
+                url,
+                allowApi,
+                allowPolicy,
+                position,
+            },
+        });
+    }
+
+    getCoWebsites() {
+        return queryWorkadventure({
+            type: "getCoWebsites",
+            data: undefined
+        });
+    }
+
+    /**
+     * @deprecated Use closeCoWebsites instead to close all co-websites
+     */
+    closeCoWebSite() {
+        return queryWorkadventure({
+            type: "closeCoWebsites",
+            data: undefined,
+        });
+    }
+
+    closeCoWebsite(coWebsiteId: string) {
+        return queryWorkadventure({
+            type: "closeCoWebsite",
+            data: coWebsiteId,
+        });
+    }
+
+    closeCoWebsites() {
+        return queryWorkadventure({
+            type: "closeCoWebsites",
+            data: undefined,
         });
     }
 }