Re-implement action message on cowebsite trigger

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -6,7 +6,7 @@ import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
 import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import { get } from "svelte/store";
-import { ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
+import { ON_ACTION_TRIGGER_BUTTON, ON_ICON_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
 import type { ITiledMapLayer } from "../Map/ITiledMap";
 import { GameMapProperties } from "./GameMapProperties";
 import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
@@ -18,12 +18,14 @@ enum OpenCoWebsiteState {
 }
 
 interface OpenCoWebsite {
-    coWebsite: CoWebsite;
+    actionId: string;
+    coWebsite?: CoWebsite;
     state: OpenCoWebsiteState;
 }
 
 export class GameMapPropertiesListener {
     private coWebsitesOpenByLayer = new Map<ITiledMapLayer, OpenCoWebsite>();
+    private coWebsitesActionTriggerByLayer = new Map<ITiledMapLayer, string>();
 
     constructor(private scene: GameScene, private gameMap: GameMap) {}
 
@@ -95,27 +97,19 @@ export class GameMapPropertiesListener {
                         return;
                     }
 
-                    const actionUuid = "openWebsite-" + (Math.random() + 1).toString(36).substring(7);
+                    const actionId = "openWebsite-" + (Math.random() + 1).toString(36).substring(7);
 
                     if (this.coWebsitesOpenByLayer.has(layer)) {
                         return;
                     }
 
-                    const coWebsite = coWebsiteManager.addCoWebsite(
-                        openWebsiteProperty,
-                        this.scene.MapUrlFile,
-                        allowApiProperty,
-                        websitePolicyProperty,
-                        websitePositionProperty,
-                        false
-                    );
-
                     this.coWebsitesOpenByLayer.set(layer, {
-                        coWebsite: coWebsite,
+                        actionId: actionId,
+                        coWebsite: undefined,
                         state: OpenCoWebsiteState.ASLEEP,
                     });
 
-                    const openWebsiteFunction = () => {
+                    const loadCoWebsiteFunction = (coWebsite: CoWebsite) => {
                         coWebsiteManager
                             .loadCoWebsite(coWebsite)
                             .then((coWebsite) => {
@@ -125,8 +119,10 @@ export class GameMapPropertiesListener {
                                         console.error("Error during a co-website closing");
                                     });
                                     this.coWebsitesOpenByLayer.delete(layer);
+                                    this.coWebsitesActionTriggerByLayer.delete(layer);
                                 } else {
                                     this.coWebsitesOpenByLayer.set(layer, {
+                                        actionId,
                                         coWebsite,
                                         state: OpenCoWebsiteState.OPENED,
                                     });
@@ -136,14 +132,74 @@ export class GameMapPropertiesListener {
                                 console.error("Error during loading a co-website: " + coWebsite.url);
                             });
 
-                        layoutManagerActionStore.removeAction(actionUuid);
+                        layoutManagerActionStore.removeAction(actionId);
+                    };
+
+                    const openCoWebsiteFunction = (
+                        url: string | undefined,
+                        allowApi: boolean | undefined,
+                        policy: string | undefined,
+                        position: number | undefined
+                    ) => {
+                        const coWebsite = coWebsiteManager.addCoWebsite(
+                            url ?? "",
+                            this.scene.MapUrlFile,
+                            allowApiProperty,
+                            websitePolicyProperty,
+                            websitePositionProperty,
+                            false
+                        );
+
+                        loadCoWebsiteFunction(coWebsite);
                     };
 
                     if (
-                        !localUserStore.getForceCowebsiteTrigger() &&
+                        localUserStore.getForceCowebsiteTrigger() ||
-                        websiteTriggerProperty !== ON_ACTION_TRIGGER_BUTTON
+                        websiteTriggerProperty === ON_ACTION_TRIGGER_BUTTON
                     ) {
-                        openWebsiteFunction();
+                        if (!websiteTriggerMessageProperty) {
+                            websiteTriggerMessageProperty = "Press SPACE or touch here to open web site";
+                        }
+
+                        this.coWebsitesActionTriggerByLayer.set(layer, actionId);
+
+                        layoutManagerActionStore.addAction({
+                            uuid: actionId,
+                            type: "message",
+                            message: websiteTriggerMessageProperty,
+                            callback: () =>
+                                openCoWebsiteFunction(
+                                    openWebsiteProperty,
+                                    allowApiProperty,
+                                    websitePolicyProperty,
+                                    websitePositionProperty
+                                ),
+                            userInputManager: this.scene.userInputManager,
+                        });
+                    } else if (!websiteTriggerProperty || websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) {
+                        const coWebsite = coWebsiteManager.addCoWebsite(
+                            openWebsiteProperty,
+                            this.scene.MapUrlFile,
+                            allowApiProperty,
+                            websitePolicyProperty,
+                            websitePositionProperty,
+                            false
+                        );
+
+                        const ObjectByLayer = this.coWebsitesOpenByLayer.get(layer);
+
+                        if (ObjectByLayer) {
+                            ObjectByLayer.coWebsite = coWebsite;
+                        }
+                    }
+
+                    if (!websiteTriggerProperty) {
+                        openCoWebsiteFunction(
+                            openWebsiteProperty,
+                            allowApiProperty,
+                            websitePolicyProperty,
+                            websitePositionProperty
+                        );
                     }
                 });
             };
@@ -192,6 +248,28 @@ export class GameMapPropertiesListener {
                     }
 
                     this.coWebsitesOpenByLayer.delete(layer);
+
+                    if (!websiteTriggerProperty) {
+                        return;
+                    }
+
+                    const actionStore = get(layoutManagerActionStore);
+                    const actionTriggerUuid = this.coWebsitesActionTriggerByLayer.get(layer);
+
+                    if (!actionTriggerUuid) {
+                        return;
+                    }
+
+                    const action =
+                        actionStore && actionStore.length > 0
+                            ? actionStore.find((action) => action.uuid === actionTriggerUuid)
+                            : undefined;
+
+                    if (action) {
+                        layoutManagerActionStore.removeAction(actionTriggerUuid);
+                    }
+
+                    this.coWebsitesActionTriggerByLayer.delete(layer);
                 });
             };
 

front/src/WebRtc/CoWebsiteManager.ts

@@ -21,7 +21,7 @@ const gameOverlayDomId = "game-overlay";
 const cowebsiteBufferDomId = "cowebsite-buffer"; // the id of the container who contains cowebsite iframes.
 const cowebsiteAsideHolderDomId = "cowebsite-aside-holder";
 const cowebsiteLoaderDomId = "cowebsite-loader";
-export const cowebsiteCloseButtonId = "cowebsite-close";
+const cowebsiteCloseButtonId = "cowebsite-close";
 const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
 const cowebsiteOpenFullScreenImageId = "cowebsite-fullscreen-open";
 const cowebsiteCloseFullScreenImageId = "cowebsite-fullscreen-close";

front/src/WebRtc/LayoutManager.ts

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