Load a json file that describe a tileset in Tile format.

Then add it to the tilemap of the GameScene
Then add if to the GameMap

front/src/Api/Events/IframeEvent.ts

@@ -1,5 +1,4 @@
 import * as tg from "generic-type-guard";
-import type { GameStateEvent } from "./GameStateEvent";
 import type { ButtonClickedEvent } from "./ButtonClickedEvent";
 import type { ChatEvent } from "./ChatEvent";
 import type { ClosePopupEvent } from "./ClosePopupEvent";
@@ -10,7 +9,6 @@ import type { OpenCoWebSiteEvent } from "./OpenCoWebSiteEvent";
 import type { OpenPopupEvent } from "./OpenPopupEvent";
 import type { OpenTabEvent } from "./OpenTabEvent";
 import type { UserInputChatEvent } from "./UserInputChatEvent";
-import type { MapDataEvent } from "./MapDataEvent";
 import type { LayerEvent } from "./LayerEvent";
 import type { SetPropertyEvent } from "./setPropertyEvent";
 import type { LoadSoundEvent } from "./LoadSoundEvent";
@@ -23,6 +21,8 @@ import type { SetVariableEvent } from "./SetVariableEvent";
 import { isGameStateEvent } from "./GameStateEvent";
 import { isMapDataEvent } from "./MapDataEvent";
 import { isSetVariableEvent } from "./SetVariableEvent";
+import type { LoadTilesetEvent } from "./LoadTilesetEvent";
+import { isLoadTilesetEvent } from "./LoadTilesetEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T;
@@ -52,6 +52,7 @@ export type IframeEventMap = {
     playSound: PlaySoundEvent;
     stopSound: null;
     getState: undefined;
+    loadTileset: LoadTilesetEvent;
     registerMenuCommand: MenuItemRegisterEvent;
     setTiles: SetTilesEvent;
 };
@@ -83,7 +84,6 @@ export const isIframeResponseEventWrapper = (event: {
     type?: string;
 }): event is IframeResponseEvent<keyof IframeResponseEventMap> => typeof event.type === "string";
 
