Making embedded iframes scriptable using the WA.room.website namespace.

This commit is contained in:
David Négrier 2021-08-03 18:29:10 +02:00
parent 5bb29e99ba
commit 6b9b999996
14 changed files with 737 additions and 28 deletions

View file

@ -89,6 +89,7 @@ import Tileset = Phaser.Tilemaps.Tileset;
import { userIsAdminStore } from "../../Stores/GameStore";
import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
import { get } from "svelte/store";
import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
export interface GameSceneInitInterface {
initPosition: PointInterface | null;
@ -200,7 +201,7 @@ export class GameScene extends DirtyScene {
private startPositionCalculator!: StartPositionCalculator;
private sharedVariablesManager!: SharedVariablesManager;
private objectsByType = new Map<string, ITiledMapObject[]>();
private inMapIframes = new Array<HTMLIFrameElement>();
private embeddedWebsiteManager!: EmbeddedWebsiteManager;
constructor(private room: Room, MapUrlFile: string, customKey?: string | undefined) {
super({
@ -419,6 +420,7 @@ export class GameScene extends DirtyScene {
//hook create scene
create(): void {
console.log("GAAAAAAAGAGAGAGAGA");
this.preloading = false;
this.trackDirtyAnims();
@ -460,6 +462,8 @@ export class GameScene extends DirtyScene {
//permit to set bound collision
this.physics.world.setBounds(0, 0, this.Map.widthInPixels, this.Map.heightInPixels);
this.embeddedWebsiteManager = new EmbeddedWebsiteManager(this);
//add layer on map
this.gameMap = new GameMap(this.mapFile, this.Map, this.Terrains);
for (const layer of this.gameMap.flatLayers) {
@ -487,26 +491,20 @@ export class GameScene extends DirtyScene {
object.properties,
'in the "' + object.name + '" object of type "website"'
);
const absoluteUrl = new URL(url, this.MapUrlFile).toString();
const allowApi = PropertyUtils.findBooleanProperty("allowApi", object.properties);
const iframe = document.createElement("iframe");
iframe.src = absoluteUrl;
iframe.style.width = object.width + "px";
iframe.style.height = object.height + "px";
iframe.style.margin = "0";
iframe.style.padding = "0";
iframe.style.border = "none";
this.add.dom(object.x, object.y).setElement(iframe).setOrigin(0, 0);
const allowApi = PropertyUtils.findBooleanProperty(
"allowApi",
object.properties,
// TODO: add a "allow" property to iframe
this.embeddedWebsiteManager.createEmbeddedWebsite(
object.name,
url,
object.x,
object.y,
object.width,
object.height,
object.visible,
allowApi ?? false,
""
);
if (allowApi) {
iframeListener.registerIframe(iframe);
this.inMapIframes.push(iframe);
}
}
}
}
@ -1197,6 +1195,27 @@ ${escapedMessage}
iframeListener.registerAnswerer("removeActionMessage", (message) => {
layoutManagerActionStore.removeAction(message.uuid);
});
this.iframeSubscriptionList.push(
iframeListener.modifyEmbeddedWebsiteStream.subscribe((embeddedWebsite) => {
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
// TODO
})
);
}
private setPropertyLayer(
@ -1264,7 +1283,7 @@ ${escapedMessage}
let targetRoom: Room;
try {
targetRoom = await Room.createRoom(roomUrl);
} catch (e) {
} catch (e /*: unknown*/) {
console.error('Error while fetching new room "' + roomUrl.toString() + '"', e);
this.mapTransitioning = false;
return;
@ -1303,9 +1322,6 @@ ${escapedMessage}
for (const script of scripts) {
iframeListener.unregisterScript(script);
}
for (const iframe of this.inMapIframes) {
iframeListener.unregisterIframe(iframe);
}
this.stopJitsi();
audioManager.unloadAudio();
@ -1327,6 +1343,7 @@ ${escapedMessage}
iframeListener.unregisterAnswerer("triggerActionMessage");
iframeListener.unregisterAnswerer("removeActionMessage");
this.sharedVariablesManager?.close();
this.embeddedWebsiteManager?.close();
mediaManager.hideGameOverlay();
@ -1398,7 +1415,7 @@ ${escapedMessage}
try {
const room = await Room.createRoom(exitRoomPath);
return gameManager.loadMap(room, this.scene);
} catch (e) {
} catch (e /*: unknown*/) {
console.warn('Error while pre-loading exit room "' + exitRoomPath.toString() + '"', e);
}
}