diff --git a/front/src/Phaser/Game/GameMapPropertiesListener.ts b/front/src/Phaser/Game/GameMapPropertiesListener.ts index caa83cb0..900a00b6 100644 --- a/front/src/Phaser/Game/GameMapPropertiesListener.ts +++ b/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(); + private coWebsitesActionTriggerByLayer = new Map(); 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() && - websiteTriggerProperty !== ON_ACTION_TRIGGER_BUTTON + localUserStore.getForceCowebsiteTrigger() || + 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); }); }; diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 8e646d9d..9f4f0c36 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/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"; diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index de79047f..a926cb41 100644 --- a/front/src/WebRtc/LayoutManager.ts +++ b/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 };