From ad95fa5e115b87b8c4e37e27666b95b0944fcaaa Mon Sep 17 00:00:00 2001 From: GRL Date: Mon, 16 Aug 2021 14:07:24 +0200 Subject: [PATCH 1/2] Execute scripts of the map after creating gameScene --- front/src/Api/IframeListener.ts | 96 +++++++++++++++++------------- front/src/Phaser/Game/GameScene.ts | 20 ++++--- 2 files changed, 65 insertions(+), 51 deletions(-) diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index 4dde1b7d..eab33945 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -293,57 +293,67 @@ class IframeListener { this.iframes.delete(iframe); } - registerScript(scriptUrl: string): void { - console.log("Loading map related script at ", scriptUrl); + registerScript(scriptUrl: string): Promise { + return new Promise((resolve, reject) => { + console.log("Loading map related script at ", scriptUrl); - if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") { - // Using external iframe mode ( - const iframe = document.createElement("iframe"); - iframe.id = IframeListener.getIFrameId(scriptUrl); - iframe.style.display = "none"; - iframe.src = "/iframe.html?script=" + encodeURIComponent(scriptUrl); + if (!process.env.NODE_ENV || process.env.NODE_ENV === "development") { + // Using external iframe mode ( + const iframe = document.createElement("iframe"); + iframe.id = IframeListener.getIFrameId(scriptUrl); + iframe.style.display = "none"; + iframe.src = "/iframe.html?script=" + encodeURIComponent(scriptUrl); - // We are putting a sandbox on this script because it will run in the same domain as the main website. - iframe.sandbox.add("allow-scripts"); - iframe.sandbox.add("allow-top-navigation-by-user-activation"); + // We are putting a sandbox on this script because it will run in the same domain as the main website. + iframe.sandbox.add("allow-scripts"); + iframe.sandbox.add("allow-top-navigation-by-user-activation"); - document.body.prepend(iframe); + iframe.addEventListener("load", () => { + resolve(); + }); - this.scripts.set(scriptUrl, iframe); - this.registerIframe(iframe); - } else { - // production code - const iframe = document.createElement("iframe"); - iframe.id = IframeListener.getIFrameId(scriptUrl); - iframe.style.display = "none"; + document.body.prepend(iframe); - // We are putting a sandbox on this script because it will run in the same domain as the main website. - iframe.sandbox.add("allow-scripts"); - iframe.sandbox.add("allow-top-navigation-by-user-activation"); + this.scripts.set(scriptUrl, iframe); + this.registerIframe(iframe); + } else { + // production code + const iframe = document.createElement("iframe"); + iframe.id = IframeListener.getIFrameId(scriptUrl); + iframe.style.display = "none"; - //iframe.src = "data:text/html;charset=utf-8," + escape(html); - iframe.srcdoc = - "\n" + - "\n" + - '\n' + - "\n" + - '\n' + - '\n' + - "\n" + - "\n" + - "\n"; + // We are putting a sandbox on this script because it will run in the same domain as the main website. + iframe.sandbox.add("allow-scripts"); + iframe.sandbox.add("allow-top-navigation-by-user-activation"); - document.body.prepend(iframe); + //iframe.src = "data:text/html;charset=utf-8," + escape(html); + iframe.srcdoc = + "\n" + + "\n" + + '\n' + + "\n" + + '\n' + + '\n' + + "\n" + + "\n" + + "\n"; - this.scripts.set(scriptUrl, iframe); - this.registerIframe(iframe); - } + iframe.addEventListener("load", () => { + resolve(); + }); + + document.body.prepend(iframe); + + this.scripts.set(scriptUrl, iframe); + this.registerIframe(iframe); + } + }); } private getBaseUrl(src: string, source: MessageEventSource | null): string { diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index f6a75b65..83a5ac6e 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -165,7 +165,7 @@ export class GameScene extends DirtyScene { value: RoomJoinedMessageInterface | PromiseLike ) => void; // A promise that will resolve when the "create" method is called (signaling loading is ended) - private createPromise: Promise; + public createPromise: Promise; private createPromiseResolve!: (value?: void | PromiseLike) => void; private iframeSubscriptionList!: Array; private peerStoreUnsubscribe!: () => void; @@ -403,12 +403,6 @@ export class GameScene extends DirtyScene { }); }); } - - // Now, let's load the script, if any - const scripts = this.getScriptUrls(this.mapFile); - for (const script of scripts) { - iframeListener.registerScript(script); - } } //hook initialisation @@ -567,6 +561,12 @@ export class GameScene extends DirtyScene { } this.createPromiseResolve(); + // Now, let's load the script, if any + const scripts = this.getScriptUrls(this.mapFile); + const scriptPromises = []; + for (const script of scripts) { + scriptPromises.push(iframeListener.registerScript(script)); + } this.userInputManager.spaceEvent(() => { this.outlinedItem?.activate(); @@ -584,6 +584,7 @@ export class GameScene extends DirtyScene { this.triggerOnMapLayerPropertyChange(); if (!this.room.isDisconnected()) { + this.scene.sleep(); this.connect(); } @@ -607,6 +608,10 @@ export class GameScene extends DirtyScene { this.chatVisibilityUnsubscribe = chatVisibilityStore.subscribe((v) => { this.openChatIcon.setVisible(!v); }); + + Promise.all([this.connectionAnswerPromise as Promise, ...scriptPromises]).then(() => { + this.scene.wake(); + }); } /** @@ -747,7 +752,6 @@ export class GameScene extends DirtyScene { // Analyze tags to find if we are admin. If yes, show console. if (this.scene.isSleeping()) { - this.scene.wake(); this.scene.stop(ReconnectingSceneName); } From 8c43c2e6e890af0afdd19bc97a30dba17eb2fbd9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Mon, 16 Aug 2021 14:22:01 +0200 Subject: [PATCH 2/2] Rollback on createPromise switched to public --- front/src/Phaser/Game/GameScene.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 83a5ac6e..bd6890dc 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -165,7 +165,7 @@ export class GameScene extends DirtyScene { value: RoomJoinedMessageInterface | PromiseLike ) => void; // A promise that will resolve when the "create" method is called (signaling loading is ended) - public createPromise: Promise; + private createPromise: Promise; private createPromiseResolve!: (value?: void | PromiseLike) => void; private iframeSubscriptionList!: Array; private peerStoreUnsubscribe!: () => void;