_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

redo message trigger for co-websites

Browse Source
This commit is contained in:
_Bastler 2021-11-03 17:30:13 +01:00
parent a3937fc17f
commit af855344f4
5 changed files with 43 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
front/src/Phaser/Game/GameMapPropertiesListener.ts
View File

@ -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);

8
front/src/Phaser/Game/GameScene.ts
View File

@ -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",

43
front/src/WebRtc/CoWebsiteManager.ts
View File

@ -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();
})

1
front/src/WebRtc/LayoutManager.ts
View File

@ -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 };

1
front/style/style.scss
View File

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