first step on loading a tileset from a script

front/src/Api/Events/IframeEvent.ts

@@ -16,6 +16,7 @@ import type { DataLayerEvent } from "./DataLayerEvent";
 import type { LayerEvent } from './LayerEvent';
 import type { SetPropertyEvent } from "./setPropertyEvent";
 import type { TagEvent } from "./TagEvent";
+import type { TilesetEvent } from "./TilesetEvent";
 
 export interface TypedMessageEvent<T> extends MessageEvent {
     data: T
@@ -42,6 +43,7 @@ export type IframeEventMap = {
     setProperty: SetPropertyEvent
     getDataLayer: undefined
     getTag: undefined
+    tilsetEvent: TilesetEvent
 }
 export interface IframeEvent<T extends keyof IframeEventMap> {
     type: T;

front/src/Api/Events/TilesetEvent.ts

@@ -0,0 +1,15 @@
+import * as tg from "generic-type-guard";
+
+export const isTilesetEvent =
+    new tg.IsInterface().withProperties({
+        name : tg.isString,
+        imgUrl : tg.isString,
+        tilewidth : tg.isNumber,
+        tileheight : tg.isNumber,
+        margin : tg.isNumber,
+        spacing : tg.isNumber,
+    }).get();
+/**
+ * A message sent from the iFrame to the game to show/hide a layer.
+ */
+export type TilesetEvent = tg.GuardedType<typeof isTilesetEvent>;

front/src/Api/IframeListener.ts

@@ -20,6 +20,7 @@ import type { DataLayerEvent } from "./Events/DataLayerEvent";
 import { isMenuItemRegisterEvent } from './Events/MenuItemRegisterEvent';
 import type { MenuItemClickedEvent } from './Events/MenuItemClickedEvent';
 import type { TagEvent } from "./Events/TagEvent";
+import { isTilesetEvent, TilesetEvent } from "./Events/TilesetEvent";
 
 
 /**
@@ -79,9 +80,12 @@ class IframeListener {
     private readonly _registerMenuCommandStream: Subject<string> = new Subject();
     public readonly registerMenuCommandStream = this._registerMenuCommandStream.asObservable();
 
-    private readonly _tagListStream: Subject<string> = new Subject();
+    private readonly _tagListStream: Subject<void> = new Subject();
     public readonly tagListStream = this._tagListStream.asObservable();
 
+    private readonly _tilesetLoaderStream: Subject<TilesetEvent> =  new Subject();
+    public readonly tilesetLoaderStream = this._tilesetLoaderStream.asObservable();
+
     private readonly iframes = new Set<HTMLIFrameElement>();
     private readonly scripts = new Map<string, HTMLIFrameElement>();
     private sendPlayerMove: boolean = false;
@@ -152,6 +156,8 @@ class IframeListener {
                     this._registerMenuCommandStream.next(payload.data.menutItem)
                 } else if (payload.type == "getTag") {
                     this._tagListStream.next();
+                } else if (payload.type == "tilsetEvent" && isTilesetEvent(payload.data)) {
+                    this._tilesetLoaderStream.next(payload.data);
                 }
             }
         }, false);

front/src/Phaser/Game/GameMap.ts

@@ -1,6 +1,5 @@
 import type {ITiledMap, ITiledMapLayer, ITiledMapTileLayer} from "../Map/ITiledMap";
 import { flattenGroupLayersMap } from "../Map/LayersFlattener";
-import {iframeListener} from "../../Api/IframeListener";
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer;
 
 export type PropertyChangeCallback = (newValue: string | number | boolean | undefined, oldValue: string | number | boolean | undefined, allProps: Map<string, string | boolean | number>) => void;
@@ -151,4 +150,11 @@ export class GameMap {
         return undefined;
     }
 
+    public addTerrain(terrain : Phaser.Tilemaps.Tileset): void {
+        console.log('Add');
+        for (const phaserLayer of this.phaserLayers) {
+            phaserLayer.tileset.push(terrain);
+        }
+    }
+
 }

front/src/Phaser/Game/GameScene.ts

@@ -500,7 +500,7 @@ export class GameScene extends DirtyScene implements CenterListener {
         if (!this.room.isDisconnected()) {
             this.connect();
         }
-
+        console.log('display');
         document.addEventListener('visibilitychange', this.onVisibilityChangeCallback);
     }
 
@@ -910,6 +910,13 @@ ${escapedMessage}
             iframeListener.sendUserTagList({list: this.connection.getAllTag()});
         }))
 
+        this.iframeSubscriptionList.push(iframeListener.tilesetLoaderStream.subscribe((tileset) => {
+            //this.load.tilemapTiledJSON('logo', tileset.imgUrl);
+            this.load.image('logo', tileset.imgUrl);
+            this.Terrains.push(this.Map.addTilesetImage(tileset.name, tileset.imgUrl, tileset.tilewidth, tileset.tileheight, tileset.margin, tileset.spacing));
+            this.gameMap.addTerrain(this.Terrains[this.Terrains.length - 1]);
+        }))
+
     }
 
     private setPropertyLayer(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {

front/src/iframe_api.ts

@@ -18,6 +18,7 @@ import type { ITiledMap } from "./Phaser/Map/ITiledMap";
 import type { MenuItemRegisterEvent } from "./Api/Events/MenuItemRegisterEvent";
 import { isMenuItemClickedEvent } from "./Api/Events/MenuItemClickedEvent";
 import {TagEvent, isTagEvent} from "./Api/Events/TagEvent";
+import type { TilesetEvent } from "./Api/Events/TilesetEvent";
 
 interface WorkAdventureApi {
     sendChatMessage(message: string, author: string): void;
@@ -48,6 +49,7 @@ interface WorkAdventureApi {
     getNickName(): Promise<string | null>;
     getTagUser(): Promise<string[]>;
     getMap(): Promise<ITiledMap>
+    loadTileset(name: string, imgUrl : string, tilewidth : number, tileheight : number, margin : number, spacing : number): void;
 
     onPlayerMove(callback: (playerMovedEvent: HasPlayerMovedEvent) => void): void
 }
@@ -163,6 +165,20 @@ window.WA = {
         })
     },
 
+    loadTileset(name: string, imgUrl : string, tilewidth : number, tileheight : number, margin : number, spacing : number): void {
+        postToParent({
+            type: "tilsetEvent",
+            data: {
+                name: name,
+                imgUrl: imgUrl,
+                tilewidth: tilewidth,
+                tileheight: tileheight,
+                margin: margin,
+                spacing: spacing
+            } as TilesetEvent
+        })
+    },
+
     getTagUser(): Promise<string[]> {
         return getTag().then((res) => {
             return res.list;