From fe570c9117926707d7bbd550cba2fa07bca9e747 Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Wed, 9 Feb 2022 10:17:31 +0100
Subject: [PATCH 01/18] moveTo object position

---
 front/src/Phaser/Game/GameMap.ts   |  4 +++
 front/src/Phaser/Game/GameScene.ts | 49 ++++++++++++++++++------------
 maps/tests/move_to.json            | 33 ++++++++++++++++++--
 3 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/front/src/Phaser/Game/GameMap.ts b/front/src/Phaser/Game/GameMap.ts
index 7e9a486d..8e377ae7 100644
--- a/front/src/Phaser/Game/GameMap.ts
+++ b/front/src/Phaser/Game/GameMap.ts
@@ -323,6 +323,10 @@ export class GameMap {
         throw new Error("No possible position found");
     }
 
+    public getObjectWithName(name: string): ITiledMapObject | undefined {
+        return this.tiledObjects.find((object) => object.name === name);
+    }
+
     private getLayersByKey(key: number): Array<ITiledMapLayer> {
         return this.flatLayers.filter((flatLayer) => flatLayer.type === "tilelayer" && flatLayer.data[key] !== 0);
     }
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 9b758a45..44992d85 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -568,6 +568,8 @@ export class GameScene extends DirtyScene {
         this.createCurrentPlayer();
         this.removeAllRemotePlayers(); //cleanup the list  of remote players in case the scene was rebooted
 
+        this.tryMovePlayerWithMoveToParameter();
+
         this.cameraManager = new CameraManager(
             this,
             { x: this.Map.widthInPixels, y: this.Map.heightInPixels },
@@ -1460,9 +1462,9 @@ ${escapedMessage}
         });
 
         iframeListener.registerAnswerer("movePlayerTo", async (message) => {
-            const index = this.getGameMap().getTileIndexAt(message.x, message.y);
-            const startTile = this.getGameMap().getTileIndexAt(this.CurrentPlayer.x, this.CurrentPlayer.y);
-            const path = await this.getPathfindingManager().findPath(startTile, index, true, true);
+            const startTileIndex = this.getGameMap().getTileIndexAt(this.CurrentPlayer.x, this.CurrentPlayer.y);
+            const destinationTileIndex = this.getGameMap().getTileIndexAt(message.x, message.y);
+            const path = await this.getPathfindingManager().findPath(startTileIndex, destinationTileIndex, true, true);
             path.shift();
             if (path.length === 0) {
                 throw new Error("no path available");
@@ -1626,6 +1628,31 @@ ${escapedMessage}
         this.MapPlayersByKey.clear();
     }
 
+    private tryMovePlayerWithMoveToParameter(): void {
+        const moveToParam = urlManager.getHashParameter("moveTo");
+        if (moveToParam) {
+            try {
+                const destinationObject = this.gameMap.getObjectWithName(moveToParam);
+                let endPos;
+                if (destinationObject) {
+                    endPos = this.gameMap.getTileIndexAt(destinationObject.x, destinationObject.y);
+                } else {
+                    endPos = this.gameMap.getRandomPositionFromLayer(moveToParam);
+                }
+                this.pathfindingManager
+                    .findPath(this.gameMap.getTileIndexAt(this.CurrentPlayer.x, this.CurrentPlayer.y), endPos)
+                    .then((path) => {
+                        if (path && path.length > 0) {
+                            this.CurrentPlayer.setPathToFollow(path).catch((reason) => console.warn(reason));
+                        }
+                    })
+                    .catch((reason) => console.warn(reason));
+            } catch (err) {
+                console.warn(`Cannot proceed with moveTo command:\n\t-> ${err}`);
+            }
+        }
+    }
+
     private getExitUrl(layer: ITiledMapLayer): string | undefined {
         return this.getProperty(layer, GameMapProperties.EXIT_URL) as string | undefined;
     }
@@ -1748,22 +1775,6 @@ ${escapedMessage}
                 this.connection?.emitEmoteEvent(emoteKey);
                 analyticsClient.launchEmote(emoteKey);
             });
-            const moveToParam = urlManager.getHashParameter("moveTo");
-            if (moveToParam) {
-                try {
-                    const endPos = this.gameMap.getRandomPositionFromLayer(moveToParam);
-                    this.pathfindingManager
-                        .findPath(this.gameMap.getTileIndexAt(this.CurrentPlayer.x, this.CurrentPlayer.y), endPos)
-                        .then((path) => {
-                            if (path && path.length > 0) {
-                                this.CurrentPlayer.setPathToFollow(path).catch((reason) => console.warn(reason));
-                            }
-                        })
-                        .catch((reason) => console.warn(reason));
-                } catch (err) {
-                    console.warn(`Cannot proceed with moveTo command:\n\t-> ${err}`);
-                }
-            }
         } catch (err) {
             if (err instanceof TextureError) {
                 gameManager.leaveGame(SelectCharacterSceneName, new SelectCharacterScene());
diff --git a/maps/tests/move_to.json b/maps/tests/move_to.json
index 796a9d46..6776bd6b 100644
--- a/maps/tests/move_to.json
+++ b/maps/tests/move_to.json
@@ -3,7 +3,7 @@
  "infinite":false,
  "layers":[
         {
-         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
+         "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 12, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
          "height":10,
          "id":1,
          "name":"floor",
@@ -204,6 +204,35 @@
                  "width":92.7120717279925,
                  "x":233.848901257569,
                  "y":135.845612785282
+                }, 
+                {
+                 "height":0,
+                 "id":9,
+                 "name":"destination",
+                 "point":true,
+                 "rotation":0,
+                 "type":"",
+                 "visible":true,
+                 "width":0,
+                 "x":207.918025151374,
+                 "y":243.31625523987
+                }, 
+                {
+                 "height":45.0829063809967,
+                 "id":10,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "halign":"center",
+                     "text":"destination object",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":83,
+                 "x":167.26,
+                 "y":254.682580344667
                 }],
          "opacity":1,
          "type":"objectgroup",
@@ -212,7 +241,7 @@
          "y":0
         }],
  "nextlayerid":11,
- "nextobjectid":9,
+ "nextobjectid":11,
  "orientation":"orthogonal",
  "renderorder":"right-down",
  "tiledversion":"1.7.2",

From b565080312f02ee51ba22f7f84327a18b130ad77 Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Wed, 9 Feb 2022 10:52:44 +0100
Subject: [PATCH 02/18] parse x and y position from moveTo param

---
 front/src/Phaser/Game/GameScene.ts | 14 ++++++++++----
 front/src/Utils/StringUtils.ts     | 12 ++++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 front/src/Utils/StringUtils.ts

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 44992d85..8d13cb7b 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -92,6 +92,7 @@ import { MapStore } from "../../Stores/Utils/MapStore";
 import { followUsersColorStore } from "../../Stores/FollowStore";
 import { GameSceneUserInputHandler } from "../UserInput/GameSceneUserInputHandler";
 import { locale } from "../../i18n/i18n-svelte";
+import { StringUtils } from "../../Utils/StringUtils";
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
     reconnecting: boolean;
@@ -1632,12 +1633,17 @@ ${escapedMessage}
         const moveToParam = urlManager.getHashParameter("moveTo");
         if (moveToParam) {
             try {
-                const destinationObject = this.gameMap.getObjectWithName(moveToParam);
                 let endPos;
-                if (destinationObject) {
-                    endPos = this.gameMap.getTileIndexAt(destinationObject.x, destinationObject.y);
+                const posFromParam = StringUtils.parsePointFromParam(moveToParam);
+                if (posFromParam) {
+                    endPos = this.gameMap.getTileIndexAt(posFromParam.x, posFromParam.y);
                 } else {
-                    endPos = this.gameMap.getRandomPositionFromLayer(moveToParam);
+                    const destinationObject = this.gameMap.getObjectWithName(moveToParam);
+                    if (destinationObject) {
+                        endPos = this.gameMap.getTileIndexAt(destinationObject.x, destinationObject.y);
+                    } else {
+                        endPos = this.gameMap.getRandomPositionFromLayer(moveToParam);
+                    }
                 }
                 this.pathfindingManager
                     .findPath(this.gameMap.getTileIndexAt(this.CurrentPlayer.x, this.CurrentPlayer.y), endPos)
diff --git a/front/src/Utils/StringUtils.ts b/front/src/Utils/StringUtils.ts
new file mode 100644
index 00000000..1f168c15
--- /dev/null
+++ b/front/src/Utils/StringUtils.ts
@@ -0,0 +1,12 @@
+export class StringUtils {
+    public static parsePointFromParam(param: string, separator: string = ","): { x: number; y: number } | undefined {
+        const values = param.split(separator).map((val) => parseInt(val));
+        if (values.length !== 2) {
+            return;
+        }
+        if (isNaN(values[0]) || isNaN(values[1])) {
+            return;
+        }
+        return { x: values[0], y: values[1] };
+    }
+}

From 71e18d1838e8b5dd54589e283cc2213039ab6ddd Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Wed, 9 Feb 2022 11:05:43 +0100
Subject: [PATCH 03/18] update moveTo test map

---
 maps/tests/move_to.json | 38 +++++++++++++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/maps/tests/move_to.json b/maps/tests/move_to.json
index 6776bd6b..0801831a 100644
--- a/maps/tests/move_to.json
+++ b/maps/tests/move_to.json
@@ -233,6 +233,42 @@
                  "width":83,
                  "x":167.26,
                  "y":254.682580344667
+                }, 
+                {
+                 "height":19.6921,
+                 "id":11,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"Sans Serif",
+                     "pixelsize":13,
+                     "text":"...#start&moveTo=destination",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":202.260327899394,
+                 "x":32.2652715416861,
+                 "y":148.51445302748
+                }, 
+                {
+                 "height":19.6921,
+                 "id":12,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"Sans Serif",
+                     "pixelsize":13,
+                     "text":"...#start2&moveTo=200,100",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":202.26,
+                 "x":32.2654354913834,
+                 "y":169.008165183978
                 }],
          "opacity":1,
          "type":"objectgroup",
@@ -241,7 +277,7 @@
          "y":0
         }],
  "nextlayerid":11,
- "nextobjectid":11,
+ "nextobjectid":13,
  "orientation":"orthogonal",
  "renderorder":"right-down",
  "tiledversion":"1.7.2",

From 9cccdca3dc5d52a1590c55df57f816448d932696 Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Wed, 9 Feb 2022 11:09:20 +0100
Subject: [PATCH 04/18] docs update

---
 docs/maps/entry-exit.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/docs/maps/entry-exit.md b/docs/maps/entry-exit.md
index 2040beb3..25e530de 100644
--- a/docs/maps/entry-exit.md
+++ b/docs/maps/entry-exit.md
@@ -82,7 +82,11 @@ We are able to direct a Woka to the desired place immediately after spawn. To ma
 ```
 .../my_map.json#moveTo=meeting-room&start
 ```
+*...or even like this!*
+```
+.../my_map.json#start&moveTo=200,100
+```
 
-For this to work, moveTo must be equal to the layer name of interest. This layer should have at least one tile defined. In case of layer having many tiles, user will go to one of them, randomly selected.
+For this to work, moveTo must be equal to the x and y position, layer name, or object name of interest. Layer should have at least one tile defined. In case of layer having many tiles, user will go to one of them, randomly selected.
 
 ![](images/moveTo-layer-example.png)
\ No newline at end of file

From c13672c9dca959b1a260d28fe5dd2d36e7efdc7c Mon Sep 17 00:00:00 2001
From: Hanusiak Piotr <piotr@ltmp.co>
Date: Wed, 9 Feb 2022 13:03:14 +0100
Subject: [PATCH 05/18] updated invitation link creator

