Merge pull request #2077 from thecodingmachine/use-tiled-objects

Read properties from Tiled objects

docs/maps/camera.md

@@ -1,15 +1,15 @@
 {.section-title.accent.text-primary}
 # Working with camera
 
-## Focusable Zones
+## Focusable Area
 
-It is possible to define special regions on the map that can make the camera zoom and center on themselves. We call them "Focusable Zones". When player gets inside, his camera view will be altered - focused, zoomed and locked on defined zone, like this:
+It is possible to define special regions on the map that can make the camera zoom and center on themselves. We call them "Focusable Area". When player gets inside, his camera view will be altered - focused, zoomed and locked on defined area, like this:
 
 <div class="px-5 card rounded d-inline-block">
     <img class="document-img" src="images/camera/0_focusable_zone.png" alt="" />
 </div>
 
-### Adding new **Focusable Zone**:
+### Adding new **Focusable Area**:
 
 1. Make sure you are editing an **Object Layer**
 
@@ -29,7 +29,7 @@ It is possible to define special regions on the map that can make the camera zoo
         <img class="document-img" src="images/camera/3_define_new_zone.png" alt="" />
     </div>
 
-4. Make sure your object is of type "zone"!
+4. Make sure your object is of type "area"!
 
     <div class="px-5 card rounded d-inline-block">
         <img class="document-img" src="images/camera/4_add_zone_type.png" alt="" />
@@ -53,11 +53,11 @@ It is possible to define special regions on the map that can make the camera zoo
         <img class="document-img" src="images/camera/7_make_sure_checked.png" alt="" />
     </div>
 
-All should be set up now and your new **Focusable Zone** should be working fine!
+All should be set up now and your new **Focusable Area** should be working fine!
 
 ### Defining custom zoom margin:
 
-If you want, you can add an additional property to control how much should the camera zoom onto focusable zone.
+If you want, you can add an additional property to control how much should the camera zoom onto focusable area.
 
 1. Like before, click on **Add Property**
 
@@ -77,7 +77,7 @@ If you want, you can add an additional property to control how much should the c
         <img class="document-img" src="images/camera/9_optional_zoom_margin_defined.png" alt="" />
     </div>
 
-    For example, if you define your zone as a 300x200 rectangle, setting this property to 0.5 *(50%)* means the camera will try to fit within the viewport the entire zone + margin of 50% of its dimensions, so 450x300.
+    For example, if you define your area as a 300x200 rectangle, setting this property to 0.5 *(50%)* means the camera will try to fit within the viewport the entire area + margin of 50% of its dimensions, so 450x300.
 
     - No margin defined
 

docs/maps/meeting-rooms.md

@@ -9,19 +9,24 @@ On your map, you can define special zones (meeting rooms) that will trigger the
 
 In order to create Jitsi meet zones:
 
