diff --git a/front/src/Phaser/Game/GameMapPropertiesListener.ts b/front/src/Phaser/Game/GameMapPropertiesListener.ts index 10fa2807..dd47bc08 100644 --- a/front/src/Phaser/Game/GameMapPropertiesListener.ts +++ b/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(); + private coWebsitesIframeListeners = new Map(); private coWebsitesActionTriggerByLayer = new Map(); 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); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index d90f45c2..4a2691b5 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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", diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index 823e138b..b1b4cc21 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/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((resolve) => { setTimeout(() => resolve(), 2000); @@ -564,10 +543,6 @@ class CoWebsiteManager { this.fire(); } - if (coWebsite) { - iframeListener.unregisterIframe(coWebsite.iframe); - } - this.removeCoWebsiteFromStack(coWebsite); resolve(); }) diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index de79047f..40a9e62d 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_ACTION_TRIGGER_DISABLE = "disable"; export type Box = { xStart: number; yStart: number; xEnd: number; yEnd: number }; diff --git a/front/style/style.scss b/front/style/style.scss index 3129f1d6..395c4b88 100644 --- a/front/style/style.scss +++ b/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;