-
 /**
  * List event types sent from an iFrame to WorkAdventure that expect a unique answer from WorkAdventure along the type for the answer from WorkAdventure to the iFrame.
  * Types are defined using Type guards that will actually bused to enforce and check types.
@@ -101,22 +101,26 @@ export const iframeQueryMapTypeGuards = {
         query: isSetVariableEvent,
         answer: tg.isUndefined,
     },
-}
+    loadTileset: {
+        query: isLoadTilesetEvent,
+        answer: tg.isNumber,
+    },
+};
 
-type GuardedType<T> = T extends (x: unknown) => x is (infer T) ? T : never;
+type GuardedType<T> = T extends (x: unknown) => x is infer T ? T : never;
 type IframeQueryMapTypeGuardsType = typeof iframeQueryMapTypeGuards;
 type UnknownToVoid<T> = undefined extends T ? void : T;
 
 export type IframeQueryMap = {
     [key in keyof IframeQueryMapTypeGuardsType]: {
-        query: GuardedType<IframeQueryMapTypeGuardsType[key]['query']>
-        answer: UnknownToVoid<GuardedType<IframeQueryMapTypeGuardsType[key]['answer']>>
-    }
-}
+        query: GuardedType<IframeQueryMapTypeGuardsType[key]["query"]>;
+        answer: UnknownToVoid<GuardedType<IframeQueryMapTypeGuardsType[key]["answer"]>>;
+    };
+};
 
 export interface IframeQuery<T extends keyof IframeQueryMap> {
     type: T;
-    data: IframeQueryMap[T]['query'];
+    data: IframeQueryMap[T]["query"];
 }
 
 export interface IframeQueryWrapper<T extends keyof IframeQueryMap> {
@@ -126,30 +130,34 @@ export interface IframeQueryWrapper<T extends keyof IframeQueryMap> {
 
 export const isIframeQueryKey = (type: string): type is keyof IframeQueryMap => {
     return type in iframeQueryMapTypeGuards;
-}
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isIframeQuery = (event: any): event is IframeQuery<keyof IframeQueryMap> => {
     const type = event.type;
-    if (typeof type !== 'string') {
+    if (typeof type !== "string") {
         return false;
     }
     if (!isIframeQueryKey(type)) {
         return false;
     }
     return iframeQueryMapTypeGuards[type].query(event.data);
-}
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const isIframeQueryWrapper = (event: any): event is IframeQueryWrapper<keyof IframeQueryMap> => typeof event.id === 'number' && isIframeQuery(event.query);
+export const isIframeQueryWrapper = (event: any): event is IframeQueryWrapper<keyof IframeQueryMap> =>
+    typeof event.id === "number" && isIframeQuery(event.query);
 
 export interface IframeAnswerEvent<T extends keyof IframeQueryMap> {
     id: number;
     type: T;
-    data: IframeQueryMap[T]['answer'];
+    data: IframeQueryMap[T]["answer"];
 }
 
-export const isIframeAnswerEvent = (event: { type?: string, id?: number }): event is IframeAnswerEvent<keyof IframeQueryMap> => typeof event.type === 'string' && typeof event.id === 'number';
+export const isIframeAnswerEvent = (event: {
+    type?: string;
+    id?: number;
+}): event is IframeAnswerEvent<keyof IframeQueryMap> => typeof event.type === "string" && typeof event.id === "number";
 
 export interface IframeErrorAnswerEvent {
     id: number;
@@ -157,4 +165,9 @@ export interface IframeErrorAnswerEvent {
     error: string;
 }
 
-export const isIframeErrorAnswerEvent = (event: { type?: string, id?: number, error?: string }): event is IframeErrorAnswerEvent => typeof event.type === 'string' && typeof event.id === 'number' && typeof event.error === 'string';
+export const isIframeErrorAnswerEvent = (event: {
+    type?: string;
+    id?: number;
+    error?: string;
+}): event is IframeErrorAnswerEvent =>
+    typeof event.type === "string" && typeof event.id === "number" && typeof event.error === "string";

front/src/Api/Events/LoadTilesetEvent.ts

@@ -0,0 +1,12 @@
+import * as tg from "generic-type-guard";
+
+export const isLoadTilesetEvent = new tg.IsInterface()
+    .withProperties({
+        url: tg.isString,
+    })
+    .get();
+
+/**
+ * A message sent from the iFrame to the game to add a message in the chat.
+ */
+export type LoadTilesetEvent = tg.GuardedType<typeof isLoadTilesetEvent>;

front/src/Api/IframeListener.ts

