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 1/8] 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 2/8] 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 3/8] 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 4/8] 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 5/8] 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 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 6/8] 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 7/8] 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 8/8] 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",