diff --git a/docs/maps/animations.md b/docs/maps/animations.md index 276f2332..6ac69e0c 100644 --- a/docs/maps/animations.md +++ b/docs/maps/animations.md @@ -7,14 +7,14 @@ not overwrite existing ones) and click on the animation editor:
- +
You can now add all tiles that should be part of the animation via drag and drop to the "playlist" and adjust the frame duration:
- +
The tile animation editor
@@ -24,7 +24,7 @@ You can preview animations directly in Tiled, using the "Show tile animations" o
- +
The Show Tile Animations option
diff --git a/docs/maps/api-room.md b/docs/maps/api-room.md index 96b62fd2..d1a26d2f 100644 --- a/docs/maps/api-room.md +++ b/docs/maps/api-room.md @@ -7,7 +7,7 @@ If you use group layers in your map, to reference a layer in a group you will ne Example :
- +
@@ -28,7 +28,7 @@ Listens to the position of the current user. The event is triggered when the use
- +
The `zone` property, applied on a layer
@@ -140,7 +140,7 @@ Replace the tile at the `x` and `y` coordinates in the layer named `layer` by th If `tile` is a string, it's not the id of the tile but the value of the property `name`.
- +
diff --git a/docs/maps/api-state.md b/docs/maps/api-state.md index 87a8b3aa..634b47e1 100644 --- a/docs/maps/api-state.md +++ b/docs/maps/api-state.md @@ -70,7 +70,7 @@ Each object will represent a variable.
- +
diff --git a/docs/maps/api-ui.md b/docs/maps/api-ui.md index 89d46932..e4b9425d 100644 --- a/docs/maps/api-ui.md +++ b/docs/maps/api-ui.md @@ -9,10 +9,10 @@ You can position this popup by using a "rectangle" object in Tiled that you will
- +
- +
@@ -85,7 +85,7 @@ WA.ui.registerMenuCommand("test", () => { ```
- +
@@ -103,7 +103,7 @@ WA.ui.displayActionMessage({ Displays a message at the bottom of the screen (that will disappear when space bar is pressed).
- +
Example: diff --git a/docs/maps/images/anims/animation_editor.png b/docs/maps/images/anims/animation_editor.png new file mode 100644 index 00000000..92d00aa7 Binary files /dev/null and b/docs/maps/images/anims/animation_editor.png differ diff --git a/docs/maps/images/anims/camera.png b/docs/maps/images/anims/camera.png new file mode 100644 index 00000000..c96d0b52 Binary files /dev/null and b/docs/maps/images/anims/camera.png differ diff --git a/docs/maps/images/anims/settings_show_animations.png b/docs/maps/images/anims/settings_show_animations.png new file mode 100644 index 00000000..bf45e116 Binary files /dev/null and b/docs/maps/images/anims/settings_show_animations.png differ diff --git a/docs/maps/images/collides-1.png b/docs/maps/images/collides-1.png new file mode 100644 index 00000000..54582d05 Binary files /dev/null and b/docs/maps/images/collides-1.png differ diff --git a/docs/maps/images/collides-2.png b/docs/maps/images/collides-2.png new file mode 100644 index 00000000..a34b18dc Binary files /dev/null and b/docs/maps/images/collides-2.png differ diff --git a/docs/maps/images/collides-3.png b/docs/maps/images/collides-3.png new file mode 100644 index 00000000..e775e396 Binary files /dev/null and b/docs/maps/images/collides-3.png differ diff --git a/docs/maps/images/collides-4.png b/docs/maps/images/collides-4.png new file mode 100644 index 00000000..024e1b86 Binary files /dev/null and b/docs/maps/images/collides-4.png differ diff --git a/docs/maps/images/groupLayer.png b/docs/maps/images/groupLayer.png new file mode 100644 index 00000000..83e3cdd5 Binary files /dev/null and b/docs/maps/images/groupLayer.png differ diff --git a/docs/maps/images/menu-command.png b/docs/maps/images/menu-command.png new file mode 100644 index 00000000..0caf75c9 Binary files /dev/null and b/docs/maps/images/menu-command.png differ diff --git a/docs/maps/images/nameIndexProperty.png b/docs/maps/images/nameIndexProperty.png new file mode 100644 index 00000000..f434c659 Binary files /dev/null and b/docs/maps/images/nameIndexProperty.png differ diff --git a/docs/maps/images/object_variable.png b/docs/maps/images/object_variable.png new file mode 100644 index 00000000..434f6191 Binary files /dev/null and b/docs/maps/images/object_variable.png differ diff --git a/docs/maps/images/open_website_allow_api.png b/docs/maps/images/open_website_allow_api.png new file mode 100644 index 00000000..1289611b Binary files /dev/null and b/docs/maps/images/open_website_allow_api.png differ diff --git a/docs/maps/images/screen_popup_in_game.png b/docs/maps/images/screen_popup_in_game.png new file mode 100644 index 00000000..6378bec1 Binary files /dev/null and b/docs/maps/images/screen_popup_in_game.png differ diff --git a/docs/maps/images/screen_popup_tiled.png b/docs/maps/images/screen_popup_tiled.png new file mode 100644 index 00000000..66a42f8f Binary files /dev/null and b/docs/maps/images/screen_popup_tiled.png differ diff --git a/docs/maps/images/script_property.png b/docs/maps/images/script_property.png new file mode 100644 index 00000000..a374ff11 Binary files /dev/null and b/docs/maps/images/script_property.png differ diff --git a/docs/maps/images/text-object.png b/docs/maps/images/text-object.png new file mode 100644 index 00000000..7e5b3da7 Binary files /dev/null and b/docs/maps/images/text-object.png differ diff --git a/docs/maps/images/tiled_screenshot_1.png b/docs/maps/images/tiled_screenshot_1.png new file mode 100644 index 00000000..108dfed8 Binary files /dev/null and b/docs/maps/images/tiled_screenshot_1.png differ diff --git a/docs/maps/images/trigger_event.png b/docs/maps/images/trigger_event.png new file mode 100644 index 00000000..b695476a Binary files /dev/null and b/docs/maps/images/trigger_event.png differ diff --git a/docs/maps/images/trigger_message.png b/docs/maps/images/trigger_message.png new file mode 100644 index 00000000..a116294b Binary files /dev/null and b/docs/maps/images/trigger_message.png differ diff --git a/docs/maps/images/website_allowapi_property.png b/docs/maps/images/website_allowapi_property.png new file mode 100644 index 00000000..25e4df66 Binary files /dev/null and b/docs/maps/images/website_allowapi_property.png differ diff --git a/docs/maps/images/website_url_property.png b/docs/maps/images/website_url_property.png new file mode 100644 index 00000000..331135b8 Binary files /dev/null and b/docs/maps/images/website_url_property.png differ diff --git a/docs/maps/scripting.md b/docs/maps/scripting.md index 5be57ee1..8b11fe74 100644 --- a/docs/maps/scripting.md +++ b/docs/maps/scripting.md @@ -46,7 +46,7 @@ You can put relative URLs. If your script file is next to your map, you can simp
- +
The script property
@@ -72,7 +72,7 @@ In order to allow communication with WorkAdventure, you need to add an additiona
- +
The `openWebsiteAllowApi` property
diff --git a/docs/maps/text.md b/docs/maps/text.md index df3b2660..c9ee647a 100644 --- a/docs/maps/text.md +++ b/docs/maps/text.md @@ -29,7 +29,7 @@ font that has support for a variety of accents. It renders great when used at *8
- +
The "font-family" property
diff --git a/docs/maps/wa-maps.md b/docs/maps/wa-maps.md index 0eb94dbf..bdaf8a42 100644 --- a/docs/maps/wa-maps.md +++ b/docs/maps/wa-maps.md @@ -49,7 +49,7 @@ A few things to notice:
- +
"floorLayer" is compulsory
@@ -62,21 +62,21 @@ To make a tile "collidable", you should: 1. select the relevant tileset and switch to "edit" mode: - ![](https://workadventu.re/img/docs/collides-1.png){.document-img} + ![](images/collides-1.png){.document-img} 2. right click on a tile of the tileset to select it: - ![](https://workadventu.re/img/docs/collides-2.png){.document-img} + ![](images/collides-2.png){.document-img} 3. on the left pane in the custom properties section, right click and select "Add properties": - ![](https://workadventu.re/img/docs/collides-3.png){.document-img} + ![](images/collides-3.png){.document-img} Please add a `collides` property. The type of the property must be **bool**. 4. finally, check the checkbox for the `collides` property: - ![](https://workadventu.re/img/docs/collides-4.png){.document-img} + ![](images/collides-4.png){.document-img} Repeat for every tile that should be "collidable". diff --git a/docs/maps/website-in-map.md b/docs/maps/website-in-map.md index 7c7f8025..d7f6a653 100644 --- a/docs/maps/website-in-map.md +++ b/docs/maps/website-in-map.md @@ -11,7 +11,7 @@ To do this in Tiled:
- +
A "website" object
@@ -34,7 +34,7 @@ to explicitly allow it, by setting an additional `allowApi` property to `true`.
- +
A "website" object that can communicate using the Iframe API
diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts index b56e6c99..8ab68096 100644 --- a/front/src/Api/IframeListener.ts +++ b/front/src/Api/IframeListener.ts @@ -288,57 +288,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/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index e0833e69..45d0bc86 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/front/src/Phaser/Game/GameManager.ts @@ -107,7 +107,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); menuIconVisiblilityStore.set(false); 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 f2f4fbc4..be3b61ef 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -91,9 +91,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; @@ -404,12 +402,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 @@ -568,6 +560,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(); @@ -585,6 +583,7 @@ export class GameScene extends DirtyScene { this.triggerOnMapLayerPropertyChange(); if (!this.room.isDisconnected()) { + this.scene.sleep(); this.connect(); } @@ -608,6 +607,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(); + }); } /** @@ -685,19 +688,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) => { @@ -759,8 +750,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); @@ -1924,4 +1916,24 @@ ${escapedMessage} 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); + } }