Show/Hide Layer now unset collision and can show/hide all the layer in a group layer

front/src/Api/Events/LayerEvent.ts

@@ -3,6 +3,7 @@ import * as tg from "generic-type-guard";
 export const isLayerEvent = new tg.IsInterface()
     .withProperties({
         name: tg.isString,
+        group: tg.isBoolean,
     })
     .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";
@@ -93,11 +93,11 @@ export class WorkadventureRoomCommands extends IframeApiContribution<Workadventu
         }
         subject.subscribe(callback);
     }
-    showLayer(layerName: string): void {
+    showLayer(layerName: string, group: boolean = false): void {
-        sendToWorkadventure({ type: "showLayer", data: { name: layerName } });
+        sendToWorkadventure({ type: "showLayer", data: { name: layerName, group: group } });
     }
-    hideLayer(layerName: string): void {
+    hideLayer(layerName: string, group: boolean = false): void {
-        sendToWorkadventure({ type: "hideLayer", data: { name: layerName } });
+        sendToWorkadventure({ type: "hideLayer", data: { name: layerName, group: group } });
     }
     setProperty(layerName: string, propertyName: string, propertyValue: string | number | boolean | undefined): void {
         sendToWorkadventure({

front/src/Phaser/Game/GameMap.ts

@@ -189,6 +189,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);

front/src/Phaser/Game/GameScene.ts

@@ -1022,13 +1022,13 @@ ${escapedMessage}
 
         this.iframeSubscriptionList.push(
             iframeListener.showLayerStream.subscribe((layerEvent) => {
-                this.setLayerVisibility(layerEvent.name, true);
+                this.setLayerVisibility(layerEvent.name, true, layerEvent.group);
             })
         );
 
         this.iframeSubscriptionList.push(
             iframeListener.hideLayerStream.subscribe((layerEvent) => {
-                this.setLayerVisibility(layerEvent.name, false);
+                this.setLayerVisibility(layerEvent.name, false, layerEvent.group);
             })
         );
 
@@ -1044,7 +1044,7 @@ ${escapedMessage}
             })
         );
 
-        iframeListener.registerAnswerer('getState', () => {
+        iframeListener.registerAnswerer("getState", () => {
             return {
                 mapUrl: this.MapUrlFile,
                 startLayerName: this.startPositionCalculator.startLayerName,
@@ -1084,14 +1084,31 @@ ${escapedMessage}
         property.value = propertyValue;
     }
 
-    private setLayerVisibility(layerName: string, visible: boolean): void {
+    private setLayerVisibility(layerName: string, visible: boolean, group: boolean): void {
-        const phaserLayer = this.gameMap.findPhaserLayer(layerName);
+        if (group) {
-        if (phaserLayer === undefined) {
+            const phaserLayers = this.gameMap.findPhaserLayers(layerName);
-            console.warn('Could not find layer "' + layerName + '" when calling WA.hideLayer / WA.showLayer');
+            if (phaserLayers === []) {
-            return;
+                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);
+            }
+        } else {
+            const phaserLayer = this.gameMap.findPhaserLayer(layerName);
+            if (phaserLayer === undefined) {
+                console.warn('Could not find layer "' + layerName + '" when calling WA.hideLayer / WA.showLayer');
+                return;
+            }
+            phaserLayer.setVisible(visible);
+            phaserLayer.setCollisionByProperty({ collides: true }, visible);
         }
-        phaserLayer.setVisible(visible);
+        this.markDirty();
-        this.dirty = true;
     }
 
     private getMapDirUrl(): string {
@@ -1147,7 +1164,7 @@ ${escapedMessage}
         this.emoteManager.destroy();
         this.peerStoreUnsubscribe();
         this.biggestAvailableAreaStoreUnsubscribe();
-        iframeListener.unregisterAnswerer('getState');
+        iframeListener.unregisterAnswerer("getState");
 
         mediaManager.hideGameOverlay();