Merge pull request #1265 from thecodingmachine/UpdateSetTiles

SetTiles can now set a tile to null so that there is no more tile.

CHANGELOG.md

@@ -10,12 +10,12 @@
 - New scripting API features :
   - Use `WA.room.showLayer(): void` to show a layer
   - Use `WA.room.hideLayer(): void` to hide a layer
-  - Use `WA.room.setProperty() : void` to add or change existing property of a layer
+  - Use `WA.room.setProperty() : void` to add, delete or change existing property of a layer
   - Use `WA.player.onPlayerMove(): void` to track the movement of the current player
   - Use `WA.room.getCurrentUser(): Promise<User>` to get the ID, name and tags of the current player
   - Use `WA.room.getCurrentRoom(): Promise<Room>` to get the ID, JSON map file, url of the map of the current room and the layer where the current player started
   - Use `WA.ui.registerMenuCommand(): void` to add a custom menu
-  - Use `WA.room.setTiles(): void` to change an array of tiles
+  - Use `WA.room.setTiles(): void` to add, delete or change an array of tiles
 - Users blocking now relies on UUID rather than ID. A blocked user that leaves a room and comes back will stay blocked.
 
 ## Version 1.4.3 - 1.4.4 - 1.4.5

docs/maps/api-room.md

@@ -134,6 +134,7 @@ If `tile` is a string, it's not the id of the tile but the value of the property
 
 **Important !** : If you use `tile` as a number, be sure to add the `firstgid` of the tileset of the tile that you want to the id of the tile in Tiled Editor.
 
+Note: If you want to unset a tile, use `setTiles` with `tile` set to `null`.
 
 Example : 
 ```javascript

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(
@@ -198,37 +201,45 @@ 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);
                 const phaserTile = phaserLayer.putTileAt(tileIndex, x, y);
                 for (const property of this.getTileProperty(tileIndex)) {
-                    if (property.name === "collides" && property.value === "true") {
+                    if (property.name === "collides" && property.value) {
                         phaserTile.setCollision(true);
                     }
                 }
             } 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).");
         }
     }