---
 front/src/Components/Menu/GuestSubMenu.svelte | 50 +++++++++++++-
 front/src/Phaser/Game/GameScene.ts            |  3 +
 .../Phaser/Game/StartPositionCalculator.ts    | 67 ++++++++++++-------
 front/src/Stores/StartLayerNamesStore.ts      |  6 ++
 4 files changed, 99 insertions(+), 27 deletions(-)
 create mode 100644 front/src/Stores/StartLayerNamesStore.ts

diff --git a/front/src/Components/Menu/GuestSubMenu.svelte b/front/src/Components/Menu/GuestSubMenu.svelte
index a0cd94d7..34fba1af 100644
--- a/front/src/Components/Menu/GuestSubMenu.svelte
+++ b/front/src/Components/Menu/GuestSubMenu.svelte
@@ -1,5 +1,12 @@
 <script lang="ts">
     import LL from "../../i18n/i18n-svelte";
+    import { gameManager } from "../../Phaser/Game/GameManager";
+    import { startLayerNamesStore } from "../../Stores/StartLayerNamesStore";
+
+    let entryPoint: string = $startLayerNamesStore[0];
+    let walkAutomatically: boolean = false;
+    const currentPlayer = gameManager.getCurrentGameScene().CurrentPlayer;
+    const playerPos = { x: Math.floor(currentPlayer.x), y: Math.floor(currentPlayer.y) };
 
     function copyLink() {
         const input: HTMLInputElement = document.getElementById("input-share-link") as HTMLInputElement;
@@ -8,8 +15,21 @@
         document.execCommand("copy");
     }
 
