redo message trigger for co-websites

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -2,14 +2,16 @@ import type { GameScene } from "./GameScene";
 import type { GameMap } from "./GameMap";
 import { scriptUtils } from "../../Api/ScriptUtils";
 import type { CoWebsite } from "../../WebRtc/CoWebsiteManager";
-import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
+import { coWebsiteManager, CoWebsiteState } from "../../WebRtc/CoWebsiteManager";
 import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
 import { get } from 'svelte/store';
 import {
-    ON_ACTION_TRIGGER_BUTTON,
+    ON_ACTION_TRIGGER_BUTTON, ON_ACTION_TRIGGER_DISABLE,
 } from "../../WebRtc/LayoutManager";
 import type { ITiledMapLayer } from "../Map/ITiledMap";
 import { GameMapProperties } from "./GameMapProperties";
+import { iframeListener } from "../../Api/IframeListener";
+import type { Subscription } from "rxjs";
 
 enum OpenCoWebsiteState {
     LOADING,
@@ -25,6 +27,7 @@ interface OpenCoWebsite {
 
 export class GameMapPropertiesListener {
     private coWebsitesOpenByLayer = new Map<ITiledMapLayer, OpenCoWebsite>();
+    private coWebsitesIframeListeners = new Map<ITiledMapLayer, Subscription>();
     private coWebsitesActionTriggerByLayer = new Map<ITiledMapLayer, string>();
 
     constructor(private scene: GameScene, private gameMap: GameMap) {}
@@ -54,7 +57,7 @@ export class GameMapPropertiesListener {
             }
         });
 
-         // Open a new co-website by the property.
+        // Open a new co-website by the property.
         this.gameMap.onEnterLayer((newLayers) => {
             const handler = () => {
                 newLayers.forEach(layer => {
@@ -131,16 +134,16 @@ export class GameMapPropertiesListener {
                         layoutManagerActionStore.removeAction(actionUuid);
                     };
 
-                    if (websiteTriggerProperty && websiteTriggerProperty === ON_ACTION_TRIGGER_BUTTON) {
+                    const createWebsiteTrigger = () => {
+                        if (!websiteTriggerMessageProperty) {
+                            websiteTriggerMessageProperty = "Press SPACE or touch here to open web site";
+                        }
+
                         this.coWebsitesOpenByLayer.set(layer, {
                             coWebsite: undefined,
                             state: OpenCoWebsiteState.TRIGGER,
                         });
 
-                        if (!websiteTriggerMessageProperty) {
-                            websiteTriggerMessageProperty = "Press SPACE or touch here to open web site";
-                        }
-
                         this.coWebsitesActionTriggerByLayer.set(layer, actionUuid);
 
                         layoutManagerActionStore.addAction({
@@ -150,6 +153,17 @@ export class GameMapPropertiesListener {
                             callback: () => openWebsiteFunction(),
                             userInputManager: this.scene.userInputManager,
                         });
+                    }
+
+                    this.coWebsitesIframeListeners.set(layer, iframeListener.unregisterIFrameStream.subscribe(() => {
+                        const coWebsiteOpen = this.coWebsitesOpenByLayer.get(layer);
+                        if (coWebsiteOpen?.coWebsite?.state == CoWebsiteState.CLOSED && (!websiteTriggerProperty || websiteTriggerProperty !== ON_ACTION_TRIGGER_DISABLE)) {
+                            createWebsiteTrigger();
+                        }
+                    }));
+
+                    if (websiteTriggerProperty && websiteTriggerProperty === ON_ACTION_TRIGGER_BUTTON) {
+                        createWebsiteTrigger();
                     } else {
                         this.coWebsitesOpenByLayer.set(layer, {
                             coWebsite: undefined,
@@ -190,6 +204,14 @@ export class GameMapPropertiesListener {
                         return;
                     }
 
+                    const coWebsiteIframeListener = this.coWebsitesIframeListeners.get(layer);
+
+
+                    if (coWebsiteIframeListener) {
+                        coWebsiteIframeListener.unsubscribe();
+                        this.coWebsitesIframeListeners.delete(layer);
+                    }
+
                     const coWebsiteOpen = this.coWebsitesOpenByLayer.get(layer);
 
                     if (!coWebsiteOpen) {
@@ -211,10 +233,6 @@ export class GameMapPropertiesListener {
 
                     this.coWebsitesOpenByLayer.delete(layer);
 
-                    if (!websiteTriggerProperty) {
-                        return;
-                    }
-
                     const actionStore = get(layoutManagerActionStore);
                     const actionTriggerUuid = this.coWebsitesActionTriggerByLayer.get(layer);
 

front/src/Phaser/Game/GameScene.ts

@@ -1177,10 +1177,6 @@ export class GameScene extends DirtyScene {
             })
         );
 
-        this.iframeSubscriptionList.push(iframeListener.unregisterIFrameStream.subscribe(() => {
-            // TODO: open trigger
-        }));
-
         this.iframeSubscriptionList.push(iframeListener.setTilesStream.subscribe((eventTiles) => {
             for (const eventTile of eventTiles) {
                 this.gameMap.putTile(eventTile.tile, eventTile.x, eventTile.y, eventTile.layer);
@@ -1936,9 +1932,9 @@ export class GameScene extends DirtyScene {
                 layoutManagerActionStore.removeAction("jitsi");
             }
 
-            let message = allProps.get(JITSI_MESSAGE_PROPERTIES);
+            let message = allProps.get(GameMapProperties.JITSI_TRIGGER_MESSAGE);
             if (message === undefined) {
-                message = 'Press SPACE or touch here to enter Jitsi Meet room';
+                message = "Press SPACE or touch here to enter Jitsi Meet room";
             }
             layoutManagerActionStore.addAction({
                 uuid: "jitsi",

front/src/WebRtc/CoWebsiteManager.ts

@@ -27,9 +27,14 @@ interface TouchMoveCoordinates {
     y: number;
 }
 
+export enum CoWebsiteState {
+    OPENED,
+    CLOSED,
+}
+
 export type CoWebsite =  {
     iframe: HTMLIFrameElement,
-    icon: HTMLDivElement,
+    state : CoWebsiteState,
     position: number
 }
 
@@ -334,10 +339,8 @@ class CoWebsiteManager {
 
         if (newPosition === 0) {
             coWebsite.iframe.classList.add('main');
-            coWebsite.icon.style.display = "none";
         } else {
             coWebsite.iframe.classList.remove('main');
-            coWebsite.icon.style.display = "flex";
         }
 
         if (newPosition === 1) {
@@ -423,8 +426,9 @@ class CoWebsiteManager {
             this.moveLeftPreviousCoWebsite(previousCoWebsite, coWebsite.position);
         }
 
-        coWebsite.icon.remove();
         coWebsite.iframe.remove();
+        coWebsite.state = CoWebsiteState.CLOSED;
+        iframeListener.unregisterIframe(coWebsite.iframe);
     }
 
     public searchJitsi(): CoWebsite|undefined {
@@ -433,21 +437,6 @@ class CoWebsiteManager {
         );
     }
 
-    private generateCoWebsiteIcon(iframe: HTMLIFrameElement): HTMLDivElement {
-        const icon = document.createElement("div");
-        icon.id = "cowebsite-icon-" + iframe.id;
-        icon.style.display = "none";
-
-        const iconImage = document.createElement("img");
-        iconImage.src = `https://www.google.com/s2/favicons?sz=64&domain_url=${iframe.src}`;
-        const url = new URL(iframe.src);
-        iconImage.alt = url.hostname;
-
-        icon.appendChild(iconImage);
-
-        return icon;
-    }
-
     public loadCoWebsite(
         url: string,
         base: string,
@@ -500,23 +489,13 @@ class CoWebsiteManager {
                     iframe.onload = () => resolve();
                 });
 
-                const icon = this.generateCoWebsiteIcon(iframe);
-
                 const coWebsite = {
                     iframe,
-                    icon,
+                    state : CoWebsiteState.OPENED,
                     position: position ?? this.coWebsites.length,
                 };
 
-                // Iframe management on mobile
-                icon.addEventListener("click", () => {
-                    if (this.isSmallScreen()) {
-                        this.moveRightPreviousCoWebsite(coWebsite, 0);
-                    }
-                });
-
                 this.coWebsites.push(coWebsite);
-                this.cowebsiteSubIconsDom.appendChild(icon);
 
                 const onTimeoutPromise = new Promise<void>((resolve) => {
                     setTimeout(() => resolve(), 2000);
@@ -564,10 +543,6 @@ class CoWebsiteManager {
                         this.fire();
                     }
 
-                    if (coWebsite) {
-                        iframeListener.unregisterIframe(coWebsite.iframe);
-                    }
-
                     this.removeCoWebsiteFromStack(coWebsite);
                     resolve();
                 })

front/src/WebRtc/LayoutManager.ts

@@ -13,5 +13,6 @@ export enum DivImportance {
 }
 
 export const ON_ACTION_TRIGGER_BUTTON = "onaction";
+export const ON_ACTION_TRIGGER_DISABLE = "disable";
 
 export type Box = { xStart: number; yStart: number; xEnd: number; yEnd: number };

front/style/style.scss

@@ -1078,6 +1078,7 @@ div.action.danger p.action-body {
     width: 100%;
     height: 100%;
     pointer-events: none;
+    z-index: 2;
 
     & > div {
         position: relative;