-* You must create a specific layer.
+* You must create a specific object.
-* In layer properties, you MUST add a "`jitsiRoom`" property (of type "`string`"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be "slugified" and prepended with a hash of the room URL
+* Object must be of type "`area`"
+* In object properties, you MUST add a "`jitsiRoom`" property (of type "`string`"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be "slugified" and prepended with a hash of the room URL
 * You may also use "jitsiWidth" property (of type "number" between 0 and 100) to control the width of the iframe containing the meeting room.
 
-You can have this layer (i.e. your meeting area) to be selectable as the precise location for your meeting using the [Google Calendar integration for Work Adventure](/integrations/google-calendar). To do so, you must set the `meetingRoomLabel` property. You can provide any name that you would like your meeting room to have (as a string).
+You can have this object (i.e. your meeting area) to be selectable as the precise location for your meeting using the [Google Calendar integration for Work Adventure](/integrations/google-calendar). To do so, you must set the `meetingRoomLabel` property. You can provide any name that you would like your meeting room to have (as a string).
+
+{.alert.alert-info}
+As an alternative, you may also put the `jitsiRoom` properties on a layer (rather than putting them on an "area" object)
+but we advise to stick with "area" objects for better performance!
 
 ## Triggering of the "Jitsi meet" action
 
-By default, Jitsi meet will open when a user enters the zone defined on the map.
+By default, Jitsi meet will open when a user enters the area defined on the map.
 
 It is however possible to trigger Jitsi only on user action. You can do this with the `jitsiTrigger` property.
 
-If you set `jitsiTrigger: onaction`, when the user walks on the layer, an alert message will be displayed at the bottom of the screen:
+If you set `jitsiTrigger: onaction`, when the user walks on the area, an alert message will be displayed at the bottom of the screen:
 
 <figure class="figure">
     <img src="images/click_space_jitsi.png" class="figure-img img-fluid rounded" alt="" />
@@ -32,7 +37,7 @@ If you set `jitsiTriggerMessage: your message action` you can edit alert message
 
 ## Customizing your "Jitsi meet"
 
-Your Jitsi meet experience can be customized using Jitsi specific config options. The `jitsiConfig` and `jitsiInterfaceConfig` properties can be used on the Jitsi layer to change the way Jitsi looks and behaves. Those 2 properties are accepting a JSON string.
+Your Jitsi meet experience can be customized using Jitsi specific config options. The `jitsiConfig` and `jitsiInterfaceConfig` properties can be used on the Jitsi object to change the way Jitsi looks and behaves. Those 2 properties are accepting a JSON string.
 
 For instance, use `jitsiConfig: { "startWithAudioMuted": true }` to automatically mute the microphone when someone enters a room. Or use `jitsiInterfaceConfig: { "DEFAULT_BACKGROUND": "#77ee77" }` to change the background color of Jitsi.
 
@@ -60,7 +65,7 @@ You can grant moderator rights to some of your members. Jitsi moderators can:
 *   Mute everybody expect one speaker
 *   Kick users out of the meeting
 
-In order to grant moderator rights to a given user, you can add a `jitsiRoomAdminTag` property to your Jitsi layer. For instance, if you write a property:
+In order to grant moderator rights to a given user, you can add a `jitsiRoomAdminTag` property to your Jitsi object. For instance, if you write a property:
 
     jitsiRoomAdminTag: speaker
 
@@ -74,7 +79,7 @@ WorkAdventure usually comes with a default Jitsi meet installation. If you are u
 
 You have the possibility, in your map, to override the Jitsi meet instance that will be used by default. This can be useful for regulatory reasons. Maybe your company wants to keep control on the video streams and therefore, wants to self-host a Jitsi instance? Or maybe you want to use a very special configuration or very special version of Jitsi?
 
-Use the `jitsiUrl` property to in the Jitsi layer to specify the Jitsi instance that should be used. Beware, `jitsiUrl` takes in parameter a **domain name**, without the protocol. So you should use:  
+Use the `jitsiUrl` property to in the Jitsi object to specify the Jitsi instance that should be used. Beware, `jitsiUrl` takes in parameter a **domain name**, without the protocol. So you should use:  
 `jitsiUrl: meet.jit.si`  
 and not  
 `jitsiUrl: https://meet.jit.si`

docs/maps/opening-a-website.md

@@ -10,8 +10,9 @@ on the right side of the screen)
 
 In order to create a zone that opens websites:
 
-* You must create a specific layer.
+* You must create a specific object.
-* In layer properties, you MUST add a "`openWebsite`" property (of type "`string`"). The value of the property is the URL of the website to open (the URL must start with "https://")
+* Object must be of type "`area`"
+* In object properties, you MUST add a "`openWebsite`" property (of type "`string`"). The value of the property is the URL of the website to open (the URL must start with "https://")
 * You may also use "`openWebsiteWidth`" property (of type "`int`" or "`float`" between 0 and 100) to control the width of the iframe.
 * You may also use "`openTab`" property (of type "`string`") to open in a new tab instead.
 
@@ -19,6 +20,10 @@ In order to create a zone that opens websites:
 A website can explicitly forbid another website from loading it in an iFrame using
 the [X-Frame-Options HTTP header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options).
 
+{.alert.alert-info}
+As an alternative, you may also put the `openWebsite` properties on a layer (rather than putting them on an "area" object)
+but we advise to stick with "area" objects for better performance!
+
 ## Integrating a Youtube video
 
 A common use case is to use `openWebsite` to open a Youtube video.
@@ -43,7 +48,7 @@ By default, the iFrame will open when a user enters the zone defined on the map.
 
 It is however possible to trigger the iFrame only on user action. You can do this with the `openWebsiteTrigger` property.
 
-If you set `openWebsiteTrigger: onaction`, when the user walks on the layer, an alert message will be displayed at the bottom of the screen:
+If you set `openWebsiteTrigger: onaction`, when the user walks on the area, an alert message will be displayed at the bottom of the screen:
 
 <figure class="figure">
     <img src="images/click_space_open_website.jpg" class="figure-img img-fluid rounded" alt="" />
@@ -52,7 +57,7 @@ If you set `openWebsiteTrigger: onaction`, when the user walks on the layer, an
 
 If you set `openWebsiteTriggerMessage: your message action` you can edit alert message displayed. If is not defined, the default message displayed is 'Press on SPACE to open the web site'.
 
-If you set `openWebsiteTrigger: onicon`, when the user walks on the layer, an icon will be displayed at the bottom of the screen:
+If you set `openWebsiteTrigger: onicon`, when the user walks on the area, an icon will be displayed at the bottom of the screen:
 
 <figure class="figure">
     <img src="images/icon_open_website.png" class="figure-img img-fluid rounded" alt="" />
@@ -78,6 +83,6 @@ Cowebsites allow you to have several sites open at the same time.
 
 If you want to open a Jitsi and another page it's easy!
 
-You have just to [add a Jitsi to the map](meeting-rooms.md) and [add a co-website](opening-a-website.md#the-openwebsite-property) on the same layer.
+You have just to [add a Jitsi to the map](meeting-rooms.md) and [add a co-website](opening-a-website.md#the-openwebsite-property) on the same object.
 
 It's done!

docs/maps/special-zones.md

@@ -9,8 +9,13 @@ On your map, you can define special silent zones where nobody is allowed to talk
 
 In order to create a silent zone:
 
-*   You must create a specific layer.
+*   You must create a specific object.
-*   In layer properties, you MUST add a boolean "`silent`" property. If the silent property is checked, the users are entering the silent zone when they walk on any tile of the layer.
+*   Object must be of type "`area`"
+*   In object properties, you MUST add a boolean "`silent`" property. If the silent property is checked, the users are entering the silent zone when they walk on the area.
+
+{.alert.alert-info}
+As an alternative, you may also put the `silent` property on a layer (rather than putting them on an "area" object)
+but we advise to stick with "area" objects for better performance!
 
 ## Playing sounds or background music
 
@@ -18,10 +23,15 @@ Your map can define special zones where a sound or background music will automat
 
 In order to create a zone that triggers sounds/music:
 
-*   You must create a specific layer.
+*   You must create a specific object.
-*   In layer properties, you MUST add a "`playAudio`" property. The value of the property is a URL to an MP3 file that will be played. The URL can be relative to the URL of the map.
+*   Object must be of type "`area`"
+*   In object properties, you MUST add a "`playAudio`" property. The value of the property is a URL to an MP3 file that will be played. The URL can be relative to the URL of the map.
 *   You may use the boolean property "`audioLoop`" to make the sound loop (thanks captain obvious).
 *   If the "`audioVolume`" property is set, the audio player uses either the value of the property or the last volume set by the user - whichever is smaller. This property is a float from 0 to 1.0
 
 {.alert.alert-info}
 "`playAudioLoop`" is deprecated and should not be used anymore.
+
+{.alert.alert-info}
+As an alternative, you may also put the `playAudio` properties on a layer (rather than putting them on an "area" object)
+but we advise to stick with "area" objects for better performance!

docs/maps/wa-maps.md

@@ -87,11 +87,11 @@ Repeat for every tile that should be "collidable".
 In the next sections, you will see how you can add behaviour on your map by adding "properties".
 You can add properties for a variety of features: putting exits, opening websites, meeting rooms, silent zones, etc...
 
-You can add properties either on individual tiles of a tileset OR on a complete layer.
+You can add properties either on individual tiles of a tileset, on Tiled object OR on a complete layer.
 
-If you put a property on a layer, it will be triggered if your Woka walks on any tile of the layer.
+If you put a property on a object or layer, it will be triggered if your Woka walks on object area / any tile of the layer.
 
-The exception is the "collides" property that can only be set on tiles, but not on a complete layer.
+The exception is the "collides" property that can only be set on tiles, but not on an object or on complete layer.
 
 ## Insert helpful information in your map
 

front/src/Api/Events/ChangeAreaEvent.ts

@@ -7,4 +7,4 @@ export const isChangeZoneEvent = z.object({
 /**
  * A message sent from the game to the iFrame when a user enters or leaves a zone.
  */
-export type ChangeZoneEvent = z.infer<typeof isChangeZoneEvent>;
+export type ChangeAreaEvent = z.infer<typeof isChangeZoneEvent>;

front/src/Api/Events/IframeEvent.ts

@@ -29,7 +29,7 @@ import { isMenuRegisterEvent, isUnregisterMenuEvent } from "./ui/MenuRegisterEve
 import type { ChangeLayerEvent } from "./ChangeLayerEvent";
 import { isPlayerPosition } from "./PlayerPosition";
 import type { WasCameraUpdatedEvent } from "./WasCameraUpdatedEvent";
-import type { ChangeZoneEvent } from "./ChangeZoneEvent";
+import type { ChangeAreaEvent } from "./ChangeAreaEvent";
 import { isCameraSetEvent } from "./CameraSetEvent";
 import { isCameraFollowPlayerEvent } from "./CameraFollowPlayerEvent";
 import { isColorEvent } from "./ColorEvent";
@@ -162,8 +162,8 @@ export interface IframeResponseEventMap {
     leaveEvent: EnterLeaveEvent;
     enterLayerEvent: ChangeLayerEvent;
     leaveLayerEvent: ChangeLayerEvent;
-    enterZoneEvent: ChangeZoneEvent;
+    enterAreaEvent: ChangeAreaEvent;
-    leaveZoneEvent: ChangeZoneEvent;
+    leaveAreaEvent: ChangeAreaEvent;
     buttonClickedEvent: ButtonClickedEvent;
     remotePlayerClickedEvent: RemotePlayerClickedEvent;
     actionsMenuActionClickedEvent: ActionsMenuActionClickedEvent;

front/src/Api/IframeListener.ts

@@ -28,7 +28,7 @@ import { ModifyEmbeddedWebsiteEvent } from "./Events/EmbeddedWebsiteEvent";
 import { handleMenuRegistrationEvent, handleMenuUnregisterEvent } from "../Stores/MenuStore";
 import type { ChangeLayerEvent } from "./Events/ChangeLayerEvent";
 import type { WasCameraUpdatedEvent } from "./Events/WasCameraUpdatedEvent";
-import type { ChangeZoneEvent } from "./Events/ChangeZoneEvent";
+import type { ChangeAreaEvent } from "./Events/ChangeAreaEvent";
 import { CameraSetEvent } from "./Events/CameraSetEvent";
 import { CameraFollowPlayerEvent } from "./Events/CameraFollowPlayerEvent";
 import type { RemotePlayerClickedEvent } from "./Events/RemotePlayerClickedEvent";
@@ -445,21 +445,21 @@ class IframeListener {
         });
     }
 
-    sendEnterZoneEvent(zoneName: string) {
+    sendEnterAreaEvent(areaName: string) {
         this.postMessage({
-            type: "enterZoneEvent",
+            type: "enterAreaEvent",
             data: {
-                name: zoneName,
+                name: areaName,
-            } as ChangeZoneEvent,
+            } as ChangeAreaEvent,
         });
     }
 
-    sendLeaveZoneEvent(zoneName: string) {
+    sendLeaveAreaEvent(areaName: string) {
         this.postMessage({
-            type: "leaveZoneEvent",
+            type: "leaveAreaEvent",
             data: {
-                name: zoneName,
+                name: areaName,
-            } as ChangeZoneEvent,
+            } as ChangeAreaEvent,
         });
     }
 

front/src/Phaser/Game/GameMap.ts

@@ -22,9 +22,9 @@ export type layerChangeCallback = (
     allLayersOnNewPosition: Array<ITiledMapLayer>
 ) => void;
 
-export type zoneChangeCallback = (
+export type areaChangeCallback = (
-    zonesChangedByAction: Array<ITiledMapObject>,
+    areasChangedByAction: Array<ITiledMapObject>,
-    allZonesOnNewPosition: Array<ITiledMapObject>
+    allAreasOnNewPosition: Array<ITiledMapObject>
 ) => void;
 
 /**
@@ -54,8 +54,8 @@ export class GameMap {
 
     private enterLayerCallbacks = Array<layerChangeCallback>();
     private leaveLayerCallbacks = Array<layerChangeCallback>();
-    private enterZoneCallbacks = Array<zoneChangeCallback>();
+    private enterAreaCallbacks = Array<areaChangeCallback>();
-    private leaveZoneCallbacks = Array<zoneChangeCallback>();
+    private leaveAreaCallbacks = Array<areaChangeCallback>();
 
     private tileNameMap = new Map<string, number>();
 
@@ -63,7 +63,9 @@ export class GameMap {
     public readonly flatLayers: ITiledMapLayer[];
     public readonly tiledObjects: ITiledMapObject[];
     public readonly phaserLayers: TilemapLayer[] = [];
-    public readonly zones: ITiledMapObject[] = [];
+    public readonly areas: ITiledMapObject[] = [];
+
+    private readonly areasPositionOffsetY: number = 16;
 
     public exitUrls: Array<string> = [];
 
@@ -76,7 +78,8 @@ export class GameMap {
     ) {
         this.flatLayers = flattenGroupLayersMap(map);
         this.tiledObjects = this.getObjectsFromLayers(this.flatLayers);
-        this.zones = this.tiledObjects.filter((object) => object.type === "zone");
+        // NOTE: We leave "zone" for legacy reasons
+        this.areas = this.tiledObjects.filter((object) => ["zone", "area"].includes(object.type));
 
         let depth = -2;
         for (const layer of this.flatLayers) {
@@ -148,7 +151,10 @@ export class GameMap {
     public setPosition(x: number, y: number) {
         this.oldPosition = this.position;
         this.position = { x, y };
-        this.triggerZonesChange();
+        const areasChanged = this.triggerAreasChange();
+        if (areasChanged) {
+            this.triggerAllProperties();
+        }
 
         this.oldKey = this.key;
 
@@ -201,21 +207,17 @@ export class GameMap {
     }
 
     /**
-     * Registers a callback called when the user moves inside another zone.
+     * Registers a callback called when the user moves inside another area.
-     *
-     * @deprecated
      */
-    public onEnterZone(callback: zoneChangeCallback) {
+    public onEnterArea(callback: areaChangeCallback) {
-        this.enterZoneCallbacks.push(callback);
+        this.enterAreaCallbacks.push(callback);
     }
 
     /**
-     * Registers a callback called when the user moves outside another zone.
+     * Registers a callback called when the user moves outside another area.
-     *
-     * @deprecated
      */
-    public onLeaveZone(callback: zoneChangeCallback) {
+    public onLeaveArea(callback: areaChangeCallback) {
-        this.leaveZoneCallbacks.push(callback);
+        this.leaveAreaCallbacks.push(callback);
     }
 
     public findLayer(layerName: string): ITiledMapLayer | undefined {
@@ -424,55 +426,56 @@ export class GameMap {
     }
 
     /**
-     * We use Tiled Objects with type "zone" as zones with defined x, y, width and height for easier event triggering.
+     * We use Tiled Objects with type "area" as areas with defined x, y, width and height for easier event triggering.
+     * @returns If there were any areas changes
      */
-    private triggerZonesChange(): void {
+    private triggerAreasChange(): boolean {
-        const zonesByOldPosition = this.oldPosition
+        const areasByOldPosition = this.getAreasOnPosition(this.oldPosition, this.areasPositionOffsetY);
-            ? this.zones.filter((zone) => {
+        const areasByNewPosition = this.getAreasOnPosition(this.position, this.areasPositionOffsetY);
-                  if (!this.oldPosition) {
-                      return false;
-                  }
-                  return MathUtils.isOverlappingWithRectangle(this.oldPosition, zone);
-              })
-            : [];
 
-        const zonesByNewPosition = this.position
+        const enterAreas = new Set(areasByNewPosition);
-            ? this.zones.filter((zone) => {
+        const leaveAreas = new Set(areasByOldPosition);
-                  if (!this.position) {
-                      return false;
-                  }
-                  return MathUtils.isOverlappingWithRectangle(this.position, zone);
-              })
-            : [];
 
-        const enterZones = new Set(zonesByNewPosition);
+        enterAreas.forEach((area) => {
-        const leaveZones = new Set(zonesByOldPosition);
+            if (leaveAreas.has(area)) {
-
+                leaveAreas.delete(area);
-        enterZones.forEach((zone) => {
+                enterAreas.delete(area);
-            if (leaveZones.has(zone)) {
-                leaveZones.delete(zone);
-                enterZones.delete(zone);
             }
         });
 
-        if (enterZones.size > 0) {
+        let areasChange = false;
-            const zonesArray = Array.from(enterZones);
+        if (enterAreas.size > 0) {
-            for (const callback of this.enterZoneCallbacks) {
+            const areasArray = Array.from(enterAreas);
-                callback(zonesArray, zonesByNewPosition);
+            for (const callback of this.enterAreaCallbacks) {
+                callback(areasArray, areasByNewPosition);
             }
+            areasChange = true;
         }
 
-        if (leaveZones.size > 0) {
+        if (leaveAreas.size > 0) {
-            const zonesArray = Array.from(leaveZones);
+            const areasArray = Array.from(leaveAreas);
-            for (const callback of this.leaveZoneCallbacks) {
+            for (const callback of this.leaveAreaCallbacks) {
-                callback(zonesArray, zonesByNewPosition);
+                callback(areasArray, areasByNewPosition);
             }
+            areasChange = true;
         }
+        return areasChange;
     }
 
     private getProperties(key: number): Map<string, string | boolean | number> {
         const properties = new Map<string, string | boolean | number>();
 
+        for (const area of this.getAreasOnPosition(this.position, this.areasPositionOffsetY)) {
+            if (area.properties !== undefined) {
+                for (const property of area.properties) {
+                    if (property.value === undefined) {
+                        continue;
+                    }
+                    properties.set(property.name, property.value);
+                }
+            }
+        }
+
         for (const layer of this.flatLayers) {
             if (layer.type !== "tilelayer") {
                 continue;
@@ -511,6 +514,17 @@ export class GameMap {
         return properties;
     }
 
+    private getAreasOnPosition(position?: { x: number; y: number }, offsetY: number = 0): ITiledMapObject[] {
+        return position
+            ? this.areas.filter((area) => {
+                  if (!position) {
+                      return false;
+                  }
+                  return MathUtils.isOverlappingWithRectangle({ x: position.x, y: position.y + offsetY }, area);
+              })
+            : [];
+    }
+
     private getTileProperty(index: number): Array<ITiledMapProperty> {
         if (this.tileSetPropertyMap[index]) {
             return this.tileSetPropertyMap[index];

front/src/Phaser/Game/GameMapProperties.ts

@@ -7,6 +7,7 @@ export enum GameMapProperties {
     EXIT_URL = "exitUrl",
     EXIT_SCENE_URL = "exitSceneUrl",
     FONT_FAMILY = "font-family",
+    FOCUSABLE = "focusable",
     JITSI_ADMIN_ROOM_TAG = "jitsiRoomAdminTag",
     JITSI_CONFIG = "jitsiConfig",
     JITSI_INTERFACE_CONFIG = "jitsiInterfaceConfig",
@@ -36,4 +37,5 @@ export enum GameMapProperties {
     URL = "url",
     WRITABLE_BY = "writableBy",
     ZONE = "zone",
+    ZOOM_MARGIN = "zoom_margin",
 }

front/src/Phaser/Game/GameMapPropertiesListener.ts

@@ -6,7 +6,7 @@ import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
 import { localUserStore } from "../../Connexion/LocalUserStore";
 import { get } from "svelte/store";
 import { ON_ACTION_TRIGGER_BUTTON, ON_ICON_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
-import type { ITiledMapLayer } from "../Map/ITiledMap";
+import type { ITiledMapProperty } from "../Map/ITiledMap";
 import { GameMapProperties } from "./GameMapProperties";
 import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
 import { SimpleCoWebsite } from "../../WebRtc/CoWebsite/SimpleCoWebsite";
@@ -23,9 +23,21 @@ interface OpenCoWebsite {
     coWebsite?: CoWebsite;
 }
 
+/**
+ * Either Layer or Object within Objects Layer in Tiled
+ */
+export interface ITiledPlace {
+    name: string;
+    properties?: ITiledMapProperty[];
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+
 export class GameMapPropertiesListener {
-    private coWebsitesOpenByLayer = new Map<ITiledMapLayer, OpenCoWebsite>();
+    private coWebsitesOpenByPlace = new Map<ITiledPlace, OpenCoWebsite>();
-    private coWebsitesActionTriggerByLayer = new Map<ITiledMapLayer, string>();
+    private coWebsitesActionTriggerByPlace = new Map<ITiledPlace, string>();
 
     constructor(private scene: GameScene, private gameMap: GameMap) {}
 
@@ -183,193 +195,241 @@ export class GameMapPropertiesListener {
             }
         });
 
-        // Open a new co-website by the property.
         this.gameMap.onEnterLayer((newLayers) => {
-            const handler = () => {
+            this.onEnterPlaceHandler(newLayers);
-                newLayers.forEach((layer) => {
-                    if (!layer.properties) {
-                        return;
-                    }
-
-                    let openWebsiteProperty: string | undefined;
-                    let allowApiProperty: boolean | undefined;
-                    let websitePolicyProperty: string | undefined;
-                    let websiteWidthProperty: number | undefined;
-                    let websitePositionProperty: number | undefined;
-                    let websiteTriggerProperty: string | undefined;
-                    let websiteTriggerMessageProperty: string | undefined;
-
-                    layer.properties.forEach((property) => {
-                        switch (property.name) {
-                            case GameMapProperties.OPEN_WEBSITE:
-                                openWebsiteProperty = property.value as string | undefined;
-                                break;
-                            case GameMapProperties.OPEN_WEBSITE_ALLOW_API:
-                                allowApiProperty = property.value as boolean | undefined;
-                                break;
-                            case GameMapProperties.OPEN_WEBSITE_POLICY:
-                                websitePolicyProperty = property.value as string | undefined;
-                                break;
-                            case GameMapProperties.OPEN_WEBSITE_WIDTH:
-                                websiteWidthProperty = property.value as number | undefined;
-                                break;
-                            case GameMapProperties.OPEN_WEBSITE_POSITION:
-                                websitePositionProperty = property.value as number | undefined;
-                                break;
-                            case GameMapProperties.OPEN_WEBSITE_TRIGGER:
-                                websiteTriggerProperty = property.value as string | undefined;
-                                break;
-                            case GameMapProperties.OPEN_WEBSITE_TRIGGER_MESSAGE:
-                                websiteTriggerMessageProperty = property.value as string | undefined;
-                                break;
-                        }
-                    });
-
-                    if (!openWebsiteProperty) {
-                        return;
-                    }
-
-                    const actionId = "openWebsite-" + (Math.random() + 1).toString(36).substring(7);
-
-                    if (this.coWebsitesOpenByLayer.has(layer)) {
-                        return;
-                    }
-
-                    const coWebsiteOpen: OpenCoWebsite = {
-                        actionId: actionId,
-                    };
-
-                    this.coWebsitesOpenByLayer.set(layer, coWebsiteOpen);
-
-                    const loadCoWebsiteFunction = (coWebsite: CoWebsite) => {
-                        coWebsiteManager.loadCoWebsite(coWebsite).catch(() => {
-                            console.error("Error during loading a co-website: " + coWebsite.getUrl());
-                        });
-
-                        layoutManagerActionStore.removeAction(actionId);
-                    };
-
-                    const openCoWebsiteFunction = () => {
-                        const coWebsite = new SimpleCoWebsite(
-                            new URL(openWebsiteProperty ?? "", this.scene.MapUrlFile),
-                            allowApiProperty,
-                            websitePolicyProperty,
-                            websiteWidthProperty,
-                            false
-                        );
-
-                        coWebsiteOpen.coWebsite = coWebsite;
-
-                        coWebsiteManager.addCoWebsiteToStore(coWebsite, websitePositionProperty);
-
-                        loadCoWebsiteFunction(coWebsite);
-                    };
-
-                    if (
-                        localUserStore.getForceCowebsiteTrigger() ||
-                        websiteTriggerProperty === ON_ACTION_TRIGGER_BUTTON
-                    ) {
-                        if (!websiteTriggerMessageProperty) {
-                            websiteTriggerMessageProperty = get(LL).trigger.cowebsite();
-                        }
-
-                        this.coWebsitesActionTriggerByLayer.set(layer, actionId);
-
-                        layoutManagerActionStore.addAction({
-                            uuid: actionId,
-                            type: "message",
-                            message: websiteTriggerMessageProperty,
-                            callback: () => openCoWebsiteFunction(),
-                            userInputManager: this.scene.userInputManager,
-                        });
-                    } else if (websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) {
-                        const coWebsite = new SimpleCoWebsite(
-                            new URL(openWebsiteProperty ?? "", this.scene.MapUrlFile),
-                            allowApiProperty,
-                            websitePolicyProperty,
-                            websiteWidthProperty,
-                            false
-                        );
-
-                        coWebsiteOpen.coWebsite = coWebsite;
-
-                        coWebsiteManager.addCoWebsiteToStore(coWebsite, websitePositionProperty);
-                    }
-
-                    if (!websiteTriggerProperty) {
-                        openCoWebsiteFunction();
-                    }
-                });
-            };
-
-            handler();
         });
 
-        // Close opened co-websites on leave the layer who contain the property.
         this.gameMap.onLeaveLayer((oldLayers) => {
-            const handler = () => {
+            this.onLeavePlaceHandler(oldLayers);
-                oldLayers.forEach((layer) => {
+        });
-                    if (!layer.properties) {
-                        return;
-                    }
 
-                    let openWebsiteProperty: string | undefined;
+        this.gameMap.onEnterArea((newAreas) => {
-                    let websiteTriggerProperty: string | undefined;
+            this.onEnterPlaceHandler(newAreas);
+        });
 
-                    layer.properties.forEach((property) => {
+        this.gameMap.onLeaveArea((oldAreas) => {
-                        switch (property.name) {
+            this.onLeavePlaceHandler(oldAreas);
-                            case GameMapProperties.OPEN_WEBSITE:
-                                openWebsiteProperty = property.value as string | undefined;
-                                break;
-                            case GameMapProperties.OPEN_WEBSITE_TRIGGER:
-                                websiteTriggerProperty = property.value as string | undefined;
-                                break;
-                        }
-                    });
-
-                    if (!openWebsiteProperty) {
-                        return;
-                    }
-
-                    const coWebsiteOpen = this.coWebsitesOpenByLayer.get(layer);
-
-                    if (!coWebsiteOpen) {
-                        return;
-                    }
-
-                    const coWebsite = coWebsiteOpen.coWebsite;
-
-                    if (coWebsite) {
-                        coWebsiteManager.closeCoWebsite(coWebsite);
-                    }
-
-                    this.coWebsitesOpenByLayer.delete(layer);
-
-                    if (!websiteTriggerProperty) {
-                        return;
-                    }
-
-                    const actionStore = get(layoutManagerActionStore);
-                    const actionTriggerUuid = this.coWebsitesActionTriggerByLayer.get(layer);
-
-                    if (!actionTriggerUuid) {
-                        return;
-                    }
-
-                    const action =
-                        actionStore && actionStore.length > 0
-                            ? actionStore.find((action) => action.uuid === actionTriggerUuid)
-                            : undefined;
-
-                    if (action) {
-                        layoutManagerActionStore.removeAction(actionTriggerUuid);
-                    }
-
-                    this.coWebsitesActionTriggerByLayer.delete(layer);
-                });
-            };
-
-            handler();
         });
     }
+
+    private onEnterPlaceHandler(places: ITiledPlace[]): void {
+        places.forEach((place) => {
+            this.handleOpenWebsitePropertiesOnEnter(place);
+            this.handleFocusablePropertiesOnEnter(place);
+        });
+    }
+
+    private onLeavePlaceHandler(places: ITiledPlace[]): void {
+        places.forEach((place) => {
+            if (!place.properties) {
+                return;
+            }
+
+            this.handleOpenWebsitePropertiesOnLeave(place);
+            this.handleFocusablePropertiesOnLeave(place);
+        });
+    }
+
+    private handleOpenWebsitePropertiesOnEnter(place: ITiledPlace): void {
+        if (!place.properties) {
+            return;
+        }
+        let openWebsiteProperty: string | undefined;
+        let allowApiProperty: boolean | undefined;
+        let websitePolicyProperty: string | undefined;
+        let websiteWidthProperty: number | undefined;
+        let websitePositionProperty: number | undefined;
+        let websiteTriggerProperty: string | undefined;
+        let websiteTriggerMessageProperty: string | undefined;
+
+        place.properties.forEach((property) => {
+            switch (property.name) {
+                case GameMapProperties.OPEN_WEBSITE:
+                    openWebsiteProperty = property.value as string | undefined;
+                    break;
+                case GameMapProperties.OPEN_WEBSITE_ALLOW_API:
+                    allowApiProperty = property.value as boolean | undefined;
+                    break;
+                case GameMapProperties.OPEN_WEBSITE_POLICY:
+                    websitePolicyProperty = property.value as string | undefined;
+                    break;
+                case GameMapProperties.OPEN_WEBSITE_WIDTH:
+                    websiteWidthProperty = property.value as number | undefined;
+                    break;
+                case GameMapProperties.OPEN_WEBSITE_POSITION:
+                    websitePositionProperty = property.value as number | undefined;
+                    break;
+                case GameMapProperties.OPEN_WEBSITE_TRIGGER:
+                    websiteTriggerProperty = property.value as string | undefined;
+                    break;
+                case GameMapProperties.OPEN_WEBSITE_TRIGGER_MESSAGE:
+                    websiteTriggerMessageProperty = property.value as string | undefined;
+                    break;
+            }
+        });
+
+        if (!openWebsiteProperty) {
+            return;
+        }
+
+        const actionId = "openWebsite-" + (Math.random() + 1).toString(36).substring(7);
+
+        if (this.coWebsitesOpenByPlace.has(place)) {
+            return;
+        }
+
+        const coWebsiteOpen: OpenCoWebsite = {
+            actionId: actionId,
+        };
+
+        this.coWebsitesOpenByPlace.set(place, coWebsiteOpen);
+
+        const loadCoWebsiteFunction = (coWebsite: CoWebsite) => {
+            coWebsiteManager.loadCoWebsite(coWebsite).catch(() => {
+                console.error("Error during loading a co-website: " + coWebsite.getUrl());
+            });
+
+            layoutManagerActionStore.removeAction(actionId);
+        };
+
+        const openCoWebsiteFunction = () => {
+            const coWebsite = new SimpleCoWebsite(
+                new URL(openWebsiteProperty ?? "", this.scene.MapUrlFile),
+                allowApiProperty,
+                websitePolicyProperty,
+                websiteWidthProperty,
+                false
+            );
+
+            coWebsiteOpen.coWebsite = coWebsite;
+
+            coWebsiteManager.addCoWebsiteToStore(coWebsite, websitePositionProperty);
+
+            loadCoWebsiteFunction(coWebsite);
+        };
+
+        if (localUserStore.getForceCowebsiteTrigger() || websiteTriggerProperty === ON_ACTION_TRIGGER_BUTTON) {
+            if (!websiteTriggerMessageProperty) {
+                websiteTriggerMessageProperty = get(LL).trigger.cowebsite();
+            }
+
+            this.coWebsitesActionTriggerByPlace.set(place, actionId);
+
+            layoutManagerActionStore.addAction({
+                uuid: actionId,
+                type: "message",
+                message: websiteTriggerMessageProperty,
+                callback: () => openCoWebsiteFunction(),
+                userInputManager: this.scene.userInputManager,
+            });
+        } else if (websiteTriggerProperty === ON_ICON_TRIGGER_BUTTON) {
+            const coWebsite = new SimpleCoWebsite(
+                new URL(openWebsiteProperty ?? "", this.scene.MapUrlFile),
+                allowApiProperty,
+                websitePolicyProperty,
+                websiteWidthProperty,
+                false
+            );
+
+            coWebsiteOpen.coWebsite = coWebsite;
+
+            coWebsiteManager.addCoWebsiteToStore(coWebsite, websitePositionProperty);
+        }
+
+        if (!websiteTriggerProperty) {
+            openCoWebsiteFunction();
+        }
+    }
+
+    private handleFocusablePropertiesOnEnter(place: ITiledPlace): void {
+        if (!place.properties) {
+            return;
+        }
+        if (place.x === undefined || place.y === undefined || !place.height || !place.width) {
+            return;
+        }
+        const focusable = place.properties.find((property) => property.name === GameMapProperties.FOCUSABLE);
+        if (focusable && focusable.value === true) {
+            const zoomMargin = place.properties.find((property) => property.name === GameMapProperties.ZOOM_MARGIN);
+            this.scene.getCameraManager().enterFocusMode(
+                {
+                    x: place.x + place.width * 0.5,
+                    y: place.y + place.height * 0.5,
+                    width: place.width,
+                    height: place.height,
+                },
+                zoomMargin ? Math.max(0, Number(zoomMargin.value)) : undefined
+            );
+        }
+    }
+
+    private handleOpenWebsitePropertiesOnLeave(place: ITiledPlace): void {
+        if (!place.properties) {
+            return;
+        }
+
+        let openWebsiteProperty: string | undefined;
+        let websiteTriggerProperty: string | undefined;
+
+        place.properties.forEach((property) => {
+            switch (property.name) {
+                case GameMapProperties.OPEN_WEBSITE:
+                    openWebsiteProperty = property.value as string | undefined;
+                    break;
+                case GameMapProperties.OPEN_WEBSITE_TRIGGER:
+                    websiteTriggerProperty = property.value as string | undefined;
+                    break;
+            }
+        });
+
+        if (!openWebsiteProperty) {
+            return;
+        }
+
+        const coWebsiteOpen = this.coWebsitesOpenByPlace.get(place);
+
+        if (!coWebsiteOpen) {
+            return;
+        }
+
+        const coWebsite = coWebsiteOpen.coWebsite;
+
+        if (coWebsite) {
+            coWebsiteManager.closeCoWebsite(coWebsite);
+        }
+
+        this.coWebsitesOpenByPlace.delete(place);
+
+        if (!websiteTriggerProperty) {
+            return;
+        }
+
+        const actionStore = get(layoutManagerActionStore);
+        const actionTriggerUuid = this.coWebsitesActionTriggerByPlace.get(place);
+
+        if (!actionTriggerUuid) {
+            return;
+        }
+
+        const action =
+            actionStore && actionStore.length > 0
+                ? actionStore.find((action) => action.uuid === actionTriggerUuid)
+                : undefined;
+
+        if (action) {
+            layoutManagerActionStore.removeAction(actionTriggerUuid);
+        }
+
+        this.coWebsitesActionTriggerByPlace.delete(place);
+    }
+
+    private handleFocusablePropertiesOnLeave(place: ITiledPlace): void {
+        if (!place.properties) {
+            return;
+        }
+        const focusable = place.properties.find((property) => property.name === GameMapProperties.FOCUSABLE);
+        if (focusable && focusable.value === true) {
+            this.scene.getCameraManager().leaveFocusMode(this.scene.CurrentPlayer, 1000);
+        }
+    }
 }

front/src/Phaser/Game/GameScene.ts

@@ -907,38 +907,15 @@ export class GameScene extends DirtyScene {
                     });
                 });
 
-                this.gameMap.onEnterZone((zones) => {
+                this.gameMap.onEnterArea((areas) => {
-                    for (const zone of zones) {
+                    areas.forEach((area) => {
-                        const focusable = zone.properties?.find((property) => property.name === "focusable");
+                        iframeListener.sendEnterAreaEvent(area.name);
-                        if (focusable && focusable.value === true) {
-                            const zoomMargin = zone.properties?.find((property) => property.name === "zoom_margin");
-                            this.cameraManager.enterFocusMode(
-                                {
-                                    x: zone.x + zone.width * 0.5,
-                                    y: zone.y + zone.height * 0.5,
-                                    width: zone.width,
-                                    height: zone.height,
-                                },
-                                zoomMargin ? Math.max(0, Number(zoomMargin.value)) : undefined
-                            );
-                            break;
-                        }
-                    }
-                    zones.forEach((zone) => {
-                        iframeListener.sendEnterZoneEvent(zone.name);
                     });
                 });
 
-                this.gameMap.onLeaveZone((zones) => {
+                this.gameMap.onLeaveArea((areas) => {
-                    for (const zone of zones) {
+                    areas.forEach((area) => {
-                        const focusable = zone.properties?.find((property) => property.name === "focusable");
+                        iframeListener.sendLeaveAreaEvent(area.name);
-                        if (focusable && focusable.value === true) {
-                            this.cameraManager.leaveFocusMode(this.CurrentPlayer, 1000);
-                            break;
-                        }
-                    }
-                    zones.forEach((zone) => {
-                        iframeListener.sendLeaveZoneEvent(zone.name);
                     });
                 });
 

maps/tests/index.html

@@ -50,10 +50,10 @@
                 </tr>
                 <tr>
                     <td>
-                        <input type="radio" name="test-door-map"> Success <input type="radio" name="test-door-map"> Failure <input type="radio" name="test-door-map" checked> Pending
+                        <input type="radio" name="test-pathfinding"> Success <input type="radio" name="test-pathfinding"> Failure <input type="radio" name="test-pathfinding" checked> Pending
                     </td>
                     <td>
-                        <a href="#" class="testLink" data-testmap="DoorTest/map.json" target="_blank">Test Doors</a>
+                        <a href="#" class="testLink" data-testmap="Pathfinding/map.json" target="_blank">Test Pathfinding</a>
                     </td>
                 </tr>
                 <tr>
@@ -168,6 +168,14 @@
                         <a href="#" class="testLink" data-testmap="layer-visibility.json" target="_blank">Layer visibility + Layer size and offset</a>
                     </td>
                 </tr>
+                <tr>
+                    <td>
+                        <input type="radio" name="test-tiled-objects"> Success <input type="radio" name="test-tiled-objects"> Failure <input type="radio" name="test-tiled-objects" checked> Pending
+                    </td>
+                    <td>
+                        <a href="#" class="testLink" data-testmap="tiled_objects.json" target="_blank">Test Tiled Objects with properties</a>
+                    </td>
+                </tr>
             </table>
             <h2>Iframe API</h2>
             <table class="table">

maps/tests/tiled_objects.json

@@ -0,0 +1,427 @@
+{ "compressionlevel":-1,
+ "height":17,
+ "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, 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, 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, 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, 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, 444, 444, 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, 444, 444, 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, 444, 444, 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, 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, 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":17,
+         "id":6,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":31,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[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, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 0, 0, 0, 0, 0, 0, 443, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 443, 0, 0, 0, 0, 0, 0, 0, 443, 443, 0, 0, 0, 0, 0, 0, 443, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 443, 0, 0, 0, 0, 0, 0, 0, 443, 443, 0, 0, 0, 0, 0, 0, 443, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 443, 0, 0, 0, 0, 0, 0, 0, 443, 443, 0, 0, 0, 0, 0, 0, 443, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 443, 0, 0, 0, 0, 0, 0, 0, 443, 443, 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, 443, 443, 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, 443, 443, 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, 443, 443, 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, 443, 443, 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, 443, 443, 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, 443, 443, 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, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 443, 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":17,
+         "id":7,
+         "name":"collisions",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":31,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 223, 223, 223, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 234, 234, 234, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 223, 223, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 223, 223, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 223, 223, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 223, 223, 223, 223, 223, 223, 223, 223, 201, 234, 234, 234, 234, 234, 234, 234, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201, 201],
+         "height":17,
+         "id":4,
+         "name":"floor",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":31,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[49, 58, 58, 58, 58, 58, 58, 42, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 42, 57, 57, 57, 57, 57, 57, 57, 50, 45, 63, 63, 63, 63, 63, 63, 45, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 45, 63, 63, 63, 63, 63, 63, 63, 45, 45, 73, 73, 73, 73, 73, 73, 45, 73, 73, 73, 73, 73, 73, 73, 73, 73, 73, 73, 73, 73, 73, 45, 73, 73, 73, 73, 73, 73, 73, 45, 45, 0, 0, 0, 0, 0, 0, 45, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 45, 0, 0, 0, 0, 0, 0, 0, 45, 45, 0, 0, 0, 0, 0, 0, 56, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 56, 0, 0, 0, 0, 0, 0, 0, 45, 45, 0, 0, 0, 0, 0, 0, 63, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 63, 0, 0, 0, 0, 0, 0, 0, 45, 45, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 73, 0, 0, 0, 0, 0, 0, 0, 45, 45, 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, 45, 45, 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, 45, 45, 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, 45, 45, 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, 45, 45, 212, 212, 212, 212, 212, 212, 212, 212, 212, 212, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 45, 45, 212, 212, 212, 212, 212, 212, 212, 212, 212, 212, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 45, 45, 212, 212, 212, 212, 212, 212, 212, 212, 212, 212, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 45, 59, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 58, 32, 58, 58, 58, 58, 58, 58, 58, 60, 83, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 84, 93, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 63, 94],
+         "height":17,
+         "id":9,
+         "name":"walls",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":31,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":2,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "ellipse":true,
+                 "height":128,
+                 "id":9,
+                 "name":"",
+                 "properties":[
+                        {
+                         "name":"jitsiRoom",
+                         "type":"string",
+                         "value":"Chill Room"
+                        }, 
+                        {
+                         "name":"jitsiTrigger",
+                         "type":"string",
+                         "value":"onaction"
+                        }],
+                 "rotation":0,
+                 "type":"area",
+                 "visible":true,
+                 "width":320,
+                 "x":317.331510594668,
+                 "y":97.6404647983595
+                }, 
+                {
+                 "height":130.187286397813,
+                 "id":11,
+                 "name":"",
+                 "properties":[
+                        {
+                         "name":"jitsiRoom",
+                         "type":"string",
+                         "value":"MeetingRoom"
+                        }],
+                 "rotation":0,
+                 "type":"area",
+                 "visible":true,
+                 "width":192.568694463431,
+                 "x":30.738664843928,
+                 "y":94.0241512873092
+                }, 
+                {
+                 "height":97.8323080428344,
+                 "id":12,
+                 "name":"silent zone area",
+                 "properties":[
+                        {
+                         "name":"silent",
+                         "type":"bool",
+                         "value":true
+                        }],
+                 "rotation":0,
+                 "type":"area",
+                 "visible":true,
+                 "width":225.115516062885,
+                 "x":735.919799498747,
+                 "y":352.398724082935
+                }, 
+                {
+                 "height":62.2854864433812,
+                 "id":13,
+                 "name":"",
+                 "properties":[
+                        {
+                         "name":"focusable",
+                         "type":"bool",
+                         "value":true
+                        }, 
+                        {
+                         "name":"openWebsite",
+                         "type":"string",
+                         "value":"https:\/\/www.youtube.com\/embed\/CvXUGIm_hkA?list=RDCvXUGIm_hkA"
+                        }],
+                 "rotation":0,
+                 "type":"area",
+                 "visible":true,
+                 "width":96.736386420597,
+                 "x":799.205285942128,
+                 "y":96.736386420597
+                }, 
+                {
+                 "height":127.762816131237,
+                 "id":15,
+                 "name":"",
+                 "properties":[
+                        {
+                         "name":"focusable",
+                         "type":"bool",
+                         "value":true
+                        }, 
+                        {
+                         "name":"zoom_margin",
+                         "type":"float",
+                         "value":0.5
+                        }],
+                 "rotation":0,
+                 "type":"area",
+                 "visible":true,
+                 "width":254.95010252905,
+                 "x":448.422875370244,
+                 "y":319.947824105719
+                }, 
+                {
+                 "height":19,
+                 "id":17,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"FOCUSABLE ",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":93.848940533151,
+                 "x":529.877534745956,
+                 "y":358.459899749373
+                }, 
+                {
+                 "height":19,
+                 "id":18,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"JITSI ON TRIGGER",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":164.367053998633,
+                 "x":408.731032125769,
+                 "y":150.521872863978
+                }, 
+                {
+                 "height":19,
+                 "id":19,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"JITSI",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":43.2205513784461,
+                 "x":100.440305308726,
+                 "y":147.80963773069
+                }, 
+                {
+                 "height":102.175210754158,
+                 "id":20,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "halign":"center",
+                     "text":"OPEN WEBSITE AND FOCUSABLE",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":99.2734107997265,
+                 "x":796.580656185919,
+                 "y":102.605718842561
+                }, 
+                {
+                 "height":19,
+                 "id":21,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "text":"SILENT ZONE",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":112.834586466165,
+                 "x":799.292891319207,
+                 "y":391.910799726589
+                }, 
+                {
+                 "height":95.892082727209,
+                 "id":22,
+                 "name":"",
+                 "properties":[
+                        {
+                         "name":"focusable",
+                         "type":"bool",
+                         "value":true
+                        }],
+                 "rotation":359.800363945476,
+                 "type":"",
+                 "visible":true,
+                 "width":318.187448731897,
+                 "x":32.4024392837801,
+                 "y":352.890077348834
+                }, 
+                {
+                 "height":43.4101161995899,
+                 "id":23,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "halign":"center",
+                     "text":"THIS SHOULD NOT TRIGGER ANYTHING (TYPE IS NOT 'AREA')",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":288.225791752108,
+                 "x":41.6752107541581,
+                 "y":381.965937571201
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":40,
+ "nextobjectid":24,
+ "orientation":"orthogonal",
+ "properties":[
+        {
+         "name":"mapCopyright",
+         "type":"string",
+         "value":"Credits: Valdo Romao https:\/\/www.linkedin.com\/in\/valdo-romao\/ \nLicense: CC-BY-SA 3.0 (http:\/\/creativecommons.org\/licenses\/by-sa\/3.0\/)"
+        }, 
+        {
+         "name":"mapDescription",
+         "type":"string",
+         "value":"A perfect virtual office to get started with WorkAdventure!"
+        }, 
+        {
+         "name":"mapImage",
+         "type":"string",
+         "value":"map.png"
+        }, 
+        {
+         "name":"mapLink",
+         "type":"string",
+         "value":"https:\/\/thecodingmachine.github.io\/workadventure-map-starter-kit\/map.json"
+        }, 
+        {
+         "name":"mapName",
+         "type":"string",
+         "value":"Starter kit"
+        }, 
+        {
+         "name":"script",
+         "type":"string",
+         "value":"..\/dist\/script.js"
+        }],
+ "renderorder":"right-down",
+ "tiledversion":"1.7.2",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":10,
+         "firstgid":1,
+         "image":"..\/assets\/tileset5_export.png",
+         "imageheight":320,
+         "imagewidth":320,
+         "margin":0,
+         "name":"tileset5_export",
+         "properties":[
+                {
+                 "name":"tilesetCopyright",
+                 "type":"string",
+                 "value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
+                }],
+         "spacing":0,
+         "tilecount":100,
+         "tileheight":32,
+         "tilewidth":32
+        }, 
+        {
+         "columns":10,
+         "firstgid":101,
+         "image":"..\/assets\/tileset6_export.png",
+         "imageheight":320,
+         "imagewidth":320,
+         "margin":0,
+         "name":"tileset6_export",
+         "properties":[
+                {
+                 "name":"tilesetCopyright",
+                 "type":"string",
+                 "value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
+                }],
+         "spacing":0,
+         "tilecount":100,
+         "tileheight":32,
+         "tilewidth":32
+        }, 
+        {
+         "columns":11,
+         "firstgid":201,
+         "image":"..\/assets\/tileset1.png",
+         "imageheight":352,
+         "imagewidth":352,
+         "margin":0,
+         "name":"tileset1",
+         "properties":[
+                {
+                 "name":"tilesetCopyright",
+                 "type":"string",
+                 "value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
+                }],
+         "spacing":0,
+         "tilecount":121,
+         "tileheight":32,
+         "tilewidth":32
+        }, 
+        {
+         "columns":11,
+         "firstgid":322,
+         "image":"..\/assets\/tileset1-repositioning.png",
+         "imageheight":352,
+         "imagewidth":352,
+         "margin":0,
+         "name":"tileset1-repositioning",
+         "properties":[
+                {
+                 "name":"tilesetCopyright",
+                 "type":"string",
+                 "value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
+                }],
+         "spacing":0,
+         "tilecount":121,
+         "tileheight":32,
+         "tilewidth":32
+        }, 
+        {
+         "columns":6,
+         "firstgid":443,
+         "image":"..\/assets\/Special_Zones.png",
+         "imageheight":64,
+         "imagewidth":192,
+         "margin":0,
+         "name":"Special_Zones",
+         "properties":[
+                {
+                 "name":"tilesetCopyright",
+                 "type":"string",
+                 "value":"\u00a9 2021 WorkAdventure <https:\/\/workadventu.re\/> \nLicence: WORKADVENTURE SPECIFIC RESOURCES LICENSE (see LICENSE.assets file)"
+                }],
+         "spacing":0,
+         "tilecount":12,
+         "tileheight":32,
+         "tiles":[
+                {
+                 "id":0,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }],
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":"1.6",
+ "width":31
+}