+    function getLink() {
+        return `${location.origin}${location.pathname}#${entryPoint}${
+            walkAutomatically ? `&moveTo=${playerPos.x},${playerPos.y}` : ""
+        }`;
+    }
+
+    function updateInputFieldValue() {
+        const input = document.getElementById("input-share-link");
+        if (input) {
+            (input as HTMLInputElement).value = getLink();
+        }
+    }
+
     async function shareLink() {
-        const shareData = { url: location.toString() };
+        const shareData = { url: getLink() };
 
         try {
             await navigator.share(shareData);
@@ -32,6 +52,30 @@
             <input type="hidden" readonly id="input-share-link" value={location.toString()} />
             <button type="button" class="nes-btn is-primary" on:click={shareLink}>{$LL.menu.invite.share()}</button>
         </section>
+        <h3>Select an entry point</h3>
+        <section class="nes-select is-dark">
+            <select
+                bind:value={entryPoint}
+                on:blur={() => {
+                    updateInputFieldValue();
+                }}
+            >
+                {#each $startLayerNamesStore as entryPointName}
+                    <option value={entryPointName}>{entryPointName}</option>
+                {/each}
+            </select>
+        </section>
+        <label>
+            <input
+                type="checkbox"
+                class="nes-checkbox is-dark"
+                bind:checked={walkAutomatically}
+                on:change={() => {
+                    updateInputFieldValue();
+                }}
+            />
+            <span>Walk automatically to my position</span>
+        </label>
     </section>
 </div>
 
@@ -47,6 +91,10 @@
             margin-bottom: 50px;
         }
 
+        section.nes-select select:focus {
+            outline: none;
+        }
+
         section.container-overflow {
             height: 100%;
             margin: 0;
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 8d13cb7b..40baf0c5 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -93,6 +93,7 @@ import { followUsersColorStore } from "../../Stores/FollowStore";
 import { GameSceneUserInputHandler } from "../UserInput/GameSceneUserInputHandler";
 import { locale } from "../../i18n/i18n-svelte";
 import { StringUtils } from "../../Utils/StringUtils";
+import { startLayerNamesStore } from "../../Stores/StartLayerNamesStore";
 export interface GameSceneInitInterface {
     initPosition: PointInterface | null;
     reconnecting: boolean;
@@ -542,6 +543,8 @@ export class GameScene extends DirtyScene {
             urlManager.getStartLayerNameFromUrl()
         );
 
+        startLayerNamesStore.set(this.startPositionCalculator.getStartPositionNames());
+
         //add entities
         this.Objects = new Array<Phaser.Physics.Arcade.Sprite>();
 
diff --git a/front/src/Phaser/Game/StartPositionCalculator.ts b/front/src/Phaser/Game/StartPositionCalculator.ts
index 5ae00a94..3ee2ec2d 100644
--- a/front/src/Phaser/Game/StartPositionCalculator.ts
+++ b/front/src/Phaser/Game/StartPositionCalculator.ts
@@ -16,32 +16,6 @@ export class StartPositionCalculator {
     ) {
         this.initStartXAndStartY();
     }
-    private initStartXAndStartY() {
-        // If there is an init position passed
-        if (this.initPosition !== null) {
-            this.startPosition = this.initPosition;
-        } else {
-            // Now, let's find the start layer
-            if (this.startLayerName) {
-                this.initPositionFromLayerName(this.startLayerName, this.startLayerName);
-            }
-            if (this.startPosition === undefined) {
-                // If we have no start layer specified or if the hash passed does not exist, let's go with the default start position.
-                this.initPositionFromLayerName(defaultStartLayerName, this.startLayerName);
-            }
-        }
-        // Still no start position? Something is wrong with the map, we need a "start" layer.
-        if (this.startPosition === undefined) {
-            console.warn(
-                'This map is missing a layer named "start" that contains the available default start positions.'
-            );
-            // Let's start in the middle of the map
-            this.startPosition = {
-                x: this.mapFile.width * 16,
-                y: this.mapFile.height * 16,
-            };
-        }
-    }
 
     /**
      *
@@ -76,6 +50,47 @@ export class StartPositionCalculator {
         }
     }
 
+    public getStartPositionNames(): string[] {
+        const names: string[] = [];
+        for (const layer of this.gameMap.flatLayers) {
+            if (layer.name === "start") {
+                names.push(layer.name);
+                continue;
+            }
+            if (this.isStartLayer(layer)) {
+                names.push(layer.name);
+            }
+        }
+        return names;
+    }
+
+    private initStartXAndStartY() {
+        // If there is an init position passed
+        if (this.initPosition !== null) {
+            this.startPosition = this.initPosition;
+        } else {
+            // Now, let's find the start layer
+            if (this.startLayerName) {
+                this.initPositionFromLayerName(this.startLayerName, this.startLayerName);
+            }
+            if (this.startPosition === undefined) {
+                // If we have no start layer specified or if the hash passed does not exist, let's go with the default start position.
+                this.initPositionFromLayerName(defaultStartLayerName, this.startLayerName);
+            }
+        }
+        // Still no start position? Something is wrong with the map, we need a "start" layer.
+        if (this.startPosition === undefined) {
+            console.warn(
+                'This map is missing a layer named "start" that contains the available default start positions.'
+            );
+            // Let's start in the middle of the map
+            this.startPosition = {
+                x: this.mapFile.width * 16,
+                y: this.mapFile.height * 16,
+            };
+        }
+    }
+
     private isStartLayer(layer: ITiledMapLayer): boolean {
         return this.getProperty(layer, GameMapProperties.START_LAYER) == true;
     }
diff --git a/front/src/Stores/StartLayerNamesStore.ts b/front/src/Stores/StartLayerNamesStore.ts
new file mode 100644
index 00000000..a6397872
--- /dev/null
+++ b/front/src/Stores/StartLayerNamesStore.ts
@@ -0,0 +1,6 @@
+import { Readable, writable } from "svelte/store";
+
+/**
+ * A store that contains the map starting layers names
+ */
+export const startLayerNamesStore = writable<string[]>([]);

From fb6551041397cd4ff1e6711a2bf7a3bdb1bf39f4 Mon Sep 17 00:00:00 2001
From: Julian Euler <jeuler@mailbox.org>
Date: Wed, 9 Feb 2022 14:11:28 +0100
Subject: [PATCH 06/18] update docker production templates

---
 contrib/docker/.env.prod.template       |  85 +++++++++++++-
 contrib/docker/docker-compose.prod.yaml | 149 +++++++++++++++---------
 2 files changed, 174 insertions(+), 60 deletions(-)

diff --git a/contrib/docker/.env.prod.template b/contrib/docker/.env.prod.template
index c0c10181..73ab5a2d 100644
--- a/contrib/docker/.env.prod.template
+++ b/contrib/docker/.env.prod.template
@@ -1,20 +1,97 @@
+# Security
+#
+
+SECRET_KEY=
+ADMIN_API_TOKEN=
+
+#
+# Networking
+#
+
 # The base domain
 DOMAIN=workadventure.localhost
+HTTP_PORT=80
+HTTPS_PORT=443
+
+# Subdomains (must match the DOMAIN variable above)
+FRONT_HOST=front.workadventure.localhost
+PUSHER_HOST=pusher.workadventure.localhost
+BACK_HOST=api.workadventure.localhost
+MAPS_HOST=maps.workadventure.localhost
+ICON_HOST=icon.workadventure.localhost
+
+#
+# Basic configuration
+#
+
+# The directory to store data in
+DATA_DIR=./wa
+
+# The URL used by default, in the form: "/_/global/map/url.json"
+START_ROOM_URL=/_/global/maps.workadventu.re/Floor0/floor0.json
+
+MAX_PER_GROUP=4
+MAX_USERNAME_LENGTH=8
+DISABLE_ANONYMOUS=false
+
+# The version of the docker image to use
+# (Must uncomment "image" keys in the docker-compose file)
+VERSION=master
+
+TZ=Europe/Paris
+
+#
+# Jitsi
+#
 
-DEBUG_MODE=false
 JITSI_URL=meet.jit.si
-# If your Jitsi environment has authentication set up, you MUST set JITSI_PRIVATE_MODE to "true" and you MUST pass a SECRET_JITSI_KEY to generate the JWT secret
+# If your Jitsi environment has authentication set up,
+# you MUST set JITSI_PRIVATE_MODE to "true"
+# and you MUST pass a SECRET_JITSI_KEY to generate the JWT secret
 JITSI_PRIVATE_MODE=false
 JITSI_ISS=
 SECRET_JITSI_KEY=
 
+#
+# Turn/Stun
+#
+
 # URL of the TURN server (needed to "punch a hole" through some networks for P2P connections)
 TURN_SERVER=
 TURN_USER=
 TURN_PASSWORD=
+# If your Turn server is configured to use the Turn REST API, you should put the shared auth secret here.
+# If you are using Coturn, this is the value of the "static-auth-secret" parameter in your coturn config file.
+# Keep empty if you are sharing hard coded / clear text credentials.
+TURN_STATIC_AUTH_SECRET=
+# URL of the STUN server
+STUN_SERVER=
 
-# The URL used by default, in the form: "/_/global/map/url.json"
-START_ROOM_URL=/_/global/maps.workadventu.re/Floor0/floor0.json
+#
+# Certificate config
+#
 
 # The email address used by Let's encrypt to send renewal warnings (compulsory)
 ACME_EMAIL=
+
+#
+# Advanced configuration
+# Generally does not need to be changed
+#
+
+
+# Workadventure settings
+DISABLE_NOTIFICATIONS=false
+SKIP_RENDER_OPTIMIZATIONS=false
+STORE_VARIABLES_FOR_LOCAL_MAPS=true
+
+# Debugging options
+DEBUG_MODE=false
+LOG_LEVEL=WARN
+
+# Internal URLs
+API_URL=back:50051
+ADMIN_URL=//workadventure.localhost
+ADMIN_API_URL=
+
+RESTART_POLICY=unless-stopped
diff --git a/contrib/docker/docker-compose.prod.yaml b/contrib/docker/docker-compose.prod.yaml
index 62be6749..16af128a 100644
--- a/contrib/docker/docker-compose.prod.yaml
+++ b/contrib/docker/docker-compose.prod.yaml
@@ -1,114 +1,151 @@
-version: "3.3"
+version: "3.5"
 services:
   reverse-proxy:
-    image: traefik:v2.3
+    image: traefik:v2.6
     command:
-      - --log.level=WARN
-      #- --api.insecure=true
+      - --log.level=${LOG_LEVEL}
       - --providers.docker
-      - --entryPoints.web.address=:80
+      # Entry points
+      - --entryPoints.web.address=:${HTTP_PORT}
       - --entrypoints.web.http.redirections.entryPoint.to=websecure
       - --entrypoints.web.http.redirections.entryPoint.scheme=https
-      - --entryPoints.websecure.address=:443
+      - --entryPoints.websecure.address=:${HTTPS_PORT}
+      # HTTP challenge
       - --certificatesresolvers.myresolver.acme.email=${ACME_EMAIL}
       - --certificatesresolvers.myresolver.acme.storage=/acme.json
-      # used during the challenge
       - --certificatesresolvers.myresolver.acme.httpchallenge.entrypoint=web
+      # Let's Encrypt's staging server
+      # uncomment during testing to avoid rate limiting
+      #- --certificatesresolvers.dnsresolver.acme.caserver=https://acme-staging-v02.api.letsencrypt.org/directory
     ports:
-      - "80:80"
-      - "443:443"
-      # The Web UI (enabled by --api.insecure=true)
-      #- "8080:8080"
-    depends_on:
-      - pusher
-      - front
+      - "${HTTP_PORT}:80"
+      - "${HTTPS_PORT}:443"
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
-      - ./acme.json:/acme.json
-    restart: unless-stopped
+      - ${DATA_DIR}/letsencrypt/acme.json:/acme.json
+    restart: ${RESTART_POLICY}
 
 
   front:
     build:
       context: ../..
       dockerfile: front/Dockerfile
-    #image: thecodingmachine/workadventure-front:master
+    #image: thecodingmachine/workadventure-front:${VERSION}
     environment:
-      DEBUG_MODE: "$DEBUG_MODE"
-      JITSI_URL: $JITSI_URL
-      JITSI_PRIVATE_MODE: "$JITSI_PRIVATE_MODE"
-      PUSHER_URL: //pusher.${DOMAIN}
-      ICON_URL: //icon.${DOMAIN}
-      TURN_SERVER: "${TURN_SERVER}"
-      TURN_USER: "${TURN_USER}"
-      TURN_PASSWORD: "${TURN_PASSWORD}"
-      START_ROOM_URL: "${START_ROOM_URL}"
+      - DEBUG_MODE
+      - JITSI_URL
+      - JITSI_PRIVATE_MODE
+      - PUSHER_URL=//${PUSHER_HOST}
+      - ICON_URL=//${ICON_HOST}
+      - TURN_SERVER
+      - TURN_USER
+      - TURN_PASSWORD
+      - TURN_STATIC_AUTH_SECRET
+      - STUN_SERVER
+      - START_ROOM_URL
+      - SKIP_RENDER_OPTIMIZATIONS
+      - MAX_PER_GROUP
+      - MAX_USERNAME_LENGTH
+      - DISABLE_ANONYMOUS
+      - DISABLE_NOTIFICATIONS
     labels:
-      - "traefik.http.routers.front.rule=Host(`play.${DOMAIN}`)"
-      - "traefik.http.routers.front.entryPoints=web,traefik"
+      - "traefik.http.routers.front.rule=Host(`${FRONT_HOST}`)"
+      - "traefik.http.routers.front.entryPoints=web"
       - "traefik.http.services.front.loadbalancer.server.port=80"
-      - "traefik.http.routers.front-ssl.rule=Host(`play.${DOMAIN}`)"
+      - "traefik.http.routers.front-ssl.rule=Host(`${FRONT_HOST}`)"
       - "traefik.http.routers.front-ssl.entryPoints=websecure"
-      - "traefik.http.routers.front-ssl.tls=true"
       - "traefik.http.routers.front-ssl.service=front"
+      - "traefik.http.routers.front-ssl.tls=true"
       - "traefik.http.routers.front-ssl.tls.certresolver=myresolver"
-    restart: unless-stopped
+    restart: ${RESTART_POLICY}
 
   pusher:
     build:
       context: ../..
       dockerfile: pusher/Dockerfile
-    #image: thecodingmachine/workadventure-pusher:master
+    #image: thecodingmachine/workadventure-pusher:${VERSION}
     command: yarn run runprod
     environment:
-      SECRET_JITSI_KEY: "$SECRET_JITSI_KEY"
-      SECRET_KEY: yourSecretKey
-      API_URL: back:50051
-      JITSI_URL: $JITSI_URL
-      JITSI_ISS: $JITSI_ISS
-      FRONT_URL: https://play.${DOMAIN}
+      - SECRET_JITSI_KEY
+      - SECRET_KEY
+      - API_URL
+      - FRONT_URL=https://${FRONT_HOST}
+      - JITSI_URL
+      - JITSI_ISS
+      - DISABLE_ANONYMOUS
     labels:
-      - "traefik.http.routers.pusher.rule=Host(`pusher.${DOMAIN}`)"
-      - "traefik.http.routers.pusher.entryPoints=web,traefik"
+      - "traefik.http.routers.pusher.rule=Host(`${PUSHER_HOST}`)"
+      - "traefik.http.routers.pusher.entryPoints=web"
       - "traefik.http.services.pusher.loadbalancer.server.port=8080"
-      - "traefik.http.routers.pusher-ssl.rule=Host(`pusher.${DOMAIN}`)"
+      - "traefik.http.routers.pusher-ssl.rule=Host(${PUSHER_HOST}`)"
       - "traefik.http.routers.pusher-ssl.entryPoints=websecure"
-      - "traefik.http.routers.pusher-ssl.tls=true"
       - "traefik.http.routers.pusher-ssl.service=pusher"
+      - "traefik.http.routers.pusher-ssl.tls=true"
       - "traefik.http.routers.pusher-ssl.tls.certresolver=myresolver"
-    restart: unless-stopped
+    restart: ${RESTART_POLICY}
 
   back:
     build:
       context: ../..
       dockerfile: back/Dockerfile
-    #image: thecodingmachine/workadventure-back:master
+    #image: thecodingmachine/workadventure-back:${VERSION}
     command: yarn run runprod
     environment:
-      SECRET_JITSI_KEY: "$SECRET_JITSI_KEY"
-      ADMIN_API_TOKEN: "$ADMIN_API_TOKEN"
-      ADMIN_API_URL: "$ADMIN_API_URL"
-      JITSI_URL: $JITSI_URL
-      JITSI_ISS: $JITSI_ISS
+      - SECRET_JITSI_KEY
+      - SECRET_KEY
+      - ADMIN_API_TOKEN
+      - ADMIN_API_URL
+      - TURN_SERVER
+      - TURN_USER
+      - TURN_PASSWORD
+      - TURN_STATIC_AUTH_SECRET
+      - STUN_SERVER
+      - JITSI_URL
+      - JITSI_ISS
+      - MAX_PER_GROUP
+      - STORE_VARIABLES_FOR_LOCAL_MAPS
     labels:
-      - "traefik.http.routers.back.rule=Host(`api.${DOMAIN}`)"
+      - "traefik.http.routers.back.rule=Host(`${BACK_HOST}`)"
       - "traefik.http.routers.back.entryPoints=web"
       - "traefik.http.services.back.loadbalancer.server.port=8080"
-      - "traefik.http.routers.back-ssl.rule=Host(`api.${DOMAIN}`)"
+      - "traefik.http.routers.back-ssl.rule=Host(`${BACK_HOST}`)"
       - "traefik.http.routers.back-ssl.entryPoints=websecure"
-      - "traefik.http.routers.back-ssl.tls=true"
       - "traefik.http.routers.back-ssl.service=back"
+      - "traefik.http.routers.back-ssl.tls=true"
       - "traefik.http.routers.back-ssl.tls.certresolver=myresolver"
-    restart: unless-stopped
+    restart: ${RESTART_POLICY}
+
+  maps:
+    build:
+      context: ../..
+      Dockerfile: maps/Dockerfile
+    #image: thecodingmachine/workadventure-maps:${VERSION}
+    environment:
+      - DEBUG_MODE
+      - STARTUP_COMMAND_0=sudo a2enmod headers
+      - STARTUP_COMMAND_1=yarn install
+      - STARTUP_COMMAND_2=yarn run prod &
+    volumes:
+      - ${DATA_DIR}/maps:/var/www/html
+    labels:
+      - "traefik.http.routers.maps.rule=Host(`${MAPS_HOST}`)"
+      - "traefik.http.routers.maps.entryPoints=web"
+      - "traefik.http.services.maps.loadbalancer.server.port=80"
+      - "traefik.http.routers.maps-ssl.rule=Host(`${MAPS_HOST}`)"
+      - "traefik.http.routers.maps-ssl.entryPoints=websecure"
+      - "traefik.http.routers.maps-ssl.service=maps"
+      - "traefik.http.routers.maps-ssl.tls=true"
+      - "traefik.http.routers.maps-ssl.tls.certresolver=myresolver"
+    restart: ${RESTART_POLICY}
 
   icon:
     image: matthiasluedtke/iconserver:v3.13.0
     labels:
-      - "traefik.http.routers.icon.rule=Host(`icon.${DOMAIN}`)"
+      - "traefik.http.routers.icon.rule=Host(`${ICON_HOST}`)"
       - "traefik.http.routers.icon.entryPoints=web,traefik"
       - "traefik.http.services.icon.loadbalancer.server.port=8080"
-      - "traefik.http.routers.icon-ssl.rule=Host(`icon.${DOMAIN}`)"
+      - "traefik.http.routers.icon-ssl.rule=Host(`${ICON_HOST}`)"
       - "traefik.http.routers.icon-ssl.entryPoints=websecure"
-      - "traefik.http.routers.icon-ssl.tls=true"
       - "traefik.http.routers.icon-ssl.service=icon"
+      - "traefik.http.routers.icon-ssl.tls=true"
       - "traefik.http.routers.icon-ssl.tls.certresolver=myresolver"

From f8f6b8aad98de88f6d7045e307faaccf5c1113af Mon Sep 17 00:00:00 2001
From: Julian Euler <jeuler@mailbox.org>
Date: Wed, 9 Feb 2022 14:18:03 +0100
Subject: [PATCH 07/18] prod templates: add contact url & openID, move vars

The old template was outdated.
Added additional explanations to variables and divided them into
sections.
---
 contrib/docker/.env.prod.template | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/contrib/docker/.env.prod.template b/contrib/docker/.env.prod.template
index 73ab5a2d..8ade4634 100644
--- a/contrib/docker/.env.prod.template
+++ b/contrib/docker/.env.prod.template
@@ -10,10 +10,9 @@ ADMIN_API_TOKEN=
 
 # The base domain
 DOMAIN=workadventure.localhost
-HTTP_PORT=80
-HTTPS_PORT=443
 
-# Subdomains (must match the DOMAIN variable above)
+# Subdomains
+# MUST match the DOMAIN variable above
 FRONT_HOST=front.workadventure.localhost
 PUSHER_HOST=pusher.workadventure.localhost
 BACK_HOST=api.workadventure.localhost
@@ -30,12 +29,16 @@ DATA_DIR=./wa
 # The URL used by default, in the form: "/_/global/map/url.json"
 START_ROOM_URL=/_/global/maps.workadventu.re/Floor0/floor0.json
 
+# If you want to have a contact page in your menu,
+# you MUST set CONTACT_URL to the URL of the page that you want
+CONTACT_URL=
+
 MAX_PER_GROUP=4
 MAX_USERNAME_LENGTH=8
 DISABLE_ANONYMOUS=false
 
 # The version of the docker image to use
-# (Must uncomment "image" keys in the docker-compose file)
+# MUST uncomment "image" keys in the docker-compose file for it to be effective
 VERSION=master
 
 TZ=Europe/Paris
@@ -60,7 +63,7 @@ SECRET_JITSI_KEY=
 TURN_SERVER=
 TURN_USER=
 TURN_PASSWORD=
-# If your Turn server is configured to use the Turn REST API, you should put the shared auth secret here.
+# If your Turn server is configured to use the Turn REST API, you MUST put the shared auth secret here.
 # If you are using Coturn, this is the value of the "static-auth-secret" parameter in your coturn config file.
 # Keep empty if you are sharing hard coded / clear text credentials.
 TURN_STATIC_AUTH_SECRET=
@@ -74,11 +77,28 @@ STUN_SERVER=
 # The email address used by Let's encrypt to send renewal warnings (compulsory)
 ACME_EMAIL=
 
+#
+# Additional app configs
+# Configuration for apps which are not workadventure itself
+#
+
+# openID
+OPID_CLIENT_ID=
+OPID_CLIENT_SECRET=
+OPID_CLIENT_ISSUER=
+OPID_CLIENT_REDIRECT_URL=
+OPID_LOGIN_SCREEN_PROVIDER=http://pusher.workadventure.localhost/login-screen
+OPID_PROFILE_SCREEN_PROVIDER=
+
+
 #
 # Advanced configuration
 # Generally does not need to be changed
 #
 
+# Networking
+HTTP_PORT=80
+HTTPS_PORT=443
 
 # Workadventure settings
 DISABLE_NOTIFICATIONS=false

From 5aa46f6d84858b25dfdbb2009c5d0d363a4054b3 Mon Sep 17 00:00:00 2001
From: Julian Euler <jeuler@mailbox.org>
Date: Thu, 10 Feb 2022 10:18:44 +0100
Subject: [PATCH 08/18] prod template: move admin api URL and remove duplicate

---
 contrib/docker/.env.prod.template | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/contrib/docker/.env.prod.template b/contrib/docker/.env.prod.template
index 8ade4634..5e9adc87 100644
--- a/contrib/docker/.env.prod.template
+++ b/contrib/docker/.env.prod.template
@@ -19,6 +19,9 @@ BACK_HOST=api.workadventure.localhost
 MAPS_HOST=maps.workadventure.localhost
 ICON_HOST=icon.workadventure.localhost
 
+# SAAS admin panel
+ADMIN_API_URL=
+
 #
 # Basic configuration
 #
@@ -111,7 +114,5 @@ LOG_LEVEL=WARN
 
 # Internal URLs
 API_URL=back:50051
-ADMIN_URL=//workadventure.localhost
-ADMIN_API_URL=
 
 RESTART_POLICY=unless-stopped

From 92f47286774804a1535e247069de1224db8b0591 Mon Sep 17 00:00:00 2001
From: Julian Euler <jeuler@mailbox.org>
Date: Thu, 10 Feb 2022 10:26:46 +0100
Subject: [PATCH 09/18] prod template: remove maps container

As stated by moufmouf, this is only meant for testing and hosting maps
---
 contrib/docker/docker-compose.prod.yaml | 23 -----------------------
 1 file changed, 23 deletions(-)

diff --git a/contrib/docker/docker-compose.prod.yaml b/contrib/docker/docker-compose.prod.yaml
index 16af128a..80ed192b 100644
--- a/contrib/docker/docker-compose.prod.yaml
+++ b/contrib/docker/docker-compose.prod.yaml
@@ -115,29 +115,6 @@ services:
       - "traefik.http.routers.back-ssl.tls.certresolver=myresolver"
     restart: ${RESTART_POLICY}
 
-  maps:
-    build:
-      context: ../..
-      Dockerfile: maps/Dockerfile
-    #image: thecodingmachine/workadventure-maps:${VERSION}
-    environment:
-      - DEBUG_MODE
-      - STARTUP_COMMAND_0=sudo a2enmod headers
-      - STARTUP_COMMAND_1=yarn install
-      - STARTUP_COMMAND_2=yarn run prod &
-    volumes:
-      - ${DATA_DIR}/maps:/var/www/html
-    labels:
-      - "traefik.http.routers.maps.rule=Host(`${MAPS_HOST}`)"
-      - "traefik.http.routers.maps.entryPoints=web"
-      - "traefik.http.services.maps.loadbalancer.server.port=80"
-      - "traefik.http.routers.maps-ssl.rule=Host(`${MAPS_HOST}`)"
-      - "traefik.http.routers.maps-ssl.entryPoints=websecure"
-      - "traefik.http.routers.maps-ssl.service=maps"
-      - "traefik.http.routers.maps-ssl.tls=true"
-      - "traefik.http.routers.maps-ssl.tls.certresolver=myresolver"
-    restart: ${RESTART_POLICY}
-
   icon:
     image: matthiasluedtke/iconserver:v3.13.0
     labels:

From 666b6df5884568682b9297f50152f63317248e67 Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Thu, 10 Feb 2022 15:37:04 +0100
Subject: [PATCH 10/18] Fix Jitsi co-website reloading

---
 front/src/Phaser/Game/GameScene.ts           | 6 +++---
 front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 443a6256..2f661320 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -2156,9 +2156,9 @@ ${escapedMessage}
         );
         const jitsiUrl = allProps.get(GameMapProperties.JITSI_URL) as string | undefined;
 
-        coWebsite.setJitsiLoadPromise(
-            jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl)
-        );
+        coWebsite.setJitsiLoadPromise(() => {
+            return jitsiFactory.start(roomName, this.playerName, jwt, jitsiConfig, jitsiInterfaceConfig, jitsiUrl);
+        });
 
         coWebsiteManager.loadCoWebsite(coWebsite).catch((err) => {
             console.error(err);
diff --git a/front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts b/front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts
index 66491569..654bb924 100644
--- a/front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts
+++ b/front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts
@@ -5,7 +5,7 @@ import { jitsiFactory } from "../JitsiFactory";
 import { SimpleCoWebsite } from "./SimpleCoWebsite";
 
 export class JitsiCoWebsite extends SimpleCoWebsite {
-    private jitsiLoadPromise?: CancelablePromise<HTMLIFrameElement>;
+    private jitsiLoadPromise?: () => CancelablePromise<HTMLIFrameElement>;
 
     constructor(url: URL, allowApi?: boolean, allowPolicy?: string, widthPercent?: number, closable?: boolean) {
         const coWebsite = coWebsiteManager.searchJitsi();
@@ -17,7 +17,7 @@ export class JitsiCoWebsite extends SimpleCoWebsite {
         super(url, allowApi, allowPolicy, widthPercent, closable);
     }
 
-    setJitsiLoadPromise(promise: CancelablePromise<HTMLIFrameElement>): void {
+    setJitsiLoadPromise(promise: () => CancelablePromise<HTMLIFrameElement>): void {
         this.jitsiLoadPromise = promise;
     }
 
@@ -32,7 +32,7 @@ export class JitsiCoWebsite extends SimpleCoWebsite {
                 return reject("Undefined Jitsi start callback");
             }
 
-            const jitsiLoading = this.jitsiLoadPromise
+            const jitsiLoading = this.jitsiLoadPromise()
                 .then((iframe) => {
                     this.iframe = iframe;
                     this.iframe.classList.add("pixel");

From 460d67534ad42e4b1c3b336fa395710334ade16e Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Thu, 10 Feb 2022 17:02:10 +0100
Subject: [PATCH 11/18] Move all game scene game map properties listeners

---
 .../CoWebsiteThumbnailSlot.svelte             |   6 +-
 .../Phaser/Game/GameMapPropertiesListener.ts  | 130 ++++++++++++++++
 front/src/Phaser/Game/GameScene.ts            | 142 +-----------------
 front/src/Stores/CoWebsiteStore.ts            |   7 +-
 front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts  |  12 --
 front/src/WebRtc/CoWebsiteManager.ts          |   6 +-
 front/src/WebRtc/JitsiFactory.ts              |  35 +----
 7 files changed, 149 insertions(+), 189 deletions(-)

diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
index 2043315b..d1d8c81a 100644
--- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
@@ -2,9 +2,10 @@
     import { onMount } from "svelte";
 
     import { ICON_URL } from "../../Enum/EnvironmentVariable";
-    import { coWebsitesNotAsleep, mainCoWebsite, jitsiCoWebsite } from "../../Stores/CoWebsiteStore";
+    import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore";
     import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
     import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
+    import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
     import { iframeStates } from "../../WebRtc/CoWebsiteManager";
     import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager";
 
@@ -15,10 +16,9 @@
     let icon: HTMLImageElement;
     let iconLoaded = false;
     let state = coWebsite.getStateSubscriber();
-    let isJitsi: boolean = false;
+    let isJitsi: boolean = coWebsite instanceof JitsiCoWebsite;
 
     onMount(() => {
-        isJitsi = Boolean($jitsiCoWebsite && $jitsiCoWebsite.getId() === coWebsite.getId());
         icon.src = isJitsi
             ? "/resources/logos/meet.svg"
             : `${ICON_URL}/icon?url=${coWebsite.getUrl().hostname}&size=64..96..256&fallback_icon_color=14304c`;
diff --git a/front/src/Phaser/Game/GameMapPropertiesListener.ts b/front/src/Phaser/Game/GameMapPropertiesListener.ts
index 22073610..65de00f8 100644
--- a/front/src/Phaser/Game/GameMapPropertiesListener.ts
+++ b/front/src/Phaser/Game/GameMapPropertiesListener.ts
@@ -10,6 +10,12 @@ import type { ITiledMapLayer } from "../Map/ITiledMap";
 import { GameMapProperties } from "./GameMapProperties";
 import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
 import { SimpleCoWebsite } from "../../WebRtc/CoWebsite/SimpleCoWebsite";
+import { jitsiFactory } from "../../WebRtc/JitsiFactory";
+import { JITSI_PRIVATE_MODE, JITSI_URL } from "../../Enum/EnvironmentVariable";
+import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
+import { audioManagerFileStore, audioManagerVisibilityStore } from "../../Stores/AudioManagerStore";
+import { iframeListener } from "../../Api/IframeListener";
+import { Room } from "../../Connexion/Room";
 
 interface OpenCoWebsite {
     actionId: string;
@@ -23,6 +29,7 @@ export class GameMapPropertiesListener {
     constructor(private scene: GameScene, private gameMap: GameMap) {}
 
     register() {
+        // Website on new tab
         this.gameMap.onPropertyChange(GameMapProperties.OPEN_TAB, (newValue, oldValue, allProps) => {
             if (newValue === undefined) {
                 layoutManagerActionStore.removeAction("openTab");
@@ -48,6 +55,129 @@ export class GameMapPropertiesListener {
             }
         });
 
+        // Jitsi room
+        this.gameMap.onPropertyChange(GameMapProperties.JITSI_ROOM, (newValue, oldValue, allProps) => {
+            if (newValue === undefined) {
+                layoutManagerActionStore.removeAction("jitsi");
+                coWebsiteManager.getCoWebsites().forEach((coWebsite) => {
+                    if (coWebsite instanceof JitsiCoWebsite) {
+                        coWebsiteManager.closeCoWebsite(coWebsite);
+                    }
+                });
+            } else {
+                const openJitsiRoomFunction = () => {
+                    const roomName = jitsiFactory.getRoomName(newValue.toString(), this.scene.instance);
+                    const jitsiUrl = allProps.get(GameMapProperties.JITSI_URL) as string | undefined;
+
+                    if (JITSI_PRIVATE_MODE && !jitsiUrl) {
+                        const adminTag = allProps.get(GameMapProperties.JITSI_ADMIN_ROOM_TAG) as string | undefined;
+
+                        this.scene.connection?.emitQueryJitsiJwtMessage(roomName, adminTag);
+                    } else {
+                        let domain = jitsiUrl || JITSI_URL;
+                        if (domain === undefined) {
+                            throw new Error("Missing JITSI_URL environment variable or jitsiUrl parameter in the map.");
+                        }
+
+                        if (domain.substring(0, 7) !== "http://" && domain.substring(0, 8) !== "https://") {
+                            domain = `${location.protocol}//${domain}`;
+                        }
+
+                        const coWebsite = new JitsiCoWebsite(new URL(domain), false, undefined, undefined, false);
+
+                        coWebsiteManager.addCoWebsiteToStore(coWebsite, 0);
+                        this.scene.initialiseJitsi(coWebsite, roomName, undefined);
+                    }
+                    layoutManagerActionStore.removeAction("jitsi");
+                };
+
+                const jitsiTriggerValue = allProps.get(GameMapProperties.JITSI_TRIGGER);
+                const forceTrigger = localUserStore.getForceCowebsiteTrigger();
+                if (forceTrigger || jitsiTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
+                    let message = allProps.get(GameMapProperties.JITSI_TRIGGER_MESSAGE);
+                    if (message === undefined) {
+                        message = "Press SPACE or touch here to enter Jitsi Meet room";
+                    }
+                    layoutManagerActionStore.addAction({
+                        uuid: "jitsi",
+                        type: "message",
+                        message: message,
+                        callback: () => openJitsiRoomFunction(),
+                        userInputManager: this.scene.userInputManager,
+                    });
+                } else {
+                    openJitsiRoomFunction();
+                }
+            }
+        });
+
+        this.gameMap.onPropertyChange(GameMapProperties.EXIT_SCENE_URL, (newValue, oldValue) => {
+            if (newValue) {
+                this.scene
+                    .onMapExit(
+                        Room.getRoomPathFromExitSceneUrl(
+                            newValue as string,
+                            window.location.toString(),
+                            this.scene.MapUrlFile
+                        )
+                    )
+                    .catch((e) => console.error(e));
+            } else {
+                setTimeout(() => {
+                    layoutManagerActionStore.removeAction("roomAccessDenied");
+                }, 2000);
+            }
+        });
+
+        this.gameMap.onPropertyChange(GameMapProperties.EXIT_URL, (newValue, oldValue) => {
+            if (newValue) {
+                this.scene
+                    .onMapExit(Room.getRoomPathFromExitUrl(newValue as string, window.location.toString()))
+                    .catch((e) => console.error(e));
+            } else {
+                setTimeout(() => {
+                    layoutManagerActionStore.removeAction("roomAccessDenied");
+                }, 2000);
+            }
+        });
+
+        this.gameMap.onPropertyChange(GameMapProperties.SILENT, (newValue, oldValue) => {
+            if (newValue === undefined || newValue === false || newValue === "") {
+                this.scene.connection?.setSilent(false);
+                this.scene.CurrentPlayer.noSilent();
+            } else {
+                this.scene.connection?.setSilent(true);
+                this.scene.CurrentPlayer.isSilent();
+            }
+        });
+
+        this.gameMap.onPropertyChange(GameMapProperties.PLAY_AUDIO, (newValue, oldValue, allProps) => {
+            const volume = allProps.get(GameMapProperties.AUDIO_VOLUME) as number | undefined;
+            const loop = allProps.get(GameMapProperties.AUDIO_LOOP) as boolean | undefined;
+            newValue === undefined
+                ? audioManagerFileStore.unloadAudio()
+                : audioManagerFileStore.playAudio(newValue, this.scene.getMapDirUrl(), volume, loop);
+            audioManagerVisibilityStore.set(!(newValue === undefined));
+        });
+
+        // TODO: This legacy property should be removed at some point
+        this.gameMap.onPropertyChange(GameMapProperties.PLAY_AUDIO_LOOP, (newValue, oldValue) => {
+            newValue === undefined
+                ? audioManagerFileStore.unloadAudio()
+                : audioManagerFileStore.playAudio(newValue, this.scene.getMapDirUrl(), undefined, true);
+            audioManagerVisibilityStore.set(!(newValue === undefined));
+        });
+
+        // TODO: Legacy functionnality replace by layer change
+        this.gameMap.onPropertyChange(GameMapProperties.ZONE, (newValue, oldValue) => {
+            if (oldValue) {
+                iframeListener.sendLeaveEvent(oldValue as string);
+            }
+            if (newValue) {
+                iframeListener.sendEnterEvent(newValue as string);
+            }
+        });
+
         // Open a new co-website by the property.
         this.gameMap.onEnterLayer((newLayers) => {
             const handler = () => {
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 2f661320..78e82a30 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -20,15 +20,8 @@ import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
 
 import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
-import { ON_ACTION_TRIGGER_BUTTON } from "../../WebRtc/LayoutManager";
 import { iframeListener } from "../../Api/IframeListener";
-import {
-    DEBUG_MODE,
-    JITSI_PRIVATE_MODE,
-    JITSI_URL,
-    MAX_PER_GROUP,
-    POSITION_DELAY,
-} from "../../Enum/EnvironmentVariable";
+import { DEBUG_MODE, JITSI_URL, MAX_PER_GROUP, POSITION_DELAY } from "../../Enum/EnvironmentVariable";
 import { ProtobufClientUtils } from "../../Network/ProtobufClientUtils";
 import { Room } from "../../Connexion/Room";
 import { jitsiFactory } from "../../WebRtc/JitsiFactory";
@@ -82,7 +75,7 @@ import { emoteStore, emoteMenuStore } from "../../Stores/EmoteStore";
 import { userIsAdminStore } from "../../Stores/GameStore";
 import { contactPageStore } from "../../Stores/MenuStore";
 import type { WasCameraUpdatedEvent } from "../../Api/Events/WasCameraUpdatedEvent";
-import { audioManagerFileStore, audioManagerVisibilityStore } from "../../Stores/AudioManagerStore";
+import { audioManagerFileStore } from "../../Stores/AudioManagerStore";
 
 import EVENT_TYPE = Phaser.Scenes.Events;
 import Texture = Phaser.Textures.Texture;
@@ -636,7 +629,6 @@ export class GameScene extends DirtyScene {
         );
 
         new GameMapPropertiesListener(this, this.gameMap).register();
-        this.triggerOnMapLayerPropertyChange();
 
         if (!this.room.isDisconnected()) {
             this.scene.sleep();
@@ -815,7 +807,7 @@ export class GameScene extends DirtyScene {
 
                     const coWebsite = new JitsiCoWebsite(new URL(domain), false, undefined, undefined, false);
                     coWebsiteManager.addCoWebsiteToStore(coWebsite, 0);
-                    this.startJitsi(coWebsite, message.jitsiRoom, message.jwt);
+                    this.initialiseJitsi(coWebsite, message.jitsiRoom, message.jwt);
                 });
 
                 this.messageSubscription = this.connection.worldFullMessageStream.subscribe((message) => {
@@ -952,116 +944,6 @@ export class GameScene extends DirtyScene {
         }
     }
 
-    private triggerOnMapLayerPropertyChange() {
-        this.gameMap.onPropertyChange(GameMapProperties.EXIT_SCENE_URL, (newValue, oldValue) => {
-            if (newValue) {
-                this.onMapExit(
-                    Room.getRoomPathFromExitSceneUrl(newValue as string, window.location.toString(), this.MapUrlFile)
-                ).catch((e) => console.error(e));
-            } else {
-                setTimeout(() => {
-                    layoutManagerActionStore.removeAction("roomAccessDenied");
-                }, 2000);
-            }
-        });
-        this.gameMap.onPropertyChange(GameMapProperties.EXIT_URL, (newValue, oldValue) => {
-            if (newValue) {
-                this.onMapExit(Room.getRoomPathFromExitUrl(newValue as string, window.location.toString())).catch((e) =>
-                    console.error(e)
-                );
-            } else {
-                setTimeout(() => {
-                    layoutManagerActionStore.removeAction("roomAccessDenied");
-                }, 2000);
-            }
-        });
-
-        this.gameMap.onPropertyChange(GameMapProperties.JITSI_ROOM, (newValue, oldValue, allProps) => {
-            if (newValue === undefined) {
-                layoutManagerActionStore.removeAction("jitsi");
-                this.stopJitsi();
-            } else {
-                const openJitsiRoomFunction = () => {
-                    const roomName = jitsiFactory.getRoomName(newValue.toString(), this.instance);
-                    const jitsiUrl = allProps.get(GameMapProperties.JITSI_URL) as string | undefined;
-
-                    if (JITSI_PRIVATE_MODE && !jitsiUrl) {
-                        const adminTag = allProps.get(GameMapProperties.JITSI_ADMIN_ROOM_TAG) as string | undefined;
-
-                        this.connection?.emitQueryJitsiJwtMessage(roomName, adminTag);
-                    } else {
-                        let domain = jitsiUrl || JITSI_URL;
-                        if (domain === undefined) {
-                            throw new Error("Missing JITSI_URL environment variable or jitsiUrl parameter in the map.");
-                        }
-
-                        if (domain.substring(0, 7) !== "http://" && domain.substring(0, 8) !== "https://") {
-                            domain = `${location.protocol}//${domain}`;
-                        }
-
-                        const coWebsite = new JitsiCoWebsite(new URL(domain), false, undefined, undefined, false);
-
-                        coWebsiteManager.addCoWebsiteToStore(coWebsite, 0);
-                        this.startJitsi(coWebsite, roomName, undefined);
-                    }
-                    layoutManagerActionStore.removeAction("jitsi");
-                };
-
-                const jitsiTriggerValue = allProps.get(GameMapProperties.JITSI_TRIGGER);
-                const forceTrigger = localUserStore.getForceCowebsiteTrigger();
-                if (forceTrigger || jitsiTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
-                    let message = allProps.get(GameMapProperties.JITSI_TRIGGER_MESSAGE);
-                    if (message === undefined) {
-                        message = "Press SPACE or touch here to enter Jitsi Meet room";
-                    }
-                    layoutManagerActionStore.addAction({
-                        uuid: "jitsi",
-                        type: "message",
-                        message: message,
-                        callback: () => openJitsiRoomFunction(),
-                        userInputManager: this.userInputManager,
-                    });
-                } else {
-                    openJitsiRoomFunction();
-                }
-            }
-        });
-        this.gameMap.onPropertyChange(GameMapProperties.SILENT, (newValue, oldValue) => {
-            if (newValue === undefined || newValue === false || newValue === "") {
-                this.connection?.setSilent(false);
-                this.CurrentPlayer.noSilent();
-            } else {
-                this.connection?.setSilent(true);
-                this.CurrentPlayer.isSilent();
-            }
-        });
-        this.gameMap.onPropertyChange(GameMapProperties.PLAY_AUDIO, (newValue, oldValue, allProps) => {
-            const volume = allProps.get(GameMapProperties.AUDIO_VOLUME) as number | undefined;
-            const loop = allProps.get(GameMapProperties.AUDIO_LOOP) as boolean | undefined;
-            newValue === undefined
-                ? audioManagerFileStore.unloadAudio()
-                : audioManagerFileStore.playAudio(newValue, this.getMapDirUrl(), volume, loop);
-            audioManagerVisibilityStore.set(!(newValue === undefined));
-        });
-        // TODO: This legacy property should be removed at some point
-        this.gameMap.onPropertyChange(GameMapProperties.PLAY_AUDIO_LOOP, (newValue, oldValue) => {
-            newValue === undefined
-                ? audioManagerFileStore.unloadAudio()
-                : audioManagerFileStore.playAudio(newValue, this.getMapDirUrl(), undefined, true);
-            audioManagerVisibilityStore.set(!(newValue === undefined));
-        });
-
-        // TODO: Legacy functionnality replace by layer change
-        this.gameMap.onPropertyChange(GameMapProperties.ZONE, (newValue, oldValue) => {
-            if (oldValue) {
-                iframeListener.sendLeaveEvent(oldValue as string);
-            }
-            if (newValue) {
-                iframeListener.sendEnterEvent(newValue as string);
-            }
-        });
-    }
-
     private listenToIframeEvents(): void {
         this.iframeSubscriptionList = [];
         this.iframeSubscriptionList.push(
@@ -1417,7 +1299,7 @@ ${escapedMessage}
                             //Create new colliders with the new GameMap
                             this.createCollisionWithPlayer();
                             //Create new trigger with the new GameMap
-                            this.triggerOnMapLayerPropertyChange();
+                            new GameMapPropertiesListener(this, this.gameMap).register();
                             resolve(newFirstgid);
                         });
                     });
@@ -1533,11 +1415,11 @@ ${escapedMessage}
         this.markDirty();
     }
 
-    private getMapDirUrl(): string {
-        return this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf("/"));
+    public getMapDirUrl(): string {
+        return this.MapUrlFile.substring(0, this.MapUrlFile.lastIndexOf("/"));
     }
 
-    private async onMapExit(roomUrl: URL) {
+    public async onMapExit(roomUrl: URL) {
         if (this.mapTransitioning) return;
         this.mapTransitioning = true;
 
@@ -1603,7 +1485,6 @@ ${escapedMessage}
             iframeListener.unregisterScript(script);
         }
 
-        this.stopJitsi();
         audioManagerFileStore.unloadAudio();
         // We are completely destroying the current scene to avoid using a half-backed instance when coming back to the same map.
         this.connection?.closeConnection();
@@ -2144,7 +2025,7 @@ ${escapedMessage}
         mediaManager.hideMyCamera();
     }
 
-    public startJitsi(coWebsite: JitsiCoWebsite, roomName: string, jwt?: string): void {
+    public initialiseJitsi(coWebsite: JitsiCoWebsite, roomName: string, jwt?: string): void {
         const allProps = this.gameMap.getCurrentProperties();
         const jitsiConfig = this.safeParseJSONstring(
             allProps.get(GameMapProperties.JITSI_CONFIG) as string | undefined,
@@ -2167,13 +2048,6 @@ ${escapedMessage}
         analyticsClient.enteredJitsi(roomName, this.room.id);
     }
 
-    public stopJitsi(): void {
-        const coWebsite = coWebsiteManager.searchJitsi();
-        if (coWebsite) {
-            coWebsiteManager.closeCoWebsite(coWebsite);
-        }
-    }
-
     //todo: put this into an 'orchestrator' scene (EntryScene?)
     private bannedUser() {
         this.cleanupClosingScene();
diff --git a/front/src/Stores/CoWebsiteStore.ts b/front/src/Stores/CoWebsiteStore.ts
index 7f922db4..c4ed2f65 100644
--- a/front/src/Stores/CoWebsiteStore.ts
+++ b/front/src/Stores/CoWebsiteStore.ts
@@ -1,6 +1,5 @@
-import { derived, get, writable } from "svelte/store";
+import { derived, writable } from "svelte/store";
 import type { CoWebsite } from "../WebRtc/CoWebsite/CoWesbite";
-import { JitsiCoWebsite } from "../WebRtc/CoWebsite/JitsiCoWebsite";
 
 function createCoWebsiteStore() {
     const { subscribe, set, update } = writable(Array<CoWebsite>());
@@ -50,7 +49,3 @@ export const coWebsitesNotAsleep = derived([coWebsites], ([$coWebsites]) =>
 export const mainCoWebsite = derived([coWebsites], ([$coWebsites]) =>
     $coWebsites.find((coWebsite) => coWebsite.getState() !== "asleep")
 );
-
-export const jitsiCoWebsite = derived([coWebsites], ([$coWebsites]) =>
-    $coWebsites.find((coWebsite) => coWebsite instanceof JitsiCoWebsite)
-);
diff --git a/front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts b/front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts
index 654bb924..a09b2bcb 100644
--- a/front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts
+++ b/front/src/WebRtc/CoWebsite/JitsiCoWebsite.ts
@@ -1,22 +1,11 @@
 import CancelablePromise from "cancelable-promise";
 import { gameManager } from "../../Phaser/Game/GameManager";
-import { coWebsiteManager } from "../CoWebsiteManager";
 import { jitsiFactory } from "../JitsiFactory";
 import { SimpleCoWebsite } from "./SimpleCoWebsite";
 
 export class JitsiCoWebsite extends SimpleCoWebsite {
     private jitsiLoadPromise?: () => CancelablePromise<HTMLIFrameElement>;
 
-    constructor(url: URL, allowApi?: boolean, allowPolicy?: string, widthPercent?: number, closable?: boolean) {
-        const coWebsite = coWebsiteManager.searchJitsi();
-
-        if (coWebsite) {
-            coWebsiteManager.closeCoWebsite(coWebsite);
-        }
-
-        super(url, allowApi, allowPolicy, widthPercent, closable);
-    }
-
     setJitsiLoadPromise(promise: () => CancelablePromise<HTMLIFrameElement>): void {
         this.jitsiLoadPromise = promise;
     }
@@ -26,7 +15,6 @@ export class JitsiCoWebsite extends SimpleCoWebsite {
             this.state.set("loading");
 
             gameManager.getCurrentGameScene().disableMediaBehaviors();
-            jitsiFactory.restart();
 
             if (!this.jitsiLoadPromise) {
                 return reject("Undefined Jitsi start callback");
diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
index f67b6e18..8e0b85ed 100644
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -1,7 +1,7 @@
 import { HtmlUtils } from "./HtmlUtils";
 import { Subject } from "rxjs";
 import { waScaleManager } from "../Phaser/Services/WaScaleManager";
-import { coWebsites, coWebsitesNotAsleep, jitsiCoWebsite, mainCoWebsite } from "../Stores/CoWebsiteStore";
+import { coWebsites, coWebsitesNotAsleep, mainCoWebsite } from "../Stores/CoWebsiteStore";
 import { get } from "svelte/store";
 import { embedScreenLayout, highlightedEmbedScreen } from "../Stores/EmbedScreensStore";
 import { isMediaBreakpointDown } from "../Utils/BreakpointsUtils";
@@ -565,10 +565,6 @@ class CoWebsiteManager {
         this.resizeAllIframes();
     }
 
-    public searchJitsi(): CoWebsite | undefined {
-        return get(jitsiCoWebsite);
-    }
-
     public addCoWebsiteToStore(coWebsite: CoWebsite, position: number | undefined) {
         const coWebsitePosition = position === undefined ? get(coWebsites).length : position;
         coWebsites.add(coWebsite, coWebsitePosition);
diff --git a/front/src/WebRtc/JitsiFactory.ts b/front/src/WebRtc/JitsiFactory.ts
index 1faa9897..d328a72d 100644
--- a/front/src/WebRtc/JitsiFactory.ts
+++ b/front/src/WebRtc/JitsiFactory.ts
@@ -2,7 +2,6 @@ import { JITSI_URL } from "../Enum/EnvironmentVariable";
 import { coWebsiteManager } from "./CoWebsiteManager";
 import { requestedCameraState, requestedMicrophoneState } from "../Stores/MediaStore";
 import { get } from "svelte/store";
-import type { CoWebsite } from "./CoWebsite/CoWesbite";
 import CancelablePromise from "cancelable-promise";
 
 interface jitsiConfigInterface {
@@ -180,13 +179,14 @@ class JitsiFactory {
                     const iframe = coWebsiteManager
                         .getCoWebsiteBuffer()
                         .querySelector<HTMLIFrameElement>('[id*="jitsi" i]');
+
                     if (iframe && this.jitsiApi) {
                         this.jitsiApi.addListener("videoConferenceLeft", () => {
-                            this.closeOrUnload();
+                            this.closeOrUnload(iframe);
                         });
 
                         this.jitsiApi.addListener("readyToClose", () => {
-                            this.closeOrUnload();
+                            this.closeOrUnload(iframe);
                         });
 
                         return resolve(iframe);
@@ -209,8 +209,9 @@ class JitsiFactory {
         });
     }
 
-    private closeOrUnload = function () {
-        const coWebsite = coWebsiteManager.searchJitsi();
+    private closeOrUnload = function (iframe: HTMLIFrameElement) {
+        const coWebsite = coWebsiteManager.getCoWebsites().find((coWebsite) => coWebsite.getIframe() === iframe);
+
         if (!coWebsite) {
             return;
         }
@@ -224,30 +225,6 @@ class JitsiFactory {
         }
     };
 
-    public restart() {
-        if (!this.jitsiApi) {
-            return;
-        }
-
-        this.jitsiApi.addListener("audioMuteStatusChanged", this.audioCallback);
-        this.jitsiApi.addListener("videoMuteStatusChanged", this.videoCallback);
-
-        const coWebsite = coWebsiteManager.searchJitsi();
-
-        if (!coWebsite) {
-            this.destroy();
-            return;
-        }
-
-        this.jitsiApi.addListener("videoConferenceLeft", () => {
-            this.closeOrUnload();
-        });
-
-        this.jitsiApi.addListener("readyToClose", () => {
-            this.closeOrUnload();
-        });
-    }
-
     public stop() {
         if (!this.jitsiApi) {
             return;

From b0c0d22f2584d805d8ebe0cccd7d7e955a0d31e1 Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Thu, 10 Feb 2022 17:30:03 +0100
Subject: [PATCH 12/18] Translate game map properties trigger messages

---
 front/src/Phaser/Game/GameMapPropertiesListener.ts | 7 ++++---
 front/src/i18n/en-US/index.ts                      | 2 ++
 front/src/i18n/en-US/trigger.ts                    | 9 +++++++++
 front/src/i18n/fr-FR/index.ts                      | 2 ++
 front/src/i18n/fr-FR/menu.ts                       | 2 +-
 front/src/i18n/fr-FR/trigger.ts                    | 9 +++++++++
 6 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 front/src/i18n/en-US/trigger.ts
 create mode 100644 front/src/i18n/fr-FR/trigger.ts

diff --git a/front/src/Phaser/Game/GameMapPropertiesListener.ts b/front/src/Phaser/Game/GameMapPropertiesListener.ts
index 65de00f8..103cc4bc 100644
--- a/front/src/Phaser/Game/GameMapPropertiesListener.ts
+++ b/front/src/Phaser/Game/GameMapPropertiesListener.ts
@@ -16,6 +16,7 @@ import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
 import { audioManagerFileStore, audioManagerVisibilityStore } from "../../Stores/AudioManagerStore";
 import { iframeListener } from "../../Api/IframeListener";
 import { Room } from "../../Connexion/Room";
+import LL from "../../i18n/i18n-svelte";
 
 interface OpenCoWebsite {
     actionId: string;
@@ -40,7 +41,7 @@ export class GameMapPropertiesListener {
                 if (forceTrigger || openWebsiteTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
                     let message = allProps.get(GameMapProperties.OPEN_WEBSITE_TRIGGER_MESSAGE);
                     if (message === undefined) {
-                        message = "Press SPACE or touch here to open web site in new tab";
+                        message = get(LL).trigger.newTab();
                     }
                     layoutManagerActionStore.addAction({
                         uuid: "openTab",
@@ -96,7 +97,7 @@ export class GameMapPropertiesListener {
                 if (forceTrigger || jitsiTriggerValue === ON_ACTION_TRIGGER_BUTTON) {
                     let message = allProps.get(GameMapProperties.JITSI_TRIGGER_MESSAGE);
                     if (message === undefined) {
-                        message = "Press SPACE or touch here to enter Jitsi Meet room";
+                        message = get(LL).trigger.jitsiRoom();
                     }
                     layoutManagerActionStore.addAction({
                         uuid: "jitsi",
@@ -265,7 +266,7 @@ export class GameMapPropertiesListener {
                         websiteTriggerProperty === ON_ACTION_TRIGGER_BUTTON
                     ) {
                         if (!websiteTriggerMessageProperty) {
-                            websiteTriggerMessageProperty = "Press SPACE or touch here to open web site";
+                            websiteTriggerMessageProperty = get(LL).trigger.cowebsite();
                         }
 
                         this.coWebsitesActionTriggerByLayer.set(layer, actionId);
diff --git a/front/src/i18n/en-US/index.ts b/front/src/i18n/en-US/index.ts
index 2d3ac74a..b1a0e422 100644
--- a/front/src/i18n/en-US/index.ts
+++ b/front/src/i18n/en-US/index.ts
@@ -11,6 +11,7 @@ import menu from "./menu";
 import report from "./report";
 import warning from "./warning";
 import emoji from "./emoji";
+import trigger from "./trigger";
 
 const en_US: BaseTranslation = {
     language: "English",
@@ -27,6 +28,7 @@ const en_US: BaseTranslation = {
     report,
     warning,
     emoji,
+    trigger,
 };
 
 export default en_US;
diff --git a/front/src/i18n/en-US/trigger.ts b/front/src/i18n/en-US/trigger.ts
new file mode 100644
index 00000000..40e84bf4
--- /dev/null
+++ b/front/src/i18n/en-US/trigger.ts
@@ -0,0 +1,9 @@
+import type { BaseTranslation } from "../i18n-types";
+
+const trigger: BaseTranslation = {
+    cowebsite: "Press SPACE or touch here to open web site",
+    jitsiRoom: "Press SPACE or touch here to enter Jitsi Meet room",
+    newTab: "Press SPACE or touch here to open web site in new tab",
+};
+
+export default trigger;
diff --git a/front/src/i18n/fr-FR/index.ts b/front/src/i18n/fr-FR/index.ts
index b9f91b13..5c9c587e 100644
--- a/front/src/i18n/fr-FR/index.ts
+++ b/front/src/i18n/fr-FR/index.ts
@@ -12,6 +12,7 @@ import menu from "./menu";
 import report from "./report";
 import warning from "./warning";
 import woka from "./woka";
+import trigger from "./trigger";
 
 const fr_FR: Translation = {
     ...en_US,
@@ -29,6 +30,7 @@ const fr_FR: Translation = {
     report,
     warning,
     emoji,
+    trigger,
 };
 
 export default fr_FR;
diff --git a/front/src/i18n/fr-FR/menu.ts b/front/src/i18n/fr-FR/menu.ts
index 54481ec8..1ca20fd7 100644
--- a/front/src/i18n/fr-FR/menu.ts
+++ b/front/src/i18n/fr-FR/menu.ts
@@ -63,7 +63,7 @@ const menu: NonNullable<Translation["menu"]> = {
         },
         fullscreen: "Plein écran",
         notifications: "Notifications",
-        cowebsiteTrigger: "Demander toujours avant d'ouvrir des sites web et des salles de réunion Jitsi",
+        cowebsiteTrigger: "Demander toujours avant d'ouvrir des sites web et des salles de conférence Jitsi",
         ignoreFollowRequest: "Ignorer les demandes de suivi des autres utilisateurs",
     },
     invite: {
diff --git a/front/src/i18n/fr-FR/trigger.ts b/front/src/i18n/fr-FR/trigger.ts
new file mode 100644
index 00000000..5940e92a
--- /dev/null
+++ b/front/src/i18n/fr-FR/trigger.ts
@@ -0,0 +1,9 @@
+import type { Translation } from "../i18n-types";
+
+const trigger: NonNullable<Translation["trigger"]> = {
+    cowebsite: "Appuyez sur ESPACE ou ici pour ouvrir le site Web",
+    jitsiRoom: "Appuyez sur ESPACE ou ici pour entrer dans la salle conférence Jitsi",
+    newTab: "Appuyez sur ESPACE ou ici pour ouvrir le site Web dans un nouvel onglet",
+};
+
+export default trigger;

From a5e0c2a9cf281a37683a5592d76c77b8e4e8c48e Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Thu, 10 Feb 2022 19:26:46 +0100
Subject: [PATCH 13/18] Add main cowebsite minimize indicator

---
 .../CoWebsiteThumbnailSlot.svelte             | 29 ++++++++++++-------
 front/src/WebRtc/CoWebsiteManager.ts          | 25 ++++++++--------
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
index d1d8c81a..4ff59f5d 100644
--- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
@@ -2,7 +2,7 @@
     import { onMount } from "svelte";
 
     import { ICON_URL } from "../../Enum/EnvironmentVariable";
-    import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore";
+    import { mainCoWebsite } from "../../Stores/CoWebsiteStore";
     import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
     import type { CoWebsite } from "../../WebRtc/CoWebsite/CoWesbite";
     import { JitsiCoWebsite } from "../../WebRtc/CoWebsite/JitsiCoWebsite";
@@ -17,6 +17,7 @@
     let iconLoaded = false;
     let state = coWebsite.getStateSubscriber();
     let isJitsi: boolean = coWebsite instanceof JitsiCoWebsite;
+    const mainState = coWebsiteManager.getMainStateSubscriber();
 
     onMount(() => {
         icon.src = isJitsi
@@ -33,20 +34,23 @@
             coWebsiteManager.goToMain(coWebsite);
         } else if ($mainCoWebsite) {
             if ($mainCoWebsite.getId() === coWebsite.getId()) {
-                const coWebsites = $coWebsitesNotAsleep;
-                const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined;
-                if (newMain && newMain.getId() !== $mainCoWebsite.getId()) {
-                    coWebsiteManager.goToMain(newMain);
-                } else if (coWebsiteManager.getMainState() === iframeStates.closed) {
+                if (coWebsiteManager.getMainState() === iframeStates.closed) {
                     coWebsiteManager.displayMain();
+                } else if ($highlightedEmbedScreen?.type === "cowebsite") {
+                    coWebsiteManager.goToMain($highlightedEmbedScreen.embed);
                 } else {
                     coWebsiteManager.hideMain();
                 }
             } else {
-                highlightedEmbedScreen.toggleHighlight({
-                    type: "cowebsite",
-                    embed: coWebsite,
-                });
+                if (coWebsiteManager.getMainState() === iframeStates.closed) {
+                    coWebsiteManager.goToMain(coWebsite);
+                    coWebsiteManager.displayMain();
+                } else {
+                    highlightedEmbedScreen.toggleHighlight({
+                        type: "cowebsite",
+                        embed: coWebsite,
+                    });
+                }
             }
         }
 
@@ -64,7 +68,10 @@
     let isHighlight: boolean = false;
     let isMain: boolean = false;
     $: {
-        isMain = $mainCoWebsite !== undefined && $mainCoWebsite.getId() === coWebsite.getId();
+        isMain =
+            $mainState === iframeStates.opened &&
+            $mainCoWebsite !== undefined &&
+            $mainCoWebsite.getId() === coWebsite.getId();
         isHighlight =
             $highlightedEmbedScreen !== null &&
             $highlightedEmbedScreen.type === "cowebsite" &&
diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
index 8e0b85ed..a5c57ed6 100644
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -2,7 +2,7 @@ import { HtmlUtils } from "./HtmlUtils";
 import { Subject } from "rxjs";
 import { waScaleManager } from "../Phaser/Services/WaScaleManager";
 import { coWebsites, coWebsitesNotAsleep, mainCoWebsite } from "../Stores/CoWebsiteStore";
-import { get } from "svelte/store";
+import { get, Readable, Writable, writable } from "svelte/store";
 import { embedScreenLayout, highlightedEmbedScreen } from "../Stores/EmbedScreensStore";
 import { isMediaBreakpointDown } from "../Utils/BreakpointsUtils";
 import { LayoutMode } from "./LayoutManager";
@@ -34,7 +34,7 @@ interface TouchMoveCoordinates {
 }
 
 class CoWebsiteManager {
-    private openedMain: iframeStates = iframeStates.closed;
+    private openedMain: Writable<iframeStates> = writable(iframeStates.closed);
 
     private _onResize: Subject<void> = new Subject();
     public onResize = this._onResize.asObservable();
@@ -57,6 +57,10 @@ class CoWebsiteManager {
     });
 
     public getMainState() {
+        return get(this.openedMain);
+    }
+
+    public getMainStateSubscriber(): Readable<iframeStates> {
         return this.openedMain;
     }
 
@@ -324,7 +328,7 @@ class CoWebsiteManager {
         }
         this.cowebsiteDom.classList.add("closing");
         this.cowebsiteDom.classList.remove("opened");
-        this.openedMain = iframeStates.closed;
+        this.openedMain.set(iframeStates.closed);
         this.fire();
     }
 
@@ -332,7 +336,7 @@ class CoWebsiteManager {
         this.toggleFullScreenIcon(true);
         this.cowebsiteDom.classList.add("closing");
         this.cowebsiteDom.classList.remove("opened");
-        this.openedMain = iframeStates.closed;
+        this.openedMain.set(iframeStates.closed);
         this.resetStyleMain();
         this.fire();
     }
@@ -386,14 +390,14 @@ class CoWebsiteManager {
         }
 
         this.cowebsiteDom.classList.add("opened");
-        this.openedMain = iframeStates.loading;
+        this.openedMain.set(iframeStates.loading);
     }
 
     private openMain(): void {
         this.cowebsiteDom.addEventListener("transitionend", () => {
             this.resizeAllIframes();
         });
-        this.openedMain = iframeStates.opened;
+        this.openedMain.set(iframeStates.opened);
     }
 
     public resetStyleMain() {
@@ -556,10 +560,7 @@ class CoWebsiteManager {
             mainCoWebsite.getId() !== coWebsite.getId() &&
             mainCoWebsite.getState() !== "asleep"
         ) {
-            highlightedEmbedScreen.toggleHighlight({
-                type: "cowebsite",
-                embed: mainCoWebsite,
-            });
+            highlightedEmbedScreen.removeHighlight();
         }
 
         this.resizeAllIframes();
@@ -587,7 +588,7 @@ class CoWebsiteManager {
         }
 
         // Check if the main is hide
-        if (this.getMainCoWebsite() && this.openedMain === iframeStates.closed) {
+        if (this.getMainCoWebsite() && this.getMainState() === iframeStates.closed) {
             this.displayMain();
         }
 
@@ -661,7 +662,7 @@ class CoWebsiteManager {
     }
 
     public getGameSize(): { width: number; height: number } {
-        if (this.openedMain === iframeStates.closed) {
+        if (this.getMainState() === iframeStates.closed) {
             return {
                 width: window.innerWidth,
                 height: window.innerHeight,

From b7f4c0eecc15a6c7a726102fd223e085ef079205 Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Thu, 10 Feb 2022 19:29:41 +0100
Subject: [PATCH 14/18] Fix bad type base i18n translations

---
 front/src/i18n/de-DE/index.ts | 2 +-
 front/src/i18n/fr-FR/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/src/i18n/de-DE/index.ts b/front/src/i18n/de-DE/index.ts
index ab628a4d..40b63558 100644
--- a/front/src/i18n/de-DE/index.ts
+++ b/front/src/i18n/de-DE/index.ts
@@ -14,7 +14,7 @@ import warning from "./warning";
 import woka from "./woka";
 
 const de_DE: Translation = {
-    ...en_US,
+    ...(en_US as Translation),
     language: "Deutsch",
     country: "Deutschland",
     audio,
diff --git a/front/src/i18n/fr-FR/index.ts b/front/src/i18n/fr-FR/index.ts
index 5c9c587e..77acbb4a 100644
--- a/front/src/i18n/fr-FR/index.ts
+++ b/front/src/i18n/fr-FR/index.ts
@@ -15,7 +15,7 @@ import woka from "./woka";
 import trigger from "./trigger";
 
 const fr_FR: Translation = {
-    ...en_US,
+    ...(en_US as Translation),
     language: "Français",
     country: "France",
     audio,

From 5137190558c20f70a9bfd6607d17cfa5f73e95cb Mon Sep 17 00:00:00 2001
From: Alexis Faizeau <a.faizeau@workadventu.re>
Date: Fri, 11 Feb 2022 15:06:41 +0100
Subject: [PATCH 15/18] Change cowebsite closing animation

---
 .../EmbedScreens/CoWebsiteThumbnailSlot.svelte    | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
index 4ff59f5d..b01dbf0a 100644
--- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
+++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte
@@ -219,7 +219,8 @@
         }
 
         &:not(.vertical) {
-            animation: bounce 0.35s ease 6 alternate;
+            transition: all 300ms;
+            transform: translateY(0px);
         }
 
         &.vertical {
@@ -240,7 +241,7 @@
 
         &.displayed {
             &:not(.vertical) {
-                animation: activeThumbnail 300ms ease-in 0s forwards;
+                transform: translateY(-15px);
             }
         }
 
@@ -269,16 +270,6 @@
             }
         }
 
-        @keyframes activeThumbnail {
-            0% {
-                transform: translateY(0);
-            }
-
-            100% {
-                transform: translateY(-15px);
-            }
-        }
-
         @keyframes bounce {
             from {
                 transform: translateY(0);

From 664cce87b8c31be9b2274a880ef2e954b59933bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Feb 2022 15:37:23 +0100
Subject: [PATCH 16/18] Improving rendering of share screen

---
 front/src/Components/Menu/GuestSubMenu.svelte | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/front/src/Components/Menu/GuestSubMenu.svelte b/front/src/Components/Menu/GuestSubMenu.svelte
index 34fba1af..f24a3f90 100644
--- a/front/src/Components/Menu/GuestSubMenu.svelte
+++ b/front/src/Components/Menu/GuestSubMenu.svelte
@@ -28,6 +28,8 @@
         }
     }
 
+    let canShare = navigator.canShare;
+
     async function shareLink() {
         const shareData = { url: getLink() };
 
@@ -42,18 +44,21 @@
 
 <div class="guest-main">
     <section class="container-overflow">
+        {#if (!canShare) }
         <section class="share-url not-mobile">
             <h3>{$LL.menu.invite.description()}</h3>
-            <input type="text" readonly id="input-share-link" value={location.toString()} />
+            <input type="text" readonly id="input-share-link" class="link-url" value={location.toString()} />
             <button type="button" class="nes-btn is-primary" on:click={copyLink}>{$LL.menu.invite.copy()}</button>
         </section>
+        {:else}
         <section class="is-mobile">
             <h3>{$LL.menu.invite.description()}</h3>
             <input type="hidden" readonly id="input-share-link" value={location.toString()} />
             <button type="button" class="nes-btn is-primary" on:click={shareLink}>{$LL.menu.invite.share()}</button>
         </section>
+        {/if}
         <h3>Select an entry point</h3>
-        <section class="nes-select is-dark">
+        <section class="nes-select is-dark starting-points">
             <select
                 bind:value={entryPoint}
                 on:blur={() => {
@@ -83,9 +88,18 @@
     @import "../../../style/breakpoints.scss";
 
     div.guest-main {
+        width: 50%;
+        margin-left: auto;
+        margin-right: auto;
         height: calc(100% - 56px);
 
-        text-align: center;
+        input.link-url {
+            width: calc(100% - 200px);
+        }
+
+        .starting-points {
+            width: 80%;
+        }
 
         section {
             margin-bottom: 50px;
@@ -103,25 +117,23 @@
         }
 
         section.is-mobile {
-            display: none;
+            display: block;
+            text-align: center;
+            margin-bottom: 20px;
         }
     }
 
     @include media-breakpoint-up(md) {
         div.guest-main {
-            section.share-url.not-mobile {
-                display: none;
-            }
-
-            section.is-mobile {
-                display: block;
-                text-align: center;
-                margin-bottom: 20px;
-            }
-
             section.container-overflow {
                 height: calc(100% - 120px);
             }
         }
     }
+
+    @include media-breakpoint-up(lg) {
+      div.guest-main {
+        width: 100%;
+      }
+    }
 </style>

From a91f022fd206903bc378a21a464f66014cda7349 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Feb 2022 15:47:57 +0100
Subject: [PATCH 17/18] Making typesafe-i18n watch by default

---
 front/package.json | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/front/package.json b/front/package.json
index 86308a89..39c6f255 100644
--- a/front/package.json
+++ b/front/package.json
@@ -71,7 +71,7 @@
     "zod": "^3.11.6"
   },
   "scripts": {
-    "start": "run-p templater serve svelte-check-watch typesafe-i18n",
+    "start": "run-p templater serve svelte-check-watch typesafe-i18n-watch",
     "templater": "cross-env ./templater.sh",
     "serve": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
     "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack",
@@ -84,7 +84,8 @@
     "svelte-check": "svelte-check --fail-on-warnings --fail-on-hints --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore,a11y-media-has-caption:ignore\"",
     "pretty": "yarn prettier --write 'src/**/*.{ts,svelte}'",
     "pretty-check": "yarn prettier --check 'src/**/*.{ts,svelte}'",
-    "typesafe-i18n": "typesafe-i18n  --no-watch"
+    "typesafe-i18n": "typesafe-i18n  --no-watch",
+    "typesafe-i18n-watch": "typesafe-i18n"
   },
   "lint-staged": {
     "*.svelte": [

From 62f8a131a95d188d34efe4825bcef27b5736fec1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Feb 2022 15:52:24 +0100
Subject: [PATCH 18/18] Adding translation for "Walk automatically to my
 position"

---
 front/src/Components/Menu/GuestSubMenu.svelte | 32 +++++++++----------
 front/src/i18n/de-DE/menu.ts                  |  1 +
 front/src/i18n/en-US/menu.ts                  |  1 +
 front/src/i18n/fr-FR/menu.ts                  |  1 +
 4 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/front/src/Components/Menu/GuestSubMenu.svelte b/front/src/Components/Menu/GuestSubMenu.svelte
index f24a3f90..fbbc48a4 100644
--- a/front/src/Components/Menu/GuestSubMenu.svelte
+++ b/front/src/Components/Menu/GuestSubMenu.svelte
@@ -28,7 +28,7 @@
         }
     }
 
-    let canShare = navigator.canShare;
+    let canShare = navigator.share !== undefined;
 
     async function shareLink() {
         const shareData = { url: getLink() };
@@ -44,18 +44,18 @@
 
 <div class="guest-main">
     <section class="container-overflow">
-        {#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()} />
-            <button type="button" class="nes-btn is-primary" on:click={copyLink}>{$LL.menu.invite.copy()}</button>
-        </section>
+        {#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()} />
+                <button type="button" class="nes-btn is-primary" on:click={copyLink}>{$LL.menu.invite.copy()}</button>
+            </section>
         {:else}
-        <section class="is-mobile">
-            <h3>{$LL.menu.invite.description()}</h3>
-            <input type="hidden" readonly id="input-share-link" value={location.toString()} />
-            <button type="button" class="nes-btn is-primary" on:click={shareLink}>{$LL.menu.invite.share()}</button>
-        </section>
+            <section class="is-mobile">
+                <h3>{$LL.menu.invite.description()}</h3>
+                <input type="hidden" readonly id="input-share-link" value={location.toString()} />
+                <button type="button" class="nes-btn is-primary" on:click={shareLink}>{$LL.menu.invite.share()}</button>
+            </section>
         {/if}
         <h3>Select an entry point</h3>
         <section class="nes-select is-dark starting-points">
@@ -79,7 +79,7 @@
                     updateInputFieldValue();
                 }}
             />
-            <span>Walk automatically to my position</span>
+            <span>{$LL.menu.invite.walk_automatically_to_position()}</span>
         </label>
     </section>
 </div>
@@ -132,8 +132,8 @@
     }
 
     @include media-breakpoint-up(lg) {
-      div.guest-main {
-        width: 100%;
-      }
+        div.guest-main {
+            width: 100%;
+        }
     }
 </style>
diff --git a/front/src/i18n/de-DE/menu.ts b/front/src/i18n/de-DE/menu.ts
index 5fb7882d..5e695d95 100644
--- a/front/src/i18n/de-DE/menu.ts
+++ b/front/src/i18n/de-DE/menu.ts
@@ -70,6 +70,7 @@ const menu: NonNullable<Translation["menu"]> = {
         description: "Link zu diesem Raum teilen!",
         copy: "Kopieren",
         share: "Teilen",
+        walk_automatically_to_position: "Walk automatically to my position",
     },
     globalMessage: {
         text: "Text",
diff --git a/front/src/i18n/en-US/menu.ts b/front/src/i18n/en-US/menu.ts
index b7c69935..0883fb15 100644
--- a/front/src/i18n/en-US/menu.ts
+++ b/front/src/i18n/en-US/menu.ts
@@ -70,6 +70,7 @@ const menu: BaseTranslation = {
         description: "Share the link of the room!",
         copy: "Copy",
         share: "Share",
+        walk_automatically_to_position: "Walk automatically to my position",
     },
     globalMessage: {
         text: "Text",
diff --git a/front/src/i18n/fr-FR/menu.ts b/front/src/i18n/fr-FR/menu.ts
index 54481ec8..bf3ede7a 100644
--- a/front/src/i18n/fr-FR/menu.ts
+++ b/front/src/i18n/fr-FR/menu.ts
@@ -70,6 +70,7 @@ const menu: NonNullable<Translation["menu"]> = {
         description: "Partager le lien de la salle!",
         copy: "Copier",
         share: "Partager",
+        walk_automatically_to_position: "Marcher automatiquement jusqu'à ma position",
     },
     globalMessage: {
         text: "Texte",