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

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 the name of the instance of the map (so that different instances of the map have different rooms)
+* 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`
@@ -82,3 +87,15 @@ and not
 {.alert.alert-info}
 When you use `jitsiUrl`, the targeted Jitsi instance must be public. You cannot use moderation features or the JWT 
 tokens authentication with maps configured using the `jitsiUrl` property.
+
+## Full control over the Jitsi room name
+
+By default, the name of the room will be "slugified" and prepended with a hash of the room URL.
+This is what you want most of the time. Indeed, different maps with the same Jitsi room name (the same `jitsiRoom` property) will not share the same Jitsi room instance.
+
+However, sometimes, you may actually want to have different WorkAdventure meeting rooms that are actually sharing
+the same Jitsi meet meeting room. Or if you are pointing to a custom Jitsi server (using the `jitsiUrl` property),
+you may want to point to a specific existing room.
+
+For all those use cases, you can use `jitsiNoPrefix: true`. This will remove the automatic prefixing
+of the hash and will give you full control on the Jitsi room name.

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/Components/Menu/GuestSubMenu.svelte

@@ -47,7 +47,13 @@
         {#if !canShare}
             <section class="share-url not-mobile">
                 <h3>{$LL.menu.invite.description()}</h3>
-                <input type="text" readonly id="input-share-link" class="link-url" value={location.toString()} />
+                <input
+                    type="text"
+                    readonly
+                    id="input-share-link"
+                    class="link-url nes-input is-dark"
+                    value={location.toString()}
+                />
                 <button type="button" class="nes-btn is-primary" on:click={copyLink}>{$LL.menu.invite.copy()}</button>
             </section>
         {:else}

front/src/Components/Menu/Menu.svelte

@@ -3,7 +3,6 @@
     import SettingsSubMenu from "./SettingsSubMenu.svelte";
     import ProfileSubMenu from "./ProfileSubMenu.svelte";
     import AboutRoomSubMenu from "./AboutRoomSubMenu.svelte";
-    import GlobalMessageSubMenu from "./GlobalMessagesSubMenu.svelte";
     import ContactSubMenu from "./ContactSubMenu.svelte";
     import CustomSubMenu from "./CustomSubMenu.svelte";
     import GuestSubMenu from "./GuestSubMenu.svelte";
@@ -25,16 +24,16 @@
     let props: { url: string; allowApi: boolean };
     let unsubscriberSubMenuStore: Unsubscriber;
 
-    onMount(() => {
+    onMount(async () => {
         unsubscriberSubMenuStore = subMenusStore.subscribe(() => {
             if (!$subMenusStore.includes(activeSubMenu)) {
-                switchMenu($subMenusStore[0]);
+                void switchMenu($subMenusStore[0]);
             }
         });
 
         checkSubMenuToShow();
 
-        switchMenu($subMenusStore[0]);
+        await switchMenu($subMenusStore[0]);
     });
 
     onDestroy(() => {
@@ -43,7 +42,7 @@
         }
     });
 
-    function switchMenu(menu: MenuItem) {
+    async function switchMenu(menu: MenuItem) {
         if (menu.type === "translated") {
             activeSubMenu = menu;
             switch (menu.key) {
@@ -60,7 +59,7 @@
                     activeComponent = AboutRoomSubMenu;
                     break;
                 case SubMenusInterface.globalMessages:
-                    activeComponent = GlobalMessageSubMenu;
+                    activeComponent = (await import("./GlobalMessagesSubMenu.svelte")).default;
                     break;
                 case SubMenusInterface.contact:
                     activeComponent = ContactSubMenu;
@@ -111,7 +110,7 @@
                 <button
                     type="button"
                     class="nes-btn {activeSubMenu === submenu ? 'is-disabled' : ''}"
-                    on:click|preventDefault={() => switchMenu(submenu)}
+                    on:click|preventDefault={() => void switchMenu(submenu)}
                 >
                     {translateMenuName(submenu)}
                 </button>

front/src/Components/Menu/SettingsSubMenu.svelte

@@ -9,6 +9,8 @@
     import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
     import { audioManagerVolumeStore } from "../../Stores/AudioManagerStore";
 
+    import infoImg from "../images/info.svg";
+
     let fullscreen: boolean = localUserStore.getFullscreen();
     let notification: boolean = localUserStore.getNotification() === "granted";
     let forceCowebsiteTrigger: boolean = localUserStore.getForceCowebsiteTrigger();
@@ -179,8 +181,15 @@
     </section>
 
     <section>
-        <h3>{$LL.menu.settings.privacySettings.title()}</h3>
+        <div class="tooltip">
-        <p>{$LL.menu.settings.privacySettings.explanation()}</p>
+            <h3>
+                <span class="dotted-bottom">{$LL.menu.settings.privacySettings.title()}</span>
+                <img src={infoImg} alt="info icon" width="23px" height="23px" />
+            </h3>
+            <div class="nes-balloon away-tooltip-container from-left flex">
+                <p class="away-tooltip-text">{$LL.menu.settings.privacySettings.explanation()}</p>
+            </div>
+        </div>
         <label>
             <input type="checkbox" class="nes-checkbox is-dark" bind:checked={valueCameraPrivacySettings} />
             <span>{$LL.menu.settings.privacySettings.cameraToggle()}</span>
@@ -286,6 +295,35 @@
         .languages-switcher option {
             text-transform: capitalize;
         }
+
+        //Tooltip
+        .tooltip {
+            position: relative;
+        }
+
+        .away-tooltip-container {
+            background-color: #fff;
+            position: absolute;
+            bottom: 45%;
+            left: 55%;
+
+            visibility: hidden;
+            transition: opacity 0.3s;
+        }
+
+        .away-tooltip-text {
+            color: #000;
+        }
+    }
+
+    .dotted-bottom {
+        border-bottom: 1px dotted;
+    }
+
+    .tooltip:hover {
+        .away-tooltip-container {
+            visibility: visible;
+        }
     }
 
     @include media-breakpoint-up(md) {

front/src/Components/Menu/TextGlobalMessage.svelte

@@ -3,7 +3,7 @@
     import { onDestroy, onMount } from "svelte";
     import { gameManager } from "../../Phaser/Game/GameManager";
     import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
-    import type { Quill } from "quill";
+    import Quill from "quill";
     import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
     import LL from "../../i18n/i18n-svelte";
 
@@ -54,10 +54,7 @@
     };
 
     //Quill
-    onMount(async () => {
+    onMount(() => {
-        // Import quill
-        const { default: Quill } = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any
-
         quill = new Quill(QUILL_EDITOR, {
             placeholder: $LL.menu.globalMessage.enter(),
             theme: "snow",
@@ -76,3 +73,49 @@
 <section class="section-input-send-text">
     <div class="input-send-text" bind:this={QUILL_EDITOR} />
 </section>
+
+<style lang="scss">
+    @import "../../../style/breakpoints.scss";
+    @import "quill/dist/quill.snow.css";
+
+    section.section-input-send-text {
+        --height-toolbar: 20%;
+        height: 100%;
+
+        :global(.ql-toolbar) {
+            max-height: var(--height-toolbar);
+            background: whitesmoke;
+        }
+
+        div.input-send-text {
+            height: calc(100% - var(--height-toolbar));
+            overflow: auto;
+
+            color: whitesmoke;
+            font-size: 1rem;
+
+            :global(.ql-editor.ql-blank::before) {
+                color: whitesmoke;
+                font-size: 1rem;
+            }
+
+            :global(.ql-tooltip) {
+                top: 40% !important;
+                left: 20% !important;
+
+                color: whitesmoke;
+                background-color: #333333;
+            }
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        section.section-input-send-text {
+            --height-toolbar: 30%;
+
+            :global(.ql-toolbar) {
+                overflow: auto;
+            }
+        }
+    }
+</style>

front/src/Components/images/info.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40 80C62.0914 80 80 62.0914 80 40C80 17.9086 62.0914 0 40 0C17.9086 0 0 17.9086 0 40C0 62.0914 17.9086 80 40 80ZM40 73C58.2254 73 73 58.2254 73 40C73 21.7746 58.2254 7 40 7C21.7746 7 7 21.7746 7 40C7 58.2254 21.7746 73 40 73Z" fill="white"/>
+<path d="M43.7812 32.6406V58H37.1953V32.6406H43.7812ZM36.8906 26.0781C36.8906 25.0625 37.2109 24.2266 37.8516 23.5703C38.5078 22.8984 39.3828 22.5625 40.4766 22.5625C41.5859 22.5625 42.4609 22.8984 43.1016 23.5703C43.7422 24.2266 44.0625 25.0625 44.0625 26.0781C44.0625 27.0781 43.7344 27.9141 43.0781 28.5859C42.4375 29.2422 41.5781 29.5703 40.5 29.5703C39.3906 29.5703 38.5078 29.2422 37.8516 28.5859C37.2109 27.9141 36.8906 27.0781 36.8906 26.0781Z" fill="white"/>
+</svg>

front/src/Connexion/Room.ts

@@ -15,14 +15,9 @@ export interface RoomRedirect {
 
 export class Room {
     public readonly id: string;
-    /**
-     * @deprecated
-     */
-    private readonly isPublic: boolean;
     private _authenticationMandatory: boolean = DISABLE_ANONYMOUS;
     private _iframeAuthentication?: string = OPID_LOGIN_SCREEN_PROVIDER;
     private _mapUrl: string | undefined;
-    private instance: string | undefined;
     private readonly _search: URLSearchParams;
     private _contactPage: string | undefined;
     private _group: string | null = null;
@@ -37,13 +32,6 @@ export class Room {
         if (this.id.startsWith("/")) {
             this.id = this.id.substr(1);
         }
-        if (this.id.startsWith("_/") || this.id.startsWith("*/")) {
-            this.isPublic = true;
-        } else if (this.id.startsWith("@/")) {
-            this.isPublic = false;
-        } else {
-            throw new Error("Invalid room ID");
-        }
 
         this._search = new URLSearchParams(roomUrl.search);
     }
@@ -84,8 +72,10 @@ export class Room {
 
         const currentRoom = new Room(baseUrl);
         let instance: string = "global";
-        if (currentRoom.isPublic) {
+        if (currentRoom.id.startsWith("_/") || currentRoom.id.startsWith("*/")) {
-            instance = currentRoom.getInstance();
+            const match = /[_*]\/([^/]+)\/.+/.exec(currentRoom.id);
+            if (!match) throw new Error('Could not extract instance from "' + currentRoom.id + '"');
+            instance = match[1];
         }
 
         baseUrl.pathname = "/_/" + instance + "/" + absoluteExitSceneUrl.host + absoluteExitSceneUrl.pathname;
@@ -151,31 +141,6 @@ export class Room {
         }
     }
 
-    /**
-     * Instance name is:
-     * - In a public URL: the second part of the URL ( _/[instance]/map.json)
-     * - In a private URL: [organizationId/worldId]
-     *
-     * @deprecated
-     */
-    public getInstance(): string {
-        if (this.instance !== undefined) {
-            return this.instance;
-        }
-
-        if (this.isPublic) {
-            const match = /[_*]\/([^/]+)\/.+/.exec(this.id);
-            if (!match) throw new Error('Could not extract instance from "' + this.id + '"');
-            this.instance = match[1];
-            return this.instance;
-        } else {
-            const match = /@\/([^/]+)\/([^/]+)\/.+/.exec(this.id);
-            if (!match) throw new Error('Could not extract instance from "' + this.id + '"');
-            this.instance = match[1] + "/" + match[2];
-            return this.instance;
-        }
-    }
-
     public isDisconnected(): boolean {
         const alone = this._search.get("alone");
         if (alone && alone !== "0" && alone.toLowerCase() !== "false") {

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",
@@ -15,6 +16,7 @@ export enum GameMapProperties {
     JITSI_TRIGGER_MESSAGE = "jitsiTriggerMessage",
     JITSI_URL = "jitsiUrl",
     JITSI_WIDTH = "jitsiWidth",
+    JITSI_NO_PREFIX = "jitsiNoPrefix",
     NAME = "name",
     OPEN_TAB = "openTab",
     OPEN_WEBSITE = "openWebsite",
@@ -35,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) {}
 
@@ -67,7 +79,11 @@ export class GameMapPropertiesListener {
                 });
             } else {
                 const openJitsiRoomFunction = () => {
-                    const roomName = jitsiFactory.getRoomName(newValue.toString(), this.scene.instance);
+                    let addPrefix = true;
+                    if (allProps.get(GameMapProperties.JITSI_NO_PREFIX)) {
+                        addPrefix = false;
+                    }
+                    const roomName = jitsiFactory.getRoomName(newValue.toString(), this.scene.roomUrl, addPrefix);
                     const jitsiUrl = allProps.get(GameMapProperties.JITSI_URL) as string | undefined;
 
                     if (JITSI_PRIVATE_MODE && !jitsiUrl) {
@@ -179,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

@@ -185,7 +185,6 @@ export class GameScene extends DirtyScene {
     private biggestAvailableAreaStoreUnsubscribe!: () => void;
     MapUrlFile: string;
     roomUrl: string;
-    instance: string;
 
     currentTick!: number;
     lastSentTick!: number; // The last tick at which a position was sent.
@@ -234,7 +233,6 @@ export class GameScene extends DirtyScene {
         });
         this.Terrains = [];
         this.groups = new Map<number, Sprite>();
-        this.instance = room.getInstance();
 
         this.MapUrlFile = MapUrlFile;
         this.roomUrl = room.key;
@@ -909,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);
                     });
                 });
 

front/src/Utils/StringUtils.ts

@@ -9,4 +9,21 @@ export class StringUtils {
         }
         return { x: values[0], y: values[1] };
     }
+
+    /**
+     * Computes a "short URL" hash of the string passed in parameter.
+     */
+    public static shortHash = function (s: string): string {
+        let hash = 0;
+        const strLength = s.length;
+        if (strLength === 0) {
+            return "";
+        }
+        for (let i = 0; i < strLength; i++) {
+            const c = s.charCodeAt(i);
+            hash = (hash << 5) - hash + c;
+            hash = hash & hash; // Convert to 32bit integer
+        }
+        return Math.abs(hash).toString(36);
+    };
 }

front/src/WebRtc/JitsiFactory.ts

@@ -5,6 +5,7 @@ import { get } from "svelte/store";
 import CancelablePromise from "cancelable-promise";
 import { gameManager } from "../Phaser/Game/GameManager";
 import { jitsiParticipantsCountStore, userIsJitsiDominantSpeakerStore } from "../Stores/GameStore";
+import { StringUtils } from "../Utils/StringUtils";
 
 interface jitsiConfigInterface {
     startWithAudioMuted: boolean;
@@ -120,7 +121,7 @@ const slugify = (...args: (string | number)[]): string => {
         .replace(/[\u0300-\u036f]/g, "") // remove all previously split accents
         .toLowerCase()
         .trim()
-        .replace(/[^a-z0-9 ]/g, "") // remove all chars not letters, numbers and spaces (to be replaced)
+        .replace(/[^a-z0-9-_ ]/g, "") // remove all chars not letters, numbers, dash, underscores and spaces (to be replaced)
         .replace(/\s+/g, "-"); // separator
 };
 
@@ -135,8 +136,8 @@ class JitsiFactory {
     /**
      * Slugifies the room name and prepends the room name with the instance
      */
-    public getRoomName(roomName: string, instance: string): string {
+    public getRoomName(roomName: string, roomId: string, addPrefix: boolean): string {
-        return slugify(instance.replace("/", "-") + "-" + roomName);
+        return slugify((addPrefix ? StringUtils.shortHash(roomId) + "-" : "") + roomName);
     }
 
     public start(

front/src/i18n/de-DE/menu.ts

@@ -58,11 +58,11 @@ const menu: NonNullable<Translation["menu"]> = {
             title: "Sprache",
         },
         privacySettings: {
-            title: "Einstellungen Abwesenheitsmodus",
+            title: "Away mode", //TODO: translate
             explanation:
-                "Falls der WorkAdventure Tab nicht aktiv ist wird in den Abwesenheitsmodus umgeschaltet. Für diesen Modus kann eingestellt werden, ob die Kamera und/oder das Mikrofon deaktiviert sind solange der Tab nicht sichtbar ist.",
+                'While the WorkAdventure tab in your browser is not visible. WorkAdventure switches in "away mode.', //TODO: translate
-            cameraToggle: "Kamera",
+            cameraToggle: "Keep camera active in away mode", //TODO: translate
-            microphoneToggle: "Mikrofon",
+            microphoneToggle: "Keep camera active in away mode", //TODO: translate
         },
         save: {
             warning: "(Das Spiel wird nach dem Speichern neugestartet)",

front/src/i18n/de-DE/report.ts

@@ -3,17 +3,18 @@ import type { Translation } from "../i18n-types";
 const report: NonNullable<Translation["report"]> = {
     block: {
         title: "Blockieren",
-        content: "Blockiere jede Kommunikation von und zu {userName}. Kann jederzeit rückgängig gemacht werden.",
+        content: "Blockiere jegliche Kommunikation mit {userName}. Kann jederzeit rückgängig gemacht werden.",
-        unblock: "Blockierung für diesen User aufheben",
+        unblock: "Blockierung für diesen Nutzer aufheben",
-        block: "Blockiere diese User",
+        block: "Blockiere diesen Nutzer",
     },
     title: "Melden",
-    content: "Verfasse eine Meldung an die Administratoren dieses Raums. Diese können den User anschließend bannen.",
+    content:
+        "Verfasse eine Beschwerde an die Administratoren dieses Raums. Diese können den Nutzer anschließend bannen.",
     message: {
         title: "Deine Nachricht: ",
-        empty: "Bitte einen Text angeben.",
+        empty: "Bitte Text eingeben.",
     },
-    submit: "Diesen User melden",
+    submit: "Diesen Nutzer melden",
     moderate: {
         title: "{userName} moderieren",
         block: "Blockieren",

front/src/i18n/en-US/menu.ts

@@ -58,11 +58,11 @@ const menu: BaseTranslation = {
             title: "Language",
         },
         privacySettings: {
-            title: "Away mode settings",
+            title: "Away mode",
             explanation:
-                'When the WorkAdventure tab is not visible, it switches to "away mode". In this mode, you can decide to automatically disable your webcam and/or microphone for as long as the tab stays hidden.',
+                'While the WorkAdventure tab in your browser is not visible. WorkAdventure switches to "away mode"',
-            cameraToggle: "Camera",
+            cameraToggle: 'Keep camera active in "away mode"',
-            microphoneToggle: "Microphone",
+            microphoneToggle: 'Keep microphone active in "away mode"',
         },
         save: {
             warning: "(Saving these settings will restart the game)",

front/src/i18n/fr-FR/menu.ts

@@ -58,11 +58,11 @@ const menu: NonNullable<Translation["menu"]> = {
             title: "Langage",
         },
         privacySettings: {
-            title: "Paramètres du mode absent",
+            title: "Mode absent",
             explanation:
-                "Quand l'onglet WorkAdventure n'est pas visible, vous passez en \"mode absent\". Lorsque ce mode est actif, vous pouvez décider de garder vos webcam et/ou micro désactivés tant que vous ne revenez pas sur l'onglet",
+                "Quand l'onglet WorkAdventure de votre navigateur n'est pas visible, WorkAdventure passe en \"mode absent\"",
-            cameraToggle: "Camera",
+            cameraToggle: 'Garder la caméra activée en "mode absent"',
-            microphoneToggle: "Microphone",
+            microphoneToggle: 'Garder le microphone activé en "mode absent"',
         },
         save: {
             warning: "(La sauvegarde de ces paramètres redémarre le jeu)",

front/style/TextGlobalMessageSvelte-Style.scss

@@ -1,45 +0,0 @@
-//TextGlobalMessage
-
-// TODO: load on demand with TextGlobalMessage component
-@import "quill/dist/quill.snow.css";
-
-section.section-input-send-text {
-  --height-toolbar: 20%;
-  height: 100%;
-
-  .ql-toolbar{
-    max-height: var(--height-toolbar);
-    background: whitesmoke;
-  }
-
-  div.input-send-text{
-    height: calc(100% - var(--height-toolbar));
-    overflow: auto;
-
-    color: whitesmoke;
-    font-size: 1rem;
-
-    .ql-editor.ql-blank::before {
-      color: whitesmoke;
-      font-size: 1rem;
-    }
-
-    .ql-tooltip {
-      top: 40% !important;
-      left: 20% !important;
-
-      color: whitesmoke;
-      background-color: #333333;
-    }
-  }
-}
-
-@include media-breakpoint-up(md) {
-  section.section-input-send-text {
-    --height-toolbar: 30%;
-
-    .ql-toolbar {
-      overflow: auto;
-    }
-  }
-}

front/style/index.scss

@@ -3,4 +3,3 @@
 @import "cowebsite.scss";
 @import "fonts.scss";
 @import "style";
-@import "TextGlobalMessageSvelte-Style";

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/jitsi_config.json

@@ -43,6 +43,11 @@
                  "type":"string",
                  "value":"{\"DEFAULT_BACKGROUND\":\"#77ee77\"}"
                 }, 
+                {
+                 "name":"jitsiNoPrefix",
+                 "type":"bool",
+                 "value":true
+                }, 
                 {
                  "name":"jitsiRoom",
                  "type":"string",
@@ -65,7 +70,7 @@
          "name":"floorLayer",
          "objects":[
                 {
-                 "height":83.6666666666666,
+                 "height":110.891622876526,
                  "id":1,
                  "name":"",
                  "rotation":0,
@@ -73,14 +78,14 @@
                     {
                      "fontfamily":"Sans Serif",
                      "pixelsize":13,
-                     "text":"Test:\nWalk on the carpet and press space\nResult:\nJitsi opens, background in green and audio\/video is muted",
+                     "text":"Test:\nWalk on the carpet and press space\nResult:\nJitsi opens, background in green and audio\/video is muted.\nThe name of the room (displayed at the top of Jitsi) is \"Myroom Avec Espace EA\"",
                      "wrap":true
                     },
                  "type":"",
                  "visible":true,
                  "width":315.4375,
-                 "x":2.28125,
+                 "x":1.48051599382768,
-                 "y":235.166666666667
+                 "y":209.535838407429
                 }],
          "opacity":1,
          "type":"objectgroup",

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
+}