Merge branch 'develop' of github.com:thecodingmachine/workadventure into main

front/src/Api/Events/SetTilesEvent.ts

@@ -5,7 +5,7 @@ export const isSetTilesEvent = tg.isArray(
         .withProperties({
             x: tg.isNumber,
             y: tg.isNumber,
-            tile: tg.isUnion(tg.isNumber, tg.isString),
+            tile: tg.isUnion(tg.isUnion(tg.isNumber, tg.isString), tg.isNull),
             layer: tg.isString,
         })
         .get()

front/src/Api/iframe/room.ts

@@ -4,7 +4,7 @@ import { isDataLayerEvent } from "../Events/DataLayerEvent";
 import { EnterLeaveEvent, isEnterLeaveEvent } from "../Events/EnterLeaveEvent";
 import { isGameStateEvent } from "../Events/GameStateEvent";
 
-import {IframeApiContribution, queryWorkadventure, sendToWorkadventure} from "./IframeApiContribution";
+import { IframeApiContribution, queryWorkadventure, sendToWorkadventure } from "./IframeApiContribution";
 import { apiCallback } from "./registeredCallbacks";
 
 import type { ITiledMap } from "../../Phaser/Map/ITiledMap";
@@ -34,7 +34,7 @@ interface User {
 interface TileDescriptor {
     x: number;
     y: number;
-    tile: number | string;
+    tile: number | string | null;
     layer: string;
 }
 

front/src/Phaser/Game/GameMap.ts

@@ -152,7 +152,10 @@ export class GameMap {
     }
 
     private getTileProperty(index: number): Array<ITiledMapLayerProperty> {
-        return this.tileSetPropertyMap[index] || [];
+        if (this.tileSetPropertyMap[index]) {
+            return this.tileSetPropertyMap[index];
+        }
+        return [];
     }
 
     private trigger(
@@ -189,6 +192,10 @@ export class GameMap {
         return this.phaserLayers.find((layer) => layer.layer.name === layerName);
     }
 
+    public findPhaserLayers(groupName: string): TilemapLayer[] {
+        return this.phaserLayers.filter((l) => l.layer.name.includes(groupName));
+    }
+
     public addTerrain(terrain: Phaser.Tilemaps.Tileset): void {
         for (const phaserLayer of this.phaserLayers) {
             phaserLayer.tileset.push(terrain);
@@ -198,23 +205,31 @@ export class GameMap {
     private putTileInFlatLayer(index: number, x: number, y: number, layer: string): void {
         const fLayer = this.findLayer(layer);
         if (fLayer == undefined) {
-            console.error("The layer that you want to change doesn't exist.");
+            console.error("The layer '" + layer + "' that you want to change doesn't exist.");
             return;
         }
         if (fLayer.type !== "tilelayer") {
-            console.error("The layer that you want to change is not a tilelayer. Tile can only be put in tilelayer.");
+            console.error(
+                "The layer '" +
+                    layer +
+                    "' that you want to change is not a tilelayer. Tile can only be put in tilelayer."
+            );
             return;
         }
         if (typeof fLayer.data === "string") {
-            console.error("Data of the layer that you want to change is only readable.");
+            console.error("Data of the layer '" + layer + "' that you want to change is only readable.");
             return;
         }
-        fLayer.data[x + y * fLayer.height] = index;
+        fLayer.data[x + y * fLayer.width] = index;
     }
 
-    public putTile(tile: string | number, x: number, y: number, layer: string): void {
+    public putTile(tile: string | number | null, x: number, y: number, layer: string): void {
         const phaserLayer = this.findPhaserLayer(layer);
         if (phaserLayer) {
+            if (tile === null) {
+                phaserLayer.putTileAt(-1, x, y);
+                return;
+            }
             const tileIndex = this.getIndexForTileType(tile);
             if (tileIndex !== undefined) {
                 this.putTileInFlatLayer(tileIndex, x, y, layer);
@@ -225,10 +240,10 @@ export class GameMap {
                     }
                 }
             } else {
-                console.error("The tile that you want to place doesn't exist.");
+                console.error("The tile '" + tile + "' that you want to place doesn't exist.");
             }
         } else {
-            console.error("The layer that you want to change is not a tilelayer. Tile can only be put in tilelayer.");
+            console.error("The layer '" + layer + "' does not exist (or is not a tilelaye).");
         }
     }
 

front/src/Phaser/Game/GameScene.ts

@@ -1110,25 +1110,48 @@ export class GameScene extends DirtyScene {
             console.warn('Could not find layer "' + layerName + '" when calling setProperty');
             return;
         }
+        if (propertyName === "exitUrl" && typeof propertyValue === "string") {
+            this.loadNextGame(propertyValue);
+        }
         if (layer.properties === undefined) {
             layer.properties = [];
         }
         const property = layer.properties.find((property) => property.name === propertyName);
         if (property === undefined) {
+            if (propertyValue === undefined) {
+                return;
+            }
             layer.properties.push({ name: propertyName, type: typeof propertyValue, value: propertyValue });
             return;
         }
+        if (propertyValue === undefined) {
+            const index = layer.properties.indexOf(property);
+            layer.properties.splice(index, 1);
+        }
         property.value = propertyValue;
     }
 
     private setLayerVisibility(layerName: string, visible: boolean): void {
         const phaserLayer = this.gameMap.findPhaserLayer(layerName);
-        if (phaserLayer === undefined) {
-            console.warn('Could not find layer "' + layerName + '" when calling WA.hideLayer / WA.showLayer');
-            return;
+        if (phaserLayer != undefined) {
+            phaserLayer.setVisible(visible);
+            phaserLayer.setCollisionByProperty({ collides: true }, visible);
+        } else {
+            const phaserLayers = this.gameMap.findPhaserLayers(layerName + "/");
+            if (phaserLayers === []) {
+                console.warn(
+                    'Could not find layer with name that contains "' +
+                        layerName +
+                        '" when calling WA.hideLayer / WA.showLayer'
+                );
+                return;
+            }
+            for (let i = 0; i < phaserLayers.length; i++) {
+                phaserLayers[i].setVisible(visible);
+                phaserLayers[i].setCollisionByProperty({ collides: true }, visible);
+            }
         }
-        phaserLayer.setVisible(visible);
-        this.dirty = true;
+        this.markDirty();
     }
 
     private getMapDirUrl(): string {

front/src/WebRtc/HtmlUtils.ts

@@ -25,7 +25,7 @@ export class HtmlUtils {
     }
 
     public static escapeHtml(html: string): string {
-        const text = document.createTextNode(html);
+        const text = document.createTextNode(html.replace(/(\r\n|\r|\n)/g,'<br/>'));
         const p = document.createElement('p');
         p.appendChild(text);
         return p.innerHTML;