diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index 8d83be74..d477983f 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -297,58 +297,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'); - iframe.sandbox.add('allow-same-origin'); + // 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/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index 25691e86..e70737c9 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -114,7 +114,7 @@ export class GameManager { if (this.currentGameSceneName === null) throw "No current scene id set!"; const gameScene: GameScene = this.scenePlugin.get(this.currentGameSceneName) as GameScene; gameScene.cleanupClosingScene(); - this.scenePlugin.stop(this.currentGameSceneName); + gameScene.createSuccessorGameScene(false, false); this.scenePlugin.sleep(MenuSceneName); if (!this.scenePlugin.get(targetSceneName)) { this.scenePlugin.add(targetSceneName, sceneClass, false); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 260332f3..a5d7e356 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -92,9 +92,7 @@ import { PropertyUtils } from "../Map/PropertyUtils"; import Tileset = Phaser.Tilemaps.Tileset; import { userIsAdminStore } from "../../Stores/GameStore"; import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore"; -import { get } from "svelte/store"; import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager"; -import { helpCameraSettingsVisibleStore } from "../../Stores/HelpCameraSettingsStore"; export interface GameSceneInitInterface { initPosition: PointInterface | null; @@ -405,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 @@ -569,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(); @@ -586,6 +584,7 @@ export class GameScene extends DirtyScene { this.triggerOnMapLayerPropertyChange(); if (!this.room.isDisconnected()) { + this.scene.sleep(); this.connect(); } @@ -609,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(); + }); } /** @@ -686,19 +689,7 @@ export class GameScene extends DirtyScene { this.connection.onServerDisconnected(() => { console.log("Player disconnected from server. Reloading scene."); this.cleanupClosingScene(); - - const gameSceneKey = "somekey" + Math.round(Math.random() * 10000); - const game: Phaser.Scene = new GameScene(this.room, this.MapUrlFile, gameSceneKey); - this.scene.add(gameSceneKey, game, true, { - initPosition: { - x: this.CurrentPlayer.x, - y: this.CurrentPlayer.y, - }, - reconnecting: true, - }); - - this.scene.stop(this.scene.key); - this.scene.remove(this.scene.key); + this.createSuccessorGameScene(true, true); }); this.connection.onActionableEvent((message) => { @@ -760,8 +751,9 @@ export class GameScene extends DirtyScene { this.connectionAnswerPromiseResolve(onConnect.room); // Analyze tags to find if we are admin. If yes, show console. - this.scene.wake(); - this.scene.stop(ReconnectingSceneName); + if (this.scene.isSleeping()) { + this.scene.stop(ReconnectingSceneName); + } //init user position and play trigger to check layers properties this.gameMap.setPosition(this.CurrentPlayer.x, this.CurrentPlayer.y); @@ -1994,4 +1986,24 @@ export class GameScene extends DirtyScene { waScaleManager.zoomModifier *= zoomFactor; biggestAvailableAreaStore.recompute(); } + + public createSuccessorGameScene(autostart: boolean, reconnecting: boolean) { + const gameSceneKey = "somekey" + Math.round(Math.random() * 10000); + const game = new GameScene(this.room, this.MapUrlFile, gameSceneKey); + this.scene.add(gameSceneKey, game, autostart, { + initPosition: { + x: this.CurrentPlayer.x, + y: this.CurrentPlayer.y, + }, + reconnecting: reconnecting, + }); + + //If new gameScene doesn't start automatically then we change the gameScene in gameManager so that it can start the new gameScene + if (!autostart) { + gameManager.gameSceneIsCreated(game); + } + + this.scene.stop(this.scene.key); + this.scene.remove(this.scene.key); + } }