Initialise iframeListener in preload

Add documentation and CHANGELOG

CHANGELOG.md

@@ -1,4 +1,11 @@
-## Version 1.4.x-dev
+## Version develop
+
+### Updates
+- New scripting API features : 
+  - Use `WA.room.loadTileset(url: string) : Promise<number>` to load a tileset from a JSON file.
+
+
+## Version 1.4.10
 
 ### Updates
 

benchmark/index.ts

@@ -23,7 +23,7 @@ async function startOneUser(): Promise<void> {
             bottom: 200,
             left: 500,
             right: 800
-        });
+        }, null);
 
     const connection = onConnect.connection;
 

docs/maps/api-room.md

@@ -163,3 +163,17 @@ WA.room.setTiles([
                 {x: 9, y: 4, tile: 'blue', layer: 'setTiles'}
                 ]);
 ```
+
+### Loading a tileset
+```
+WA.room.loadTileset(url: string): Promise<number>
+```
+Load a tileset in JSON format from an url and return the id of the first tile of the loaded tileset.
+
+You can create a tileset file in Tile Editor.
+
+```javascript
+WA.room.loadTileset("Assets/Tileset.json").then((firstId) => {
+    WA.room.setTiles([{x: 4, y: 4, tile: firstId, layer: 'bottom'}]);
+})
+```

front/src/Phaser/Game/GameScene.ts

@@ -220,6 +220,9 @@ export class GameScene extends DirtyScene {
 
     //hook preload scene
     preload(): void {
+        //initialize frame event of scripting API
+        this.listenToIframeEvents();
+
         const localUser = localUserStore.getLocalUser();
         const textures = localUser?.textures;
         if (textures) {
@@ -548,7 +551,6 @@ export class GameScene extends DirtyScene {
         );
 
         this.triggerOnMapLayerPropertyChange();
-        this.listenToIframeEvents();
 
         if (!this.room.isDisconnected()) {
             this.connect();
@@ -1084,6 +1086,7 @@ ${escapedMessage}
             })
         );
         iframeListener.registerAnswerer("loadTileset", (eventTileset) => {
+            return this.connectionAnswerPromise.then(() => {
                 const jsonTilesetDir = eventTileset.url.substr(0, eventTileset.url.lastIndexOf("/"));
                 //Initialise the firstgid to 1 because if there is no tileset in the tilemap, the firstgid will be 1
                 let newFirstgid = 1;
@@ -1095,6 +1098,10 @@ ${escapedMessage}
                 return new Promise((resolve, reject) => {
                     this.load.on("filecomplete-json-" + eventTileset.url, () => {
                         let jsonTileset = this.cache.json.get(eventTileset.url);
+                        this.load.image(
+                            jsonTilesetDir + "/" + jsonTileset.image,
+                            jsonTilesetDir + "/" + jsonTileset.image
+                        );
                         this.load.on("filecomplete-image-" + jsonTilesetDir + "/" + jsonTileset.image, () => {
                             //Add the firstgid of the tileset to the json file
                             jsonTileset = { ...jsonTileset, firstgid: newFirstgid };
@@ -1134,16 +1141,17 @@ ${escapedMessage}
                             this.triggerOnMapLayerPropertyChange();
                             resolve(newFirstgid);
                         });
-                    this.load.image(jsonTilesetDir + "/" + jsonTileset.image, jsonTilesetDir + "/" + jsonTileset.image);
                     });
                     this.load.on("loaderror", () => {
                         console.error("Error while loading " + eventTileset.url + ".");
                         reject(-1);
                     });
+
                     this.load.json(eventTileset.url, eventTileset.url);
                     this.load.start();
                 });
             });
+        });
     }
 
     private setPropertyLayer(