@@ -12,7 +12,8 @@ import { isOpenCoWebsite, OpenCoWebSiteEvent } from "./Events/OpenCoWebSiteEvent
 import {
     IframeErrorAnswerEvent,
     IframeEvent,
-    IframeEventMap, IframeQueryMap,
+    IframeEventMap,
+    IframeQueryMap,
     IframeResponseEvent,
     IframeResponseEventMap,
     isIframeEventWrapper,
@@ -25,16 +26,16 @@ import { isStopSoundEvent, StopSoundEvent } from "./Events/StopSoundEvent";
 import { isLoadSoundEvent, LoadSoundEvent } from "./Events/LoadSoundEvent";
 import { isSetPropertyEvent, SetPropertyEvent } from "./Events/setPropertyEvent";
 import { isLayerEvent, LayerEvent } from "./Events/LayerEvent";
-import { isMenuItemRegisterEvent } from "./Events/ui/MenuItemRegisterEvent";
-import type { MapDataEvent } from "./Events/MapDataEvent";
-import type { GameStateEvent } from "./Events/GameStateEvent";
 import type { HasPlayerMovedEvent } from "./Events/HasPlayerMovedEvent";
 import { isLoadPageEvent } from "./Events/LoadPageEvent";
 import { handleMenuItemRegistrationEvent, isMenuItemRegisterIframeEvent } from "./Events/ui/MenuItemRegisterEvent";
 import { SetTilesEvent, isSetTilesEvent } from "./Events/SetTilesEvent";
 import type { SetVariableEvent } from "./Events/SetVariableEvent";
 
-type AnswererCallback<T extends keyof IframeQueryMap> = (query: IframeQueryMap[T]["query"], source: MessageEventSource | null) => IframeQueryMap[T]["answer"] | PromiseLike<IframeQueryMap[T]["answer"]>;
+type AnswererCallback<T extends keyof IframeQueryMap> = (
+    query: IframeQueryMap[T]["query"],
+    source: MessageEventSource | null
+) => IframeQueryMap[T]["answer"] | PromiseLike<IframeQueryMap[T]["answer"]>;
 
 /**
  * Listens to messages from iframes and turn those messages into easy to use observables.
@@ -112,13 +113,11 @@ class IframeListener {
     private readonly scripts = new Map<string, HTMLIFrameElement>();
     private sendPlayerMove: boolean = false;
 
-
     // Note: we are forced to type this in unknown and later cast with "as" because of https://github.com/microsoft/TypeScript/issues/31904
     private answerers: {
-        [str in keyof IframeQueryMap]?: unknown
+        [str in keyof IframeQueryMap]?: unknown;
     } = {};
 
-
     init() {
         window.addEventListener(
             "message",
@@ -158,42 +157,56 @@ class IframeListener {
 
                     const answerer = this.answerers[query.type] as AnswererCallback<keyof IframeQueryMap> | undefined;
                     if (answerer === undefined) {
-                        const errorMsg = 'The iFrame sent a message of type "'+query.type+'" but there is no service configured to answer these messages.';
+                        const errorMsg =
+                            'The iFrame sent a message of type "' +
+                            query.type +
+                            '" but there is no service configured to answer these messages.';
                         console.error(errorMsg);
-                        iframe.contentWindow?.postMessage({
+                        iframe.contentWindow?.postMessage(
+                            {
                                 id: queryId,
                                 type: query.type,
-                            error: errorMsg
-                        } as IframeErrorAnswerEvent, '*');
+                                error: errorMsg,
+                            } as IframeErrorAnswerEvent,
+                            "*"
+                        );
                         return;
                     }
 
                     const errorHandler = (reason: unknown) => {
-                        console.error('An error occurred while responding to an iFrame query.', reason);
-                        let reasonMsg: string = '';
+                        console.error("An error occurred while responding to an iFrame query.", reason);
+                        let reasonMsg: string = "";
                         if (reason instanceof Error) {
                             reasonMsg = reason.message;
-                        } else if (typeof reason === 'object') {
-                            reasonMsg = reason ? reason.toString() : '';
-                        } else  if (typeof reason === 'string') {
+                        } else if (typeof reason === "object") {
+                            reasonMsg = reason ? reason.toString() : "";
+                        } else if (typeof reason === "string") {
                             reasonMsg = reason;
                         }
 
-                        iframe?.contentWindow?.postMessage({
+                        iframe?.contentWindow?.postMessage(
+                            {
                                 id: queryId,
                                 type: query.type,
-                            error: reasonMsg
-                        } as IframeErrorAnswerEvent, '*');
+                                error: reasonMsg,
+                            } as IframeErrorAnswerEvent,
+                            "*"
+                        );
                     };
 
                     try {
-                        Promise.resolve(answerer(query.data, message.source)).then((value) => {
-                            iframe?.contentWindow?.postMessage({
+                        Promise.resolve(answerer(query.data, message.source))
+                            .then((value) => {
+                                iframe?.contentWindow?.postMessage(
+                                    {
                                         id: queryId,
                                         type: query.type,
-                                data: value
-                            }, '*');
-                        }).catch(errorHandler);
+                                        data: value,
+                                    },
+                                    "*"
+                                );
+                            })
+                            .catch(errorHandler);
                     } catch (reason) {
                         errorHandler(reason);
                     }
@@ -398,8 +411,8 @@ class IframeListener {
 
     setVariable(setVariableEvent: SetVariableEvent) {
         this.postMessage({
-            'type': 'setVariable',
-            'data': setVariableEvent
+            type: "setVariable",
+            data: setVariableEvent,
         });
     }
 
@@ -432,13 +445,16 @@ class IframeListener {
         // Let's dispatch the message to the other iframes
         for (const iframe of this.iframes) {
             if (iframe.contentWindow !== source) {
-                iframe.contentWindow?.postMessage({
-                    'type': 'setVariable',
-                    'data': {
+                iframe.contentWindow?.postMessage(
+                    {
+                        type: "setVariable",
+                        data: {
                             key,
                             value,
-                    }
-                }, '*');
+                        },
+                    },
+                    "*"
+                );
             }
         }
     }

front/src/Api/iframe/room.ts

@@ -1,4 +1,4 @@
-import { Observable, Subject } from "rxjs";
+import { Subject } from "rxjs";
 
 import { EnterLeaveEvent, isEnterLeaveEvent } from "../Events/EnterLeaveEvent";
 
@@ -105,6 +105,14 @@ export class WorkadventureRoomCommands extends IframeApiContribution<Workadventu
         }
         return mapURL;
     }
+    async loadTileset(url: string): Promise<number> {
+        return await queryWorkadventure({
+            type: "loadTileset",
+            data: {
+                url: url,
+            },
+        });
+    }
 }
 
 export default new WorkadventureRoomCommands();

front/src/Phaser/Game/GameMap.ts

@@ -61,6 +61,17 @@ export class GameMap {
         }
     }
 
+    public addLoadedTileset(
+        newMap: ITiledMap,
+        newPhaserMap: Phaser.Tilemaps.Tilemap,
+        newTerrains: Array<Phaser.Tilemaps.Tileset>
+    ) {
+        this.map = newMap;
+        for (const layer of this.phaserLayers) {
+            layer.tileset = newTerrains;
+        }
+    }
+
     public getPropertiesForIndex(index: number): Array<ITiledMapProperty> {
         if (this.tileSetPropertyMap[index]) {
             return this.tileSetPropertyMap[index];

front/src/Phaser/Game/GameScene.ts

@@ -75,8 +75,6 @@ import { joystickBaseImg, joystickBaseKey, joystickThumbImg, joystickThumbKey }
 import { waScaleManager } from "../Services/WaScaleManager";
 import { EmoteManager } from "./EmoteManager";
 import EVENT_TYPE = Phaser.Scenes.Events;
-import RenderTexture = Phaser.GameObjects.RenderTexture;
-import Tilemap = Phaser.Tilemaps.Tilemap;
 import type { HasPlayerMovedEvent } from "../../Api/Events/HasPlayerMovedEvent";
 
 import AnimatedTiles from "phaser-animated-tiles";
@@ -88,6 +86,7 @@ import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStor
 import { SharedVariablesManager } from "./SharedVariablesManager";
 import { playersStore } from "../../Stores/PlayersStore";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
+import Tileset = Phaser.Tilemaps.Tileset;
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
@@ -1083,6 +1082,52 @@ ${escapedMessage}
                 }
             })
         );
+        iframeListener.registerAnswerer("loadTileset", (eventTileset) => {
+            const jsonTilesetDir = eventTileset.url.substr(0, eventTileset.url.lastIndexOf("/"));
+            let newFirstgid = 1;
+            const lastTileset = this.mapFile.tilesets[this.mapFile.tilesets.length - 1];
+            if (lastTileset) {
+                newFirstgid = lastTileset.firstgid + lastTileset.tilecount;
+            }
+            return new Promise((resolve, reject) => {
+                this.load.on("filecomplete-json-" + eventTileset.url, () => {
+                    let jsonTileset = this.cache.json.get(eventTileset.url);
+                    this.load.on("filecomplete-image-" + jsonTilesetDir + "/" + jsonTileset.image, () => {
+                        jsonTileset = { ...jsonTileset, firstgid: newFirstgid };
+                        this.mapFile.tilesets.push(jsonTileset);
+                        const newTileset = new Tileset(
+                            jsonTileset.name,
+                            jsonTileset.firstgid,
+                            jsonTileset.tileWidth,
+                            jsonTileset.tileHeight,
+                            jsonTileset.margin,
+                            jsonTileset.spacing,
+                            jsonTileset.tiles
+                        );
+                        this.Map.tilesets.push(newTileset);
+                        this.Terrains.push(
+                            this.Map.addTilesetImage(
+                                jsonTileset.name,
+                                jsonTilesetDir + "/" + jsonTileset.image,
+                                jsonTileset.tilewidth,
+                                jsonTileset.tileheight,
+                                jsonTileset.margin,
+                                jsonTileset.spacing
+                            )
+                        );
+                        this.gameMap.addLoadedTileset(this.mapFile, this.Map, this.Terrains);
+                        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(
@@ -1150,7 +1195,7 @@ ${escapedMessage}
         let targetRoom: Room;
         try {
             targetRoom = await Room.createRoom(roomUrl);
-        } catch (e: unknown) {
+        } catch (e) {
             console.error('Error while fetching new room "' + roomUrl.toString() + '"', e);
             this.mapTransitioning = false;
             return;
@@ -1204,6 +1249,7 @@ ${escapedMessage}
         this.chatVisibilityUnsubscribe();
         this.biggestAvailableAreaStoreUnsubscribe();
         iframeListener.unregisterAnswerer("getState");
+        iframeListener.unregisterAnswerer("loadTileset");
         this.sharedVariablesManager?.close();
 
         mediaManager.hideGameOverlay();
@@ -1276,7 +1322,7 @@ ${escapedMessage}
         try {
             const room = await Room.createRoom(exitRoomPath);
             return gameManager.loadMap(room, this.scene);
-        } catch (e: unknown) {
+        } catch (e) {
             console.warn('Error while pre-loading exit room "' + exitRoomPath.toString() + '"', e);
         }
     }

maps/tests/LoadTileset/LoadTileset.json

@@ -0,0 +1,141 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":1,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[33, 34, 34, 34, 34, 34, 35, 37, 38, 39, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 41, 42, 42, 42, 42, 42, 43, 45, 46, 47, 49, 50, 50, 50, 50, 50, 51, 53, 54, 55],
+         "height":10,
+         "id":2,
+         "name":"bottom",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":3,
+ "nextobjectid":1,
+ "orientation":"orthogonal",
+ "properties":[
+        {
+         "name":"script",
+         "type":"string",
+         "value":"scriptTileset.js"
+        }],
+ "renderorder":"right-down",
+ "tiledversion":"1.7.0",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":8,
+         "firstgid":1,
+         "image":"tileset_dungeon.png",
+         "imageheight":256,
+         "imagewidth":256,
+         "margin":0,
+         "name":"Dungeon",
+         "spacing":0,
+         "tilecount":64,
+         "tileheight":32,
+         "tiles":[
+                {
+                 "id":36,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":37,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":38,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":44,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":45,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":46,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":52,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":53,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":54,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }],
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":"1.6",
+ "width":10
+}

maps/tests/LoadTileset/Yellow.json

@@ -0,0 +1,87 @@
+{ "columns":11,
+ "image":"Yellow.jpg",
+ "imageheight":128,
+ "imagewidth":352,
+ "margin":0,
+ "name":"Yellow",
+ "spacing":0,
+ "tilecount":44,
+ "tiledversion":"1.7.0",
+ "tileheight":32,
+ "tiles":[
+        {
+         "id":0,
+         "properties":[
+                {
+                 "name":"collides",
+                 "type":"bool",
+                 "value":true
+                }]
+        }, 
+        {
+         "id":1,
+         "properties":[
+                {
+                 "name":"collides",
+                 "type":"bool",
+                 "value":true
+                }]
+        }, 
+        {
+         "id":2,
+         "properties":[
+                {
+                 "name":"collides",
+                 "type":"bool",
+                 "value":true
+                }]
+        }, 
+        {
+         "id":11,
+         "properties":[
+                {
+                 "name":"collides",
+                 "type":"bool",
+                 "value":true
+                }]
+        }, 
+        {
+         "id":13,
+         "properties":[
+                {
+                 "name":"collides",
+                 "type":"bool",
+                 "value":true
+                }]
+        }, 
+        {
+         "id":22,
+         "properties":[
+                {
+                 "name":"collides",
+                 "type":"bool",
+                 "value":true
+                }]
+        }, 
+        {
+         "id":23,
+         "properties":[
+                {
+                 "name":"collides",
+                 "type":"bool",
+                 "value":true
+                }]
+        }, 
+        {
+         "id":24,
+         "properties":[
+                {
+                 "name":"collides",
+                 "type":"bool",
+                 "value":true
+                }]
+        }],
+ "tilewidth":32,
+ "type":"tileset",
+ "version":"1.6"
+}

maps/tests/LoadTileset/scriptTileset.js

@@ -0,0 +1,5 @@
+WA.room.loadTileset("http://maps.workadventure.localhost/tests/LoadTileset/Yellow.json").then((firstgid) => {
+    WA.room.setTiles([
+        {x: 5, y: 5, tile: firstgid + 1, layer: 'bottom'},
+    ]);
+});