From 6c6789411ada78963fe7ed3faa408e54d03764fc Mon Sep 17 00:00:00 2001
From: jonny <ga86lad@mytum.de>
Date: Wed, 21 Apr 2021 11:20:17 +0200
Subject: [PATCH 001/141] added loadPage Api call

---
 front/src/Api/Events/LoadPageEvent.ts | 13 +++++++++++++
 front/src/Api/IframeListener.ts       |  7 +++++++
 front/src/Phaser/Game/GameScene.ts    |  6 ++++++
 front/src/iframe_api.ts               | 11 +++++++++++
 4 files changed, 37 insertions(+)
 create mode 100644 front/src/Api/Events/LoadPageEvent.ts

diff --git a/front/src/Api/Events/LoadPageEvent.ts b/front/src/Api/Events/LoadPageEvent.ts
new file mode 100644
index 00000000..6f8b9bcf
--- /dev/null
+++ b/front/src/Api/Events/LoadPageEvent.ts
@@ -0,0 +1,13 @@
+import * as tg from "generic-type-guard";
+
+
+
+export const isLoadPageEvent =
+    new tg.IsInterface().withProperties({
+        url: tg.isString,
+    }).get();
+
+/**
+ * A message sent from the iFrame to the game to add a message in the chat.
+ */
+export type LoadPageEvent = tg.GuardedType<typeof isLoadPageEvent>;
diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts
index c875ebbb..f20e055c 100644
--- a/front/src/Api/IframeListener.ts
+++ b/front/src/Api/IframeListener.ts
@@ -12,6 +12,7 @@ import {ClosePopupEvent, isClosePopupEvent} from "./Events/ClosePopupEvent";
 import {scriptUtils} from "./ScriptUtils";
 import {GoToPageEvent, isGoToPageEvent} from "./Events/GoToPageEvent";
 import {isOpenCoWebsite, OpenCoWebSiteEvent} from "./Events/OpenCoWebSiteEvent";
+import { isLoadPageEvent } from './Events/LoadPageEvent';
 
 
 /**
@@ -31,6 +32,10 @@ class IframeListener {
     private readonly _goToPageStream: Subject<GoToPageEvent> = new Subject();
     public readonly goToPageStream = this._goToPageStream.asObservable();
 
+    
+    private readonly _loadPageStream: Subject<string> = new Subject();
+    public readonly loadPageStream = this._loadPageStream.asObservable();
+
     private readonly _openCoWebSiteStream: Subject<OpenCoWebSiteEvent> = new Subject();
     public readonly openCoWebSiteStream = this._openCoWebSiteStream.asObservable();
 
@@ -103,6 +108,8 @@ class IframeListener {
                 }
                 else if (payload.type === 'removeBubble'){
                     this._removeBubbleStream.next();
+                }else if (payload.type === 'loadPage' && isLoadPageEvent(payload.data)){
+                    this._loadPageStream.next(payload.data.url);
                 }
             }
 
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 990f702c..ca13491c 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -841,6 +841,12 @@ ${escapedMessage}
        this.iframeSubscriptionList.push(iframeListener.enablePlayerControlStream.subscribe(()=>{
             this.userInputManager.restoreControls();
         }));
+        this.iframeSubscriptionList.push(iframeListener.loadPageStream.subscribe((url:string)=>{
+            this.loadNextGame(url).then(()=>{
+                this.scene.systems.settings.isTransition=true
+                this.onMapExit(url)
+            })
+        }));
         let scriptedBubbleSprite : Sprite;
        this.iframeSubscriptionList.push(iframeListener.displayBubbleStream.subscribe(()=>{
             scriptedBubbleSprite = new Sprite(this,this.CurrentPlayer.x + 25,this.CurrentPlayer.y,'circleSprite-white');
diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index 18d8d172..fb25c015 100644
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@@ -9,6 +9,7 @@ import {ClosePopupEvent} from "./Api/Events/ClosePopupEvent";
 import {OpenTabEvent} from "./Api/Events/OpenTabEvent";
 import {GoToPageEvent} from "./Api/Events/GoToPageEvent";
 import {OpenCoWebSiteEvent} from "./Api/Events/OpenCoWebSiteEvent";
+import { LoadPageEvent } from './Api/Events/LoadPageEvent';
 
 interface WorkAdventureApi {
     sendChatMessage(message: string, author: string): void;
@@ -18,6 +19,7 @@ interface WorkAdventureApi {
     openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
     openTab(url : string): void;
     goToPage(url : string): void;
+    loadPage(url : string): void;
     openCoWebSite(url : string): void;
     closeCoWebSite(): void;
     disablePlayerControl() : void;
@@ -122,6 +124,15 @@ window.WA = {
             },'*');
     },
 
+    loadPage(url : string) : void{
+        window.parent.postMessage({
+            "type" : 'loadPage',
+            "data" : {
+                url
+            } as LoadPageEvent
+            },'*');
+    },
+
     openCoWebSite(url : string) : void{
         window.parent.postMessage({
             "type" : 'openCoWebSite',

From 006195e8cc78998cd51cf70925551780f5524b67 Mon Sep 17 00:00:00 2001
From: jonny <ga86lad@mytum.de>
Date: Wed, 21 Apr 2021 11:54:37 +0200
Subject: [PATCH 002/141] rewrote to run in event loop

---
 front/src/Phaser/Game/GameScene.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index ca13491c..56647cfc 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -74,6 +74,7 @@ import CanvasTexture = Phaser.Textures.CanvasTexture;
 import GameObject = Phaser.GameObjects.GameObject;
 import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR;
 import DOMElement = Phaser.GameObjects.DOMElement;
+import EVENT_TYPE =Phaser.Scenes.Events
 import {Subscription} from "rxjs";
 import {worldFullMessageStream} from "../../Connexion/WorldFullMessageStream";
 import { lazyLoadCompanionResource } from "../Companion/CompanionTexturesLoadingManager";
@@ -843,8 +844,9 @@ ${escapedMessage}
         }));
         this.iframeSubscriptionList.push(iframeListener.loadPageStream.subscribe((url:string)=>{
             this.loadNextGame(url).then(()=>{
-                this.scene.systems.settings.isTransition=true
-                this.onMapExit(url)
+                this.events.once(EVENT_TYPE.POST_UPDATE,()=>{
+                    this.onMapExit(url);
+                })
             })
         }));
         let scriptedBubbleSprite : Sprite;

From 8f6c65384a7a17c3df659fed8b63e3cd06327d70 Mon Sep 17 00:00:00 2001
From: jonny <ga86lad@mytum.de>
Date: Thu, 29 Apr 2021 10:43:51 +0200
Subject: [PATCH 003/141] added example script for map exit

---
 maps/tests/goToPageScript.js | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/maps/tests/goToPageScript.js b/maps/tests/goToPageScript.js
index 2b2cf33b..0404bdb4 100644
--- a/maps/tests/goToPageScript.js
+++ b/maps/tests/goToPageScript.js
@@ -1,14 +1,16 @@
+/// <reference path="../../front/src/iframe_api.ts" />
 var zoneName = "popUpGoToPageZone";
 var urlPricing = "https://workadventu.re/pricing";
 var urlGettingStarted = "https://workadventu.re/getting-started";
-var isCoWebSiteOpened =  false;
+var urlRelativeMap = "script_api.json";
+var isCoWebSiteOpened = false;
 
 WA.onChatMessage((message => {
-    WA.sendChatMessage('Poly Parrot says: "'+message+'"', 'Poly Parrot');
+    WA.sendChatMessage('Poly Parrot says: "' + message + '"', 'Poly Parrot');
 }));
 
 WA.onEnterZone(zoneName, () => {
-    WA.openPopup("popUp","Open Links",[
+    WA.openPopup("popUp", "Open Links", [
         {
             label: "Open Tab",
             className: "popUpElement",
@@ -18,27 +20,34 @@ WA.onEnterZone(zoneName, () => {
             })
         },
         {
-            label: "Go To Page", className : "popUpElement",
-            callback:(popup => {
+            label: "Go To Page", className: "popUpElement",
+            callback: (popup => {
                 WA.goToPage(urlPricing);
                 popup.close();
             })
 
-        }
-        ,
+        },
         {
-            label: "openCoWebSite", className : "popUpElement",
-            callback:(popup => {
+            label: "openCoWebSite", className: "popUpElement",
+            callback: (popup => {
                 WA.openCoWebSite(urlPricing);
                 isCoWebSiteOpened = true;
                 popup.close();
             })
 
+        }, {
+            label: "load grouped map",
+            className: "popUpElement",
+            callback: (popup => {
+                WA.loadPage(urlRelativeMap);
+                popup.close();
+            })
+
         }]);
 })
 
 WA.onLeaveZone(zoneName, () => {
-    if (isCoWebSiteOpened) {
+    if(isCoWebSiteOpened) {
         WA.closeCoWebSite();
         isCoWebSiteOpened = false;
     }

From 99926a89b260f4ba9f570f71faac23f6f47fa211 Mon Sep 17 00:00:00 2001
From: jonny <ga86lad@mytum.de>
Date: Thu, 29 Apr 2021 10:55:01 +0200
Subject: [PATCH 004/141] added goToPage.json with the loadPAge Api call to the
 index.html

---
 maps/tests/index.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/maps/tests/index.html b/maps/tests/index.html
index f53bbae9..bb25b19c 100644
--- a/maps/tests/index.html
+++ b/maps/tests/index.html
@@ -41,6 +41,14 @@
                 <td>
                     <a href="#" class="testLink" data-testmap="script_api.json" target="_blank">Testing scripting API with a script</a>
                 </td>
+            </tr>
+			  <tr>
+                <td>
+                    <input type="radio" name="test-scripting-api"> Success <input type="radio" name="test-scripting-api"> Failure <input type="radio" name="test-scripting-api" checked> Pending
+                </td>
+                <td>
+                    <a href="#" class="testLink" data-testmap="goToPage.json" target="_blank">Testing scripting API with a script</a>
+                </td>
             </tr>
         </table>
 

From 99bd9d88d9db60c0fa750720b7306ee52f90e3bb Mon Sep 17 00:00:00 2001
From: jonny <ga86lad@mytum.de>
Date: Thu, 29 Apr 2021 10:56:56 +0200
Subject: [PATCH 005/141] renamed api method "exitSceneTo"

---
 front/src/iframe_api.ts      | 4 ++--
 maps/tests/goToPageScript.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index fb25c015..56cffb1c 100644
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@@ -19,7 +19,7 @@ interface WorkAdventureApi {
     openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
     openTab(url : string): void;
     goToPage(url : string): void;
-    loadPage(url : string): void;
+    exitSceneTo(url : string): void;
     openCoWebSite(url : string): void;
     closeCoWebSite(): void;
     disablePlayerControl() : void;
@@ -124,7 +124,7 @@ window.WA = {
             },'*');
     },
 
-    loadPage(url : string) : void{
+    exitSceneTo(url : string) : void{
         window.parent.postMessage({
             "type" : 'loadPage',
             "data" : {
diff --git a/maps/tests/goToPageScript.js b/maps/tests/goToPageScript.js
index 0404bdb4..af5b7f9f 100644
--- a/maps/tests/goToPageScript.js
+++ b/maps/tests/goToPageScript.js
@@ -39,7 +39,7 @@ WA.onEnterZone(zoneName, () => {
             label: "load grouped map",
             className: "popUpElement",
             callback: (popup => {
-                WA.loadPage(urlRelativeMap);
+                WA.exitSceneTo(urlRelativeMap);
                 popup.close();
             })
 

From 2d8997c6d7bbfc8a96afbe2c7ba21f72a39da6d9 Mon Sep 17 00:00:00 2001
From: TabascoEye <tabascoeye@gmail.com>
Date: Tue, 11 May 2021 17:38:28 +0200
Subject: [PATCH 006/141] turning noise suppresion back on

turning AGC off was a good idea, disabling noise suppresion with it was not.
=> should all end up in the "settings" menu in the end
---
 front/src/WebRtc/MediaManager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 85060a86..2bed2c68 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -20,7 +20,7 @@ const audioConstraint: boolean|MediaTrackConstraints = {
     //TODO: make these values configurable in the game settings menu and store them in localstorage
     autoGainControl: false,
     echoCancellation: true,
-    noiseSuppression: false
+    noiseSuppression: true
 };
 
 export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;

From 4b77e8c57754fcd6e50719a91ec2cc33177fbcda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 28 May 2021 09:31:04 +0200
Subject: [PATCH 007/141] Switching Camera controls in Svelte

Moving Camera controls out of HTML + MediaManager and into Svelte components
---
 front/dist/index.tmpl.html                    |  4 +-
 front/src/Components/App.svelte               |  5 ++
 front/src/Components/CameraControls.svelte    | 59 +++++++++++++++++++
 front/src/Components/images/cinema-close.svg  | 41 +++++++++++++
 .../Components/images}/cinema.svg             |  0
 .../Components/images}/microphone-close.svg   |  0
 .../Components/images}/microphone.svg         |  0
 .../Components/images}/monitor-close.svg      |  0
 .../Components/images}/monitor.svg            |  0
 front/src/WebRtc/MediaManager.ts              | 28 ++++-----
 10 files changed, 121 insertions(+), 16 deletions(-)
 create mode 100644 front/src/Components/CameraControls.svelte
 create mode 100644 front/src/Components/images/cinema-close.svg
 rename front/{dist/resources/logos => src/Components/images}/cinema.svg (100%)
 rename front/{dist/resources/logos => src/Components/images}/microphone-close.svg (100%)
 rename front/{dist/resources/logos => src/Components/images}/microphone.svg (100%)
 rename front/{dist/resources/logos => src/Components/images}/monitor-close.svg (100%)
 rename front/{dist/resources/logos => src/Components/images}/monitor.svg (100%)

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 7ef44116..1da7fad6 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -59,7 +59,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="btn-cam-action">
+<!--                    <div class="btn-cam-action">
                         <div id="btn-monitor" class="btn-monitor">
                             <img id="monitor" src="resources/logos/monitor.svg">
                             <img id="monitor-close" src="resources/logos/monitor-close.svg">
@@ -72,7 +72,7 @@
                             <img id="microphone" src="resources/logos/microphone.svg">
                             <img id="microphone-close" src="resources/logos/microphone-close.svg">
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
             <div id="cowebsite" class="cowebsite hidden">
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 69fa2f62..16cd903a 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -1,11 +1,16 @@
 <script lang="typescript">
     import MenuIcon from "./Menu/MenuIcon.svelte";
     import {menuIconVisible} from "../Stores/MenuStore";
+    import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
+    import CameraControls from "./CameraControls.svelte";
 
 </script>
 
 <div>
+    {#if $gameOverlayVisibilityStore}
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->
+        <CameraControls></CameraControls>
+    {/if}
 </div>
diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
new file mode 100644
index 00000000..b3c94716
--- /dev/null
+++ b/front/src/Components/CameraControls.svelte
@@ -0,0 +1,59 @@
+<script lang="typescript">
+    import {requestedScreenSharingState, screenSharingAvailableStore} from "../Stores/ScreenSharingStore";
+    import {requestedCameraState, requestedMicrophoneState} from "../Stores/MediaStore";
+    import monitorImg from "./images/monitor.svg";
+    import monitorCloseImg from "./images/monitor-close.svg";
+    import cinemaImg from "./images/cinema.svg";
+    import cinemaCloseImg from "./images/cinema-close.svg";
+    import microphoneImg from "./images/microphone.svg";
+    import microphoneCloseImg from "./images/microphone-close.svg";
+
+    function screenSharingClick(): void {
+        if ($requestedScreenSharingState === true) {
+            requestedScreenSharingState.disableScreenSharing();
+        } else {
+            requestedScreenSharingState.enableScreenSharing();
+        }
+    }
+
+    function cameraClick(): void {
+        if ($requestedCameraState === true) {
+            requestedCameraState.disableWebcam();
+        } else {
+            requestedCameraState.enableWebcam();
+        }
+    }
+
+    function microphoneClick(): void {
+        if ($requestedMicrophoneState === true) {
+            requestedMicrophoneState.disableMicrophone();
+        } else {
+            requestedMicrophoneState.enableMicrophone();
+        }
+    }
+
+</script>
+
+<div class="btn-cam-action">
+    <div class="btn-monitor" on:click={screenSharingClick} class:hide={$screenSharingAvailableStore}>
+        {#if $requestedScreenSharingState}
+            <img src={monitorImg} alt="Start screen sharing">
+        {:else}
+            <img src={monitorCloseImg} alt="Stop screen sharing">
+        {/if}
+    </div>
+    <div class="btn-video" on:click={cameraClick}>
+        {#if $requestedCameraState}
+            <img src={cinemaImg} alt="Turn on webcam">
+        {:else}
+            <img src={cinemaCloseImg} alt="Turn off webcam">
+        {/if}
+    </div>
+    <div class="btn-micro" on:click={microphoneClick}>
+        {#if $requestedMicrophoneState}
+            <img src={microphoneImg} alt="Turn on microphone">
+        {:else}
+            <img src={microphoneCloseImg} alt="Turn off microphone">
+        {/if}
+    </div>
+</div>
diff --git a/front/src/Components/images/cinema-close.svg b/front/src/Components/images/cinema-close.svg
new file mode 100644
index 00000000..aa1d9b17
--- /dev/null
+++ b/front/src/Components/images/cinema-close.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 332.8 332.8" style="enable-background:new 0 0 332.8 332.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<g>
+			<path class="st0" d="M330.8,171c-3.6-6.4-12-8.8-18.8-4.8l-45.6,26.4l-11.6,6.8v63.2l10.8,6.4c0.4,0,0.4,0.4,0.8,0.4l44.8,26
+				c2,1.6,4.8,2.4,7.6,2.4c7.6,0,13.6-6,13.6-13.6v-53.6l0.4-52.8C332.8,175.4,332.4,173,330.8,171z"/>
+			<path class="st0" d="M193.2,150.6c35.6,0,64.4-28.8,64.4-64.4s-28.8-64.4-64.4-64.4s-64.4,28.8-64.4,64.4
+				C128.8,121.8,157.6,150.6,193.2,150.6z M193.2,59.8c14.8,0,26.4,12,26.4,26.4c0,14.8-12,26.4-26.4,26.4s-26.4-12-26.4-26.4
+				C166.8,71.4,178.4,59.8,193.2,59.8z"/>
+		</g>
+	</g>
+</g>
+<g>
+	<g>
+	</g>
+</g>
+<rect x="134.8" y="-45.3" transform="matrix(-0.7402 0.6723 -0.6723 -0.7402 376.0669 224.8258)" class="st0" width="19.6" height="460.7"/>
+<path class="st0" d="M90.6,83.3c-0.2-2.2-1.3-8.9-6.7-14.9c-5.4-5.9-11.9-7.6-14.1-8.1C59.7,49.2,49.5,38,39.4,26.8
+	c24.3-9.8,52-4.4,70.2,13.6c19.9,19.7,24.7,50.8,11.5,76.4C110.9,105.6,100.8,94.5,90.6,83.3z"/>
+<path class="st0" d="M10.1,51.6c9.4,10.2,18.8,20.4,28.2,30.6c-0.2,1.8-1.4,11.7,5.5,20.5c8.2,10.3,20.7,10.2,22.1,10.1
+	c9.2,10.3,18.5,20.6,27.7,30.8c-4.8,2.3-24.6,11.2-48.3,4.1c-6-1.8-20.7-7.3-32.1-22C-0.3,108.1-0.2,89.1,0.1,83.4
+	C0.8,68,6.8,56.8,10.1,51.6z"/>
+<g>
+	<path class="st0" d="M243.4,178.2c0.1,24.5,0.2,49,0.2,73.5c-30.7-33.8-61.3-67.7-92-101.5c5.9,3.9,20.9,12.4,41.6,12.4
+		c16,0,28.2-5.2,34.4-8.4c2.5,1.5,7,4.6,10.7,10.3C242,170,243,175.4,243.4,178.2z"/>
+	<g>
+		<path class="st0" d="M211.2,311C150.8,258.7,90.4,206.5,30,154.2c6.1,3.1,18.2,8.4,34.4,8.4c18.1,0,31.5-6.5,37.5-9.9
+			c44.5,49,89.1,98.1,133.6,147.1c-1.8,2.1-5.3,5.5-10.6,8.1C219.2,310.6,214,311,211.2,311z"/>
+		<path class="st0" d="M46.8,311C36,267.7,25.2,224.3,14.4,181c0.1-3.2,0.7-11.3,6.5-18.8c3.1-4.1,6.7-6.6,9.1-8
+			C90.4,206.5,150.8,258.7,211.2,311C156.4,311,101.6,311,46.8,311z"/>
+		<path class="st0" d="M14.4,278.6L14.4,278.6c0-32.5,0-65.1,0-97.6c10.8,43.3,21.6,86.7,32.4,130c-2.6,0-12.7-0.4-21.5-8.1
+			C14.7,293.5,14.4,280.7,14.4,278.6z"/>
+	</g>
+</g>
+</svg>
diff --git a/front/dist/resources/logos/cinema.svg b/front/src/Components/images/cinema.svg
similarity index 100%
rename from front/dist/resources/logos/cinema.svg
rename to front/src/Components/images/cinema.svg
diff --git a/front/dist/resources/logos/microphone-close.svg b/front/src/Components/images/microphone-close.svg
similarity index 100%
rename from front/dist/resources/logos/microphone-close.svg
rename to front/src/Components/images/microphone-close.svg
diff --git a/front/dist/resources/logos/microphone.svg b/front/src/Components/images/microphone.svg
similarity index 100%
rename from front/dist/resources/logos/microphone.svg
rename to front/src/Components/images/microphone.svg
diff --git a/front/dist/resources/logos/monitor-close.svg b/front/src/Components/images/monitor-close.svg
similarity index 100%
rename from front/dist/resources/logos/monitor-close.svg
rename to front/src/Components/images/monitor-close.svg
diff --git a/front/dist/resources/logos/monitor.svg b/front/src/Components/images/monitor.svg
similarity index 100%
rename from front/dist/resources/logos/monitor.svg
rename to front/src/Components/images/monitor.svg
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index fad33de3..36f70918 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -47,12 +47,12 @@ export class MediaManager {
     localScreenCapture: MediaStream|null = null;
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
     myCamVideo: HTMLVideoElement;
-    cinemaClose: HTMLImageElement;
+    /*cinemaClose: HTMLImageElement;
     cinema: HTMLImageElement;
     monitorClose: HTMLImageElement;
     monitor: HTMLImageElement;
     microphoneClose: HTMLImageElement;
-    microphone: HTMLImageElement;
+    microphone: HTMLImageElement;*/
     webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     //mySoundMeterElement: HTMLDivElement;
@@ -63,9 +63,9 @@ export class MediaManager {
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
     helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
 
-    private microphoneBtn: HTMLDivElement;
+/*    private microphoneBtn: HTMLDivElement;
     private cinemaBtn: HTMLDivElement;
-    private monitorBtn: HTMLDivElement;
+    private monitorBtn: HTMLDivElement;*/
 
     private focused : boolean = true;
 
@@ -86,7 +86,7 @@ export class MediaManager {
         this.webrtcInAudio.volume = 0.2;
         this.webrtcOutAudio.volume = 0.2;
 
-        this.microphoneBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-micro');
+        /*this.microphoneBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-micro');
         this.microphoneClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('microphone-close');
         this.microphoneClose.style.display = "none";
         this.microphoneClose.addEventListener('click', (e: MouseEvent) => {
@@ -126,7 +126,7 @@ export class MediaManager {
             e.preventDefault();
             //this.disableScreenSharing();
             requestedScreenSharingState.disableScreenSharing();
-        });
+        });*/
 
         this.pingCameraStatus();
 
@@ -166,7 +166,7 @@ export class MediaManager {
             this.triggerUpdatedLocalStreamCallbacks(result.stream);
         });
 
-        requestedCameraState.subscribe((enabled) => {
+        /*requestedCameraState.subscribe((enabled) => {
             if (enabled) {
                 this.enableCameraStyle();
             } else {
@@ -179,7 +179,7 @@ export class MediaManager {
             } else {
                 this.disableMicrophoneStyle();
             }
-        });
+        });*/
         //let screenSharingStream : MediaStream|null;
         screenSharingLocalStreamStore.subscribe((result) => {
             if (result.type === 'error') {
@@ -191,7 +191,7 @@ export class MediaManager {
             }
 
             if (result.stream !== null) {
-                this.enableScreenSharingStyle();
+                //this.enableScreenSharingStyle();
                 mediaManager.localScreenCapture = result.stream;
 
                 // TODO: migrate this out of MediaManager
@@ -202,7 +202,7 @@ export class MediaManager {
                 this.addScreenSharingActiveVideo('me', DivImportance.Normal);
                 HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
             } else {
-                this.disableScreenSharingStyle();
+                //this.disableScreenSharingStyle();
                 this.removeActiveScreenSharingVideo('me');
 
                 // FIXME: we need the old stream that is being stopped!
@@ -216,13 +216,13 @@ export class MediaManager {
 
         });
 
-        screenSharingAvailableStore.subscribe((available) => {
+        /*screenSharingAvailableStore.subscribe((available) => {
             if (available) {
                 document.querySelector('.btn-monitor')?.classList.remove('hide');
             } else {
                 document.querySelector('.btn-monitor')?.classList.add('hide');
             }
-        });
+        });*/
     }
 
     public updateScene(){
@@ -290,7 +290,7 @@ export class MediaManager {
         gameOverlayVisibilityStore.hideGameOverlay();
     }
 
-    private enableCameraStyle(){
+    /*private enableCameraStyle(){
         this.cinemaClose.style.display = "none";
         this.cinemaBtn.classList.remove("disabled");
         this.cinema.style.display = "block";
@@ -324,7 +324,7 @@ export class MediaManager {
         this.monitorClose.style.display = "block";
         this.monitor.style.display = "none";
         this.monitorBtn.classList.remove("enabled");
-    }
+    }*/
 
     addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){
         this.webrtcInAudio.play();

From cc1eab653a1b7d77fce73356aab50596e318bb81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 28 May 2021 10:48:13 +0200
Subject: [PATCH 008/141] Fixing screen sharing button display

---
 front/src/Components/CameraControls.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
index b3c94716..98dfa4c5 100644
--- a/front/src/Components/CameraControls.svelte
+++ b/front/src/Components/CameraControls.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <div class="btn-cam-action">
-    <div class="btn-monitor" on:click={screenSharingClick} class:hide={$screenSharingAvailableStore}>
+    <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore}>
         {#if $requestedScreenSharingState}
             <img src={monitorImg} alt="Start screen sharing">
         {:else}

From d1c22b122c99f6b47ef38a0810fee14b49e794e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 28 May 2021 10:48:24 +0200
Subject: [PATCH 009/141] Improving icons centering

---
 front/style/style.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/style/style.css b/front/style/style.css
index a3bbfa1d..50c842d0 100644
--- a/front/style/style.css
+++ b/front/style/style.css
@@ -212,7 +212,9 @@ video#myCamVideo{
 /*btn animation*/
 .btn-cam-action div{
     cursor: url('./images/cursor_pointer.png'), pointer;
-    /*position: absolute;*/
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border: solid 0px black;
     width: 44px;
     height: 44px;
@@ -267,8 +269,6 @@ video#myCamVideo{
 .btn-cam-action div img{
     height: 22px;
     width: 30px;
-    top: calc(48px - 37px);
-    left: calc(48px - 41px);
     position: relative;
     cursor: url('./images/cursor_pointer.png'), pointer;
 }

From 12da6ddd6c136cf63b51bfc2cc47a39567aaa37f Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Wed, 26 May 2021 17:07:07 +0200
Subject: [PATCH 010/141] FEATURE: improved the display of player names, with
 the font-family 'Press start 2P' and gray outlines

---
 CHANGELOG.md                                  |  5 +++++
 front/dist/index.tmpl.html                    |  1 -
 front/dist/resources/fonts/fonts.css          |  5 +++++
 front/package.json                            |  1 +
 front/src/Connexion/LocalUser.ts              |  5 ++---
 front/src/Phaser/Entity/Character.ts          | 10 +++++-----
 front/src/Phaser/Game/GameScene.ts            |  8 ++++++++
 front/src/index.ts                            |  9 ++++++++-
 front/src/rex-plugins.d.ts                    |  4 ++++
 front/style/fonts.scss                        |  1 +
 front/style/index.scss                        |  3 ++-
 front/tests/Phaser/Connexion/LocalUserTest.ts | 10 ++++++++--
 front/webpack.config.ts                       | 10 +++++++++-
 front/yarn.lock                               |  5 +++++
 14 files changed, 63 insertions(+), 14 deletions(-)
 create mode 100644 front/dist/resources/fonts/fonts.css
 create mode 100644 front/style/fonts.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index dec14540..d9afd71e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,11 @@
   - The emote menu can be opened by clicking on your character. 
   -  Clicking on one of its element will close the menu and play an emote above your character. 
   -  This emote can be seen by other players.
+- Player names were improved. (@Kharhamel)
+  - We now create a GameObject.Text instead of GameObject.BitmapText
+  - now use the 'Press Start 2P' font family and added an outline
+  - As a result, we can now allow non-standard letters like french accents or chinese characters!
+
 - Mobile support has been improved
   - WorkAdventure automatically sets the zoom level based on the viewport size to ensure a sensible size of the map is visible, whatever the viewport used
   - Mouse wheel support to zoom in / out
diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 7ef44116..01dd58d0 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -29,7 +29,6 @@
 
 
         <base href="/">
-        <link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet">
         <link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
 
         <title>WorkAdventure</title>
diff --git a/front/dist/resources/fonts/fonts.css b/front/dist/resources/fonts/fonts.css
new file mode 100644
index 00000000..a3d3cf71
--- /dev/null
+++ b/front/dist/resources/fonts/fonts.css
@@ -0,0 +1,5 @@
+/*This file is a workaround to allow phaser to load directly this font */
+@font-face {
+    font-family: "Press Start 2P";
+    src: url("/fonts/press-start-2p-latin-400-normal.woff2") format('woff2');
+}
\ No newline at end of file
diff --git a/front/package.json b/front/package.json
index e64c0816..6cf0ee97 100644
--- a/front/package.json
+++ b/front/package.json
@@ -34,6 +34,7 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "@fontsource/press-start-2p": "^4.3.0",
     "@types/simple-peer": "^9.6.0",
     "@types/socket.io-client": "^1.4.32",
     "axios": "^0.21.1",
diff --git a/front/src/Connexion/LocalUser.ts b/front/src/Connexion/LocalUser.ts
index 0793a938..43b184cf 100644
--- a/front/src/Connexion/LocalUser.ts
+++ b/front/src/Connexion/LocalUser.ts
@@ -9,9 +9,8 @@ export interface CharacterTexture {
 
 export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
 
-export function isUserNameValid(value: string): boolean {
-    const regexp = new RegExp('^[A-Za-z0-9]{1,'+maxUserNameLength+'}$');
-    return regexp.test(value);
+export function isUserNameValid(value: unknown): boolean {
+    return typeof value === "string" && value.length > 0 && value.length < maxUserNameLength && value.indexOf(' ') === -1;
 }
 
 export function areCharacterLayersValid(value: string[] | null): boolean {
diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index b1a85943..9c3273ec 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -1,6 +1,6 @@
 import {PlayerAnimationDirections, PlayerAnimationTypes} from "../Player/Animation";
 import {SpeechBubble} from "./SpeechBubble";
-import BitmapText = Phaser.GameObjects.BitmapText;
+import Text = Phaser.GameObjects.Text;
 import Container = Phaser.GameObjects.Container;
 import Sprite = Phaser.GameObjects.Sprite;
 import {TextureError} from "../../Exception/TextureError";
@@ -23,7 +23,7 @@ const interactiveRadius = 35;
 
 export abstract class Character extends Container {
     private bubble: SpeechBubble|null = null;
-    private readonly playerName: BitmapText;
+    private readonly playerName: Text;
     public PlayerValue: string;
     public sprites: Map<string, Sprite>;
     private lastDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
@@ -55,9 +55,9 @@ export abstract class Character extends Container {
             this.addTextures(textures, frame);
             this.invisible = false
         })
-
-        this.playerName = new BitmapText(scene, 0,  playerNameY, 'main_font', name, 7);
-        this.playerName.setOrigin(0.5).setCenterAlign().setDepth(DEPTH_INGAME_TEXT_INDEX);
+        
+        this.playerName = new Text(scene, 0,  playerNameY, name, {fontFamily: '"Press Start 2P"', fontSize: '8px', strokeThickness: 2, stroke: "gray"});
+        this.playerName.setOrigin(0.5).setDepth(DEPTH_INGAME_TEXT_INDEX);
         this.add(this.playerName);
 
         if (this.isClickable()) {
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 4de5ffd9..91286ba9 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -279,6 +279,14 @@ export class GameScene extends DirtyScene implements CenterListener {
 
         this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
+        //eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (this.load as any).rexWebFont({ 
+            custom: {
+                families: ['Press Start 2P'],
+                urls: ['/resources/fonts/fonts.css'],
+                testString: 'abcdefg'
+            },
+        });
 
         //this function must stay at the end of preload function
         addLoader(this);
diff --git a/front/src/index.ts b/front/src/index.ts
index 2cdcaa19..f9017c24 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -9,7 +9,7 @@ import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
 import {SelectCompanionScene} from "./Phaser/Login/SelectCompanionScene";
 import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene";
 import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
-import {ResizableScene} from "./Phaser/Login/ResizableScene";
+import WebFontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugin.js';
 import {EntryScene} from "./Phaser/Login/EntryScene";
 import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
 import {MenuScene} from "./Phaser/Menu/MenuScene";
@@ -107,6 +107,13 @@ const config: GameConfig = {
         roundPixels: true,
         antialias: false
     },
+    plugins: {
+        global: [{
+            key: 'rexWebFontLoader',
+            plugin: WebFontLoaderPlugin,
+            start: true
+        }]
+    },
     physics: {
         default: "arcade",
         arcade: {
diff --git a/front/src/rex-plugins.d.ts b/front/src/rex-plugins.d.ts
index d5457702..2e160315 100644
--- a/front/src/rex-plugins.d.ts
+++ b/front/src/rex-plugins.d.ts
@@ -7,6 +7,10 @@ declare module 'phaser3-rex-plugins/plugins/gestures-plugin.js' {
     const content: any; // eslint-disable-line
     export default content;
 }
+declare module 'phaser3-rex-plugins/plugins/webfontloader-plugin.js' {
+    const content: any; // eslint-disable-line
+    export default content;
+}
 declare module 'phaser3-rex-plugins/plugins/gestures.js' {
     export const Pinch: any; // eslint-disable-line
 }
diff --git a/front/style/fonts.scss b/front/style/fonts.scss
new file mode 100644
index 00000000..5ef9b9b4
--- /dev/null
+++ b/front/style/fonts.scss
@@ -0,0 +1 @@
+@import "~@fontsource/press-start-2p/index.css";
\ No newline at end of file
diff --git a/front/style/index.scss b/front/style/index.scss
index 67e85c5b..47f13c3b 100644
--- a/front/style/index.scss
+++ b/front/style/index.scss
@@ -1,4 +1,5 @@
 @import "cowebsite.scss";
 @import "cowebsite-mobile.scss";
 @import "style.css";
-@import "mobile-style.scss";
\ No newline at end of file
+@import "mobile-style.scss";
+@import "fonts.scss";
\ No newline at end of file
diff --git a/front/tests/Phaser/Connexion/LocalUserTest.ts b/front/tests/Phaser/Connexion/LocalUserTest.ts
index 25b54005..4ba20745 100644
--- a/front/tests/Phaser/Connexion/LocalUserTest.ts
+++ b/front/tests/Phaser/Connexion/LocalUserTest.ts
@@ -19,8 +19,14 @@ describe("isUserNameValid()", () => {
     it("should not validate spaces", () => {
         expect(isUserNameValid(' ')).toBe(false);
     });
-    it("should not validate special characters", () => {
-        expect(isUserNameValid('a&-')).toBe(false);
+    it("should validate special characters", () => {
+        expect(isUserNameValid('%&-')).toBe(true);
+    });
+    it("should validate accents", () => {
+        expect(isUserNameValid('éàëè')).toBe(true);
+    });
+    it("should validate chinese characters", () => {
+        expect(isUserNameValid('中文鍵盤')).toBe(true);
     });
 });
 
diff --git a/front/webpack.config.ts b/front/webpack.config.ts
index cc87572a..6ebf907f 100644
--- a/front/webpack.config.ts
+++ b/front/webpack.config.ts
@@ -102,9 +102,17 @@ module.exports = {
                 }
             },
             {
-                test: /\.(ttf|eot|svg|png|gif|jpg)$/,
+                test: /\.(eot|svg|png|gif|jpg)$/,
                 exclude: /node_modules/,
                 type: 'asset'
+            },
+            {
+                test: /\.(woff(2)?|ttf)$/,
+                type: 'asset',
+                generator: {
+                    filename: 'fonts/[name][ext]'
+                }
+
             }
         ],
     },
diff --git a/front/yarn.lock b/front/yarn.lock
index bbdf0e06..180c82bf 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -50,6 +50,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fontsource/press-start-2p@^4.3.0":
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/@fontsource/press-start-2p/-/press-start-2p-4.3.0.tgz#37124387f7fbfe7792b5fc9a1906b80d9aeda4c6"
+  integrity sha512-gmS4070EoZp5/6NUJ+tBnvtDiSmFcR+S+ClAOJ8NGFXDWOkO12yMnyGJEJaDCNCAMX0s2TQCcmr6qWKx5ad3RQ==
+
 "@nodelib/fs.scandir@2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz#d4b3549a5db5de2683e0c1071ab4f140904bbf69"

From ee3097e6b068a095858bef361519705a3663c182 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 28 May 2021 13:41:07 +0000
Subject: [PATCH 011/141] Bump dns-packet from 1.3.1 to 1.3.4 in /front

Bumps [dns-packet](https://github.com/mafintosh/dns-packet) from 1.3.1 to 1.3.4.
- [Release notes](https://github.com/mafintosh/dns-packet/releases)
- [Changelog](https://github.com/mafintosh/dns-packet/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mafintosh/dns-packet/compare/v1.3.1...v1.3.4)

Signed-off-by: dependabot[bot] <support@github.com>
---
 front/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/yarn.lock b/front/yarn.lock
index 180c82bf..f625748d 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1626,9 +1626,9 @@ dns-equal@^1.0.0:
   integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
 
 dns-packet@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.1.tgz#12aa426981075be500b910eedcd0b47dd7deda5a"
-  integrity sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-1.3.4.tgz#e3455065824a2507ba886c55a89963bb107dec6f"
+  integrity sha512-BQ6F4vycLXBvdrJZ6S3gZewt6rcrks9KBgM9vrhW+knGRqc8uEdT7fuCwloc7nny5xNoMJ17HGH0R/6fpo8ECA==
   dependencies:
     ip "^1.1.0"
     safe-buffer "^5.0.1"

From b3aa8975e94831adae820a3f163ade4ddb2468ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 28 May 2021 15:48:58 +0200
Subject: [PATCH 012/141] Switching the video feedback in Svelte

---
 front/dist/index.tmpl.html                   | 26 ---------
 front/src/Components/App.svelte              |  2 +
 front/src/Components/MyCamera.svelte         | 46 +++++++++++++++
 front/src/Components/SoundMeterWidget.svelte | 36 ++++++++++++
 front/src/WebRtc/MediaManager.ts             | 60 +-------------------
 front/style/mobile-style.scss                | 32 +++++------
 front/style/style.css                        |  8 +--
 7 files changed, 107 insertions(+), 103 deletions(-)
 create mode 100644 front/src/Components/MyCamera.svelte
 create mode 100644 front/src/Components/SoundMeterWidget.svelte

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 1da7fad6..d5b97023 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -47,32 +47,6 @@
                     </aside>
                     <div id="chat-mode" class="chat-mode three-col" style="display: none;">
                     </div>
-                    <div id="activeCam" class="activeCam">
-                        <div id="div-myCamVideo" class="video-container">
-                            <video id="myCamVideo" autoplay muted></video>
-                            <div id="mySoundMeter" class="sound-progress">
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                            </div>
-                        </div>
-                    </div>
-<!--                    <div class="btn-cam-action">
-                        <div id="btn-monitor" class="btn-monitor">
-                            <img id="monitor" src="resources/logos/monitor.svg">
-                            <img id="monitor-close" src="resources/logos/monitor-close.svg">
-                        </div>
-                        <div id="btn-video" class="btn-video">
-                            <img id="cinema" src="resources/logos/cinema.svg">
-                            <img id="cinema-close" src="resources/logos/cinema-close.svg">
-                        </div>
-                        <div id="btn-micro" class="btn-micro">
-                            <img id="microphone" src="resources/logos/microphone.svg">
-                            <img id="microphone-close" src="resources/logos/microphone-close.svg">
-                        </div>
-                    </div> -->
                 </div>
             </div>
             <div id="cowebsite" class="cowebsite hidden">
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 16cd903a..9b072e8d 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -3,6 +3,7 @@
     import {menuIconVisible} from "../Stores/MenuStore";
     import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
+    import MyCamera from "./MyCamera.svelte";
 
 </script>
 
@@ -11,6 +12,7 @@
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->
+        <MyCamera></MyCamera>
         <CameraControls></CameraControls>
     {/if}
 </div>
diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte
new file mode 100644
index 00000000..6e1e50ef
--- /dev/null
+++ b/front/src/Components/MyCamera.svelte
@@ -0,0 +1,46 @@
+<script lang="typescript">
+    import {localStreamStore} from "../Stores/MediaStore";
+    import SoundMeterWidget from "./SoundMeterWidget.svelte";
+    import {onDestroy} from "svelte";
+
+    function srcObject(node, stream) {
+        node.srcObject = stream;
+        return {
+            update(newStream) {
+                if (node.srcObject != newStream) {
+                    node.srcObject = newStream
+                }
+            }
+        }
+    }
+
+    let stream : MediaStream|null;
+    /*$: {
+        if ($localStreamStore.type === 'success') {
+            stream = $localStreamStore.stream;
+        } else {
+            stream = null;
+        }
+    }*/
+
+    const unsubscribe = localStreamStore.subscribe(value => {
+        if (value.type === 'success') {
+            stream = value.stream;
+        } else {
+            stream = null;
+        }
+    });
+
+    onDestroy(unsubscribe);
+
+</script>
+
+
+<div>
+    <div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
+        <video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted></video>
+        <!-- {#if stream}
+        <SoundMeterWidget stream={stream}></SoundMeterWidget>
+        {/if} -->
+    </div>
+</div>
diff --git a/front/src/Components/SoundMeterWidget.svelte b/front/src/Components/SoundMeterWidget.svelte
new file mode 100644
index 00000000..cff6be86
--- /dev/null
+++ b/front/src/Components/SoundMeterWidget.svelte
@@ -0,0 +1,36 @@
+<script lang="typescript">
+    import {SoundMeter} from "../Phaser/Components/SoundMeter";
+    import {onDestroy} from "svelte";
+
+    export let stream: MediaStream;
+    let volume = 0;
+
+    console.log('stream', stream);
+
+    if (stream.getAudioTracks().length > 0) {
+        const soundMeter = new SoundMeter();
+        soundMeter.connectToSource(stream, new AudioContext());
+
+        const timeout = setInterval(() => {
+            try{
+                volume = parseInt((soundMeter.getVolume() / 10).toFixed(0));
+                console.log(volume);
+            }catch(err){
+
+            }
+        }, 100);
+
+        onDestroy(() => {
+            clearInterval(timeout);
+        })
+    }
+</script>
+
+
+<div class="sound-progress" class:active={stream?.getAudioTracks().length > 0}>
+    <span class:active={volume > 1}></span>
+    <span class:active={volume > 2}></span>
+    <span class:active={volume > 3}></span>
+    <span class:active={volume > 4}></span>
+    <span class:active={volume > 5}></span>
+</div>
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 36f70918..bb86e70f 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -46,13 +46,6 @@ export class MediaManager {
     localStream: MediaStream|null = null;
     localScreenCapture: MediaStream|null = null;
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
-    myCamVideo: HTMLVideoElement;
-    /*cinemaClose: HTMLImageElement;
-    cinema: HTMLImageElement;
-    monitorClose: HTMLImageElement;
-    monitor: HTMLImageElement;
-    microphoneClose: HTMLImageElement;
-    microphone: HTMLImageElement;*/
     webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     //mySoundMeterElement: HTMLDivElement;
@@ -63,10 +56,6 @@ export class MediaManager {
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
     helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
 
-/*    private microphoneBtn: HTMLDivElement;
-    private cinemaBtn: HTMLDivElement;
-    private monitorBtn: HTMLDivElement;*/
-
     private focused : boolean = true;
 
     private triggerCloseJistiFrame : Map<String, Function> = new Map<String, Function>();
@@ -80,54 +69,11 @@ export class MediaManager {
 
     constructor() {
 
-        this.myCamVideo = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
         this.webrtcInAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-in');
         this.webrtcOutAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-out');
         this.webrtcInAudio.volume = 0.2;
         this.webrtcOutAudio.volume = 0.2;
 
-        /*this.microphoneBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-micro');
-        this.microphoneClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('microphone-close');
-        this.microphoneClose.style.display = "none";
-        this.microphoneClose.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            requestedMicrophoneState.enableMicrophone();
-        });
-        this.microphone = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('microphone');
-        this.microphone.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            requestedMicrophoneState.disableMicrophone();
-        });
-
-        this.cinemaBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-video');
-        this.cinemaClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('cinema-close');
-        this.cinemaClose.style.display = "none";
-        this.cinemaClose.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            requestedCameraState.enableWebcam();
-        });
-        this.cinema = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('cinema');
-        this.cinema.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            requestedCameraState.disableWebcam();
-        });
-
-        this.monitorBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-monitor');
-        this.monitorClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('monitor-close');
-        this.monitorClose.style.display = "block";
-        this.monitorClose.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            //this.enableScreenSharing();
-            requestedScreenSharingState.enableScreenSharing();
-        });
-        this.monitor = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('monitor');
-        this.monitor.style.display = "none";
-        this.monitor.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            //this.disableScreenSharing();
-            requestedScreenSharingState.disableScreenSharing();
-        });*/
-
         this.pingCameraStatus();
 
         //FIX ME SOUNDMETER: check stability of sound meter calculation
@@ -148,11 +94,11 @@ export class MediaManager {
                 return;
             }
 
-            if (result.constraints.video !== false) {
+            /*if (result.constraints.video !== false) {
                 HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.remove('hide');
             } else {
                 HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.add('hide');
-            }/*
+            }
             if (result.constraints.audio !== false) {
                 this.enableMicrophoneStyle();
             } else {
@@ -160,7 +106,7 @@ export class MediaManager {
             }*/
 
             this.localStream = result.stream;
-            this.myCamVideo.srcObject = this.localStream;
+            //this.myCamVideo.srcObject = this.localStream;
 
             // TODO: migrate all listeners to the store directly.
             this.triggerUpdatedLocalStreamCallbacks(result.stream);
diff --git a/front/style/mobile-style.scss b/front/style/mobile-style.scss
index 21753ebd..1b37053a 100644
--- a/front/style/mobile-style.scss
+++ b/front/style/mobile-style.scss
@@ -1,9 +1,24 @@
+@media (hover: none) {
+  /**
+   * If we cannot hover over elements, let's display camera button in full.
+   */
+  .btn-cam-action {
+    div {
+      transform: translateY(0px);
+    }
+  }
+}
+
 @media screen and (max-width: 700px),
         screen and (max-height: 700px){
-  video#myCamVideo {
+  video.myCamVideo {
     width: 150px;
   }
 
+  .div-myCamVideo.hide {
+    right: -160px;
+  }
+
   .sidebar {
     width: 20%;
     min-width: 200px;
@@ -22,21 +37,6 @@
     }
   }
 
-  .btn-cam-action {
-    min-width: 150px;
-
-    &:hover{
-      transform: translateY(20px);
-    }
-    div {
-      margin: 0 1%;
-      &:hover {
-        background-color: #666;
-      }
-      margin-bottom: 30px;
-    }
-  }
-
   .main-section {
     position: absolute;
     width: 100%;
diff --git a/front/style/style.css b/front/style/style.css
index 50c842d0..525b517a 100644
--- a/front/style/style.css
+++ b/front/style/style.css
@@ -133,11 +133,11 @@ body .message-info.warning{
     outline: none;
 }
 
-.video-container#div-myCamVideo{
+.video-container.div-myCamVideo{
     border: none;
 }
 
-#div-myCamVideo {
+.div-myCamVideo {
     position: absolute;
     right: 15px;
     bottom: 30px;
@@ -146,11 +146,11 @@ body .message-info.warning{
     transition: right 350ms;
 }
 
-#div-myCamVideo.hide {
+.div-myCamVideo.hide {
     right: -20vw;
 }
 
-video#myCamVideo{
+video.myCamVideo{
     width: 15vw;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);

From 679b5b6b7945476a2ee5313c9d9ecb10b64ec5ee Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Fri, 28 May 2021 17:51:18 +0200
Subject: [PATCH 013/141] FIX: better error text in LoginScene

---
 front/src/Phaser/Login/LoginScene.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index 435592f2..1761f664 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -41,7 +41,7 @@ export class LoginScene extends ResizableScene {
             }
             pErrorElement.innerHTML = '';
             if(inputElement.value && !isUserNameValid(inputElement.value)){
-                pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
+                pErrorElement.innerHTML = 'Invalid user name: No spaces are allowed.';
             }
             if (event.key === 'Enter') {
                 event.preventDefault();

From b7f14614057de0fabab0ea338dc248b8f7112ca7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Sat, 29 May 2021 22:04:08 +0200
Subject: [PATCH 014/141] Removing listeners from MediaManager. SimplePeer now
 reacts only to stores.

---
 .../dist/resources/logos/microphone-close.svg |  27 +++++
 front/src/WebRtc/MediaManager.ts              | 101 ------------------
 front/src/WebRtc/ScreenSharingPeer.ts         |  16 +--
 front/src/WebRtc/SimplePeer.ts                |  96 ++++++++++-------
 4 files changed, 90 insertions(+), 150 deletions(-)
 create mode 100644 front/dist/resources/logos/microphone-close.svg

diff --git a/front/dist/resources/logos/microphone-close.svg b/front/dist/resources/logos/microphone-close.svg
new file mode 100644
index 00000000..16731829
--- /dev/null
+++ b/front/dist/resources/logos/microphone-close.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<rect x="257" y="-47.9" transform="matrix(-0.7402 0.6723 -0.6723 -0.7402 643.9641 283.6469)" class="st0" width="20.4" height="628.3"/>
+<g>
+	<g>
+		<path class="st0" d="M333.6,250.3c-52.6-43.9-105.1-87.9-157.7-131.8c0-17.9,0-35.8,0-53.6c6.5-38.6,40.3-67,79.3-66.8
+			c38.6,0.2,71.9,28.5,78.4,66.8C333.6,126.7,333.6,188.5,333.6,250.3z"/>
+		<path class="st0" d="M322.6,279.9c-48.9-53.8-97.8-107.6-146.6-161.4l0,0c52.6,43.9,105.1,87.9,157.7,131.8
+			c-0.2,1.6-0.5,3.3-0.9,5C330.5,265.2,326.6,273.5,322.6,279.9z"/>
+	</g>
+	<path class="st0" d="M292.5,308.1c-2.3,1.2-39.5,20.3-76.7-1c-36.4-20.8-39.4-61.2-39.6-64.1c-0.1-21-0.1-42.1-0.2-63.1
+		C214.8,222.6,253.6,265.3,292.5,308.1z"/>
+</g>
+<path class="st0" d="M431.6,238.5c-0.9-8.4-8.5-14.4-16.6-13.5c-7.9,0.9-13.9,8.1-13.2,16.3c-0.1,13.3-2.2,34.6-12.6,57.9
+	c-6.3,14.2-14,25.2-20.6,33.1c6.8,7.5,13.6,14.9,20.3,22.4c9.5-10.9,23.4-29.7,32.8-56.3C430.3,273.9,431.8,252.5,431.6,238.5z"/>
+<line class="st0" x1="354.5" y1="347.2" x2="374.6" y2="369.4"/>
+<path class="st0" d="M338.5,359.9c6.8,7.4,13.5,14.9,20.3,22.3c-52.6,37.6-121.5,43.7-179.2,15.8c-60.3-29.1-98.9-90.7-99.3-158.2
+	c0-8.2,6.8-15,15-15s15,6.8,15,15c0.1,13.5,2.4,54.4,32.4,91.6c4.2,5.2,45.1,54.1,113.3,54.1C297,385.6,326.7,367.9,338.5,359.9z"/>
+<rect x="241" y="409.6" class="st0" width="29.9" height="102.3"/>
+<path class="st0" d="M304.2,511.9h-97.1c-8-0.4-14.3-7.1-14.3-15c0-8.1,6.7-14.9,15-15c31.7,0,63.4,0.1,95.1,0.1
+	c8.9-0.6,16.3,6.5,16.3,14.9C319.2,504.8,312.6,511.7,304.2,511.9z"/>
+</svg>
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index bb86e70f..5ddc4905 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -44,13 +44,11 @@ export type HelpCameraSettingsCallBack = () => void;
 
 export class MediaManager {
     localStream: MediaStream|null = null;
-    localScreenCapture: MediaStream|null = null;
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
     webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     //mySoundMeterElement: HTMLDivElement;
     private webrtcOutAudio: HTMLAudioElement;
-    updatedLocalStreamCallBacks : Set<UpdatedLocalStreamCallback> = new Set<UpdatedLocalStreamCallback>();
     startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
     stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
@@ -108,24 +106,8 @@ export class MediaManager {
             this.localStream = result.stream;
             //this.myCamVideo.srcObject = this.localStream;
 
-            // TODO: migrate all listeners to the store directly.
-            this.triggerUpdatedLocalStreamCallbacks(result.stream);
         });
 
-        /*requestedCameraState.subscribe((enabled) => {
-            if (enabled) {
-                this.enableCameraStyle();
-            } else {
-                this.disableCameraStyle();
-            }
-        });
-        requestedMicrophoneState.subscribe((enabled) => {
-            if (enabled) {
-                this.enableMicrophoneStyle();
-            } else {
-                this.disableMicrophoneStyle();
-            }
-        });*/
         //let screenSharingStream : MediaStream|null;
         screenSharingLocalStreamStore.subscribe((result) => {
             if (result.type === 'error') {
@@ -137,26 +119,13 @@ export class MediaManager {
             }
 
             if (result.stream !== null) {
-                //this.enableScreenSharingStyle();
-                mediaManager.localScreenCapture = result.stream;
-
-                // TODO: migrate this out of MediaManager
-                this.triggerStartedScreenSharingCallbacks(result.stream);
-
                 //screenSharingStream = result.stream;
 
                 this.addScreenSharingActiveVideo('me', DivImportance.Normal);
                 HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
             } else {
-                //this.disableScreenSharingStyle();
                 this.removeActiveScreenSharingVideo('me');
 
-                // FIXME: we need the old stream that is being stopped!
-                if (this.localScreenCapture) {
-                    this.triggerStoppedScreenSharingCallbacks(this.localScreenCapture);
-                    this.localScreenCapture = null;
-                }
-
                 //screenSharingStream = null;
             }
 
@@ -176,40 +145,6 @@ export class MediaManager {
         //this.updateSoudMeter();
     }
 
-    public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
-        this.updatedLocalStreamCallBacks.add(callback);
-    }
-
-    public onStartScreenSharing(callback: StartScreenSharingCallback): void {
-        this.startScreenSharingCallBacks.add(callback);
-    }
-
-    public onStopScreenSharing(callback: StopScreenSharingCallback): void {
-        this.stopScreenSharingCallBacks.add(callback);
-    }
-
-    removeUpdateLocalStreamEventListener(callback: UpdatedLocalStreamCallback): void {
-        this.updatedLocalStreamCallBacks.delete(callback);
-    }
-
-    private triggerUpdatedLocalStreamCallbacks(stream: MediaStream|null): void {
-        for (const callback of this.updatedLocalStreamCallBacks) {
-            callback(stream);
-        }
-    }
-
-    private triggerStartedScreenSharingCallbacks(stream: MediaStream): void {
-        for (const callback of this.startScreenSharingCallBacks) {
-            callback(stream);
-        }
-    }
-
-    private triggerStoppedScreenSharingCallbacks(stream: MediaStream): void {
-        for (const callback of this.stopScreenSharingCallBacks) {
-            callback(stream);
-        }
-    }
-
     public showGameOverlay(): void {
         const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay');
         gameOverlay.classList.add('active');
@@ -236,42 +171,6 @@ export class MediaManager {
         gameOverlayVisibilityStore.hideGameOverlay();
     }
 
-    /*private enableCameraStyle(){
-        this.cinemaClose.style.display = "none";
-        this.cinemaBtn.classList.remove("disabled");
-        this.cinema.style.display = "block";
-    }
-
-    private disableCameraStyle(){
-        this.cinemaClose.style.display = "block";
-        this.cinema.style.display = "none";
-        this.cinemaBtn.classList.add("disabled");
-    }
-
-    private enableMicrophoneStyle(){
-        this.microphoneClose.style.display = "none";
-        this.microphone.style.display = "block";
-        this.microphoneBtn.classList.remove("disabled");
-    }
-
-    private disableMicrophoneStyle(){
-        this.microphoneClose.style.display = "block";
-        this.microphone.style.display = "none";
-        this.microphoneBtn.classList.add("disabled");
-    }
-
-    private enableScreenSharingStyle(){
-        this.monitorClose.style.display = "none";
-        this.monitor.style.display = "block";
-        this.monitorBtn.classList.add("enabled");
-    }
-
-    private disableScreenSharingStyle(){
-        this.monitorClose.style.display = "block";
-        this.monitor.style.display = "none";
-        this.monitorBtn.classList.remove("enabled");
-    }*/
-
     addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){
         this.webrtcInAudio.play();
         const userId = ''+user.userId
diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts
index f1786ef3..947549eb 100644
--- a/front/src/WebRtc/ScreenSharingPeer.ts
+++ b/front/src/WebRtc/ScreenSharingPeer.ts
@@ -19,7 +19,7 @@ export class ScreenSharingPeer extends Peer {
     public _connected: boolean = false;
     private userId: number;
 
-    constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
+    constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection, stream: MediaStream | null) {
         super({
             initiator: initiator ? initiator : false,
             //reconnectTimer: 10000,
@@ -81,7 +81,9 @@ export class ScreenSharingPeer extends Peer {
             this._onFinish();
         });
 
-        this.pushScreenSharingToRemoteUser();
+        if (stream) {
+            this.addStream(stream);
+        }
     }
 
     private sendWebrtcScreenSharingSignal(data: unknown) {
@@ -141,16 +143,6 @@ export class ScreenSharingPeer extends Peer {
         }
     }
 
-    private pushScreenSharingToRemoteUser() {
-        const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
-        if(!localScreenCapture){
-            return;
-        }
-
-        this.addStream(localScreenCapture);
-        return;
-    }
-
     public stopPushingScreenSharingToRemoteUser(stream: MediaStream) {
         this.removeStream(stream);
         this.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, streamEnded: true})));
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 4633374d..ba2cb05e 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -15,7 +15,10 @@ import {connectionManager} from "../Connexion/ConnectionManager";
 import {GameConnexionTypes} from "../Url/UrlManager";
 import {blackListManager} from "./BlackListManager";
 import {get} from "svelte/store";
-import {localStreamStore, obtainedMediaConstraintStore} from "../Stores/MediaStore";
+import {localStreamStore, LocalStreamStoreValue, obtainedMediaConstraintStore} from "../Stores/MediaStore";
+import {screenSharingLocalStreamStore} from "../Stores/ScreenSharingStore";
+import {DivImportance, layoutManager} from "./LayoutManager";
+import {HtmlUtils} from "./HtmlUtils";
 
 export interface UserSimplePeerInterface{
     userId: number;
@@ -39,9 +42,9 @@ export class SimplePeer {
 
     private PeerScreenSharingConnectionArray: Map<number, ScreenSharingPeer> = new Map<number, ScreenSharingPeer>();
     private PeerConnectionArray: Map<number, VideoPeer> = new Map<number, VideoPeer>();
-    private readonly sendLocalVideoStreamCallback: UpdatedLocalStreamCallback;
     private readonly sendLocalScreenSharingStreamCallback: StartScreenSharingCallback;
     private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback;
+    private readonly unsubscribers: (() => void)[] = [];
     private readonly peerConnectionListeners: Array<PeerConnectionListener> = new Array<PeerConnectionListener>();
     private readonly userId: number;
     private lastWebrtcUserName: string|undefined;
@@ -49,13 +52,32 @@ export class SimplePeer {
 
     constructor(private Connection: RoomConnection, private enableReporting: boolean, private myName: string) {
         // We need to go through this weird bound function pointer in order to be able to "free" this reference later.
-        this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this);
         this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this);
         this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this);
 
-        mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback);
-        mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback);
-        mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback);
+        this.unsubscribers.push(localStreamStore.subscribe((streamResult) => {
+            this.sendLocalVideoStream(streamResult);
+        }));
+
+        let localScreenCapture: MediaStream|null = null;
+
+        this.unsubscribers.push(screenSharingLocalStreamStore.subscribe((streamResult) => {
+            if (streamResult.type === 'error') {
+                // Let's ignore screen sharing errors, we will deal with those in a different way.
+                return;
+            }
+
+            if (streamResult.stream !== null) {
+                localScreenCapture = streamResult.stream;
+                this.sendLocalScreenSharingStream(localScreenCapture);
+            } else {
+                if (localScreenCapture) {
+                    this.stopLocalScreenSharingStream(localScreenCapture);
+                    localScreenCapture = null;
+                }
+            }
+        }));
+
         this.userId = Connection.getUserId();
         this.initialise();
     }
@@ -155,8 +177,9 @@ export class SimplePeer {
         // When a connection is established to a video stream, and if a screen sharing is taking place,
         // the user sharing screen should also initiate a connection to the remote user!
         peer.on('connect', () => {
-            if (mediaManager.localScreenCapture) {
-                this.sendLocalScreenSharingStreamToUser(user.userId);
+            const streamResult = get(screenSharingLocalStreamStore);
+            if (streamResult.type === 'success' && streamResult.stream !== null) {
+                this.sendLocalScreenSharingStreamToUser(user.userId, streamResult.stream);
             }
         });
 
@@ -175,7 +198,7 @@ export class SimplePeer {
     /**
      * create peer connection to bind users
      */
-    private createPeerScreenSharingConnection(user : UserSimplePeerInterface) : ScreenSharingPeer | null{
+    private createPeerScreenSharingConnection(user : UserSimplePeerInterface, stream: MediaStream | null) : ScreenSharingPeer | null{
         const peerConnection = this.PeerScreenSharingConnectionArray.get(user.userId);
         if(peerConnection){
             if(peerConnection.destroyed){
@@ -204,7 +227,7 @@ export class SimplePeer {
             user.webRtcPassword = this.lastWebrtcPassword;
         }
 
-        const peer = new ScreenSharingPeer(user, user.initiator ? user.initiator : false, this.Connection);
+        const peer = new ScreenSharingPeer(user, user.initiator ? user.initiator : false, this.Connection, stream);
         this.PeerScreenSharingConnectionArray.set(user.userId, peer);
 
         for (const peerConnectionListener of this.peerConnectionListeners) {
@@ -294,7 +317,9 @@ export class SimplePeer {
      * Unregisters any held event handler.
      */
     public unregister() {
-        mediaManager.removeUpdateLocalStreamEventListener(this.sendLocalVideoStreamCallback);
+        for (const unsubscriber of this.unsubscribers) {
+            unsubscriber();
+        }
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -318,18 +343,26 @@ export class SimplePeer {
     private receiveWebrtcScreenSharingSignal(data: WebRtcSignalReceivedMessageInterface) {
         if (blackListManager.isBlackListed(data.userId)) return;
         console.log("receiveWebrtcScreenSharingSignal", data);
+        const streamResult = get(screenSharingLocalStreamStore);
+        let stream : MediaStream | null = null;
+        if (streamResult.type === 'success' && streamResult.stream !== null) {
+            stream = streamResult.stream;
+        }
+
         try {
             //if offer type, create peer connection
             if(data.signal.type === "offer"){
-                this.createPeerScreenSharingConnection(data);
+                this.createPeerScreenSharingConnection(data, stream);
             }
             const peer = this.PeerScreenSharingConnectionArray.get(data.userId);
             if (peer !== undefined) {
                 peer.signal(data.signal);
             } else {
                 console.error('Could not find peer whose ID is "'+data.userId+'" in receiveWebrtcScreenSharingSignal');
-                console.info('tentative to create new peer connexion');
-                this.sendLocalScreenSharingStreamToUser(data.userId);
+                console.info('Attempt to create new peer connexion');
+                if (stream) {
+                    this.sendLocalScreenSharingStreamToUser(data.userId, stream);
+                }
             }
         } catch (e) {
             console.error(`receiveWebrtcSignal => ${data.userId}`, e);
@@ -339,21 +372,19 @@ export class SimplePeer {
         }
     }
 
-    private pushVideoToRemoteUser(userId : number) {
+    private pushVideoToRemoteUser(userId: number, streamResult: LocalStreamStoreValue) {
         try {
             const PeerConnection = this.PeerConnectionArray.get(userId);
             if (!PeerConnection) {
                 throw new Error('While adding media, cannot find user with ID ' + userId);
             }
 
-            const result = get(localStreamStore);
+            PeerConnection.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...streamResult.constraints})));
 
-            PeerConnection.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...result.constraints})));
-
-            if (result.type === 'error') {
+            if (streamResult.type === 'error') {
                 return;
             }
-            const localStream: MediaStream | null = result.stream;
+            const localStream: MediaStream | null = streamResult.stream;
 
             if(!localStream){
                 return;
@@ -370,15 +401,11 @@ export class SimplePeer {
         }
     }
 
-    private pushScreenSharingToRemoteUser(userId : number) {
+    private pushScreenSharingToRemoteUser(userId: number, localScreenCapture: MediaStream) {
         const PeerConnection = this.PeerScreenSharingConnectionArray.get(userId);
         if (!PeerConnection) {
             throw new Error('While pushing screen sharing, cannot find user with ID ' + userId);
         }
-        const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
-        if(!localScreenCapture){
-            return;
-        }
 
         for (const track of localScreenCapture.getTracks()) {
             PeerConnection.addTrack(track, localScreenCapture);
@@ -386,23 +413,18 @@ export class SimplePeer {
         return;
     }
 
-    public sendLocalVideoStream(){
+    public sendLocalVideoStream(streamResult: LocalStreamStoreValue){
         for (const user of this.Users) {
-            this.pushVideoToRemoteUser(user.userId);
+            this.pushVideoToRemoteUser(user.userId, streamResult);
         }
     }
 
     /**
      * Triggered locally when clicking on the screen sharing button
      */
-    public sendLocalScreenSharingStream() {
-        if (!mediaManager.localScreenCapture) {
-            console.error('Could not find localScreenCapture to share')
-            return;
-        }
-
+    public sendLocalScreenSharingStream(localScreenCapture: MediaStream) {
         for (const user of this.Users) {
-            this.sendLocalScreenSharingStreamToUser(user.userId);
+            this.sendLocalScreenSharingStreamToUser(user.userId, localScreenCapture);
         }
     }
 
@@ -415,11 +437,11 @@ export class SimplePeer {
         }
     }
 
-    private sendLocalScreenSharingStreamToUser(userId: number): void {
+    private sendLocalScreenSharingStreamToUser(userId: number, localScreenCapture: MediaStream): void {
         if (blackListManager.isBlackListed(userId)) return;
         // If a connection already exists with user (because it is already sharing a screen with us... let's use this connection)
         if (this.PeerScreenSharingConnectionArray.has(userId)) {
-            this.pushScreenSharingToRemoteUser(userId);
+            this.pushScreenSharingToRemoteUser(userId, localScreenCapture);
             return;
         }
 
@@ -427,7 +449,7 @@ export class SimplePeer {
             userId,
             initiator: true
         };
-        const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser);
+        const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser, localScreenCapture);
         if (!PeerConnectionScreenSharing) {
             return;
         }

From 588e5566d0239f649aa60e733171cf63896cdf60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Sat, 29 May 2021 22:05:47 +0200
Subject: [PATCH 015/141] Fixing buttons design

Fixing the color of camera/microphone/screen sharing buttons that was broken following the migration to Svelte
---
 front/src/Components/CameraControls.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
index 98dfa4c5..bd35d230 100644
--- a/front/src/Components/CameraControls.svelte
+++ b/front/src/Components/CameraControls.svelte
@@ -35,21 +35,21 @@
 </script>
 
 <div class="btn-cam-action">
-    <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore}>
+    <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
         {#if $requestedScreenSharingState}
             <img src={monitorImg} alt="Start screen sharing">
         {:else}
             <img src={monitorCloseImg} alt="Stop screen sharing">
         {/if}
     </div>
-    <div class="btn-video" on:click={cameraClick}>
+    <div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState}>
         {#if $requestedCameraState}
             <img src={cinemaImg} alt="Turn on webcam">
         {:else}
             <img src={cinemaCloseImg} alt="Turn off webcam">
         {/if}
     </div>
-    <div class="btn-micro" on:click={microphoneClick}>
+    <div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState}>
         {#if $requestedMicrophoneState}
             <img src={microphoneImg} alt="Turn on microphone">
         {:else}

From 90176da8886b4a311c05f5e0bef8f6e62acdfb2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Sat, 29 May 2021 22:34:38 +0200
Subject: [PATCH 016/141] MediaManager cleanup

- Removing the last reference to the local video stream. Everything is now fetched from the store.
- Remvoing commented code
---
 front/src/WebRtc/MediaManager.ts | 43 --------------------------------
 front/src/WebRtc/SimplePeer.ts   | 26 +++++++++++++------
 front/src/WebRtc/VideoPeer.ts    |  7 +++---
 3 files changed, 22 insertions(+), 54 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 5ddc4905..5ab603d2 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -8,33 +8,11 @@ import {SoundMeter} from "../Phaser/Components/SoundMeter";
 import {DISABLE_NOTIFICATIONS} from "../Enum/EnvironmentVariable";
 import {
     gameOverlayVisibilityStore, localStreamStore,
-    mediaStreamConstraintsStore,
-    requestedCameraState,
-    requestedMicrophoneState
 } from "../Stores/MediaStore";
 import {
-    requestedScreenSharingState,
-    screenSharingAvailableStore,
     screenSharingLocalStreamStore
 } from "../Stores/ScreenSharingStore";
 
-declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-const videoConstraint: boolean|MediaTrackConstraints = {
-    width: { min: 640, ideal: 1280, max: 1920 },
-    height: { min: 400, ideal: 720 },
-    frameRate: { ideal: localUserStore.getVideoQualityValue() },
-    facingMode: "user",
-    resizeMode: 'crop-and-scale',
-    aspectRatio: 1.777777778
-};
-const audioConstraint: boolean|MediaTrackConstraints = {
-    //TODO: make these values configurable in the game settings menu and store them in localstorage
-    autoGainControl: false,
-    echoCancellation: true,
-    noiseSuppression: true
-};
-
 export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
 export type StartScreenSharingCallback = (media: MediaStream) => void;
 export type StopScreenSharingCallback = (media: MediaStream) => void;
@@ -43,7 +21,6 @@ export type ShowReportCallBack = (userId: string, userName: string|undefined) =>
 export type HelpCameraSettingsCallBack = () => void;
 
 export class MediaManager {
-    localStream: MediaStream|null = null;
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
     webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
@@ -91,24 +68,8 @@ export class MediaManager {
                 }, this.userInputManager);
                 return;
             }
-
-            /*if (result.constraints.video !== false) {
-                HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.remove('hide');
-            } else {
-                HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.add('hide');
-            }
-            if (result.constraints.audio !== false) {
-                this.enableMicrophoneStyle();
-            } else {
-                this.disableMicrophoneStyle();
-            }*/
-
-            this.localStream = result.stream;
-            //this.myCamVideo.srcObject = this.localStream;
-
         });
 
-        //let screenSharingStream : MediaStream|null;
         screenSharingLocalStreamStore.subscribe((result) => {
             if (result.type === 'error') {
                 console.error(result.error);
@@ -119,14 +80,10 @@ export class MediaManager {
             }
 
             if (result.stream !== null) {
-                //screenSharingStream = result.stream;
-
                 this.addScreenSharingActiveVideo('me', DivImportance.Normal);
                 HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
             } else {
                 this.removeActiveScreenSharingVideo('me');
-
-                //screenSharingStream = null;
             }
 
         });
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index ba2cb05e..caec53c5 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -128,13 +128,19 @@ export class SimplePeer {
         if(!user.initiator){
             return;
         }
-        this.createPeerConnection(user);
+        const streamResult = get(localStreamStore);
+        let stream : MediaStream | null = null;
+        if (streamResult.type === 'success' && streamResult.stream) {
+            stream = streamResult.stream;
+        }
+
+        this.createPeerConnection(user, stream);
     }
 
     /**
      * create peer connection to bind users
      */
-    private createPeerConnection(user : UserSimplePeerInterface) : VideoPeer | null {
+    private createPeerConnection(user : UserSimplePeerInterface, localStream: MediaStream | null) : VideoPeer | null {
         const peerConnection = this.PeerConnectionArray.get(user.userId)
         if (peerConnection) {
             if (peerConnection.destroyed) {
@@ -144,11 +150,11 @@ export class SimplePeer {
                 if (!peerConnexionDeleted) {
                     throw 'Error to delete peer connection';
                 }
-                this.createPeerConnection(user);
+                //return this.createPeerConnection(user, localStream);
             } else {
                 peerConnection.toClose = false;
+                return null;
             }
-            return null;
         }
 
         let name = user.name;
@@ -166,7 +172,7 @@ export class SimplePeer {
         this.lastWebrtcUserName = user.webRtcUser;
         this.lastWebrtcPassword = user.webRtcPassword;
 
-        const peer = new VideoPeer(user, user.initiator ? user.initiator : false, this.Connection);
+        const peer = new VideoPeer(user, user.initiator ? user.initiator : false, this.Connection, localStream);
 
         //permit to send message
         mediaManager.addSendMessageCallback(user.userId,(message: string) => {
@@ -208,7 +214,7 @@ export class SimplePeer {
                 if(!peerConnexionDeleted){
                     throw 'Error to delete peer connection';
                 }
-                this.createPeerConnection(user);
+                this.createPeerConnection(user, stream);
             }else {
                 peerConnection.toClose = false;
             }
@@ -327,7 +333,13 @@ export class SimplePeer {
         try {
             //if offer type, create peer connection
             if(data.signal.type === "offer"){
-                this.createPeerConnection(data);
+                const streamResult = get(localStreamStore);
+                let stream : MediaStream | null = null;
+                if (streamResult.type === 'success' && streamResult.stream) {
+                    stream = streamResult.stream;
+                }
+
+                this.createPeerConnection(data, stream);
             }
             const peer = this.PeerConnectionArray.get(data.userId);
             if (peer !== undefined) {
diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts
index 32e8e97f..5ca8952c 100644
--- a/front/src/WebRtc/VideoPeer.ts
+++ b/front/src/WebRtc/VideoPeer.ts
@@ -27,7 +27,7 @@ export class VideoPeer extends Peer {
     private onBlockSubscribe: Subscription;
     private onUnBlockSubscribe: Subscription;
 
-    constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
+    constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection, localStream: MediaStream | null) {
         super({
             initiator: initiator ? initiator : false,
             //reconnectTimer: 10000,
@@ -107,7 +107,7 @@ export class VideoPeer extends Peer {
             this._onFinish();
         });
 
-        this.pushVideoToRemoteUser();
+        this.pushVideoToRemoteUser(localStream);
         this.onBlockSubscribe = blackListManager.onBlockStream.subscribe((userId) => {
             if (userId === this.userId) {
                 this.toggleRemoteStream(false);
@@ -190,9 +190,8 @@ export class VideoPeer extends Peer {
         }
     }
 
-    private pushVideoToRemoteUser() {
+    private pushVideoToRemoteUser(localStream: MediaStream | null) {
         try {
-            const localStream: MediaStream | null = mediaManager.localStream;
             this.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...get(obtainedMediaConstraintStore)})));
 
             if(!localStream){

From 645af32b4cc991b3e0828c71fb1dd412895ec2d9 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 31 May 2021 10:20:30 +0200
Subject: [PATCH 017/141] correction of resize select character and companion

---
 front/dist/resources/html/CustomCharacterScene.html |  4 ++--
 front/src/Phaser/Game/DirtyScene.ts                 |  2 +-
 front/src/Phaser/Game/Game.ts                       | 12 ++++++++++--
 front/src/Phaser/Game/GameScene.ts                  |  4 ++--
 front/src/Phaser/Login/CustomizeScene.ts            |  4 ++--
 front/src/Phaser/Login/LoginScene.ts                |  2 +-
 front/src/Phaser/Login/ResizableScene.ts            |  4 ++--
 front/src/Phaser/Login/SelectCharacterScene.ts      |  8 ++++----
 front/src/Phaser/Login/SelectCompanionScene.ts      |  6 +++---
 front/src/Phaser/Menu/HelpCameraSettingsScene.ts    |  6 ++++--
 10 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html
index 0bc050ea..0bf3f753 100644
--- a/front/dist/resources/html/CustomCharacterScene.html
+++ b/front/dist/resources/html/CustomCharacterScene.html
@@ -10,8 +10,8 @@
         color: #ebeeee;
         width: 42vw;
         height: 48vh;
-        /*max-width: 300px;
-        max-height: 48vh;*/
+        max-width: 350px;
+        /*max-height: 48vh;*/
         overflow: hidden;
     }
     #customizeScene h1 {
diff --git a/front/src/Phaser/Game/DirtyScene.ts b/front/src/Phaser/Game/DirtyScene.ts
index 2e94aa66..3e1f3cdf 100644
--- a/front/src/Phaser/Game/DirtyScene.ts
+++ b/front/src/Phaser/Game/DirtyScene.ts
@@ -69,7 +69,7 @@ export abstract class DirtyScene extends ResizableScene {
         return this.dirty || this.objectListChanged;
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         this.objectListChanged = true;
     }
 }
diff --git a/front/src/Phaser/Game/Game.ts b/front/src/Phaser/Game/Game.ts
index 01aecf9f..e267e80a 100644
--- a/front/src/Phaser/Game/Game.ts
+++ b/front/src/Phaser/Game/Game.ts
@@ -21,14 +21,22 @@ export class Game extends Phaser.Game {
     constructor(GameConfig: Phaser.Types.Core.GameConfig) {
         super(GameConfig);
 
-        window.addEventListener('resize', (event) => {
+        this.scale.on(Phaser.Scale.Events.RESIZE, () => {
+            for (const scene of this.scene.getScenes(true)) {
+                if (scene instanceof ResizableScene) {
+                    scene.onResize();
+                }
+            }
+        })
+
+        /*window.addEventListener('resize', (event) => {
             // Let's trigger the onResize method of any active scene that is a ResizableScene
             for (const scene of this.scene.getScenes(true)) {
                 if (scene instanceof ResizableScene) {
                     scene.onResize(event);
                 }
             }
-        });
+        });*/
     }
 
     public step(time: number, delta: number)
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 4de5ffd9..2d34060f 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1452,8 +1452,8 @@ ${escapedMessage}
         this.connection?.emitActionableEvent(itemId, eventName, state, parameters);
     }
 
-    public onResize(ev: UIEvent): void {
-        super.onResize(ev);
+    public onResize(): void {
+        super.onResize();
         this.reposition();
 
         // Send new viewport to server
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 8b9a9a7a..1892813c 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -52,7 +52,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     create() {
         this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
-        this.centerXDomElement(this.customizeSceneElement, 150);
+        this.centerXDomElement(this.customizeSceneElement, 350);
         MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
 
         this.customizeSceneElement.addListener('click');
@@ -270,7 +270,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
 
-        this.centerXDomElement(this.customizeSceneElement, 150);
+        this.centerXDomElement(this.customizeSceneElement, 350);
      }
 
     private nextSceneToCamera(){
diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index 435592f2..661ddeb4 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -80,7 +80,7 @@ export class LoginScene extends ResizableScene {
 
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         this.centerXDomElement(this.loginSceneElement, 200);
     }
 }
diff --git a/front/src/Phaser/Login/ResizableScene.ts b/front/src/Phaser/Login/ResizableScene.ts
index 39e2d74b..d06cb66c 100644
--- a/front/src/Phaser/Login/ResizableScene.ts
+++ b/front/src/Phaser/Login/ResizableScene.ts
@@ -2,7 +2,7 @@ import {Scene} from "phaser";
 import DOMElement = Phaser.GameObjects.DOMElement;
 
 export abstract class ResizableScene extends Scene {
-    public abstract onResize(ev: UIEvent): void;
+    public abstract onResize(): void;
 
     /**
      * Centers the DOM element on the X axis.
@@ -17,7 +17,7 @@ export abstract class ResizableScene extends Scene {
                 && object.node
                 && object.node.getBoundingClientRect().width > 0
                     ? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom)
-                    : (300 / this.scale.zoom)
+                    : (defaultWidth / this.scale.zoom)
             );
     }
 }
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index ecbb9c64..998a62e6 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -51,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     create() {
 
         this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
-        this.centerXDomElement(this.selectCharacterSceneElement, 150);
+        this.centerXDomElement(this.selectCharacterSceneElement, 300);
         MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
 
         this.selectCharacterSceneElement.addListener('click');
@@ -211,7 +211,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
         const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
         player.setBounce(0.2);
-        player.setCollideWorldBounds(true);
+        player.setCollideWorldBounds(false);
         player.setVisible( playerVisible );
         player.setScale(playerScale, playerScale);
         player.setAlpha(playserOpactity);
@@ -240,10 +240,10 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     update(time: number, delta: number): void {
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         //move position of user
         this.moveUser();
 
-        this.centerXDomElement(this.selectCharacterSceneElement, 150);
+        this.centerXDomElement(this.selectCharacterSceneElement, 300);
     }
 }
diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts
index 203fd557..0e32108a 100644
--- a/front/src/Phaser/Login/SelectCompanionScene.ts
+++ b/front/src/Phaser/Login/SelectCompanionScene.ts
@@ -43,7 +43,7 @@ export class SelectCompanionScene extends ResizableScene {
     create() {
 
         this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey);
-        this.centerXDomElement(this.selectCompanionSceneElement, 150);
+        this.centerXDomElement(this.selectCompanionSceneElement, 300);
         MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
 
         this.selectCompanionSceneElement.addListener('click');
@@ -126,10 +126,10 @@ export class SelectCompanionScene extends ResizableScene {
         this.selectedCompanion = this.companions[this.currentCompanion];
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         this.moveCompanion();
 
-        this.centerXDomElement(this.selectCompanionSceneElement, 150);
+        this.centerXDomElement(this.selectCompanionSceneElement, 300);
     }
 
     private updateSelectedCompanion(): void {
diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
index 6bc520c0..fcc7996a 100644
--- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
+++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
@@ -109,8 +109,10 @@ export class HelpCameraSettingsScene extends DirtyScene {
         this.dirty = false;
     }
 
-    public onResize(ev: UIEvent): void {
-        super.onResize(ev);
+    public onResize(): void {
+        super.onResize(
+
+        );
         if (this.helpCameraSettingsOpened) {
             const middleX = this.getMiddleX();
             const middleY = this.getMiddleY();

From 1ac108a9b8719781916265f03f33ea8edfbcff7b Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 31 May 2021 10:20:30 +0200
Subject: [PATCH 018/141] correction of resize select character and companion
 by David

---
 front/dist/resources/html/CustomCharacterScene.html |  4 ++--
 front/dist/resources/html/SelectCompanionScene.html |  2 +-
 front/src/Phaser/Game/DirtyScene.ts                 |  2 +-
 front/src/Phaser/Game/Game.ts                       | 12 ++++++++++--
 front/src/Phaser/Game/GameScene.ts                  |  4 ++--
 front/src/Phaser/Login/CustomizeScene.ts            |  4 ++--
 front/src/Phaser/Login/LoginScene.ts                |  2 +-
 front/src/Phaser/Login/ResizableScene.ts            |  4 ++--
 front/src/Phaser/Login/SelectCharacterScene.ts      |  8 ++++----
 front/src/Phaser/Login/SelectCompanionScene.ts      |  6 +++---
 front/src/Phaser/Menu/HelpCameraSettingsScene.ts    |  6 ++++--
 front/src/Phaser/Services/WaScaleManager.ts         |  9 ++++++++-
 12 files changed, 40 insertions(+), 23 deletions(-)

diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html
index 0bc050ea..0bf3f753 100644
--- a/front/dist/resources/html/CustomCharacterScene.html
+++ b/front/dist/resources/html/CustomCharacterScene.html
@@ -10,8 +10,8 @@
         color: #ebeeee;
         width: 42vw;
         height: 48vh;
-        /*max-width: 300px;
-        max-height: 48vh;*/
+        max-width: 350px;
+        /*max-height: 48vh;*/
         overflow: hidden;
     }
     #customizeScene h1 {
diff --git a/front/dist/resources/html/SelectCompanionScene.html b/front/dist/resources/html/SelectCompanionScene.html
index cffa7880..30c782cb 100644
--- a/front/dist/resources/html/SelectCompanionScene.html
+++ b/front/dist/resources/html/SelectCompanionScene.html
@@ -128,7 +128,7 @@
         <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
     </section>
     <section class="action">
-        <a herf="#" id="selectCompanionSceneFormBack">No companion</a>
+        <a href="#" id="selectCompanionSceneFormBack">No companion</a>
         <button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
     </section>
 </form>
diff --git a/front/src/Phaser/Game/DirtyScene.ts b/front/src/Phaser/Game/DirtyScene.ts
index 2e94aa66..3e1f3cdf 100644
--- a/front/src/Phaser/Game/DirtyScene.ts
+++ b/front/src/Phaser/Game/DirtyScene.ts
@@ -69,7 +69,7 @@ export abstract class DirtyScene extends ResizableScene {
         return this.dirty || this.objectListChanged;
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         this.objectListChanged = true;
     }
 }
diff --git a/front/src/Phaser/Game/Game.ts b/front/src/Phaser/Game/Game.ts
index 01aecf9f..e267e80a 100644
--- a/front/src/Phaser/Game/Game.ts
+++ b/front/src/Phaser/Game/Game.ts
@@ -21,14 +21,22 @@ export class Game extends Phaser.Game {
     constructor(GameConfig: Phaser.Types.Core.GameConfig) {
         super(GameConfig);
 
-        window.addEventListener('resize', (event) => {
+        this.scale.on(Phaser.Scale.Events.RESIZE, () => {
+            for (const scene of this.scene.getScenes(true)) {
+                if (scene instanceof ResizableScene) {
+                    scene.onResize();
+                }
+            }
+        })
+
+        /*window.addEventListener('resize', (event) => {
             // Let's trigger the onResize method of any active scene that is a ResizableScene
             for (const scene of this.scene.getScenes(true)) {
                 if (scene instanceof ResizableScene) {
                     scene.onResize(event);
                 }
             }
-        });
+        });*/
     }
 
     public step(time: number, delta: number)
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 4de5ffd9..2d34060f 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1452,8 +1452,8 @@ ${escapedMessage}
         this.connection?.emitActionableEvent(itemId, eventName, state, parameters);
     }
 
-    public onResize(ev: UIEvent): void {
-        super.onResize(ev);
+    public onResize(): void {
+        super.onResize();
         this.reposition();
 
         // Send new viewport to server
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 8b9a9a7a..1892813c 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -52,7 +52,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     create() {
         this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
-        this.centerXDomElement(this.customizeSceneElement, 150);
+        this.centerXDomElement(this.customizeSceneElement, 350);
         MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
 
         this.customizeSceneElement.addListener('click');
@@ -270,7 +270,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
 
-        this.centerXDomElement(this.customizeSceneElement, 150);
+        this.centerXDomElement(this.customizeSceneElement, 350);
      }
 
     private nextSceneToCamera(){
diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index 435592f2..661ddeb4 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -80,7 +80,7 @@ export class LoginScene extends ResizableScene {
 
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         this.centerXDomElement(this.loginSceneElement, 200);
     }
 }
diff --git a/front/src/Phaser/Login/ResizableScene.ts b/front/src/Phaser/Login/ResizableScene.ts
index 39e2d74b..d06cb66c 100644
--- a/front/src/Phaser/Login/ResizableScene.ts
+++ b/front/src/Phaser/Login/ResizableScene.ts
@@ -2,7 +2,7 @@ import {Scene} from "phaser";
 import DOMElement = Phaser.GameObjects.DOMElement;
 
 export abstract class ResizableScene extends Scene {
-    public abstract onResize(ev: UIEvent): void;
+    public abstract onResize(): void;
 
     /**
      * Centers the DOM element on the X axis.
@@ -17,7 +17,7 @@ export abstract class ResizableScene extends Scene {
                 && object.node
                 && object.node.getBoundingClientRect().width > 0
                     ? (object.node.getBoundingClientRect().width / 2 / this.scale.zoom)
-                    : (300 / this.scale.zoom)
+                    : (defaultWidth / this.scale.zoom)
             );
     }
 }
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index ecbb9c64..998a62e6 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -51,7 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     create() {
 
         this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
-        this.centerXDomElement(this.selectCharacterSceneElement, 150);
+        this.centerXDomElement(this.selectCharacterSceneElement, 300);
         MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
 
         this.selectCharacterSceneElement.addListener('click');
@@ -211,7 +211,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
         const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
         player.setBounce(0.2);
-        player.setCollideWorldBounds(true);
+        player.setCollideWorldBounds(false);
         player.setVisible( playerVisible );
         player.setScale(playerScale, playerScale);
         player.setAlpha(playserOpactity);
@@ -240,10 +240,10 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     update(time: number, delta: number): void {
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         //move position of user
         this.moveUser();
 
-        this.centerXDomElement(this.selectCharacterSceneElement, 150);
+        this.centerXDomElement(this.selectCharacterSceneElement, 300);
     }
 }
diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts
index 203fd557..0e32108a 100644
--- a/front/src/Phaser/Login/SelectCompanionScene.ts
+++ b/front/src/Phaser/Login/SelectCompanionScene.ts
@@ -43,7 +43,7 @@ export class SelectCompanionScene extends ResizableScene {
     create() {
 
         this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey);
-        this.centerXDomElement(this.selectCompanionSceneElement, 150);
+        this.centerXDomElement(this.selectCompanionSceneElement, 300);
         MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
 
         this.selectCompanionSceneElement.addListener('click');
@@ -126,10 +126,10 @@ export class SelectCompanionScene extends ResizableScene {
         this.selectedCompanion = this.companions[this.currentCompanion];
     }
 
-    public onResize(ev: UIEvent): void {
+    public onResize(): void {
         this.moveCompanion();
 
-        this.centerXDomElement(this.selectCompanionSceneElement, 150);
+        this.centerXDomElement(this.selectCompanionSceneElement, 300);
     }
 
     private updateSelectedCompanion(): void {
diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
index 6bc520c0..fcc7996a 100644
--- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
+++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
@@ -109,8 +109,10 @@ export class HelpCameraSettingsScene extends DirtyScene {
         this.dirty = false;
     }
 
-    public onResize(ev: UIEvent): void {
-        super.onResize(ev);
+    public onResize(): void {
+        super.onResize(
+
+        );
         if (this.helpCameraSettingsOpened) {
             const middleX = this.getMiddleX();
             const middleY = this.getMiddleY();
diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index ca8b668d..8ca4ad20 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -2,6 +2,7 @@ import {HdpiManager} from "./HdpiManager";
 import ScaleManager = Phaser.Scale.ScaleManager;
 import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
 import type {Game} from "../Game/Game";
+import {ResizableScene} from "../Login/ResizableScene";
 
 
 class WaScaleManager {
@@ -30,13 +31,19 @@ class WaScaleManager {
         const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio});
 
         this.actualZoom = realSize.width / gameSize.width / devicePixelRatio;
-        this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio);
+        this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio)
         this.scaleManager.resize(gameSize.width, gameSize.height);
 
         // Override bug in canvas resizing in Phaser. Let's resize the canvas ourselves
         const style = this.scaleManager.canvas.style;
         style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
         style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
+        // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way.
+        for (const scene of this.game.scene.getScenes(true)) {
+            if (scene instanceof ResizableScene) {
+                scene.onResize();
+            }
+        }
 
         this.game.markDirty();
     }

From b8873d127780b92425ee9b6110e0b42ed4405283 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 31 May 2021 12:06:11 +0200
Subject: [PATCH 019/141] selectCompanionScene work with svelte

---
 .../resources/html/CustomCharacterScene.html  |   3 -
 .../resources/html/EnableCameraScene.html     |   3 -
 .../resources/html/SelectCompanionScene.html  | 134 ------------------
 front/dist/resources/html/gameMenu.html       |   3 -
 front/dist/resources/html/gameMenuIcon.html   |   3 -
 .../dist/resources/html/gameQualityMenu.html  |   3 -
 front/dist/resources/html/gameReport.html     |   3 -
 front/dist/resources/html/gameShare.html      |   3 -
 .../resources/html/helpCameraSettings.html    |   3 -
 front/dist/resources/html/loginScene.html     |   3 -
 .../resources/html/selectCharacterScene.html  |   3 -
 .../dist/resources/html/warningContainer.html |   3 -
 front/src/Components/App.svelte               |  10 +-
 front/src/Phaser/Game/GameScene.ts            |   2 +
 .../src/Phaser/Login/SelectCompanionScene.ts  |  65 +++------
 front/src/WebRtc/SimplePeer.ts                |   2 +-
 front/src/index.ts                            |   4 +-
 front/style/fonts.scss                        |   6 +-
 18 files changed, 42 insertions(+), 214 deletions(-)
 delete mode 100644 front/dist/resources/html/SelectCompanionScene.html

diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html
index 0bf3f753..9a8aac4d 100644
--- a/front/dist/resources/html/CustomCharacterScene.html
+++ b/front/dist/resources/html/CustomCharacterScene.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #customizeScene {
         background: #0000;
         /*border: 1px solid #ebeeee;*/
diff --git a/front/dist/resources/html/EnableCameraScene.html b/front/dist/resources/html/EnableCameraScene.html
index 2dda6cc1..21c798b5 100644
--- a/front/dist/resources/html/EnableCameraScene.html
+++ b/front/dist/resources/html/EnableCameraScene.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #enableCameraScene {
         background: #000000;
         /*border: 1px solid #ebeeee;*/
diff --git a/front/dist/resources/html/SelectCompanionScene.html b/front/dist/resources/html/SelectCompanionScene.html
deleted file mode 100644
index 30c782cb..00000000
--- a/front/dist/resources/html/SelectCompanionScene.html
+++ /dev/null
@@ -1,134 +0,0 @@
-<style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
-    #selectCompanionScene {
-        background: #0000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 10px auto 0;
-        color: #ebeeee;
-        max-height: 40vh;
-        max-width: 300px;
-        width: 40vw;
-        overflow: hidden;
-    }
-    #selectCompanionScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #selectCompanionScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #selectCompanionScene section {
-        margin: 10px;
-    }
-    #selectCompanionScene section.action {
-        text-align: center;
-        margin: 0;
-        margin-top: 20vh;
-    }
-    #selectCompanionScene button {
-        margin: 10px 4px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
-    #selectCompanionScene button#selectCompanionSceneFormCancel {
-        background-color: #aca6a600;
-        color: #292929;
-    }
-    #selectCompanionScene section h6,
-    #selectCompanionScene section h5{
-        margin: 1px;
-    }
-    #selectCompanionScene section.text-center{
-        text-align: center;
-    }
-    #selectCompanionScene section a{
-        font-size: 14px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #selectCompanionScene section a:hover{
-        font-weight: 700;
-    }
-    #selectCompanionScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #selectCompanionScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #selectCompanionScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #selectCompanionScene section input#selectCompanionSceneLink{
-        background-color: #a1a3a3;
-    }
-    #selectCompanionScene section img{
-        width: 160px;
-        margin: 20px 0;
-    }
-    #selectCompanionScene section button.selectCharacterButton{
-        position: absolute;
-        top: 20vh;
-        margin: 0;
-        width: 25px;
-    }
-    #selectCompanionScene section button.selectCharacterButton#selectCharacterButtonLeft{
-        left: 1vw;
-    }
-    #selectCompanionScene section button.selectCharacterButton#selectCharacterButtonRight{
-        right: 1vw;
-    }
-    #selectCompanionScene section button#selectCompanionSceneFormCustomYourOwnSubmit{
-        font-size: 14px;
-        width: auto;
-        margin-top: -2px;
-        background-color: #ffd700;
-        color: black;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #selectCompanionScene{
-            overflow-y: scroll;
-        }
-    }
-</style>
-
-<form id="selectCompanionScene" hidden>
-    <section class="text-center">
-        <h5>Select your WOKA</h5>
-        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
-        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
-    </section>
-    <section class="action">
-        <a href="#" id="selectCompanionSceneFormBack">No companion</a>
-        <button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
-    </section>
-</form>
diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html
index 6abf2753..399cf349 100644
--- a/front/dist/resources/html/gameMenu.html
+++ b/front/dist/resources/html/gameMenu.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameMenu main{
         margin-top: 15px;
     }
diff --git a/front/dist/resources/html/gameMenuIcon.html b/front/dist/resources/html/gameMenuIcon.html
index e0a1f782..22fe9867 100644
--- a/front/dist/resources/html/gameMenuIcon.html
+++ b/front/dist/resources/html/gameMenuIcon.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #menuIcon button {
         background-color: black;
         color: white;
diff --git a/front/dist/resources/html/gameQualityMenu.html b/front/dist/resources/html/gameQualityMenu.html
index 09c74dee..babb3f0e 100644
--- a/front/dist/resources/html/gameQualityMenu.html
+++ b/front/dist/resources/html/gameQualityMenu.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameQuality {
         background: #eceeee;
         border: 1px solid #42464b;
diff --git a/front/dist/resources/html/gameReport.html b/front/dist/resources/html/gameReport.html
index 9ea16b74..d35ae556 100644
--- a/front/dist/resources/html/gameReport.html
+++ b/front/dist/resources/html/gameReport.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameReport {
         background: #eceeee;
         border: 1px solid #42464b;
diff --git a/front/dist/resources/html/gameShare.html b/front/dist/resources/html/gameShare.html
index 00222437..404c8680 100644
--- a/front/dist/resources/html/gameShare.html
+++ b/front/dist/resources/html/gameShare.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #gameShare {
         background: #eceeee;
         border: 1px solid #42464b;
diff --git a/front/dist/resources/html/helpCameraSettings.html b/front/dist/resources/html/helpCameraSettings.html
index ee8e16e2..8c4e63c4 100644
--- a/front/dist/resources/html/helpCameraSettings.html
+++ b/front/dist/resources/html/helpCameraSettings.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #helpCameraSettings {
         background: #eceeee;
         border: 1px solid #42464b;
diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html
index 38e798e5..9c076693 100644
--- a/front/dist/resources/html/loginScene.html
+++ b/front/dist/resources/html/loginScene.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #loginScene {
         background: #000000;
         /*border: 1px solid #ebeeee;*/
diff --git a/front/dist/resources/html/selectCharacterScene.html b/front/dist/resources/html/selectCharacterScene.html
index c51731df..88c84041 100644
--- a/front/dist/resources/html/selectCharacterScene.html
+++ b/front/dist/resources/html/selectCharacterScene.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #selectCharacterScene {
         background: #0000;
         /*border: 1px solid #ebeeee;*/
diff --git a/front/dist/resources/html/warningContainer.html b/front/dist/resources/html/warningContainer.html
index 4989c49d..832ac4da 100644
--- a/front/dist/resources/html/warningContainer.html
+++ b/front/dist/resources/html/warningContainer.html
@@ -1,7 +1,4 @@
 <style>
-    *{
-        font-family: PixelFont-7,monospace!important;
-    }
     #warningMain {
         border-radius: 5px;
         height: 100px;
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 9b072e8d..f8a2589f 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -4,14 +4,22 @@
     import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
+    import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte";
+    import {selectCompanionSceneVisibleStore} from "../Stores/SelectCompanionStore";
+    import {Game} from "../Phaser/Game/Game";
+
+    export let game: Game;
 
 </script>
 
 <div>
-    {#if $gameOverlayVisibilityStore}
+    {#if $selectCompanionSceneVisibleStore}
+        <SelectCompanionScene game={game}></SelectCompanionScene>
+    {/if}
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->
+    {#if $gameOverlayVisibilityStore}
         <MyCamera></MyCamera>
         <CameraControls></CameraControls>
     {/if}
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 300dc71d..10a038ba 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -966,6 +966,8 @@ ${escapedMessage}
         this.pinchManager?.destroy();
         this.emoteManager.destroy();
 
+        mediaManager.hideGameOverlay();
+
         for(const iframeEvents of this.iframeSubscriptionList){
             iframeEvents.unsubscribe();
         }
diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts
index 0e32108a..6efbbaea 100644
--- a/front/src/Phaser/Login/SelectCompanionScene.ts
+++ b/front/src/Phaser/Login/SelectCompanionScene.ts
@@ -10,17 +10,15 @@ import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingM
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import { MenuScene } from "../Menu/MenuScene";
+import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore";
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
-const selectCompanionSceneKey = 'selectCompanionScene';
-
 export class SelectCompanionScene extends ResizableScene {
     private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
     private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
     private companionModels: Array<CompanionResourceDescriptionInterface> = [];
 
-    private selectCompanionSceneElement!: Phaser.GameObjects.DOMElement;
     private currentCompanion = 0;
 
     constructor() {
@@ -30,8 +28,6 @@ export class SelectCompanionScene extends ResizableScene {
     }
 
     preload() {
-        this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
-
         getAllCompanionResources(this.load).forEach(model => {
             this.companionModels.push(model);
         });
@@ -42,30 +38,14 @@ export class SelectCompanionScene extends ResizableScene {
 
     create() {
 
-        this.selectCompanionSceneElement = this.add.dom(-1000, 0).createFromCache(selectCompanionSceneKey);
-        this.centerXDomElement(this.selectCompanionSceneElement, 300);
-        MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
-
-        this.selectCompanionSceneElement.addListener('click');
-        this.selectCompanionSceneElement.on('click',  (event:MouseEvent) => {
-            event.preventDefault();
-            if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
-                this.moveToLeft();
-            }else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
-                this.moveToRight();
-            }else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormSubmit') {
-                this.nextScene();
-            }else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormBack') {
-                this._nextScene();
-            }
-        });
+        selectCompanionSceneVisibleStore.set(true);
 
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
 
         // input events
-        this.input.keyboard.on('keyup-ENTER', this.nextScene.bind(this));
+        this.input.keyboard.on('keyup-ENTER', this.selectCompanion.bind(this));
 
         this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this));
         this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this));
@@ -89,18 +69,19 @@ export class SelectCompanionScene extends ResizableScene {
 
     }
 
-    private nextScene(): void {
+    public selectCompanion(): void {
         localUserStore.setCompanion(this.companionModels[this.currentCompanion].name);
         gameManager.setCompanion(this.companionModels[this.currentCompanion].name);
 
-        this._nextScene();
+        this.closeScene();
     }
 
-    private _nextScene(){
+    public closeScene(){
         // next scene
         this.scene.stop(SelectCompanionSceneName);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.scene.remove(SelectCompanionSceneName);
+        selectCompanionSceneVisibleStore.set(false);
     }
 
     private createCurrentCompanion(): void {
@@ -128,8 +109,6 @@ export class SelectCompanionScene extends ResizableScene {
 
     public onResize(): void {
         this.moveCompanion();
-
-        this.centerXDomElement(this.selectCompanionSceneElement, 300);
     }
 
     private updateSelectedCompanion(): void {
@@ -147,15 +126,7 @@ export class SelectCompanionScene extends ResizableScene {
         this.updateSelectedCompanion();
     }
 
-    private moveToLeft(){
-        if(this.currentCompanion === 0){
-            return;
-        }
-        this.currentCompanion -= 1;
-        this.moveCompanion();
-    }
-
-    private moveToRight(){
+    public moveToRight(){
         if(this.currentCompanion === (this.companions.length - 1)){
             return;
         }
@@ -163,38 +134,46 @@ export class SelectCompanionScene extends ResizableScene {
         this.moveCompanion();
     }
 
-    private defineSetupCompanion(numero: number){
+    public moveToLeft(){
+        if(this.currentCompanion === 0){
+            return;
+        }
+        this.currentCompanion -= 1;
+        this.moveCompanion();
+    }
+
+    private defineSetupCompanion(num: number){
         const deltaX = 30;
         const deltaY = 2;
         let [companionX, companionY] = this.getCompanionPosition();
         let companionVisible = true;
         let companionScale = 1.5;
         let companionOpactity = 1;
-        if( this.currentCompanion !== numero ){
+        if( this.currentCompanion !== num ){
             companionVisible = false;
         }
-        if( numero === (this.currentCompanion + 1) ){
+        if( num === (this.currentCompanion + 1) ){
             companionY -= deltaY;
             companionX += deltaX;
             companionScale = 0.8;
             companionOpactity = 0.6;
             companionVisible = true;
         }
-        if( numero === (this.currentCompanion + 2) ){
+        if( num === (this.currentCompanion + 2) ){
             companionY -= deltaY;
             companionX += (deltaX * 2);
             companionScale = 0.8;
             companionOpactity = 0.6;
             companionVisible = true;
         }
-        if( numero === (this.currentCompanion - 1) ){
+        if( num === (this.currentCompanion - 1) ){
             companionY -= deltaY;
             companionX -= deltaX;
             companionScale = 0.8;
             companionOpactity = 0.6;
             companionVisible = true;
         }
-        if( numero === (this.currentCompanion - 2) ){
+        if( num === (this.currentCompanion - 2) ){
             companionY -= deltaY;
             companionX -= (deltaX * 2);
             companionScale = 0.8;
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index caec53c5..9193f18b 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -263,7 +263,7 @@ export class SimplePeer {
 
             const userIndex = this.Users.findIndex(user => user.userId === userId);
             if(userIndex < 0){
-                throw 'Couln\'t delete user';
+                throw 'Couldn\'t delete user';
             } else {
                 this.Users.splice(userIndex, 1);
             }
diff --git a/front/src/index.ts b/front/src/index.ts
index f9017c24..bc435ee1 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -152,7 +152,9 @@ iframeListener.init();
 
 const app = new App({
     target: HtmlUtils.getElementByIdOrFail('svelte-overlay'),
-    props: { },
+    props: {
+        game: game
+    },
 })
 
 export default app
diff --git a/front/style/fonts.scss b/front/style/fonts.scss
index 5ef9b9b4..748710fa 100644
--- a/front/style/fonts.scss
+++ b/front/style/fonts.scss
@@ -1 +1,5 @@
-@import "~@fontsource/press-start-2p/index.css";
\ No newline at end of file
+@import "~@fontsource/press-start-2p/index.css";
+
+*{
+  font-family: PixelFont-7,monospace;
+}
\ No newline at end of file

From 120a4881218e6c00f0b79dccb5ec06405ff3c100 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 31 May 2021 12:16:46 +0200
Subject: [PATCH 020/141] Adding selectCompanionStore

---
 .../SelectCompanionScene.svelte               | 83 +++++++++++++++++++
 front/src/Stores/SelectCompanionStore.ts      |  3 +
 2 files changed, 86 insertions(+)
 create mode 100644 front/src/Components/SelectCompanion/SelectCompanionScene.svelte
 create mode 100644 front/src/Stores/SelectCompanionStore.ts

diff --git a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
new file mode 100644
index 00000000..8638dc4d
--- /dev/null
+++ b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
@@ -0,0 +1,83 @@
+<script lang="typescript">
+    import {Game} from "../../Phaser/Game/Game";
+    import {SelectCompanionScene} from "../../Phaser/Login/SelectCompanionScene";
+
+    export let game: Game;
+
+    const selectCompanionScene = game.scene.scenes.find((scene) => scene instanceof SelectCompanionScene);
+
+    function selectLeft() {
+        selectCompanionScene.moveToLeft();
+    }
+
+    function selectRight() {
+        selectCompanionScene.moveToRight();
+    }
+
+    function noCompanion() {
+        selectCompanionScene.closeScene();
+    }
+
+    function selectCompanion() {
+        selectCompanionScene.selectCompanion();
+    }
+</script>
+
+<form class="selectCompanionScene">
+    <section class="text-center">
+        <h2>Select your companion</h2>
+        <button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={selectLeft}> &lt; </button>
+        <button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={selectRight}> &gt; </button>
+    </section>
+    <section class="action">
+        <button href="/" class="selectCompanionSceneFormBack nes-btn" on:click|preventDefault={noCompanion}>No companion</button>
+        <button type="submit" class="selectCompanionSceneFormSubmit nes-btn is-primary" on:click|preventDefault={selectCompanion}>Continue</button>
+    </section>
+</form>
+
+<style lang="scss">
+  form.selectCompanionScene {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    color: #ebeeee;
+  }
+  .selectCompanionScene button {
+    font-family: "Press Start 2P";
+  }
+  .selectCompanionScene section {
+    margin: 10px;
+  }
+  .selectCompanionScene section.action {
+    text-align: center;
+    margin-top: 55vh;
+  }
+  .selectCompanionScene section h2 {
+    font-family: "Press Start 2P";
+    margin: 1px;
+  }
+  .selectCompanionScene section.text-center{
+    text-align: center;
+  }
+  .selectCompanionScene section button.selectCharacterButton{
+    position: absolute;
+    top: 33vh;
+    margin: 0;
+  }
+  .selectCompanionScene button.selectCharacterButtonLeft{
+    left: 33vw;
+  }
+  .selectCompanionScene button.selectCharacterButtonRight{
+    right: 33vw;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .selectCompanionScene button.selectCharacterButtonLeft{
+      left: 10vw;
+    }
+    .selectCompanionScene button.selectCharacterButtonRight{
+      right: 10vw;
+    }
+  }
+
+
+</style>
\ No newline at end of file
diff --git a/front/src/Stores/SelectCompanionStore.ts b/front/src/Stores/SelectCompanionStore.ts
new file mode 100644
index 00000000..e66f5de3
--- /dev/null
+++ b/front/src/Stores/SelectCompanionStore.ts
@@ -0,0 +1,3 @@
+import { derived, writable, Writable } from "svelte/store";
+
+export const selectCompanionSceneVisibleStore = writable(false);

From 13d32273238f51100ee2da4b8e4e4d070a3943b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 31 May 2021 17:03:29 +0200
Subject: [PATCH 021/141] Migrating LoginScene to Svelte

---
 CHANGELOG.md                                  |   4 +
 front/dist/resources/html/loginScene.html     | 117 -----------------
 front/src/Components/App.svelte               |   5 +
 front/src/Components/Login/LoginScene.svelte  | 119 ++++++++++++++++++
 .../SelectCompanionScene.svelte               |   5 +-
 front/src/Components/images/logo.png          | Bin 0 -> 15822 bytes
 front/src/Connexion/LocalUser.ts              |   2 +-
 front/src/Enum/EnvironmentVariable.ts         |   1 +
 front/src/Phaser/Login/LoginScene.ts          |  59 ++-------
 front/src/Stores/LoginSceneStore.ts           |   3 +
 front/src/WebRtc/ScreenSharingPeer.ts         |   1 +
 front/style/fonts.scss                        |   6 +-
 front/webpack.config.ts                       |   4 +-
 13 files changed, 150 insertions(+), 176 deletions(-)
 delete mode 100644 front/dist/resources/html/loginScene.html
 create mode 100644 front/src/Components/Login/LoginScene.svelte
 create mode 100644 front/src/Components/images/logo.png
 create mode 100644 front/src/Stores/LoginSceneStore.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d9afd71e..b9b0a926 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,10 @@
   - Mouse wheel support to zoom in / out
   - Pinch support on mobile to zoom in / out
   - Improved virtual joystick size (adapts to the zoom level)
+- Redesigned intermediate scenes
+  - Redesigned Select Companion scene
+  - Redesigned Enter Your Name scene
+    - Added a new `DISPLAY_TERMS_OF_USE` environment variable to trigger the display of terms of use  
 - New scripting API features:
   - Use `WA.loadSound(): Sound` to load / play / stop a sound
 
diff --git a/front/dist/resources/html/loginScene.html b/front/dist/resources/html/loginScene.html
deleted file mode 100644
index 9c076693..00000000
--- a/front/dist/resources/html/loginScene.html
+++ /dev/null
@@ -1,117 +0,0 @@
-<style>
-    #loginScene {
-        background: #000000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 20px auto 0;
-        width: 90%;
-        max-width: 200px;
-        color: #ebeeee;
-        max-height: 40vh;
-        overflow: hidden;
-    }
-    #loginScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #loginScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #loginScene section {
-        margin: 10px;
-    }
-    #loginScene section.action{
-        text-align: center;
-        margin: 0;
-    }
-    #loginScene button {
-        margin: 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
-    #loginScene button#loginSceneFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-    #loginScene section h6,
-    #loginScene section h5{
-        margin: 1px;
-    }
-    #loginScene section.text-center{
-        text-align: center;
-    }
-    #loginScene section a{
-        font-size: 8px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #loginScene section a:hover{
-        font-weight: 700;
-    }
-    #loginScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #loginScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #loginScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #loginScene section input#loginSceneLink{
-        background-color: #a1a3a3;
-    }
-    #loginScene section img{
-        width: 160px;
-        margin: 20px 0;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #loginScene{
-            overflow-y: scroll;
-        }
-    }
-</style>
-
-<form id="loginScene" hidden>
-    <section class="text-center">
-        <img src="resources/logos/logo.png">
-    </section>
-    <section class="text-center">
-        <h5>Enter your name</h5>
-        <p class="info">9 chars maximum</p>
-        <p class="err" id="errorLoginScene"></p>
-    </section>
-    <section>
-        <input type="text" name="email" id="loginSceneName">
-        <p>By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank">terms of use</a>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and <a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.</p>
-    </section>
-    <section class="action">
-        <button type="submit" id="loginSceneFormSubmit">Continue</button>
-    </section>
-</form>
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index f8a2589f..286b5687 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -7,12 +7,17 @@
     import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte";
     import {selectCompanionSceneVisibleStore} from "../Stores/SelectCompanionStore";
     import {Game} from "../Phaser/Game/Game";
+    import LoginScene from "./Login/LoginScene.svelte";
+    import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
 
     export let game: Game;
 
 </script>
 
 <div>
+    {#if $loginSceneVisibleStore}
+        <LoginScene game={game}></LoginScene>
+    {/if}
     {#if $selectCompanionSceneVisibleStore}
         <SelectCompanionScene game={game}></SelectCompanionScene>
     {/if}
diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte
new file mode 100644
index 00000000..6a05ba9f
--- /dev/null
+++ b/front/src/Components/Login/LoginScene.svelte
@@ -0,0 +1,119 @@
+<script lang="typescript">
+    import {Game} from "../../Phaser/Game/Game";
+    import {LoginScene} from "../../Phaser/Login/LoginScene";
+    import {DISPLAY_TERMS_OF_USE, MAX_USERNAME_LENGTH} from "../../Enum/EnvironmentVariable";
+    import logoImg from "../images/logo.png";
+    import {gameManager} from "../../Phaser/Game/GameManager";
+    import {maxUserNameLength} from "../../Connexion/LocalUser";
+
+    export let game: Game;
+
+    const loginScene = game.scene.scenes.find((scene) => scene instanceof LoginScene);
+
+    let name = gameManager.getPlayerName() || '';
+    let startValidating = false;
+
+    function submit() {
+        startValidating = true;
+
+        let finalName = name.trim();
+        if (finalName !== '') {
+            loginScene.login(finalName);
+        }
+    }
+</script>
+
+<form class="loginScene" on:submit|preventDefault={submit}>
+    <section class="text-center">
+        <img src={logoImg} alt="WorkAdventure logo" />
+    </section>
+    <section class="text-center">
+        <h2>Enter your name</h2>
+    </section>
+    <input type="text" name="loginSceneName" class="nes-input is-dark" maxlength={MAX_USERNAME_LENGTH} autofocus bind:value={name} on:keypress={() => {startValidating = true}} class:is-error={name.trim() === '' && startValidating} />
+    <section class="error-section">
+    {#if name.trim() === '' && startValidating }
+        <p class="err">The name is empty</p>
+    {/if}
+    </section>
+
+    {#if !DISPLAY_TERMS_OF_USE}
+    <section class="terms-and-conditions">
+        <p>By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank">terms of use</a>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and <a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.</p>
+    </section>
+    {/if}
+    <section class="action">
+        <button type="submit" class="nes-btn is-primary loginSceneFormSubmit">Continue</button>
+    </section>
+</form>
+
+<style lang="scss">
+  .loginScene {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    margin: 20px auto 0;
+    width: 90%;
+    color: #ebeeee;
+
+    display: flex;
+    flex-flow: column wrap;
+    align-items: center;
+
+    input {
+      text-align: center;
+      font-family: "Press Start 2P";
+      max-width: 400px;
+    }
+
+    .terms-and-conditions {
+      max-width: 400px;
+    }
+
+    section.error-section {
+      min-height: 2rem;
+
+      p {
+        margin: 0;
+      }
+    }
+  }
+
+  .loginScene section {
+    margin: 10px;
+  }
+  .loginScene section.action{
+    text-align: center;
+    margin-top: 20px;
+  }
+  .loginScene section h2{
+    font-family: "Press Start 2P";
+    margin: 1px;
+  }
+  .loginScene section.text-center{
+    text-align: center;
+  }
+  .loginScene section a{
+    text-decoration: underline;
+    color: #ebeeee;
+  }
+  .loginScene section a:hover{
+    font-weight: 700;
+  }
+  .loginScene section p{
+    text-align: left;
+    margin: 10px 10px;
+  }
+  .loginScene p.err{
+    color: #ce372b;
+    text-align: center;
+  }
+  /*.loginScene section p.info{
+    display: none;
+    text-align: center;
+  }*/
+  .loginScene section img{
+    width: 100%;
+    margin: 20px 0;
+  }
+
+</style>
diff --git a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
index 8638dc4d..9aaa0757 100644
--- a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
+++ b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
@@ -41,9 +41,6 @@
     pointer-events: auto;
     color: #ebeeee;
   }
-  .selectCompanionScene button {
-    font-family: "Press Start 2P";
-  }
   .selectCompanionScene section {
     margin: 10px;
   }
@@ -80,4 +77,4 @@
   }
 
 
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/Components/images/logo.png b/front/src/Components/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..f4440ad51079b55755f5b1f510ed6da89907fcee
GIT binary patch
literal 15822
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
Y1Ht99S|RG>Hvj+t07*qoM6N<$f+aWuq5uE@

literal 0
HcmV?d00001

diff --git a/front/src/Connexion/LocalUser.ts b/front/src/Connexion/LocalUser.ts
index 43b184cf..f5a4ac2a 100644
--- a/front/src/Connexion/LocalUser.ts
+++ b/front/src/Connexion/LocalUser.ts
@@ -10,7 +10,7 @@ export interface CharacterTexture {
 export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
 
 export function isUserNameValid(value: unknown): boolean {
-    return typeof value === "string" && value.length > 0 && value.length < maxUserNameLength && value.indexOf(' ') === -1;
+    return typeof value === "string" && value.length > 0 && value.length <= maxUserNameLength && value.indexOf(' ') === -1;
 }
 
 export function areCharacterLayersValid(value: string[] | null): boolean {
diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts
index 85b63335..73f6427c 100644
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@@ -14,6 +14,7 @@ const POSITION_DELAY = 200; // Wait 200ms between sending position events
 const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
 export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;
 export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || '4');
+export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == 'true';
 
 export const isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
 
diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index 4b36e3d9..39a8f5f3 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -1,17 +1,12 @@
 import {gameManager} from "../Game/GameManager";
 import {SelectCharacterSceneName} from "./SelectCharacterScene";
 import {ResizableScene} from "./ResizableScene";
-import { localUserStore } from "../../Connexion/LocalUserStore";
-import {MenuScene} from "../Menu/MenuScene";
-import { isUserNameValid } from "../../Connexion/LocalUser";
+import {loginSceneVisibleStore} from "../../Stores/LoginSceneStore";
 
 export const LoginSceneName = "LoginScene";
 
-const loginSceneKey = 'loginScene';
-
 export class LoginScene extends ResizableScene {
 
-    private loginSceneElement!: Phaser.GameObjects.DOMElement;
     private name: string = '';
 
     constructor() {
@@ -22,65 +17,25 @@ export class LoginScene extends ResizableScene {
     }
 
     preload() {
-        this.load.html(loginSceneKey, 'resources/html/loginScene.html');
     }
 
     create() {
-        this.loginSceneElement = this.add.dom(-1000, 0).createFromCache(loginSceneKey);
-        this.centerXDomElement(this.loginSceneElement, 200);
-        MenuScene.revealMenusAfterInit(this.loginSceneElement, loginSceneKey);
-
-        const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
-        const inputElement = this.loginSceneElement.getChildByID('loginSceneName') as HTMLInputElement;
-        inputElement.value = localUserStore.getName() ?? '';
-        inputElement.focus();
-        inputElement.addEventListener('keypress', (event: KeyboardEvent) => {
-            if(inputElement.value.length > 7){
-                event.preventDefault();
-                return;
-            }
-            pErrorElement.innerHTML = '';
-            if(inputElement.value && !isUserNameValid(inputElement.value)){
-                pErrorElement.innerHTML = 'Invalid user name: No spaces are allowed.';
-            }
-            if (event.key === 'Enter') {
-                event.preventDefault();
-                this.login(inputElement);
-                return;
-            }
-        });
-
-        const continuingButton = this.loginSceneElement.getChildByID('loginSceneFormSubmit') as HTMLButtonElement;
-        continuingButton.addEventListener('click', (e) => {
-            e.preventDefault();
-            this.login(inputElement);
-        });
+        loginSceneVisibleStore.set(true);
     }
 
-    private login(inputElement: HTMLInputElement): void {
-        const pErrorElement = this.loginSceneElement.getChildByID('errorLoginScene') as HTMLInputElement;
-        this.name = inputElement.value;
-        if (this.name === '') {
-            pErrorElement.innerHTML = 'The name is empty';
-            return
-        }
-        if(!isUserNameValid(this.name)){
-            pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
-            return
-        }
-        if (this.name === '') return
-        gameManager.setPlayerName(this.name);
+    public login(name: string): void {
+        name = name.trim();
+        gameManager.setPlayerName(name);
 
         this.scene.stop(LoginSceneName)
         gameManager.tryResumingGame(this, SelectCharacterSceneName);
-        this.scene.remove(LoginSceneName)
+        this.scene.remove(LoginSceneName);
+        loginSceneVisibleStore.set(false);
     }
 
     update(time: number, delta: number): void {
-
     }
 
     public onResize(): void {
-        this.centerXDomElement(this.loginSceneElement, 200);
     }
 }
diff --git a/front/src/Stores/LoginSceneStore.ts b/front/src/Stores/LoginSceneStore.ts
new file mode 100644
index 00000000..6e2ea18b
--- /dev/null
+++ b/front/src/Stores/LoginSceneStore.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const loginSceneVisibleStore = writable(false);
diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts
index 947549eb..d797f59b 100644
--- a/front/src/WebRtc/ScreenSharingPeer.ts
+++ b/front/src/WebRtc/ScreenSharingPeer.ts
@@ -60,6 +60,7 @@ export class ScreenSharingPeer extends Peer {
             const message = JSON.parse(chunk.toString('utf8'));
             if (message.streamEnded !== true) {
                 console.error('Unexpected message on screen sharing peer connection');
+                return;
             }
             mediaManager.removeActiveScreenSharingVideo("" + this.userId);
         });
diff --git a/front/style/fonts.scss b/front/style/fonts.scss
index 748710fa..a49d3967 100644
--- a/front/style/fonts.scss
+++ b/front/style/fonts.scss
@@ -2,4 +2,8 @@
 
 *{
   font-family: PixelFont-7,monospace;
-}
\ No newline at end of file
+}
+
+.nes-btn {
+  font-family: "Press Start 2P";
+}
diff --git a/front/webpack.config.ts b/front/webpack.config.ts
index 6ebf907f..99cbff77 100644
--- a/front/webpack.config.ts
+++ b/front/webpack.config.ts
@@ -7,6 +7,7 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import sveltePreprocess from 'svelte-preprocess';
 import ForkTsCheckerWebpackPlugin from "fork-ts-checker-webpack-plugin";
 import NodePolyfillPlugin from 'node-polyfill-webpack-plugin';
+import {DISPLAY_TERMS_OF_USE} from "./src/Enum/EnvironmentVariable";
 
 const mode = process.env.NODE_ENV ?? 'development';
 const isProduction = mode === 'production';
@@ -175,7 +176,8 @@ module.exports = {
             'JITSI_PRIVATE_MODE': null,
             'START_ROOM_URL': null,
             'MAX_USERNAME_LENGTH': 8,
-            'MAX_PER_GROUP': 4
+            'MAX_PER_GROUP': 4,
+            'DISPLAY_TERMS_OF_USE': false,
         })
     ],
 

From cb03580421de1cc24f628e6c2a2da2ea70079fcb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 31 May 2021 17:49:41 +0200
Subject: [PATCH 022/141] Partial migration of EnableCameraScene to Svelte

---
 .../resources/html/EnableCameraScene.html     | 126 ------------------
 front/src/Components/App.svelte               |   7 +-
 .../EnableCamera/EnableCameraScene.svelte     |  76 +++++++++++
 front/src/Components/Login/LoginScene.svelte  |   3 +-
 front/src/Phaser/Login/EnableCameraScene.ts   |  29 +---
 5 files changed, 87 insertions(+), 154 deletions(-)
 delete mode 100644 front/dist/resources/html/EnableCameraScene.html
 create mode 100644 front/src/Components/EnableCamera/EnableCameraScene.svelte

diff --git a/front/dist/resources/html/EnableCameraScene.html b/front/dist/resources/html/EnableCameraScene.html
deleted file mode 100644
index 21c798b5..00000000
--- a/front/dist/resources/html/EnableCameraScene.html
+++ /dev/null
@@ -1,126 +0,0 @@
-<style>
-    #enableCameraScene {
-        background: #000000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 20px auto 0;
-        color: #ebeeee;
-        max-height: 48vh;
-        width: 42vw;
-        max-width: 300px;
-        overflow: hidden;
-    }
-    #enableCameraScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #enableCameraScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #enableCameraScene section.title {
-        position: absolute;
-        top: 1vh;
-        width: 100%;
-    }
-    #enableCameraScene section.action{
-        text-align: center;
-        margin: 0;
-        position: absolute;
-        top: 40vh;
-        width: 100%;
-    }
-    #enableCameraScene button {
-        margin: 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    #enableCameraScene button#enableCameraSceneFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-    #enableCameraScene section h6,
-    #enableCameraScene section h5{
-        margin: 1px;
-    }
-    #enableCameraScene section.text-center{
-        text-align: center;
-    }
-    #enableCameraScene section a{
-        font-size: 8px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #enableCameraScene section a:hover{
-        font-weight: 700;
-    }
-    #enableCameraScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #enableCameraScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #enableCameraScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #enableCameraScene section input#enableCameraSceneLink{
-        background-color: #a1a3a3;
-    }
-    #enableCameraScene section img{
-        width: 160px;
-        margin: 20px 0;
-    }
-    /*@media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #enableCameraScene{
-            overflow-y: scroll;
-        }
-    }*/
-</style>
-
-<form id="enableCameraScene" hidden>
-    <!-- FIX me -->
-    <section class="title text-center">
-        <h5>Turn on your camera and microphone</h5>
-    </section>
-    <!--<section class="text-center">
-        <video id="myCamVideoSetup" autoplay muted></video>
-    </section>
-    <section class="text-center">
-        <h5>Select your camera</h3>
-        <select id="camera">
-        </select>
-    </section>
-    <section class="text-center">
-        <h5>Select your michrophone</h3>
-        <select id="michrophone">
-        </select>
-    </section>-->
-    <section class="action">
-        <button type="submit" id="enableCameraSceneFormSubmit">Let's go!</button>
-    </section>
-</form>
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 286b5687..581c5673 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import MenuIcon from "./Menu/MenuIcon.svelte";
     import {menuIconVisible} from "../Stores/MenuStore";
-    import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
+    import {enableCameraSceneVisibilityStore, gameOverlayVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
     import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte";
@@ -9,9 +9,9 @@
     import {Game} from "../Phaser/Game/Game";
     import LoginScene from "./Login/LoginScene.svelte";
     import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
+    import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
 
     export let game: Game;
-
 </script>
 
 <div>
@@ -21,6 +21,9 @@
     {#if $selectCompanionSceneVisibleStore}
         <SelectCompanionScene game={game}></SelectCompanionScene>
     {/if}
+    {#if $enableCameraSceneVisibilityStore}
+        <EnableCameraScene game={game}></EnableCameraScene>
+    {/if}
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
new file mode 100644
index 00000000..ac2cf992
--- /dev/null
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -0,0 +1,76 @@
+<script lang="typescript">
+    import {Game} from "../../Phaser/Game/Game";
+    import {EnableCameraScene} from "../../Phaser/Login/EnableCameraScene";
+
+    export let game: Game;
+
+    const enableCameraScene = game.scene.scenes.find((scene) => scene instanceof EnableCameraScene);
+
+    function submit() {
+        enableCameraScene.login();
+    }
+
+</script>
+
+<form class="enableCameraScene" on:submit|preventDefault={submit}>
+    <section class="title text-center">
+        <h2>Turn on your camera and microphone</h2>
+    </section>
+    <!--<section class="text-center">
+        <video id="myCamVideoSetup" autoplay muted></video>
+    </section>
+    <section class="text-center">
+        <h5>Select your camera</h3>
+        <select id="camera">
+        </select>
+    </section>
+    <section class="text-center">
+        <h5>Select your michrophone</h3>
+        <select id="michrophone">
+        </select>
+    </section>-->
+    <section class="action">
+        <button type="submit" class="nes-btn is-primary letsgo" >Let's go!</button>
+    </section>
+</form>
+
+<style lang="scss">
+    .enableCameraScene {
+      pointer-events: auto;
+      /*background: #000000;*/
+      margin: 20px auto 0;
+      color: #ebeeee;
+      /*max-height: 48vh;
+      width: 42vw;
+      max-width: 300px;*/
+      overflow: hidden;
+
+      section.title {
+        position: absolute;
+        top: 1vh;
+        width: 100%;
+      }
+
+      section.action{
+        text-align: center;
+        margin: 0;
+        position: absolute;
+        top: 85vh;
+        width: 100%;
+      }
+
+      h2{
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      section.text-center{
+        text-align: center;
+      }
+
+      button.letsgo {
+        font-size: 200%;
+      }
+    }
+</style>
+
diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte
index 6a05ba9f..ea824908 100644
--- a/front/src/Components/Login/LoginScene.svelte
+++ b/front/src/Components/Login/LoginScene.svelte
@@ -30,7 +30,7 @@
     <section class="text-center">
         <h2>Enter your name</h2>
     </section>
-    <input type="text" name="loginSceneName" class="nes-input is-dark" maxlength={MAX_USERNAME_LENGTH} autofocus bind:value={name} on:keypress={() => {startValidating = true}} class:is-error={name.trim() === '' && startValidating} />
+    <input type="text" name="loginSceneName" class="nes-input is-dark" maxlength={MAX_USERNAME_LENGTH} bind:value={name} on:keypress={() => {startValidating = true}} class:is-error={name.trim() === '' && startValidating} />
     <section class="error-section">
     {#if name.trim() === '' && startValidating }
         <p class="err">The name is empty</p>
@@ -71,6 +71,7 @@
 
     section.error-section {
       min-height: 2rem;
+      margin: 0;
 
       p {
         margin: 0;
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 6002da7b..73fa7303 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -12,8 +12,8 @@ import { MenuScene } from "../Menu/MenuScene";
 import {ResizableScene} from "./ResizableScene";
 import {
     audioConstraintStore,
-    enableCameraSceneVisibilityStore,
     localStreamStore,
+    enableCameraSceneVisibilityStore,
     mediaStreamConstraintsStore,
     videoConstraintStore
 } from "../../Stores/MediaStore";
@@ -28,8 +28,6 @@ enum LoginTextures {
     arrowUp = "arrow_up"
 }
 
-const enableCameraSceneKey = 'enableCameraScene';
-
 export class EnableCameraScene extends ResizableScene {
     private textField!: TextField;
     private cameraNameField!: TextField;
@@ -45,8 +43,6 @@ export class EnableCameraScene extends ResizableScene {
     private soundMeterSprite!: SoundMeterSprite;
     private microphoneNameField!: TextField;
 
-    private enableCameraSceneElement!: Phaser.GameObjects.DOMElement;
-
     private mobileTapZone!: Zone;
     private localStreamStoreUnsubscriber!: Unsubscriber;
 
@@ -58,9 +54,6 @@ export class EnableCameraScene extends ResizableScene {
     }
 
     preload() {
-
-        this.load.html(enableCameraSceneKey, 'resources/html/EnableCameraScene.html');
-
         this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
         this.load.image(LoginTextures.arrowRight, "resources/objects/arrow_right.png");
         this.load.image(LoginTextures.arrowUp, "resources/objects/arrow_up.png");
@@ -69,18 +62,6 @@ export class EnableCameraScene extends ResizableScene {
     }
 
     create() {
-
-        this.enableCameraSceneElement = this.add.dom(-1000, 0).createFromCache(enableCameraSceneKey);
-        this.centerXDomElement(this.enableCameraSceneElement, 300);
-
-        MenuScene.revealMenusAfterInit(this.enableCameraSceneElement, enableCameraSceneKey);
-
-        const continuingButton = this.enableCameraSceneElement.getChildByID('enableCameraSceneFormSubmit') as HTMLButtonElement;
-        continuingButton.addEventListener('click', (e) => {
-            e.preventDefault();
-            this.login();
-        });
-
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
@@ -272,19 +253,17 @@ export class EnableCameraScene extends ResizableScene {
         this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16;
         this.arrowUp.y = this.microphoneNameField.y;
 
-        const actionBtn = document.querySelector<HTMLDivElement>('#enableCameraScene .action');
+        /*const actionBtn = document.querySelector<HTMLDivElement>('#enableCameraScene .action');
         if (actionBtn !== null) {
             actionBtn.style.top = (this.scale.height - 65) + 'px';
-        }
+        }*/
     }
 
     update(time: number, delta: number): void {
         this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
-
-        this.centerXDomElement(this.enableCameraSceneElement, 300);
     }
 
-    private login(): void {
+    public login(): void {
         HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
         this.soundMeter.stop();
 

From 4923ce8b833b07daf19c834b0a2383d420c5c0f1 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 31 May 2021 17:50:14 +0200
Subject: [PATCH 023/141] selectCharacterScene and customCharacterScene in
 svelte

---
 .../resources/html/CustomCharacterScene.html  | 157 ------------------
 .../resources/html/selectCharacterScene.html  | 139 ----------------
 front/dist/resources/objects/arrow_down.png   | Bin 0 -> 4816 bytes
 front/dist/resources/objects/arrow_up.png     | Bin 149 -> 4710 bytes
 front/src/Components/App.svelte               |  14 +-
 .../CustomCharacterScene.svelte               | 110 ++++++++++++
 .../SelectCharacterScene.svelte               |  84 ++++++++++
 front/src/Phaser/Login/CustomizeScene.ts      |  63 ++-----
 .../Login/SelectCharacterMobileScene.ts       |  24 +--
 .../src/Phaser/Login/SelectCharacterScene.ts  |  43 ++---
 front/src/Stores/CustomCharacterStore.ts      |   3 +
 front/src/Stores/SelectCharacterStore.ts      |   3 +
 12 files changed, 249 insertions(+), 391 deletions(-)
 delete mode 100644 front/dist/resources/html/CustomCharacterScene.html
 delete mode 100644 front/dist/resources/html/selectCharacterScene.html
 create mode 100644 front/dist/resources/objects/arrow_down.png
 create mode 100644 front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
 create mode 100644 front/src/Components/selectCharacter/SelectCharacterScene.svelte
 create mode 100644 front/src/Stores/CustomCharacterStore.ts
 create mode 100644 front/src/Stores/SelectCharacterStore.ts

diff --git a/front/dist/resources/html/CustomCharacterScene.html b/front/dist/resources/html/CustomCharacterScene.html
deleted file mode 100644
index 9a8aac4d..00000000
--- a/front/dist/resources/html/CustomCharacterScene.html
+++ /dev/null
@@ -1,157 +0,0 @@
-<style>
-    #customizeScene {
-        background: #0000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 10px auto 0;
-        color: #ebeeee;
-        width: 42vw;
-        height: 48vh;
-        max-width: 350px;
-        /*max-height: 48vh;*/
-        overflow: hidden;
-    }
-    #customizeScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #customizeScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #customizeScene section {
-        margin: 10px;
-    }
-    #customizeScene section.action {
-        text-align: center;
-        position: sticky;
-        bottom: 0;
-        top: 100%;
-    }
-    #customizeScene section.action.action-move { 
-        top: 55%;
-    }
-    #customizeScene button {
-        margin: 2px 10px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    #customizeScene button#customizeSceneFormCancel {
-        background-color: #aca6a600;
-        color: #292929;
-    }
-    #customizeScene section h6,
-    #customizeScene section h5{
-        margin: 1px;
-    }
-    #customizeScene section.text-center{
-        text-align: center;
-    }
-    #customizeScene section a{
-        font-size: 14px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #customizeScene section a:hover{
-        font-weight: 700;
-    }
-    #customizeScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #customizeScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #customizeScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #customizeScene section input#customizeSceneLink{
-        background-color: #a1a3a3;
-    }
-    #customizeScene section button.customizeSceneButton{
-        position: absolute;
-        margin: 0;
-        top: -8vh;
-        font-size: 10px;
-        padding: 2px 4px;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonLeft{
-        left: 0vw;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonRight{
-        right: 0vw;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonUp{
-        left: calc(2vw + 40px);
-        transform: rotate(90deg);
-        margin-top: -20px;
-    }
-    #customizeScene section button.customizeSceneButton#customizeSceneButtonDown{
-        right: calc(2vw + 40px);
-        transform: rotate(90deg);
-        margin-top: 20px;
-    }
-    #customizeScene section.action img{
-        width: 8px;
-        height: 8px;
-    }
-    #customizeScene section.action a#customizeSceneFormBack img{
-        margin-top: -2px;
-    }
-    #customizeScene section.action button#customizeSceneFormSubmit img{
-        transform: rotate(180deg);
-    }
-    @media only screen and (max-width: 600px) {
-        #customizeScene {
-            max-width: 160px;
-            overflow-y: scroll;
-        }
-    }
-    @media only screen and (max-height: 400px) {
-        #customizeScene section.action {
-            top: 92%;
-        }
-        #customizeScene section.action.action-move { 
-            top: 80%;
-        }
-    }
-</style>
-
-<form id="customizeScene" hidden>
-    <section class="text-center">
-        <h5>Custom your WOKA</h3>
-    </section>
-    <section class="action action-move">
-        <button class="customizeSceneButton" id="customizeSceneButtonLeft"> < </button>
-        <button class="customizeSceneButton" id="customizeSceneButtonRight"> > </button>
-        <!--<button class="customizeSceneButton" id="customizeSceneButtonUp"> < </button>
-        <button class="customizeSceneButton" id="customizeSceneButtonDown"> > </button>-->
-    </section>
-    <section class="action">
-        <a type="submit" id="customizeSceneFormBack">Back <img src="resources/objects/arrow_up.png"/></a>
-        <button type="submit" id="customizeSceneFormSubmit">Next <img src="resources/objects/arrow_up.png"/></button>
-    </section>
-</form>
diff --git a/front/dist/resources/html/selectCharacterScene.html b/front/dist/resources/html/selectCharacterScene.html
deleted file mode 100644
index 88c84041..00000000
--- a/front/dist/resources/html/selectCharacterScene.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<style>
-    #selectCharacterScene {
-        background: #0000;
-        /*border: 1px solid #ebeeee;*/
-        border-radius: 6px;
-        margin: 10px auto 0;
-        color: #ebeeee;
-        max-height: 48vh;
-        max-width: 300px;
-        width: 40vw;
-        overflow: hidden;
-    }
-    #selectCharacterScene h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #selectCharacterScene input {
-        font-size: 70%;
-        background: linear-gradient(top, #d6d7d7, #dee0e0);
-        border: 1px solid #a1a3a3;
-        border-radius: 4px;
-        box-shadow: 0 1px #fff;
-        box-sizing: border-box;
-        color: #696969;
-        height: 30px;
-        transition: box-shadow 0.3s;
-        width: 100%;
-        text-align: center;
-    }
-    #selectCharacterScene section {
-        margin: 10px;
-    }
-    #selectCharacterScene section.action {
-        text-align: center;
-        margin: 0;
-        margin-top: 28vh;
-    }
-    #selectCharacterScene button {
-        margin: 10px 0px;
-        background-color: black;;
-        color: #ebeeee;
-        border-radius: 7px;
-        padding-bottom: 4px;
-        width: 100px;
-    }
-    #selectCharacterScene button#selectCharacterSceneFormCancel {
-        background-color: #aca6a600;
-        color: #292929;
-    }
-    #selectCharacterScene section h6,
-    #selectCharacterScene section h5{
-        margin: 1px;
-    }
-    #selectCharacterScene section.text-center{
-        text-align: center;
-    }
-    #selectCharacterScene section a{
-        font-size: 8px;
-        text-decoration: underline;
-        color: #ebeeee;
-    }
-    #selectCharacterScene section a:hover{
-        font-weight: 700;
-    }
-    #selectCharacterScene section p{
-        text-align: left;
-        font-size: 8px;
-        margin: 10px 10px;
-    }
-    #selectCharacterScene section p.err{
-        color: red;
-        text-align: center;
-    }
-    #selectCharacterScene section p.info{
-        display: none;
-        text-align: center;
-    }
-    #selectCharacterScene section input#selectCharacterSceneLink{
-        background-color: #a1a3a3;
-    }
-    #selectCharacterScene section img{
-        width: 160px;
-        margin: 20px 0;
-    }
-    #selectCharacterScene section button.selectCharacterButton{
-        position: absolute;
-        top: 20vh;
-        margin: 0;
-        width: 25px;
-    }
-    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
-        display: none;
-        left: 1vw;
-    }
-    #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
-        display: none;
-        right: 1vw;
-    }
-    #selectCharacterScene section button#selectCharacterSceneFormCustomYourOwnSubmit{
-        font-size: 14px;
-        width: auto;
-        margin-top: -2px;
-        background-color: #ffd700;
-        color: black;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #selectCharacterScene{
-            overflow-y: scroll;
-        }
-        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonRight{
-            display: block;
-        }
-        #selectCharacterScene section button.selectCharacterButton#selectCharacterButtonLeft{
-            display: block;
-        }
-    }
-</style>
-
-<form id="selectCharacterScene" hidden>
-    <section class="text-center">
-        <h5>Select your WOKA</h5>
-        <button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
-        <button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
-    </section>
-    <section class="action">
-        <button type="submit" id="selectCharacterSceneFormSubmit">Continue</button>
-        <button type="submit" id="selectCharacterSceneFormCustomYourOwnSubmit">Custom your WOKA</button>
-    </section>
-</form>
diff --git a/front/dist/resources/objects/arrow_down.png b/front/dist/resources/objects/arrow_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..c89fb5f3fa79da69e2a67e763de0304e82f5c1f9
GIT binary patch
literal 4816
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

literal 0
HcmV?d00001

diff --git a/front/dist/resources/objects/arrow_up.png b/front/dist/resources/objects/arrow_up.png
index b9f81ebc21b9be4af3c5f85ddeb5947ec958c7c1..6e948ae216bdbc1f31a4d1e7db53bc69de9db514 100644
GIT binary patch
literal 4710
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
RcO!tJN&SQU4*Ran{4Y>{_dEaq

delta 121
zcmaE+GL><HauEY(fk$L90|Va?5N4dJ%_q&kz~Jub;uvDl`?SxHk3oTlsr&!`&3dyk
zmP}Z8s^j?0j_sGzMVL+P92z!lIa8N9Y4wfc*$1q&0usKlv0HT7Ui1u*H1=HGxB3mg
Z<T-u|w%2;kJ^_tn@O1TaS?83{1OQrQE*Jm+

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index f8a2589f..e9569175 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -6,15 +6,27 @@
     import MyCamera from "./MyCamera.svelte";
     import SelectCompanionScene from "./SelectCompanion/SelectCompanionScene.svelte";
     import {selectCompanionSceneVisibleStore} from "../Stores/SelectCompanionStore";
+    import {selectCharacterSceneVisibleStore} from "../Stores/SelectCharacterStore";
+    import SelectCharacterScene from "./selectCharacter/SelectCharacterScene.svelte";
+    import {customCharacterSceneVisibleStore} from "../Stores/CustomCharacterStore";
+
     import {Game} from "../Phaser/Game/Game";
+    import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
+
 
     export let game: Game;
 
 </script>
 
 <div>
+    {#if $selectCharacterSceneVisibleStore}
+        <SelectCharacterScene game={ game }></SelectCharacterScene>
+    {/if}
+    {#if $customCharacterSceneVisibleStore}
+        <CustomCharacterScene game={ game }></CustomCharacterScene>
+    {/if}
     {#if $selectCompanionSceneVisibleStore}
-        <SelectCompanionScene game={game}></SelectCompanionScene>
+        <SelectCompanionScene game={ game }></SelectCompanionScene>
     {/if}
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
new file mode 100644
index 00000000..954dab43
--- /dev/null
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -0,0 +1,110 @@
+<script lang="typescript">
+    import { Game } from "../../Phaser/Game/Game";
+    import { CustomizeScene } from "../../Phaser/Login/CustomizeScene";
+
+    export let game: Game;
+
+    const customCharacterScene = game.scene.scenes.find((scene) => scene instanceof CustomizeScene);
+    let activeRow = customCharacterScene.activeRow;
+
+    function selectLeft() {
+        customCharacterScene.moveCursorHorizontally(-1);
+    }
+
+    function selectRight() {
+        customCharacterScene.moveCursorHorizontally(1);
+    }
+
+    function selectUp() {
+        customCharacterScene.moveCursorVertically(-1);
+        activeRow = customCharacterScene.activeRow;
+    }
+
+    function selectDown() {
+        customCharacterScene.moveCursorVertically(1);
+        activeRow = customCharacterScene.activeRow;
+    }
+
+    function previousScene() {
+        customCharacterScene.backToPreviousScene();
+    }
+
+    function finish() {
+        customCharacterScene.nextSceneToCamera();
+    }
+
+</script>
+
+<form class="customCharacterScene">
+    <section class="text-center">
+        <h2>Customize your WOKA</h2>
+    </section>
+    <section class="action action-move">
+        <button class="customCharacterSceneButton customCharacterSceneButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
+        <button class="customCharacterSceneButton customCharacterSceneButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
+    </section>
+    <section class="action">
+        {#if activeRow === 0}
+            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
+        {/if}
+        {#if activeRow !== 0}
+            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up.png" alt=""/></button>
+        {/if}
+        {#if activeRow === 5}
+            <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
+        {/if}
+        {#if activeRow !== 5}
+            <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ selectDown }>Next <img src="resources/objects/arrow_down.png" alt=""/></button>
+        {/if}
+    </section>
+</form>
+
+<style lang="scss">
+  form.customCharacterScene {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    color: #ebeeee;
+  }
+  .customCharacterScene button {
+    font-family: "Press Start 2P";
+  }
+  .customCharacterScene section {
+    margin: 10px;
+  }
+  .customCharacterScene section.action {
+    text-align: center;
+    margin-top: 55vh;
+  }
+  .customCharacterScene section h2 {
+    font-family: "Press Start 2P";
+    margin: 1px;
+  }
+  .customCharacterScene section.text-center{
+    text-align: center;
+  }
+  .customCharacterScene section button.customCharacterSceneButton{
+    position: absolute;
+    top: 33vh;
+    margin: 0;
+  }
+  .customCharacterScene section button.customCharacterSceneFormBack{
+    color: #292929;
+  }
+  .customCharacterScene button.customCharacterSceneButtonLeft{
+    left: 33vw;
+  }
+  .customCharacterScene button.customCharacterSceneButtonRight{
+    right: 33vw;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .customCharacterScene button.customCharacterSceneButtonLeft{
+      left: 10vw;
+    }
+    .customCharacterScene button.customCharacterSceneButtonRight{
+      right: 10vw;
+    }
+  }
+
+
+</style>
\ No newline at end of file
diff --git a/front/src/Components/selectCharacter/SelectCharacterScene.svelte b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
new file mode 100644
index 00000000..81fe2bc8
--- /dev/null
+++ b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
@@ -0,0 +1,84 @@
+<script lang="typescript">
+    import { Game } from "../../Phaser/Game/Game";
+    import { SelectCharacterScene } from "../../Phaser/Login/SelectCharacterScene";
+
+    export let game: Game;
+
+    const selectCharacterScene = game.scene.scenes.find((scene) => scene instanceof SelectCharacterScene);
+
+    function selectLeft() {
+        selectCharacterScene.moveToLeft();
+    }
+
+    function selectRight() {
+        selectCharacterScene.moveToRight();
+    }
+
+    function cameraScene() {
+        selectCharacterScene.nextSceneToCameraScene();
+    }
+
+    function customizeScene() {
+        selectCharacterScene.nextSceneToCustomizeScene();
+    }
+
+</script>
+
+<form class="selectCharacterScene">
+    <section class="text-center">
+        <h2>Select your WOKA</h2>
+        <button class="selectCharacterButton selectCharacterButtonLeft nes-btn" on:click|preventDefault={ selectLeft }> &lt; </button>
+        <button class="selectCharacterButton selectCharacterButtonRight nes-btn" on:click|preventDefault={ selectRight }> &gt; </button>
+    </section>
+    <section class="action">
+        <button type="submit" class="selectCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ cameraScene }>Continue</button>
+        <button type="submit" class="selectCharacterSceneFormCustomYourOwnSubmit nes-btn" on:click|preventDefault={ customizeScene }>Customize your WOKA</button>
+    </section>
+</form>
+
+<style lang="scss">
+  form.selectCharacterScene {
+    font-family: "Press Start 2P";
+    pointer-events: auto;
+    color: #ebeeee;
+  }
+  .selectCharacterScene button {
+    font-family: "Press Start 2P";
+  }
+  .selectCharacterScene section {
+    margin: 10px;
+  }
+  .selectCharacterScene section.action {
+    text-align: center;
+    margin-top: 55vh;
+  }
+  .selectCharacterScene section h2 {
+    font-family: "Press Start 2P";
+    margin: 1px;
+  }
+  .selectCharacterScene section.text-center{
+    text-align: center;
+  }
+  .selectCharacterScene section button.selectCharacterButton{
+    position: absolute;
+    top: 33vh;
+    margin: 0;
+  }
+  .selectCharacterScene button.selectCharacterButtonLeft{
+    left: 33vw;
+  }
+  .selectCharacterScene button.selectCharacterButtonRight{
+    right: 33vw;
+  }
+
+  @media only screen and (max-width: 800px) {
+    .selectCharacterScene button.selectCharacterButtonLeft{
+      left: 10vw;
+    }
+    .selectCharacterScene button.selectCharacterButtonRight{
+      right: 10vw;
+    }
+  }
+
+
+</style>
\ No newline at end of file
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 1892813c..1715983b 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -11,6 +11,8 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import { MenuScene } from "../Menu/MenuScene";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
+import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
+import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -22,7 +24,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
     private selectedLayers: number[] = [0];
     private containersRow: Container[][] = [];
-    private activeRow:number = 0;
+    public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
     private customizeSceneElement!: Phaser.GameObjects.DOMElement;
@@ -51,35 +53,9 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     create() {
-        this.customizeSceneElement = this.add.dom(-1000, 0).createFromCache(customizeSceneKey);
-        this.centerXDomElement(this.customizeSceneElement, 350);
-        MenuScene.revealMenusAfterInit(this.customizeSceneElement, customizeSceneKey);
+        customCharacterSceneVisibleStore.set(true);
 
-        this.customizeSceneElement.addListener('click');
-        this.customizeSceneElement.on('click',  (event:MouseEvent) => {
-            event.preventDefault();
-            if((event?.target as HTMLInputElement).id === 'customizeSceneButtonLeft') {
-                this.moveCursorHorizontally(-1);
-            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonRight') {
-                this.moveCursorHorizontally(1);
-            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonDown') {
-                this.moveCursorVertically(1);
-            }else if((event?.target as HTMLInputElement).id === 'customizeSceneButtonUp') {
-                this.moveCursorVertically(-1);
-            }else if((event?.target as HTMLInputElement).id === 'customizeSceneFormBack') {
-                if(this.activeRow > 0){
-                    this.moveCursorVertically(-1);
-                }else{
-                    this.backToPreviousScene();
-                }
-            }else if((event?.target as HTMLButtonElement).id === 'customizeSceneFormSubmit') {
-                if(this.activeRow < 5){
-                    this.moveCursorVertically(1);
-                }else{
-                    this.nextSceneToCamera();
-                }
-            }
-        });
+        this.events.addListener('wake', () => { customCharacterSceneVisibleStore.set(true); });
 
         this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
         this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
@@ -116,7 +92,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.onResize();
     }
 
-    private moveCursorHorizontally(index: number): void {
+    public moveCursorHorizontally(index: number): void {
         this.selectedLayers[this.activeRow] += index;
         if (this.selectedLayers[this.activeRow] < 0) {
             this.selectedLayers[this.activeRow] = 0
@@ -128,27 +104,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.saveInLocalStorage();
     }
 
-    private moveCursorVertically(index:number): void {
-
-        if(index === -1 && this.activeRow === 5){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
-            button.innerHTML = `Next <img src="resources/objects/arrow_up.png"/>`;
-        }
-
-        if(index === 1 && this.activeRow === 4){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormSubmit') as HTMLButtonElement;
-            button.innerText = 'Finish';
-        }
-
-        if(index === -1 && this.activeRow === 1){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
-            button.innerText = `Return`;
-        }
-
-        if(index === 1 && this.activeRow === 0){
-            const button = this.customizeSceneElement.getChildByID('customizeSceneFormBack') as HTMLButtonElement;
-            button.innerHTML = `Back <img src="resources/objects/arrow_up.png"/>`;
-        }
+    public moveCursorVertically(index:number): void {
 
         this.activeRow += index;
         if (this.activeRow < 0) {
@@ -269,8 +225,6 @@ export class CustomizeScene extends AbstractCharacterScene {
 
         this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
-
-        this.centerXDomElement(this.customizeSceneElement, 350);
      }
 
     private nextSceneToCamera(){
@@ -290,10 +244,13 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.scene.sleep(CustomizeSceneName);
             this.scene.remove(SelectCharacterSceneName);
             gameManager.tryResumingGame(this, EnableCameraSceneName);
+            customCharacterSceneVisibleStore.set(false);
     }
 
     private backToPreviousScene(){
         this.scene.sleep(CustomizeSceneName);
         this.scene.run(SelectCharacterSceneName);
+        customCharacterSceneVisibleStore.set(false);
+        selectCharacterSceneVisibleStore.set(true);
     }
 }
diff --git a/front/src/Phaser/Login/SelectCharacterMobileScene.ts b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
index b9c4b5a8..635e0b75 100644
--- a/front/src/Phaser/Login/SelectCharacterMobileScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
@@ -7,46 +7,46 @@ export class SelectCharacterMobileScene extends SelectCharacterScene {
         this.selectedRectangle.destroy();
     }
 
-    protected defineSetupPlayer(numero: number){
+    protected defineSetupPlayer(num: number){
         const deltaX = 30;
         const deltaY = 2;
         let [playerX, playerY] = this.getCharacterPosition();
         let playerVisible = true;
         let playerScale = 1.5;
-        let playserOpactity = 1;
+        let playerOpacity = 1;
 
-        if( this.currentSelectUser !== numero ){
+        if( this.currentSelectUser !== num ){
             playerVisible = false;
         }
-        if( numero === (this.currentSelectUser + 1) ){
+        if( num === (this.currentSelectUser + 1) ){
             playerY -= deltaY;
             playerX += deltaX;
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( numero === (this.currentSelectUser + 2) ){
+        if( num === (this.currentSelectUser + 2) ){
             playerY -= deltaY;
             playerX += (deltaX * 2);
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( numero === (this.currentSelectUser - 1) ){
+        if( num === (this.currentSelectUser - 1) ){
             playerY -= deltaY;
             playerX -= deltaX;
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        if( numero === (this.currentSelectUser - 2) ){
+        if( num === (this.currentSelectUser - 2) ){
             playerY -= deltaY;
             playerX -= (deltaX * 2);
             playerScale = 0.8;
-            playserOpactity = 0.6;
+            playerOpacity = 0.6;
             playerVisible = true;
         }
-        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+        return {playerX, playerY, playerScale, playerOpacity, playerVisible}
     }
 
         /**
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 998a62e6..5133aab6 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -11,6 +11,8 @@ import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import {MenuScene} from "../Menu/MenuScene";
+import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
+import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -49,24 +51,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     create() {
-
-        this.selectCharacterSceneElement = this.add.dom(-1000, 0).createFromCache(selectCharacterKey);
-        this.centerXDomElement(this.selectCharacterSceneElement, 300);
-        MenuScene.revealMenusAfterInit(this.selectCharacterSceneElement, selectCharacterKey);
-
-        this.selectCharacterSceneElement.addListener('click');
-        this.selectCharacterSceneElement.on('click',  (event:MouseEvent) => {
-            event.preventDefault();
-            if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
-                this.moveToLeft();
-            }else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
-                this.moveToRight();
-            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormSubmit') {
-                this.nextSceneToCameraScene();
-            }else if((event?.target as HTMLInputElement).id === 'selectCharacterSceneFormCustomYourOwnSubmit') {
-                this.nextSceneToCustomizeScene();
-            }
-        });
+        selectCharacterSceneVisibleStore.set(true);
 
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
@@ -109,6 +94,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.scene.remove(SelectCharacterSceneName);
+        selectCharacterSceneVisibleStore.set(false);
     }
 
     protected nextSceneToCustomizeScene(): void {
@@ -117,6 +103,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         }
         this.scene.sleep(SelectCharacterSceneName);
         this.scene.run(CustomizeSceneName);
+        selectCharacterSceneVisibleStore.set(false);
     }
 
     createCurrentPlayer(): void {
@@ -186,35 +173,35 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.moveUser();
     }
 
-    protected defineSetupPlayer(numero: number){
+    protected defineSetupPlayer(num: number){
         const deltaX = 32;
         const deltaY = 32;
         let [playerX, playerY] = this.getCharacterPosition(); // player X and player y are middle of the
 
-        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (numero % this.nbCharactersPerRow)) ); // calcul position on line users
-        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(numero / this.nbCharactersPerRow) )) ); // calcul position on column users
+        playerX = ( (playerX - (deltaX * 2.5)) + ((deltaX) * (num % this.nbCharactersPerRow)) ); // calcul position on line users
+        playerY = ( (playerY - (deltaY * 2)) + ((deltaY) * ( Math.floor(num / this.nbCharactersPerRow) )) ); // calcul position on column users
 
         const playerVisible = true;
         const playerScale = 1;
-        const playserOpactity = 1;
+        const playerOpacity = 1;
 
         // if selected
-        if( numero === this.currentSelectUser ){
+        if( num === this.currentSelectUser ){
             this.selectedRectangle.setX(playerX);
             this.selectedRectangle.setY(playerY);
         }
 
-        return {playerX, playerY, playerScale, playserOpactity, playerVisible}
+        return {playerX, playerY, playerScale, playerOpacity, playerVisible}
     }
 
-    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, numero: number){
+    protected setUpPlayer(player: Phaser.Physics.Arcade.Sprite, num: number){
 
-        const {playerX, playerY, playerScale, playserOpactity, playerVisible} = this.defineSetupPlayer(numero);
+        const {playerX, playerY, playerScale, playerOpacity, playerVisible} = this.defineSetupPlayer(num);
         player.setBounce(0.2);
         player.setCollideWorldBounds(false);
         player.setVisible( playerVisible );
         player.setScale(playerScale, playerScale);
-        player.setAlpha(playserOpactity);
+        player.setAlpha(playerOpacity);
         player.setX(playerX);
         player.setY(playerY);
     }
@@ -243,7 +230,5 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     public onResize(): void {
         //move position of user
         this.moveUser();
-
-        this.centerXDomElement(this.selectCharacterSceneElement, 300);
     }
 }
diff --git a/front/src/Stores/CustomCharacterStore.ts b/front/src/Stores/CustomCharacterStore.ts
new file mode 100644
index 00000000..4bef7768
--- /dev/null
+++ b/front/src/Stores/CustomCharacterStore.ts
@@ -0,0 +1,3 @@
+import { derived, writable, Writable } from "svelte/store";
+
+export const customCharacterSceneVisibleStore = writable(false);
\ No newline at end of file
diff --git a/front/src/Stores/SelectCharacterStore.ts b/front/src/Stores/SelectCharacterStore.ts
new file mode 100644
index 00000000..094eaef3
--- /dev/null
+++ b/front/src/Stores/SelectCharacterStore.ts
@@ -0,0 +1,3 @@
+import { derived, writable, Writable } from "svelte/store";
+
+export const selectCharacterSceneVisibleStore = writable(false);
\ No newline at end of file

From 11fb0aa1d85720b9d3042786895aca60ea9777a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 31 May 2021 17:53:27 +0200
Subject: [PATCH 024/141] Fixing typo

---
 front/src/WebRtc/MediaManager.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 5ab603d2..29973e46 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -63,7 +63,7 @@ export class MediaManager {
         localStreamStore.subscribe((result) => {
             if (result.type === 'error') {
                 console.error(result.error);
-                layoutManager.addInformation('warning', 'Camera access denied. Click here and check navigators permissions.', () => {
+                layoutManager.addInformation('warning', 'Camera access denied. Click here and check your browser permissions.', () => {
                     this.showHelpCameraSettingsCallBack();
                 }, this.userInputManager);
                 return;
@@ -73,7 +73,7 @@ export class MediaManager {
         screenSharingLocalStreamStore.subscribe((result) => {
             if (result.type === 'error') {
                 console.error(result.error);
-                layoutManager.addInformation('warning', 'Screen sharing denied. Click here and check navigators permissions.', () => {
+                layoutManager.addInformation('warning', 'Screen sharing denied. Click here and check your browser permissions.', () => {
                     this.showHelpCameraSettingsCallBack();
                 }, this.userInputManager);
                 return;

From ce645a83abb5112765627e1d374f8e80fde8efc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 31 May 2021 18:02:31 +0200
Subject: [PATCH 025/141] Fixing display of terms and conditions

---
 front/src/Components/Login/LoginScene.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte
index ea824908..594d086b 100644
--- a/front/src/Components/Login/LoginScene.svelte
+++ b/front/src/Components/Login/LoginScene.svelte
@@ -37,7 +37,7 @@
     {/if}
     </section>
 
-    {#if !DISPLAY_TERMS_OF_USE}
+    {#if DISPLAY_TERMS_OF_USE}
     <section class="terms-and-conditions">
         <p>By continuing, you are agreeing our <a href="https://workadventu.re/terms-of-use" target="_blank">terms of use</a>, <a href="https://workadventu.re/privacy-policy" target="_blank">privacy policy</a> and <a href="https://workadventu.re/cookie-policy" target="_blank">cookie policy</a>.</p>
     </section>

From 1ed881e0bf5d98391e625d7bfa3467e493526e5c Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 31 May 2021 18:05:34 +0200
Subject: [PATCH 026/141] arrow up black and white colors

---
 front/dist/resources/objects/arrow_up.png     | Bin 4710 -> 5026 bytes
 .../dist/resources/objects/arrow_up_black.png | Bin 0 -> 4937 bytes
 .../CustomCharacterScene.svelte               |   2 +-
 front/src/Enum/EnvironmentVariable.ts         |   2 +-
 4 files changed, 2 insertions(+), 2 deletions(-)
 create mode 100644 front/dist/resources/objects/arrow_up_black.png

diff --git a/front/dist/resources/objects/arrow_up.png b/front/dist/resources/objects/arrow_up.png
index 6e948ae216bdbc1f31a4d1e7db53bc69de9db514..28c15bc2047b15cb6512d1a61dc2fc34f5716975 100644
GIT binary patch
delta 1460
zcmV;l1xxzoB%&vfBLV|OktH90S&|ze42Iu1MUH?Z1mZX>O;v7?<L9ThjF*|%vGb6s
zG}S<Zkc2*g?Uo<khx>+yJw+EZS<EqdJRyh71s(I-Q`VY%SnK`6ADxSFcTPa97qqf{
zTHNK2aq<_MsGz4G6j|FR>g7ZZyMDV;v>TG?5u?+0MR`{wyiL%qplsWJ@-bWbxP`iG
zZ9jHm+v{dkk5S!)uf9V<^t!^1FfT&lQL}{20hup3Dd;F_5rhLmwvGhUnBF}>K<>rK
zfAGp(Q#pI|$@mo%iQBltz-2Jw+1?!|y&rtHhWLYJX{Y6j@!U@n7eSuy7~R|$%eK1`
zB0?JXO&wcVdl0M$xva~7B1*!m=%=-06m!Vl2ISp0Ur`!mVqh5*s8gXq%i1<-a53=0
z2`zI2i8*GHICB&4z$wf^gOg<GpvKaGS1`(_FSOdttGPx7!<`_>1Z9L3>}K_j@~NUR
zX37(JJ7WdEcpeJ4G0DvuQUF5Z$Rk|?e3a{FaupENHOz($7GF1i6;)}^t(ix%f))rW
z+U=}S>bnAj2(}f@kbr=XBubHdVopSeqk&I>BEzBK3IwFe9bR$}iGX7~ZDUQMRhE^v
zVcb~&p%NtlO_l;y0T&zcCj~<e6%`Gt8a1hD))FO#s4>PA=jB(Dq>wbll#->KiirhN
zi<ZosWh<Gp;BwS|9CON+b1nr&3p5w3E)XcCa+MmY)>u=unrmrDpB9?7*itjsax0y?
zblej?_SCKCUKU!AN=sODiA!2+$x9hXwIL%69dV>#Bad=YBe!9_DUVa5gBq`-reHd$
zVQET-3Yyo6PG%s+fj~S>0!V0{%)C(u>?XR&%xA`_P==R(I^lGh#6U1C#5(9?_lw*G
zHy6T7-1s2pCc1Z!a}(Vs<Zij$q1NZGP4nVbLh~5TpnAdagTP{it;`>_hg<jTg8z#C
zmZDK_01mq^?cU?hrJ_6b`9XgQF8^2k+0DDB*4XDF?$7MsPPw~wzKGT<)E-jnUR(bA
z7(Kl?_xh$do=V8Cz(1OhkEtK-6)&E@MjkkY?$7MMEg^5sy7$~h{}ugXiU$6XWF+KI
zP^Q8))&+_(000gBvmyhE0wgvxVqq~gIXNvdV`4ZhG+|^mEn;IcWG!MiVlp)|IWuBr
zHaU~f1*!@+Fg7wcG&nanIJ1NXTmh5)23#a&HDNO`GC4ObV`gS!Ei^J=Gc7ndGBYh@
zH#1`~H)c3BH8C-heFshlI65#iIx;e|(g$t`1m^tvQIkXvA%9CnDhhTG5zJ7<!GfrW
zqgJ5^6+*4hs)Na;U(lo>X>oBBTni3<ELI&{oON|@6$HT#5H~j`MHeaYe@UT5j0ea4
zcz5q{_YM&1C8k*&<AA1D%w#+!rZcNz@D%|Jp%;FP%FHt6Bq;&U@pTU$U+<zk%lq7)
zqg%~d4DgA>vwzGmE5sYb)0-88^FDEy6=aq8oOsNn3lcwaU2*x1bKYTrXNJvGa-KL$
zEaux-X=7F}HR37ah^pz7FQi>oId5^+N>$dpCx2lmtFJ6`o#r6oSi}+}h)_^P5hYX*
zrBx@zLX!4l9{vHxFOf?jR}qXH3n)W_?D)a|;CHuHZhvyZO$x<;z>95v3<JSkpi#5!
z?_=9;oB;l3;7V`#%XMJplk{3kiyQ$x+rY(jOH=lM%N?Nq$&gLik^D4;Tn>0Yqi@Op
zeYZf@n%i4*AEysMin>bN00)P_NS?CSJ>K2f-rK)tn*IF%S}}5+$3B6300006VoOIv
z0000000jW~L%V;I=Mf=e5Cj&+Svw5?002ZuL_t(I%jJ!+4FDhv!)pHj85S6j(x_b_
zW3f%d+nali!O0g0lmpqXDuR=bpl&kY!0e5R>=>$Y7NH}n$mq&l_J=Lb4>$(xM4HC{
O0000<MNUMnLSTY+aGrGl

delta 1317
zcmV+=1={+eC*~xOBLV{PktH90TaFwd3`PH0MV5eVjLmW=9#VFY<>ykbO!v%46J>rP
zb)f>v7#n;H-C_LtIl~V;R4j$0=DFk?@uZRpS9ClcPu**ZX|K<Zcy%7+;T~X!1g#vO
zo=^QtPVvDKRrK_YA#dlv_Bc?|Y2Tj=osML!h|%e%p>i4$J_hJCP>*eY#a!IpZebfo
z+pnGY@rG4xmsC&Xr|)ElURU@L<{=~zHA^}cAnT<d6&*z_f^a}7qfaOm!`GG&kdNXN
z->fP;Q@MNeiTnwQ<U<}HcnoH~+YjZW9|u3|A%5do+U@y4ZgRVL2=aR8>>lPE$L?y%
z2x&eyb!}zuL2*OKWuKORQ4Fu5Z+j^y9+15a$a`#YLupiqfn`#nPL(E&y=~O6#KeOQ
zEpr2?C37(@+$09@NvqIglOkOlv>NaVq<pW1cE4qJ*T~_x6EvA%j4*@4s=lLqYG}@t
z@<h?^SYchf4h5F6$gLV$07CQ1Bi#dhmFH)16%f=t%#ID#xE&^cHl;JSRvyU?TA-+C
zkF!SBPXh=Md@B}%d`}cJiBhI$%tnMbI`~u=avU1ofPhrFW0jmlGT=Bb-<V^x>$378
z#+?Naio;|;Q>22`y4a9EmK-@$RWzw;R#VraHA_xebIz96<yTECnOZh8w_?@BldESp
z_u$2A;Uc&kwd7)d#Y-u*!fA!&irEzkwQju0mNwn;W}9zis}1SXQqz{3H4m+{+PO=|
zJ<)Tw?!ELnXdsnF8anc@;iHT?k!n+BnmY5e>9fpwQ=@QTeOJCtjV@}ulUj;)Q^QoV
z%LJ|KL>Ds<<3u2CivSXu7qjS;5{HFuF^dKFm?&eFy5MwUTEsvw4Pu>iv-?Btfm=xF
zpSbZwE-ZB4K`tzGpOAac?E`9k{o1rBVJEbX;R<RL96u-wuk3aGsC~H&e>>r2=w;|-
z=w;|-=w;|-=>IV^@#mr7Px@~v%A;^mX8i{M01X<mb_0q6BxN#WGcaReWG!T6V__{c
zG%+(RI5;#kEi*GYGB!6iV>e+lHIpO;stPbNI5jmfH8(Xdv)Be)0kangU<d>Vdl9>n
zdl4ajiyu@SEGQzFp*mR*6>-!m6rn<>6<T#Lx%3N~G$bi5j)H5!!H>nNgNw7S4z7YA
z_yOYP=A`H%CH^ldw21ZKxF7HCJ?`ECLbb>=t8E<6blXhCqGBq&Dz?8OfMN8Y6a6x?
zj5$e)qviOzhmWs!5uVlh+@GUc%~%ZZiNv#i%rI@@4dUrd+u*!U9AbG{B|aw}GwFiF
zk6c$ge&d{TS>Tx=Gntqt4iSsFCRUo5<xP!via4xlI^_!~k5$fFoV8+^)$hq)7|iG^
z%Uq{9gcugF1PLM(lu<wtHX^j@q*zGMezb*u(Dh5?Qpi;RBgX<t&>*{h@IUz7t(BdB
zobZx@Q6TW*I3FWG`z}zcIL`O6<J3+7|1)r<H~gh4F!M=zrJ;q7fZlE3;<}+Jd%)!m
zFz{r^rtC_7nnE@Uyr0oGrGdU%pli+Rt-g=b2OvpZ#czOvLtr#V+3PLd-O=3Jzh~<G
z{Qx=Ka**D)3@-ox00v@9M??Vs0RI35|De66lan43Azls(8OO%7DF6TfKS@MER5;7s
zj4=`bAPB>V|Nk>CZh}xpddEVOnvIX2OG6=-EKND(DP$hMaKP1$rkpYeayWu0UnA>7
bR@w2{FL(|K96Tg}00000NkvXXu0mjfoM&hx

diff --git a/front/dist/resources/objects/arrow_up_black.png b/front/dist/resources/objects/arrow_up_black.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0a732cc3d292f88c05ededb91e666c892219848
GIT binary patch
literal 4937
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
P00jjL!~BoTU7G$M#tJ(Q

literal 0
HcmV?d00001

diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
index 954dab43..25f8ac93 100644
--- a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -48,7 +48,7 @@
             <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ previousScene }>Return</button>
         {/if}
         {#if activeRow !== 0}
-            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up.png" alt=""/></button>
+            <button type="submit" class="customCharacterSceneFormBack nes-btn" on:click|preventDefault={ selectUp }>Back <img src="resources/objects/arrow_up_black.png" alt=""/></button>
         {/if}
         {#if activeRow === 5}
             <button type="submit" class="customCharacterSceneFormSubmit nes-btn is-primary" on:click|preventDefault={ finish }>Finish</button>
diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts
index 73f6427c..91e75187 100644
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@@ -16,7 +16,7 @@ export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '
 export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || '4');
 export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == 'true';
 
-export const isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
+export const isMobile = ():boolean => false;//( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
 
 export {
     DEBUG_MODE,

From 9d6b597552c7b0a9df7c76da1c8b61e918458475 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 09:08:02 +0200
Subject: [PATCH 027/141] Starting working towards migrating the help camera
 popup

---
 front/src/Components/App.svelte               |   5 +
 .../HelpCameraSettingsPopup.svelte            | 130 ++++++++++++++++++
 .../help-setting-camera-permission-chrome.png | Bin
 ...help-setting-camera-permission-firefox.png | Bin
 front/src/Phaser/Game/GameManager.ts          |  10 +-
 front/src/Stores/HelpCameraSettingsStore.ts   |   3 +
 front/src/WebRtc/MediaManager.ts              |  16 +--
 7 files changed, 150 insertions(+), 14 deletions(-)
 create mode 100644 front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
 rename front/{dist/resources/objects => src/Components/HelpCameraSettings/images}/help-setting-camera-permission-chrome.png (100%)
 rename front/{dist/resources/objects => src/Components/HelpCameraSettings/images}/help-setting-camera-permission-firefox.png (100%)
 create mode 100644 front/src/Stores/HelpCameraSettingsStore.ts

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index fc0ffff5..343cb4fa 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -15,6 +15,8 @@
     import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
 
     import {Game} from "../Phaser/Game/Game";
+    import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
+    import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
 
     export let game: Game;
 </script>
@@ -32,6 +34,9 @@
     {#if $selectCompanionSceneVisibleStore}
         <SelectCompanionScene game={ game }></SelectCompanionScene>
     {/if}
+    {#if $helpCameraSettingsVisibleStore}
+        <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+    {/if}
     {#if $enableCameraSceneVisibilityStore}
         <EnableCameraScene game={game}></EnableCameraScene>
     {/if}
diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
new file mode 100644
index 00000000..44ebde3d
--- /dev/null
+++ b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
@@ -0,0 +1,130 @@
+<script lang="typescript">
+    import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore";
+    import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
+    import chromeImg from "./images/help-setting-camera-permission-chrome.png";
+
+    let isFirefox = window.navigator.userAgent.includes('Firefox');
+    let isChrome = window.navigator.userAgent.includes('Chrome');
+
+    function refresh() {
+        window.location.reload();
+    }
+
+    function close() {
+        helpCameraSettingsVisibleStore.set(false);
+    }
+
+</script>
+
+<form class="helpCameraSettings nes-container with-title">
+    <p class="title">Camera/Microphone access needed</p>
+    <section class="text-center">
+        <h5>Camera/Microphone access needed</h5>
+        <p class="err" id="permissionError">Permission denied</p>
+        <p class="info">You must allow camera and microphone access in your browser.</p>
+        <ul>
+            <li>Please click on the lock or camera symbol on the side of the URL in the address bar. Here you can grant "always allow" access to your input devices.</li>
+            <li>Please ensure that you have a camera AND microphone plugged into your computer.</li>
+        </ul>
+        <p class="info">Once you've followed these steps, please refresh this page.</p>
+        <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
+        <p>
+            {#if isFirefox }
+            <img src={firefoxImg} alt="" />
+            {:else if isChrome }
+            <img src={chromeImg} alt="" />
+            {/if}
+        </p>
+    </section>
+    <!--<section class="text-center">
+        <p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
+    </section>-->
+    <section class="action">
+        <a href="#" id="helpCameraSettingsFormRefresh" on:click={refresh}>Refresh</a>
+        <button type="submit" id="helpCameraSettingsFormContinue" on:click={close}>Continue</button>
+    </section>
+</form>
+
+
+<style>
+    .helpCameraSettings {
+        /*background: #eceeee;
+        border: 1px solid #42464b;
+        border-radius: 6px;
+        margin: 25px auto 0;
+        width: 400px;
+        max-height: calc(48vh - 50px);
+        max-width: 48vw;
+        overflow: hidden;
+        overflow-y: scroll;*/
+    }
+    .helpCameraSettings h1 {
+        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
+        border-bottom: 1px solid #a6abaf;
+        border-radius: 6px 6px 0 0;
+        box-sizing: border-box;
+        color: #727678;
+        display: block;
+        height: 43px;
+        padding-top: 10px;
+        margin: 0;
+        text-align: center;
+        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    .helpCameraSettings section {
+        margin: 10px;
+    }
+    .helpCameraSettings section.action{
+        text-align: center;
+        margin: 0;
+    }
+    .helpCameraSettings button {
+        margin: 10px 4px;
+        background-color: black;
+        color: white;
+        border-radius: 7px;
+        padding-bottom: 4px;
+    }
+    .helpCameraSettings button.helpCameraSettingsFormCancel {
+        background-color: #c7c7c700;
+        color: #292929;
+    }
+    .helpCameraSettings section a{
+        font-size: 12px;
+        text-decoration: underline;
+        color: black;
+    }
+    .helpCameraSettings section h5{
+        margin: 1px;
+    }
+    .helpCameraSettings section.text-center{
+        text-align: center;
+    }
+    .helpCameraSettings section p{
+        font-size: 8px;
+        margin: 0px 20px;
+    }
+    .helpCameraSettings section p a{
+        font-size: 8px;
+    }
+    .helpCameraSettings section p.err{
+        color: #ff0000;
+    }
+    .helpCameraSettings section ul{
+        margin: 6px;
+    }
+    .helpCameraSettings section li{
+        text-align: left;
+        font-size: 8px;
+    }
+    .helpCameraSettings section img {
+        width: 200px;
+        margin-top: 10px;
+    }
+    @media only screen and (max-width: 800px),
+    only screen and (max-height: 600px) {
+        .helpCameraSettings{
+            overflow-y: scroll;
+        }
+    }
+</style>
diff --git a/front/dist/resources/objects/help-setting-camera-permission-chrome.png b/front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-chrome.png
similarity index 100%
rename from front/dist/resources/objects/help-setting-camera-permission-chrome.png
rename to front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-chrome.png
diff --git a/front/dist/resources/objects/help-setting-camera-permission-firefox.png b/front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-firefox.png
similarity index 100%
rename from front/dist/resources/objects/help-setting-camera-permission-firefox.png
rename to front/src/Components/HelpCameraSettings/images/help-setting-camera-permission-firefox.png
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index 2a1d3d8a..e1b969fc 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/front/src/Phaser/Game/GameManager.ts
@@ -7,6 +7,9 @@ import {LoginSceneName} from "../Login/LoginScene";
 import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {EnableCameraSceneName} from "../Login/EnableCameraScene";
 import {localUserStore} from "../../Connexion/LocalUserStore";
+import {get} from "svelte/store";
+import {requestedCameraState, requestedMicrophoneState} from "../../Stores/MediaStore";
+import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore";
 
 export interface HasMovedEvent {
     direction: string;
@@ -89,7 +92,12 @@ export class GameManager {
         console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
         scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
         scenePlugin.launch(MenuSceneName);
-        scenePlugin.launch(HelpCameraSettingsSceneName);//700
+        //scenePlugin.launch(HelpCameraSettingsSceneName);//700
+
+        if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){
+            helpCameraSettingsVisibleStore.set(true);
+            localUserStore.setHelpCameraSettingsShown();
+        }
     }
 
     public gameSceneIsCreated(scene: GameScene) {
diff --git a/front/src/Stores/HelpCameraSettingsStore.ts b/front/src/Stores/HelpCameraSettingsStore.ts
new file mode 100644
index 00000000..88373dab
--- /dev/null
+++ b/front/src/Stores/HelpCameraSettingsStore.ts
@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const helpCameraSettingsVisibleStore = writable(false);
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 29973e46..180b5746 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -12,6 +12,7 @@ import {
 import {
     screenSharingLocalStreamStore
 } from "../Stores/ScreenSharingStore";
+import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
 
 export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
 export type StartScreenSharingCallback = (media: MediaStream) => void;
@@ -29,7 +30,6 @@ export class MediaManager {
     startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
     stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
-    helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
 
     private focused : boolean = true;
 
@@ -64,7 +64,7 @@ export class MediaManager {
             if (result.type === 'error') {
                 console.error(result.error);
                 layoutManager.addInformation('warning', 'Camera access denied. Click here and check your browser permissions.', () => {
-                    this.showHelpCameraSettingsCallBack();
+                    helpCameraSettingsVisibleStore.set(true);
                 }, this.userInputManager);
                 return;
             }
@@ -74,7 +74,7 @@ export class MediaManager {
             if (result.type === 'error') {
                 console.error(result.error);
                 layoutManager.addInformation('warning', 'Screen sharing denied. Click here and check your browser permissions.', () => {
-                    this.showHelpCameraSettingsCallBack();
+                    helpCameraSettingsVisibleStore.set(true);
                 }, this.userInputManager);
                 return;
             }
@@ -395,16 +395,6 @@ export class MediaManager {
         this.showReportModalCallBacks.add(callback);
     }
 
-    public setHelpCameraSettingsCallBack(callback: HelpCameraSettingsCallBack){
-        this.helpCameraSettingsCallBacks.add(callback);
-    }
-
-    private showHelpCameraSettingsCallBack(){
-        for(const callBack of this.helpCameraSettingsCallBacks){
-            callBack();
-        }
-    }
-
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     /*updateSoudMeter(){
         try{

From 9063ba2a1fa7b23b415e04f3a2163a1d6745123d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 09:12:31 +0200
Subject: [PATCH 028/141] Removing call to removed method

---
 front/src/Phaser/Menu/HelpCameraSettingsScene.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
index fcc7996a..7d684df2 100644
--- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
+++ b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
@@ -47,10 +47,6 @@ export class HelpCameraSettingsScene extends DirtyScene {
             this.openHelpCameraSettingsOpened();
             localUserStore.setHelpCameraSettingsShown();
         }
-
-        mediaManager.setHelpCameraSettingsCallBack(() => {
-            this.openHelpCameraSettingsOpened();
-        });
     }
 
     private openHelpCameraSettingsOpened(): void{

From 5839e0b270ae0589b27ba553daae316d1a6fe4f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 09:17:01 +0200
Subject: [PATCH 029/141] Throwing exceptions into store subscribers is
 wreaking havok

---
 front/src/Phaser/Login/EnableCameraScene.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 73fa7303..3eabe4d7 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -111,8 +111,10 @@ export class EnableCameraScene extends ResizableScene {
 
         this.localStreamStoreUnsubscriber = localStreamStore.subscribe((result) => {
             if (result.type === 'error') {
-                // TODO: proper handling of the error
-                throw result.error;
+                // TODO: we could handle the error in a specific way on the EnableCameraScene page.
+                // TODO: we could handle the error in a specific way on the EnableCameraScene page.
+                return;
+                //throw result.error;
             }
 
             this.getDevices();

From 9a5300dd2dd6853c8c662f4bd629754b18b3c3db Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 1 Jun 2021 11:07:52 +0200
Subject: [PATCH 030/141] helpCameraSettingPopup in svelte with nes-css

---
 .../resources/html/helpCameraSettings.html    | 106 -------------
 .../HelpCameraSettingsPopup.svelte            | 116 ++++----------
 front/src/Phaser/Game/GameManager.ts          |   2 -
 .../Phaser/Menu/HelpCameraSettingsScene.ts    | 150 ------------------
 front/src/index.ts                            |   3 +-
 5 files changed, 29 insertions(+), 348 deletions(-)
 delete mode 100644 front/dist/resources/html/helpCameraSettings.html
 delete mode 100644 front/src/Phaser/Menu/HelpCameraSettingsScene.ts

diff --git a/front/dist/resources/html/helpCameraSettings.html b/front/dist/resources/html/helpCameraSettings.html
deleted file mode 100644
index 8c4e63c4..00000000
--- a/front/dist/resources/html/helpCameraSettings.html
+++ /dev/null
@@ -1,106 +0,0 @@
-<style>
-    #helpCameraSettings {
-        background: #eceeee;
-        border: 1px solid #42464b;
-        border-radius: 6px;
-        margin: 25px auto 0;
-        width: 400px;
-        max-height: calc(48vh - 50px);
-        max-width: 48vw;
-        overflow: hidden;
-        overflow-y: scroll;
-    }
-    #helpCameraSettings h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
-        text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
-    }
-    #helpCameraSettings section {
-        margin: 10px;
-    }
-    #helpCameraSettings section.action{
-        text-align: center;
-        margin: 0;
-    }
-    #helpCameraSettings button {
-        margin: 10px 4px;
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    #helpCameraSettings button#helpCameraSettingsFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-    #helpCameraSettings section a{
-        font-size: 12px;
-        text-decoration: underline;
-        color: black;
-    }
-    #helpCameraSettings section h6,
-    #helpCameraSettings section h5{
-        margin: 1px;
-    }
-    #helpCameraSettings section.text-center{
-        text-align: center;
-    }
-    #helpCameraSettings section p{
-        font-size: 8px;
-        margin: 0px 20px;
-    }
-    #helpCameraSettings section p a{
-        font-size: 8px;
-    }
-    #helpCameraSettings section p.err{
-        color: #ff0000;
-    }
-    #helpCameraSettings section ul{
-        margin: 6px;
-    }
-    #helpCameraSettings section li{
-        text-align: left;
-        font-size: 8px;
-    }
-    #helpCameraSettings section img {
-        width: 200px;
-        margin-top: 10px;
-    }
-    @media only screen and (max-width: 800px),
-            only screen and (max-height: 600px) {
-        #helpCameraSettings{
-            overflow-y: scroll;
-        }
-    }
-</style>
-
-<form id="helpCameraSettings" hidden>
-    <section class="text-center">
-        <h5>Camera/Microphone access needed</h5>
-        <p class="err" id="permissionError">Permission denied</p>
-        <p class="info">You must allow camera and microphone access in your browser.</p>
-            <ul>
-                <li>Please click on the lock or camera symbol on the side of the URL in the address bar. Here you can grant "always allow" access to your input devices.</li>
-                <li>Please ensure that you have a camera AND microphone plugged into your computer.</li>
-            </ul>
-        <p class="info">Once you've followed these steps, please refresh this page.</p>
-        <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
-        <p id='browserHelpSetting'></p>
-    </section>
-    <!--<section class="text-center">
-        <p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
-    </section>-->
-    </section>
-    <section class="action">
-        <a href="#" id="helpCameraSettingsFormRefresh">Refresh</a>
-        <button type="submit" id="helpCameraSettingsFormContinue">Continue</button>
-    </section>
-</form>
diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
index 44ebde3d..fc6656a0 100644
--- a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
+++ b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
@@ -3,6 +3,7 @@
     import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
     import chromeImg from "./images/help-setting-camera-permission-chrome.png";
 
+    let isAndroid = window.navigator.userAgent.includes('Android');
     let isFirefox = window.navigator.userAgent.includes('Firefox');
     let isChrome = window.navigator.userAgent.includes('Chrome');
 
@@ -16,115 +17,54 @@
 
 </script>
 
-<form class="helpCameraSettings nes-container with-title">
-    <p class="title">Camera/Microphone access needed</p>
-    <section class="text-center">
-        <h5>Camera/Microphone access needed</h5>
-        <p class="err" id="permissionError">Permission denied</p>
-        <p class="info">You must allow camera and microphone access in your browser.</p>
-        <ul>
-            <li>Please click on the lock or camera symbol on the side of the URL in the address bar. Here you can grant "always allow" access to your input devices.</li>
-            <li>Please ensure that you have a camera AND microphone plugged into your computer.</li>
-        </ul>
-        <p class="info">Once you've followed these steps, please refresh this page.</p>
-        <p>If you prefer to continue without allowing camera and microphone access, click on Continue</p>
+<form class="helpCameraSettings nes-container" on:submit|preventDefault={close}>
+    <section>
+        <h2>Camera/Microphone access needed</h2>
+        <p class="err">Permission denied</p>
+        <p>You must allow camera and microphone access in your browser.</p>
         <p>
             {#if isFirefox }
-            <img src={firefoxImg} alt="" />
-            {:else if isChrome }
-            <img src={chromeImg} alt="" />
+                <p class="err">Please click the "Remember this decision" checkbox, if you don't want Firefox to keep asking you the authorization.</p>
+                <img src={firefoxImg} alt="" />
+            {:else if isChrome && !isAndroid }
+                <img src={chromeImg} alt="" />
             {/if}
         </p>
     </section>
-    <!--<section class="text-center">
-        <p>If your problem persist, please contact us: <a id="mailto" href="mailto:workadventure@thecodingmachine.com?subject=Support camera and microphone settings" target="_blank"> workadventure@thecodingmachine.com</a>.</p>
-    </section>-->
-    <section class="action">
-        <a href="#" id="helpCameraSettingsFormRefresh" on:click={refresh}>Refresh</a>
-        <button type="submit" id="helpCameraSettingsFormContinue" on:click={close}>Continue</button>
+    <section>
+        <button class="helpCameraSettingsFormRefresh nes-btn" on:click|preventDefault={refresh}>Refresh</button>
+        <button type="submit" class="helpCameraSettingsFormContinue nes-btn is-primary" on:click|preventDefault={close}>Continue without webcam</button>
     </section>
 </form>
 
 
 <style>
     .helpCameraSettings {
-        /*background: #eceeee;
-        border: 1px solid #42464b;
-        border-radius: 6px;
-        margin: 25px auto 0;
-        width: 400px;
-        max-height: calc(48vh - 50px);
-        max-width: 48vw;
-        overflow: hidden;
-        overflow-y: scroll;*/
-    }
-    .helpCameraSettings h1 {
-        background-image: linear-gradient(top, #f1f3f3, #d4dae0);
-        border-bottom: 1px solid #a6abaf;
-        border-radius: 6px 6px 0 0;
-        box-sizing: border-box;
-        color: #727678;
-        display: block;
-        height: 43px;
-        padding-top: 10px;
-        margin: 0;
+        pointer-events: auto;
+        background: #eceeee;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 10vh;
+        max-height: 80vh;
+        max-width: 80vw;
+        overflow: auto;
         text-align: center;
-        text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
+    }
+    .helpCameraSettings h2{
+        font-family: 'Press Start 2P';
     }
     .helpCameraSettings section {
         margin: 10px;
     }
-    .helpCameraSettings section.action{
-        text-align: center;
-        margin: 0;
-    }
-    .helpCameraSettings button {
-        margin: 10px 4px;
-        background-color: black;
-        color: white;
-        border-radius: 7px;
-        padding-bottom: 4px;
-    }
-    .helpCameraSettings button.helpCameraSettingsFormCancel {
-        background-color: #c7c7c700;
-        color: #292929;
-    }
-    .helpCameraSettings section a{
-        font-size: 12px;
-        text-decoration: underline;
-        color: black;
-    }
-    .helpCameraSettings section h5{
-        margin: 1px;
-    }
-    .helpCameraSettings section.text-center{
-        text-align: center;
-    }
     .helpCameraSettings section p{
-        font-size: 8px;
-        margin: 0px 20px;
-    }
-    .helpCameraSettings section p a{
-        font-size: 8px;
+        margin: 20px;
+        font-family: 'Press Start 2P';
     }
     .helpCameraSettings section p.err{
         color: #ff0000;
     }
-    .helpCameraSettings section ul{
-        margin: 6px;
-    }
-    .helpCameraSettings section li{
-        text-align: left;
-        font-size: 8px;
-    }
     .helpCameraSettings section img {
-        width: 200px;
-        margin-top: 10px;
-    }
-    @media only screen and (max-width: 800px),
-    only screen and (max-height: 600px) {
-        .helpCameraSettings{
-            overflow-y: scroll;
-        }
+        max-width: 500px;
+        width: 100%;
     }
 </style>
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index e1b969fc..8c38a626 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/front/src/Phaser/Game/GameManager.ts
@@ -2,7 +2,6 @@ import {GameScene} from "./GameScene";
 import {connectionManager} from "../../Connexion/ConnectionManager";
 import type {Room} from "../../Connexion/Room";
 import {MenuScene, MenuSceneName} from "../Menu/MenuScene";
-import {HelpCameraSettingsScene, HelpCameraSettingsSceneName} from "../Menu/HelpCameraSettingsScene";
 import {LoginSceneName} from "../Login/LoginScene";
 import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
 import {EnableCameraSceneName} from "../Login/EnableCameraScene";
@@ -92,7 +91,6 @@ export class GameManager {
         console.log('starting '+ (this.currentGameSceneName || this.startRoom.id))
         scenePlugin.start(this.currentGameSceneName || this.startRoom.id);
         scenePlugin.launch(MenuSceneName);
-        //scenePlugin.launch(HelpCameraSettingsSceneName);//700
 
         if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){
             helpCameraSettingsVisibleStore.set(true);
diff --git a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts b/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
deleted file mode 100644
index 7d684df2..00000000
--- a/front/src/Phaser/Menu/HelpCameraSettingsScene.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import {mediaManager} from "../../WebRtc/MediaManager";
-import {HtmlUtils} from "../../WebRtc/HtmlUtils";
-import {localUserStore} from "../../Connexion/LocalUserStore";
-import {DirtyScene} from "../Game/DirtyScene";
-import {get} from "svelte/store";
-import {requestedCameraState, requestedMicrophoneState} from "../../Stores/MediaStore";
-
-export const HelpCameraSettingsSceneName = 'HelpCameraSettingsScene';
-const helpCameraSettings = 'helpCameraSettings';
-/**
- * The scene that show how to permit Camera and Microphone access if there are not already allowed
- */
-export class HelpCameraSettingsScene extends DirtyScene {
-    private helpCameraSettingsElement!: Phaser.GameObjects.DOMElement;
-    private helpCameraSettingsOpened: boolean = false;
-
-    constructor() {
-        super({key: HelpCameraSettingsSceneName});
-    }
-
-    preload() {
-        this.load.html(helpCameraSettings, 'resources/html/helpCameraSettings.html');
-    }
-
-    create(){
-        this.createHelpCameraSettings();
-    }
-
-    private createHelpCameraSettings() : void {
-        const middleX = this.getMiddleX();
-        this.helpCameraSettingsElement = this.add.dom(middleX, -800, undefined, {overflow: 'scroll'}).createFromCache(helpCameraSettings);
-        this.revealMenusAfterInit(this.helpCameraSettingsElement, helpCameraSettings);
-        this.helpCameraSettingsElement.addListener('click');
-        this.helpCameraSettingsElement.on('click',  (event:MouseEvent) => {
-            if((event?.target as HTMLInputElement).id === 'mailto') {
-                return;
-            }
-            event.preventDefault();
-            if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormRefresh') {
-                window.location.reload();
-            }else if((event?.target as HTMLInputElement).id === 'helpCameraSettingsFormContinue') {
-                this.closeHelpCameraSettingsOpened();
-            }
-        });
-
-        if(!localUserStore.getHelpCameraSettingsShown() && (!get(requestedMicrophoneState) || !get(requestedCameraState))){
-            this.openHelpCameraSettingsOpened();
-            localUserStore.setHelpCameraSettingsShown();
-        }
-    }
-
-    private openHelpCameraSettingsOpened(): void{
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
-        this.helpCameraSettingsOpened = true;
-        try{
-            if(window.navigator.userAgent.includes('Firefox')){
-                HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-firefox.png"/>';
-            }else if(window.navigator.userAgent.includes('Chrome')){
-                HtmlUtils.getElementByIdOrFail<HTMLParagraphElement>('browserHelpSetting').innerHTML ='<img src="/resources/objects/help-setting-camera-permission-chrome.png"/>';
-            }
-        }catch(err) {
-            console.error('openHelpCameraSettingsOpened => getElementByIdOrFail => error', err);
-        }
-        const middleY = this.getMiddleY();
-        const middleX = this.getMiddleX();
-        this.tweens.add({
-            targets: this.helpCameraSettingsElement,
-            y: middleY,
-            x: middleX,
-            duration: 1000,
-            ease: 'Power3',
-            overflow: 'scroll'
-        });
-
-        this.dirty = true;
-    }
-
-    private closeHelpCameraSettingsOpened(): void{
-        const middleX = this.getMiddleX();
-        /*const helpCameraSettingsInfo = this.helpCameraSettingsElement.getChildByID('helpCameraSettings') as HTMLParagraphElement;
-        helpCameraSettingsInfo.innerText = '';
-        helpCameraSettingsInfo.style.display = 'none';*/
-        this.helpCameraSettingsOpened = false;
-        this.tweens.add({
-            targets: this.helpCameraSettingsElement,
-            y: -1000,
-            x: middleX,
-            duration: 1000,
-            ease: 'Power3',
-            overflow: 'scroll'
-        });
-
-        this.dirty = true;
-    }
-
-    private revealMenusAfterInit(menuElement: Phaser.GameObjects.DOMElement, rootDomId: string) {
-        //Dom elements will appear inside the viewer screen when creating before being moved out of it, which create a flicker effect.
-        //To prevent this, we put a 'hidden' attribute on the root element, we remove it only after the init is done.
-        setTimeout(() => {
-            (menuElement.getChildByID(rootDomId) as HTMLElement).hidden = false;
-        }, 250);
-    }
-
-    update(time: number, delta: number): void {
-        this.dirty = false;
-    }
-
-    public onResize(): void {
-        super.onResize(
-
-        );
-        if (this.helpCameraSettingsOpened) {
-            const middleX = this.getMiddleX();
-            const middleY = this.getMiddleY();
-            this.tweens.add({
-                targets: this.helpCameraSettingsElement,
-                x: middleX,
-                y: middleY,
-                duration: 1000,
-                ease: 'Power3'
-            });
-            this.dirty = true;
-        }
-    }
-
-    private getMiddleX() : number{
-        return (this.scale.width / 2) -
-        (
-            this.helpCameraSettingsElement
-            && this.helpCameraSettingsElement.node
-            && this.helpCameraSettingsElement.node.getBoundingClientRect().width > 0
-            ? (this.helpCameraSettingsElement.node.getBoundingClientRect().width / (2 * this.scale.zoom))
-            : (400 / 2)
-        );
-    }
-
-    private getMiddleY() : number{
-        const middleY = ((this.scale.height) - (
-            (this.helpCameraSettingsElement
-            && this.helpCameraSettingsElement.node
-            && this.helpCameraSettingsElement.node.getBoundingClientRect().height > 0
-                ? this.helpCameraSettingsElement.node.getBoundingClientRect().height : 400 /*FIXME to use a const will be injected in HTMLElement*/)/this.scale.zoom)) / 2;
-        return (middleY > 0 ? middleY : 0);
-    }
-
-    public isDirty(): boolean {
-        return this.dirty;
-    }
-}
-
diff --git a/front/src/index.ts b/front/src/index.ts
index bc435ee1..90d4c612 100644
--- a/front/src/index.ts
+++ b/front/src/index.ts
@@ -13,7 +13,6 @@ import WebFontLoaderPlugin from 'phaser3-rex-plugins/plugins/webfontloader-plugi
 import {EntryScene} from "./Phaser/Login/EntryScene";
 import {coWebsiteManager} from "./WebRtc/CoWebsiteManager";
 import {MenuScene} from "./Phaser/Menu/MenuScene";
-import {HelpCameraSettingsScene} from "./Phaser/Menu/HelpCameraSettingsScene";
 import {localUserStore} from "./Connexion/LocalUserStore";
 import {ErrorScene} from "./Phaser/Reconnecting/ErrorScene";
 import {iframeListener} from "./Api/IframeListener";
@@ -96,7 +95,7 @@ const config: GameConfig = {
         ErrorScene,
         CustomizeScene,
         MenuScene,
-        HelpCameraSettingsScene],
+    ],
     //resolution: window.devicePixelRatio / 2,
     fps: fps,
     dom: {

From 47555d59558f8c324368d4fe155bbe09a6f98684 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 11:19:46 +0200
Subject: [PATCH 031/141] Migrating cam to Svelte on Camera setup screen

---
 front/dist/index.tmpl.html                    |  4 --
 .../EnableCamera/EnableCameraScene.svelte     | 66 +++++++++++++++++++
 front/src/Phaser/Login/EnableCameraScene.ts   | 15 ++---
 front/style/style.css                         | 33 ----------
 4 files changed, 71 insertions(+), 47 deletions(-)

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 9c251bf3..279609e8 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -94,10 +94,6 @@
 
         <div id="activeScreenSharing" class="active-screen-sharing active">
         </div>
-        <div id="webRtcSetup" class="webrtcsetup">
-            <img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
-            <video id="myCamVideoSetup" autoplay muted></video>
-        </div>
         <audio id="audio-webrtc-in">
             <source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
         </audio>
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index ac2cf992..f8b2867e 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -1,6 +1,8 @@
 <script lang="typescript">
     import {Game} from "../../Phaser/Game/Game";
     import {EnableCameraScene} from "../../Phaser/Login/EnableCameraScene";
+    import {localStreamStore} from "../../Stores/MediaStore";
+    import {onDestroy} from "svelte";
 
     export let game: Game;
 
@@ -10,12 +12,40 @@
         enableCameraScene.login();
     }
 
+    function srcObject(node, stream) {
+        node.srcObject = stream;
+        return {
+            update(newStream) {
+                if (node.srcObject != newStream) {
+                    node.srcObject = newStream
+                }
+            }
+        }
+    }
+
+    let stream : MediaStream|null;
+
+    const unsubscribe = localStreamStore.subscribe(value => {
+        if (value.type === 'success') {
+            stream = value.stream;
+        } else {
+            stream = null;
+        }
+    });
+
+    onDestroy(unsubscribe);
+
 </script>
 
 <form class="enableCameraScene" on:submit|preventDefault={submit}>
     <section class="title text-center">
         <h2>Turn on your camera and microphone</h2>
     </section>
+    <div id="webRtcSetup" class="webrtcsetup">
+        <img class="background-img" src="resources/logos/cinema-close.svg" alt="" class:hide={$localStreamStore.stream}>
+        <video id="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted></video>
+    </div>
+
     <!--<section class="text-center">
         <video id="myCamVideoSetup" autoplay muted></video>
     </section>
@@ -71,6 +101,42 @@
       button.letsgo {
         font-size: 200%;
       }
+
+      .webrtcsetup{
+        position: absolute;
+        top: 140px;
+        left: 0;
+        right: 0;
+
+        margin-left: auto;
+        margin-right: auto;
+        height: 50%;
+        width: 50%;
+        border: white 6px solid;
+
+        img.background-img {
+          position: relative;
+          display: block;
+          width: 40%;
+          height: 60%;
+          margin-left: auto;
+          margin-right: auto;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        img.hide {
+          display: none;
+        }
+      }
+      #myCamVideoSetup {
+          width: 100%;
+          height: 100%;
+          -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+      }
+
+
     }
 </style>
 
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 3eabe4d7..12e7ca66 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -107,8 +107,6 @@ export class EnableCameraScene extends ResizableScene {
             this.login();
         });
 
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').classList.add('active');
-
         this.localStreamStoreUnsubscriber = localStreamStore.subscribe((result) => {
             if (result.type === 'error') {
                 // TODO: we could handle the error in a specific way on the EnableCameraScene page.
@@ -135,9 +133,12 @@ export class EnableCameraScene extends ResizableScene {
         this.soundMeterSprite.setVisible(false);
         this.add.existing(this.soundMeterSprite);
 
-        this.onResize();
-
         enableCameraSceneVisibilityStore.showEnableCameraScene();
+
+        setTimeout(() => {
+            this.onResize();
+        }, 100);
+
     }
 
     private previousCam(): void {
@@ -184,12 +185,6 @@ export class EnableCameraScene extends ResizableScene {
      * Function called each time a camera is changed
      */
     private setupStream(stream: MediaStream): void {
-        const img = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetupNoVideo');
-        img.style.display = 'none';
-
-        const div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
-        div.srcObject = stream;
-
         this.soundMeter.connectToSource(stream, new window.AudioContext());
         this.soundMeterSprite.setVisible(true);
 
diff --git a/front/style/style.css b/front/style/style.css
index 525b517a..10a5fdad 100644
--- a/front/style/style.css
+++ b/front/style/style.css
@@ -331,39 +331,6 @@ video.myCamVideo{
     }
 }
 
-.webrtcsetup{
-    display: none;
-    position: absolute;
-    top: 140px;
-    left: 0;
-    right: 0;
-    margin-left: auto;
-    margin-right: auto;
-    height: 50%;
-    width: 50%;
-    border: white 6px solid;
-}
-.webrtcsetup .background-img {
-    position: relative;
-    display: block;
-    width: 40%;
-    height: 60%;
-    margin-left: auto;
-    margin-right: auto;
-    top: 50%;
-    transform: translateY(-50%);
-}
-#myCamVideoSetup {
-    width: 100%;
-    height: 100%;
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-}
-.webrtcsetup.active{
-    display: block;
-}
-
-
 /* New layout */
 body {
     margin: 0;

From 10e40930e23e2d91c67dfc725f89c89c285f9104 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 1 Jun 2021 11:52:19 +0200
Subject: [PATCH 032/141] Adding map test helpCameraSetting

---
 .../HelpCameraSettingsPopup.svelte            |   2 +-
 maps/tests/help_camera_setting.json           | 164 ++++++++++++++++++
 maps/tests/index.html                         |   8 +
 3 files changed, 173 insertions(+), 1 deletion(-)
 create mode 100644 maps/tests/help_camera_setting.json

diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
index fc6656a0..7bf4dab0 100644
--- a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
+++ b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
@@ -47,7 +47,7 @@
         margin-top: 10vh;
         max-height: 80vh;
         max-width: 80vw;
-        overflow: auto;
+        overflow: hidden;
         text-align: center;
     }
     .helpCameraSettings h2{
diff --git a/maps/tests/help_camera_setting.json b/maps/tests/help_camera_setting.json
new file mode 100644
index 00000000..2dcdec3a
--- /dev/null
+++ b/maps/tests/help_camera_setting.json
@@ -0,0 +1,164 @@
+{ "compressionlevel":-1,
+ "height":10,
+ "infinite":false,
+ "layers":[
+        {
+         "data":[33, 34, 34, 34, 34, 34, 34, 34, 34, 35, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 41, 42, 42, 42, 42, 42, 42, 42, 42, 43, 49, 50, 50, 50, 50, 50, 50, 50, 50, 51],
+         "height":10,
+         "id":3,
+         "name":"bottom",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+         "height":10,
+         "id":1,
+         "name":"start",
+         "opacity":1,
+         "type":"tilelayer",
+         "visible":true,
+         "width":10,
+         "x":0,
+         "y":0
+        }, 
+        {
+         "draworder":"topdown",
+         "id":2,
+         "name":"floorLayer",
+         "objects":[
+                {
+                 "height":254.57168784029,
+                 "id":1,
+                 "name":"",
+                 "rotation":0,
+                 "text":
+                    {
+                     "fontfamily":"Sans Serif",
+                     "pixelsize":12,
+                     "text":"Test 1 : \nBlock permission to camera  and\/or microphone access.\n\nResult 1 :\nOrange popup show at the bottom of the screen.\nIf you click on it, the HelpCameraSetting popup open.\n\nTest 2 : \nReload the page and block permission to camera and\/or microphone access on the camera setting page.\n\nResult 2 : \nOrange popup show at the bottom of the screen.\nIf you click on it, the HelpCameraSetting popup open.\n",
+                     "wrap":true
+                    },
+                 "type":"",
+                 "visible":true,
+                 "width":295.278811252269,
+                 "x":12.2517014519056,
+                 "y":49.3021778584392
+                }],
+         "opacity":1,
+         "type":"objectgroup",
+         "visible":true,
+         "x":0,
+         "y":0
+        }],
+ "nextlayerid":6,
+ "nextobjectid":2,
+ "orientation":"orthogonal",
+ "renderorder":"right-down",
+ "tiledversion":"1.4.3",
+ "tileheight":32,
+ "tilesets":[
+        {
+         "columns":8,
+         "firstgid":1,
+         "image":"Validation\/tileset_dungeon.png",
+         "imageheight":256,
+         "imagewidth":256,
+         "margin":0,
+         "name":"dungeon",
+         "spacing":0,
+         "tilecount":64,
+         "tileheight":32,
+         "tiles":[
+                {
+                 "id":0,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":1,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":2,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":5,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":8,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":10,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":16,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":17,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }, 
+                {
+                 "id":18,
+                 "properties":[
+                        {
+                         "name":"collides",
+                         "type":"bool",
+                         "value":true
+                        }]
+                }],
+         "tilewidth":32
+        }],
+ "tilewidth":32,
+ "type":"map",
+ "version":1.4,
+ "width":10
+}
\ No newline at end of file
diff --git a/maps/tests/index.html b/maps/tests/index.html
index a17a3b5d..9c95c281 100644
--- a/maps/tests/index.html
+++ b/maps/tests/index.html
@@ -82,6 +82,14 @@
                     <a href="#" class="testLink" data-testmap="energy.json" target="_blank">Test energy consumption</a>
                 </td>
             </tr>
+            <tr>
+                <td>
+                    <input type="radio" name="test-help-camera-setting"> Success <input type="radio" name="test-help-camera-setting"> Failure <input type="radio" name="test-help-camera-setting" checked> Pending
+                </td>
+                <td>
+                    <a href="#" class="testLink" data-testmap="help_camera_setting.json" target="_blank">Test the HelpCameraSettingScene</a>
+                </td>
+            </tr>
         </table>
 
         <script>

From bf7083effc08b3e46f7b79e72a8741b6d06d1cbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 16:17:36 +0200
Subject: [PATCH 033/141] Migrating EnableCameraScene to Svelte

---
 .../EnableCamera/EnableCameraScene.svelte     | 134 ++++++++--
 .../HorizontalSoundMeterWidget.svelte         |  78 ++++++
 .../HelpCameraSettingsPopup.svelte            |   2 +-
 front/src/Components/SoundMeterWidget.svelte  |  40 ++-
 front/src/Phaser/Components/SoundMeter.ts     |   4 +
 .../src/Phaser/Components/SoundMeterSprite.ts |  44 ----
 front/src/Phaser/Login/EnableCameraScene.ts   | 240 ------------------
 front/src/Stores/MediaStore.ts                |  44 ++++
 front/src/Stores/ScreenSharingStore.ts        |   4 +-
 front/webpack.config.ts                       |  10 +-
 10 files changed, 274 insertions(+), 326 deletions(-)
 create mode 100644 front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
 delete mode 100644 front/src/Phaser/Components/SoundMeterSprite.ts

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index f8b2867e..d0501742 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -1,12 +1,22 @@
 <script lang="typescript">
     import {Game} from "../../Phaser/Game/Game";
-    import {EnableCameraScene} from "../../Phaser/Login/EnableCameraScene";
-    import {localStreamStore} from "../../Stores/MediaStore";
+    import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
+    import {
+        audioConstraintStore,
+        cameraListStore,
+        localStreamStore,
+        microphoneListStore,
+        videoConstraintStore
+    } from "../../Stores/MediaStore";
     import {onDestroy} from "svelte";
+    import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte";
+    import cinemaCloseImg from "../images/cinema-close.svg";
 
     export let game: Game;
+    let selectedCamera : string|null = null;
+    let selectedMicrophone : string|null = null;
 
-    const enableCameraScene = game.scene.scenes.find((scene) => scene instanceof EnableCameraScene);
+    const enableCameraScene = game.scene.getScene(EnableCameraSceneName);
 
     function submit() {
         enableCameraScene.login();
@@ -23,28 +33,84 @@
         }
     }
 
-    let stream : MediaStream|null;
+    let stream: MediaStream | null;
 
     const unsubscribe = localStreamStore.subscribe(value => {
         if (value.type === 'success') {
             stream = value.stream;
+
+            if (stream !== null) {
+                const videoTracks = stream.getVideoTracks();
+                if (videoTracks.length > 0) {
+                    selectedCamera = videoTracks[0].getSettings().deviceId;
+                }
+                const audioTracks = stream.getAudioTracks();
+                if (audioTracks.length > 0) {
+                    selectedMicrophone = audioTracks[0].getSettings().deviceId;
+                }
+            }
         } else {
             stream = null;
+            selectedCamera = null;
+            selectedMicrophone = null;
         }
     });
 
     onDestroy(unsubscribe);
 
+    function normalizeDeviceName(label: string): string {
+        // remove text in parenthesis
+        return label.replace(/\([^()]*\)/g, '').trim();
+    }
+
+    function selectCamera() {
+        videoConstraintStore.setDeviceId(selectedCamera);
+    }
+
+    function selectMicrophone() {
+        audioConstraintStore.setDeviceId(selectedMicrophone);
+    }
+
 </script>
 
 <form class="enableCameraScene" on:submit|preventDefault={submit}>
-    <section class="title text-center">
+    <section class="text-center">
         <h2>Turn on your camera and microphone</h2>
     </section>
     <div id="webRtcSetup" class="webrtcsetup">
-        <img class="background-img" src="resources/logos/cinema-close.svg" alt="" class:hide={$localStreamStore.stream}>
-        <video id="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted></video>
+        <img class="background-img" src={cinemaCloseImg} alt="" class:hide={$localStreamStore.stream}>
+        <video id="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted  class:hide={!$localStreamStore.stream}></video>
     </div>
+    <HorizontalSoundMeterWidget stream={stream}></HorizontalSoundMeterWidget>
+
+    <section class="selectWebcamForm">
+
+        {#if $cameraListStore.length > 1 }
+        <div class="nes-select">
+            <select bind:value={selectedCamera} on:change={selectCamera}>
+                {#each $cameraListStore as camera}
+                    <option value={camera.deviceId}>
+                        {normalizeDeviceName(camera.label)}
+                    </option>
+                {/each}
+            </select>
+        </div>
+        {/if}
+
+        {#if $microphoneListStore.length > 1 }
+        <div class="nes-select">
+            <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
+                {#each $microphoneListStore as microphone}
+                    <option value={microphone.deviceId}>
+                        {normalizeDeviceName(microphone.label)}
+                    </option>
+                {/each}
+            </select>
+        </div>
+        {/if}
+
+    </section>
+
 
     <!--<section class="text-center">
         <video id="myCamVideoSetup" autoplay muted></video>
@@ -73,19 +139,37 @@
       /*max-height: 48vh;
       width: 42vw;
       max-width: 300px;*/
-      overflow: hidden;
 
-      section.title {
+      /*section.title {
         position: absolute;
         top: 1vh;
         width: 100%;
+      }*/
+
+      section.selectWebcamForm {
+        margin-top: 3vh;
+        margin-bottom: 3vh;
+        min-height: 10vh;
+        width: 50%;
+        margin-left: auto;
+        margin-right: auto;
+
+        select {
+          font-family: "Press Start 2P";
+          margin-top: 1vh;
+          margin-bottom: 1vh;
+
+          option {
+            font-family: "Press Start 2P";
+          }
+        }
       }
 
       section.action{
         text-align: center;
         margin: 0;
-        position: absolute;
-        top: 85vh;
+        /*position: absolute;
+        top: 85vh;*/
         width: 100%;
       }
 
@@ -103,29 +187,31 @@
       }
 
       .webrtcsetup{
-        position: absolute;
+        /*position: absolute;
         top: 140px;
         left: 0;
-        right: 0;
-
+        right: 0;*/
+        margin-top: 2vh;
         margin-left: auto;
         margin-right: auto;
-        height: 50%;
-        width: 50%;
+        height: 28.125vw;
+        width: 50vw;
         border: white 6px solid;
 
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         img.background-img {
-          position: relative;
-          display: block;
+          /*position: relative;*/
+          /*display: block;*/
           width: 40%;
-          height: 60%;
-          margin-left: auto;
-          margin-right: auto;
-          top: 50%;
-          transform: translateY(-50%);
+          /*height: 60%;*/
+          /*top: 50%;*/
+          /*transform: translateY(-50%);*/
         }
 
-        img.hide {
+        .hide {
           display: none;
         }
       }
diff --git a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
new file mode 100644
index 00000000..4a51f0d2
--- /dev/null
+++ b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
@@ -0,0 +1,78 @@
+<script lang="typescript">
+    import {SoundMeter} from "../../Phaser/Components/SoundMeter";
+    import {onDestroy} from "svelte";
+
+    export let stream: MediaStream | null;
+    let volume = 0;
+
+    const NB_BARS = 20;
+
+    let timeout;
+    const soundMeter = new SoundMeter();
+
+    $: {
+        if (stream && stream.getAudioTracks().length > 0) {
+            soundMeter.connectToSource(stream, new AudioContext());
+
+            if (timeout) {
+                clearInterval(timeout);
+            }
+
+            timeout = setInterval(() => {
+                try{
+                    volume = parseInt((soundMeter.getVolume() / 100 * NB_BARS).toFixed(0));
+                    //console.log(volume);
+                }catch(err){
+
+                }
+            }, 100);
+
+        }
+    }
+
+    onDestroy(() => {
+        soundMeter.stop();
+        if (timeout) {
+            clearInterval(timeout);
+        }
+    })
+
+
+    function color(i: number, volume: number) {
+        console.log(i, volume)
+        const red = 255 * i / NB_BARS;
+        const green = 255 * (1 - i / NB_BARS);
+
+        let alpha = 1;
+        if (i >= volume) {
+            alpha = 0.5;
+        }
+
+        return 'background-color:rgba('+red+', '+green+', 0, '+alpha+')';
+    }
+</script>
+
+
+<div class="horizontal-sound-meter" class:active={stream?.getAudioTracks().length > 0}>
+    {#each [...Array(NB_BARS).keys()] as i}
+        <div style={color(i, volume)}></div>
+    {/each}
+</div>
+
+<style lang="scss">
+    .horizontal-sound-meter {
+      display: flex;
+      flex-direction: row;
+      width: 50%;
+      height: 30px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 1vh;
+    }
+
+    .horizontal-sound-meter div {
+      margin-left: 5px;
+      flex-grow: 1;
+    }
+
+</style>
diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
index fc6656a0..8411d33d 100644
--- a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
+++ b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
@@ -19,7 +19,7 @@
 
 <form class="helpCameraSettings nes-container" on:submit|preventDefault={close}>
     <section>
-        <h2>Camera/Microphone access needed</h2>
+        <h2>Camera / Microphone access needed</h2>
         <p class="err">Permission denied</p>
         <p>You must allow camera and microphone access in your browser.</p>
         <p>
diff --git a/front/src/Components/SoundMeterWidget.svelte b/front/src/Components/SoundMeterWidget.svelte
index cff6be86..7acb10db 100644
--- a/front/src/Components/SoundMeterWidget.svelte
+++ b/front/src/Components/SoundMeterWidget.svelte
@@ -2,28 +2,40 @@
     import {SoundMeter} from "../Phaser/Components/SoundMeter";
     import {onDestroy} from "svelte";
 
-    export let stream: MediaStream;
+    export let stream: MediaStream|null;
     let volume = 0;
 
-    console.log('stream', stream);
+    const NB_BARS = 5;
 
-    if (stream.getAudioTracks().length > 0) {
-        const soundMeter = new SoundMeter();
-        soundMeter.connectToSource(stream, new AudioContext());
+    let timeout;
+    const soundMeter = new SoundMeter();
 
-        const timeout = setInterval(() => {
-            try{
-                volume = parseInt((soundMeter.getVolume() / 10).toFixed(0));
-                console.log(volume);
-            }catch(err){
+    $: {
+        if (stream && stream.getAudioTracks().length > 0) {
+            soundMeter.connectToSource(stream, new AudioContext());
 
+            if (timeout) {
+                clearInterval(timeout);
             }
-        }, 100);
 
-        onDestroy(() => {
-            clearInterval(timeout);
-        })
+            timeout = setInterval(() => {
+                try{
+                    volume = parseInt((soundMeter.getVolume() / 100 * NB_BARS).toFixed(0));
+                    //console.log(volume);
+                }catch(err){
+
+                }
+            }, 100);
+
+        }
     }
+
+    onDestroy(() => {
+        soundMeter.stop();
+        if (timeout) {
+            clearInterval(timeout);
+        }
+    })
 </script>
 
 
diff --git a/front/src/Phaser/Components/SoundMeter.ts b/front/src/Phaser/Components/SoundMeter.ts
index 1d6f7eba..b60fb514 100644
--- a/front/src/Phaser/Components/SoundMeter.ts
+++ b/front/src/Phaser/Components/SoundMeter.ts
@@ -27,6 +27,10 @@ export class SoundMeter {
 
     public connectToSource(stream: MediaStream, context: AudioContext): void
     {
+        if (this.source !== undefined) {
+            this.stop();
+        }
+
         this.init(context);
 
         this.source = this.context?.createMediaStreamSource(stream);
diff --git a/front/src/Phaser/Components/SoundMeterSprite.ts b/front/src/Phaser/Components/SoundMeterSprite.ts
deleted file mode 100644
index 582617f9..00000000
--- a/front/src/Phaser/Components/SoundMeterSprite.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import Container = Phaser.GameObjects.Container;
-import type {Scene} from "phaser";
-import GameObject = Phaser.GameObjects.GameObject;
-import Rectangle = Phaser.GameObjects.Rectangle;
-
-
-export class SoundMeterSprite extends Container {
-    private rectangles: Rectangle[] = new Array<Rectangle>();
-    private static readonly NB_BARS = 20;
-
-    constructor(scene: Scene, x?: number, y?: number, children?: GameObject[]) {
-        super(scene, x, y, children);
-
-        for (let i = 0; i < SoundMeterSprite.NB_BARS; i++) {
-            const rectangle = new Rectangle(scene, i * 13, 0, 10, 20, (Math.round(255 - i * 255 / SoundMeterSprite.NB_BARS) << 8) + (Math.round(i * 255 / SoundMeterSprite.NB_BARS) << 16));
-            this.add(rectangle);
-            this.rectangles.push(rectangle);
-        }
-    }
-
-    /**
-     * A number between 0 and 100
-     *
-     * @param volume
-     */
-    public setVolume(volume: number): void {
-
-        const normalizedVolume = volume / 100 * SoundMeterSprite.NB_BARS;
-        for (let i = 0; i < SoundMeterSprite.NB_BARS; i++) {
-            if (normalizedVolume < i) {
-                this.rectangles[i].alpha = 0.5;
-            } else {
-                this.rectangles[i].alpha = 1;
-            }
-        }
-    }
-
-    public getWidth(): number {
-        return SoundMeterSprite.NB_BARS * 13;
-    }
-
-
-
-}
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 12e7ca66..ba27cd07 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -3,7 +3,6 @@ import {TextField} from "../Components/TextField";
 import Image = Phaser.GameObjects.Image;
 import {mediaManager} from "../../WebRtc/MediaManager";
 import {SoundMeter} from "../Components/SoundMeter";
-import {SoundMeterSprite} from "../Components/SoundMeterSprite";
 import {HtmlUtils} from "../../WebRtc/HtmlUtils";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
@@ -11,280 +10,41 @@ import Zone = Phaser.GameObjects.Zone;
 import { MenuScene } from "../Menu/MenuScene";
 import {ResizableScene} from "./ResizableScene";
 import {
-    audioConstraintStore,
-    localStreamStore,
     enableCameraSceneVisibilityStore,
-    mediaStreamConstraintsStore,
-    videoConstraintStore
 } from "../../Stores/MediaStore";
-import type {Unsubscriber} from "svelte/store";
 
 export const EnableCameraSceneName = "EnableCameraScene";
-enum LoginTextures {
-    playButton = "play_button",
-    icon = "icon",
-    mainFont = "main_font",
-    arrowRight = "arrow_right",
-    arrowUp = "arrow_up"
-}
 
 export class EnableCameraScene extends ResizableScene {
-    private textField!: TextField;
-    private cameraNameField!: TextField;
-    private arrowLeft!: Image;
-    private arrowRight!: Image;
-    private arrowDown!: Image;
-    private arrowUp!: Image;
-    private microphonesList: MediaDeviceInfo[] = new Array<MediaDeviceInfo>();
-    private camerasList: MediaDeviceInfo[] = new Array<MediaDeviceInfo>();
-    private cameraSelected: number = 0;
-    private microphoneSelected: number = 0;
-    private soundMeter: SoundMeter;
-    private soundMeterSprite!: SoundMeterSprite;
-    private microphoneNameField!: TextField;
-
-    private mobileTapZone!: Zone;
-    private localStreamStoreUnsubscriber!: Unsubscriber;
 
     constructor() {
         super({
             key: EnableCameraSceneName
         });
-        this.soundMeter = new SoundMeter();
     }
 
     preload() {
-        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
-        this.load.image(LoginTextures.arrowRight, "resources/objects/arrow_right.png");
-        this.load.image(LoginTextures.arrowUp, "resources/objects/arrow_up.png");
-        // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
-        this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
     }
 
     create() {
-        if (touchScreenManager.supportTouchScreen) {
-            new PinchManager(this);
-        }
-        //this.scale.setZoom(ZOOM_LEVEL);
-        //Phaser.Display.Align.In.BottomCenter(this.pressReturnField, zone);
-
-        /* FIX ME */
-        this.textField = new TextField(this, this.scale.width / 2, 20, '');
-
-        // For mobile purposes - we need a big enough touchable area.
-        this.mobileTapZone = this.add.zone(this.scale.width / 2,this.scale.height - 30,200,50)
-          .setInteractive().on("pointerdown", () => {
-            this.login();
-          });
-
-        this.cameraNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 60, '');
-
-        this.microphoneNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 40, '');
-
-        this.arrowRight = new Image(this, 0, 0, LoginTextures.arrowRight);
-        this.arrowRight.setVisible(false);
-        this.arrowRight.setInteractive().on('pointerdown', this.nextCam.bind(this));
-        this.add.existing(this.arrowRight);
-
-        this.arrowLeft = new Image(this, 0, 0, LoginTextures.arrowRight);
-        this.arrowLeft.setVisible(false);
-        this.arrowLeft.flipX = true;
-        this.arrowLeft.setInteractive().on('pointerdown', this.previousCam.bind(this));
-        this.add.existing(this.arrowLeft);
-
-        this.arrowUp = new Image(this, 0, 0, LoginTextures.arrowUp);
-        this.arrowUp.setVisible(false);
-        this.arrowUp.setInteractive().on('pointerdown', this.previousMic.bind(this));
-        this.add.existing(this.arrowUp);
-
-        this.arrowDown = new Image(this, 0, 0, LoginTextures.arrowUp);
-        this.arrowDown.setVisible(false);
-        this.arrowDown.flipY = true;
-        this.arrowDown.setInteractive().on('pointerdown', this.nextMic.bind(this));
-        this.add.existing(this.arrowDown);
 
         this.input.keyboard.on('keyup-ENTER', () => {
             this.login();
         });
 
-        this.localStreamStoreUnsubscriber = localStreamStore.subscribe((result) => {
-            if (result.type === 'error') {
-                // TODO: we could handle the error in a specific way on the EnableCameraScene page.
-                // TODO: we could handle the error in a specific way on the EnableCameraScene page.
-                return;
-                //throw result.error;
-            }
-
-            this.getDevices();
-            if (result.stream !== null) {
-                this.setupStream(result.stream);
-            }
-        });
-        /*const mediaPromise = mediaManager.getCamera();
-        mediaPromise.then(this.getDevices.bind(this));
-        mediaPromise.then(this.setupStream.bind(this));*/
-
-        this.input.keyboard.on('keydown-RIGHT', this.nextCam.bind(this));
-        this.input.keyboard.on('keydown-LEFT', this.previousCam.bind(this));
-        this.input.keyboard.on('keydown-DOWN', this.nextMic.bind(this));
-        this.input.keyboard.on('keydown-UP', this.previousMic.bind(this));
-
-        this.soundMeterSprite = new SoundMeterSprite(this, 50, 50);
-        this.soundMeterSprite.setVisible(false);
-        this.add.existing(this.soundMeterSprite);
-
         enableCameraSceneVisibilityStore.showEnableCameraScene();
-
-        setTimeout(() => {
-            this.onResize();
-        }, 100);
-
-    }
-
-    private previousCam(): void {
-        if (this.cameraSelected === 0 || this.camerasList.length === 0) {
-            return;
-        }
-        this.cameraSelected--;
-        videoConstraintStore.setDeviceId(this.camerasList[this.cameraSelected].deviceId);
-
-        //mediaManager.setCamera(this.camerasList[this.cameraSelected].deviceId).then(this.setupStream.bind(this));
-    }
-
-    private nextCam(): void {
-        if (this.cameraSelected === this.camerasList.length - 1 || this.camerasList.length === 0) {
-            return;
-        }
-        this.cameraSelected++;
-        videoConstraintStore.setDeviceId(this.camerasList[this.cameraSelected].deviceId);
-
-        // TODO: the change of camera should be OBSERVED (reactive)
-        //mediaManager.setCamera(this.camerasList[this.cameraSelected].deviceId).then(this.setupStream.bind(this));
-    }
-
-    private previousMic(): void {
-        if (this.microphoneSelected === 0 || this.microphonesList.length === 0) {
-            return;
-        }
-        this.microphoneSelected--;
-        audioConstraintStore.setDeviceId(this.microphonesList[this.microphoneSelected].deviceId);
-        //mediaManager.setMicrophone(this.microphonesList[this.microphoneSelected].deviceId).then(this.setupStream.bind(this));
-    }
-
-    private nextMic(): void {
-        if (this.microphoneSelected === this.microphonesList.length - 1 || this.microphonesList.length === 0) {
-            return;
-        }
-        this.microphoneSelected++;
-        audioConstraintStore.setDeviceId(this.microphonesList[this.microphoneSelected].deviceId);
-        // TODO: the change of camera should be OBSERVED (reactive)
-        //mediaManager.setMicrophone(this.microphonesList[this.microphoneSelected].deviceId).then(this.setupStream.bind(this));
-    }
-
-    /**
-     * Function called each time a camera is changed
-     */
-    private setupStream(stream: MediaStream): void {
-        this.soundMeter.connectToSource(stream, new window.AudioContext());
-        this.soundMeterSprite.setVisible(true);
-
-        this.updateWebCamName();
-    }
-
-    private updateWebCamName(): void {
-        if (this.camerasList.length > 1) {
-            let label = this.camerasList[this.cameraSelected].label;
-            // remove text in parenthesis
-            label = label.replace(/\([^()]*\)/g, '').trim();
-            // remove accents
-            label = label.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-            this.cameraNameField.text = label;
-
-            this.arrowRight.setVisible(this.cameraSelected < this.camerasList.length - 1);
-            this.arrowLeft.setVisible(this.cameraSelected > 0);
-        }
-        if (this.microphonesList.length > 1) {
-            let label = this.microphonesList[this.microphoneSelected].label;
-            // remove text in parenthesis
-            label = label.replace(/\([^()]*\)/g, '').trim();
-            // remove accents
-            label = label.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
-
-            this.microphoneNameField.text = label;
-
-            this.arrowDown.setVisible(this.microphoneSelected < this.microphonesList.length - 1);
-            this.arrowUp.setVisible(this.microphoneSelected > 0);
-
-        }
     }
 
     public onResize(): void {
-        let div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
-        let bounds = div.getBoundingClientRect();
-        if (!div.srcObject) {
-            div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('webRtcSetup');
-            bounds = div.getBoundingClientRect();
-        }
-
-        this.textField.x = this.game.renderer.width / 2;
-        this.mobileTapZone.x = this.game.renderer.width / 2;
-        this.cameraNameField.x = this.game.renderer.width / 2;
-        this.microphoneNameField.x = this.game.renderer.width / 2;
-
-        this.cameraNameField.y = bounds.top / this.scale.zoom - 8;
-
-        this.soundMeterSprite.x = this.game.renderer.width / 2 - this.soundMeterSprite.getWidth() / 2;
-        this.soundMeterSprite.y = bounds.bottom / this.scale.zoom + 16;
-
-        this.microphoneNameField.y = this.soundMeterSprite.y + 22;
-
-        this.arrowRight.x = bounds.right / this.scale.zoom + 16;
-        this.arrowRight.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
-
-        this.arrowLeft.x = bounds.left / this.scale.zoom - 16;
-        this.arrowLeft.y = (bounds.top + bounds.height / 2) / this.scale.zoom;
-
-        this.arrowDown.x = this.microphoneNameField.x + this.microphoneNameField.width / 2 + 16;
-        this.arrowDown.y = this.microphoneNameField.y;
-
-        this.arrowUp.x = this.microphoneNameField.x - this.microphoneNameField.width / 2 - 16;
-        this.arrowUp.y = this.microphoneNameField.y;
-
-        /*const actionBtn = document.querySelector<HTMLDivElement>('#enableCameraScene .action');
-        if (actionBtn !== null) {
-            actionBtn.style.top = (this.scale.height - 65) + 'px';
-        }*/
     }
 
     update(time: number, delta: number): void {
-        this.soundMeterSprite.setVolume(this.soundMeter.getVolume());
     }
 
     public login(): void {
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
-        this.soundMeter.stop();
-
         enableCameraSceneVisibilityStore.hideEnableCameraScene();
-        this.localStreamStoreUnsubscriber();
-        //mediaManager.stopCamera();
-        //mediaManager.stopMicrophone();
 
         this.scene.sleep(EnableCameraSceneName);
         gameManager.goToStartingMap(this.scene);
     }
-
-    private async getDevices() {
-        // TODO: switch this in a store.
-        const mediaDeviceInfos = await navigator.mediaDevices.enumerateDevices();
-        this.microphonesList = [];
-        this.camerasList = [];
-        for (const mediaDeviceInfo of mediaDeviceInfos) {
-            if (mediaDeviceInfo.kind === 'audioinput') {
-                this.microphonesList.push(mediaDeviceInfo);
-            } else if (mediaDeviceInfo.kind === 'videoinput') {
-                this.camerasList.push(mediaDeviceInfo);
-            }
-        }
-        this.updateWebCamName();
-    }
 }
diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index 9e53aa3b..51cba013 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -508,3 +508,47 @@ export const obtainedMediaConstraintStore = derived(localStreamStore, ($localStr
     return $localStreamStore.constraints;
 });
 
+/**
+ * Device list
+ */
+export const deviceListStore = readable<MediaDeviceInfo[]>([], function start(set) {
+    let deviceListCanBeQueried = false;
+
+    const queryDeviceList = () => {
+        // Note: so far, we are ignoring any failures.
+        navigator.mediaDevices.enumerateDevices().then((mediaDeviceInfos) => {
+            set(mediaDeviceInfos);
+        }).catch((e) => {
+            console.error(e);
+            throw e;
+        });
+    };
+
+    const unsubscribe = localStreamStore.subscribe((streamResult) => {
+        if (streamResult.type === "success" && streamResult.stream !== null) {
+            if (deviceListCanBeQueried === false) {
+                queryDeviceList();
+                deviceListCanBeQueried = true;
+            }
+        }
+    });
+
+    if (navigator.mediaDevices) {
+        navigator.mediaDevices.addEventListener('devicechange', queryDeviceList);
+    }
+
+    return function stop() {
+        unsubscribe();
+        if (navigator.mediaDevices) {
+            navigator.mediaDevices.removeEventListener('devicechange', queryDeviceList);
+        }
+    };
+});
+
+export const cameraListStore = derived(deviceListStore, ($deviceListStore) => {
+    return $deviceListStore.filter(device => device.kind === 'videoinput');
+});
+
+export const microphoneListStore = derived(deviceListStore, ($deviceListStore) => {
+    return $deviceListStore.filter(device => device.kind === 'audioinput');
+});
diff --git a/front/src/Stores/ScreenSharingStore.ts b/front/src/Stores/ScreenSharingStore.ts
index a55f5ab2..0a7ef3e6 100644
--- a/front/src/Stores/ScreenSharingStore.ts
+++ b/front/src/Stores/ScreenSharingStore.ts
@@ -126,7 +126,7 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
     let currentStreamPromise: Promise<MediaStream>;
     if (navigator.getDisplayMedia) {
         currentStreamPromise = navigator.getDisplayMedia({constraints});
-    } else if (navigator.mediaDevices.getDisplayMedia) {
+    } else if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
         currentStreamPromise = navigator.mediaDevices.getDisplayMedia({constraints});
     } else {
         stopScreenSharing();
@@ -183,7 +183,7 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
  * A store containing whether the screen sharing button should be displayed or hidden.
  */
 export const screenSharingAvailableStore = derived(peerStore, ($peerStore, set) => {
-    if (!navigator.getDisplayMedia && !navigator.mediaDevices.getDisplayMedia) {
+    if (!navigator.getDisplayMedia && (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia)) {
         set(false);
         return;
     }
diff --git a/front/webpack.config.ts b/front/webpack.config.ts
index 99cbff77..5ff37028 100644
--- a/front/webpack.config.ts
+++ b/front/webpack.config.ts
@@ -89,7 +89,15 @@ module.exports = {
                         preprocess: sveltePreprocess({
                             scss: true,
                             sass: true,
-                        })
+                        }),
+                        onwarn: function (warning: { code: string }, handleWarning: (warning: { code: string }) => void) {
+                            // See https://github.com/sveltejs/svelte/issues/4946#issuecomment-662168782
+
+                            if (warning.code === 'a11y-no-onchange') { return }
+
+                            // process as usual
+                            handleWarning(warning);
+                        }
                     }
                 }
             },

From cf9467419d26d18bbb0f749d3a6e8065f1bfcc84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 16:22:39 +0200
Subject: [PATCH 034/141] Fixing scene overflow

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte      | 2 ++
 .../Components/EnableCamera/HorizontalSoundMeterWidget.svelte   | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index d0501742..338ef7b6 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -136,6 +136,8 @@
       /*background: #000000;*/
       margin: 20px auto 0;
       color: #ebeeee;
+      height: 100vh;
+      overflow: auto;
       /*max-height: 48vh;
       width: 42vw;
       max-width: 300px;*/
diff --git a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
index 4a51f0d2..02375bbd 100644
--- a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
+++ b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
@@ -39,7 +39,6 @@
 
 
     function color(i: number, volume: number) {
-        console.log(i, volume)
         const red = 255 * i / NB_BARS;
         const green = 255 * (1 - i / NB_BARS);
 

From cd482ef1d265934df803627fcd097c9b08bb2a5c Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 1 Jun 2021 16:29:49 +0200
Subject: [PATCH 035/141] correction following review by Kharhamel

---
 .../CustomCharacterScene.svelte               | 75 ++++++++-------
 .../EnableCamera/EnableCameraScene.svelte     |  4 +-
 .../HelpCameraSettingsPopup.svelte            | 40 ++++----
 front/src/Components/Login/LoginScene.svelte  | 93 ++++++++++---------
 .../SelectCompanionScene.svelte               | 61 ++++++------
 .../SelectCharacterScene.svelte               | 68 ++++++++------
 6 files changed, 185 insertions(+), 156 deletions(-)

diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
index 25f8ac93..e92b996e 100644
--- a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -1,10 +1,10 @@
 <script lang="typescript">
     import { Game } from "../../Phaser/Game/Game";
-    import { CustomizeScene } from "../../Phaser/Login/CustomizeScene";
+    import { CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
 
     export let game: Game;
 
-    const customCharacterScene = game.scene.scenes.find((scene) => scene instanceof CustomizeScene);
+    const customCharacterScene = game.scene.getScene(CustomizeSceneName);
     let activeRow = customCharacterScene.activeRow;
 
     function selectLeft() {
@@ -64,37 +64,46 @@
     font-family: "Press Start 2P";
     pointer-events: auto;
     color: #ebeeee;
-  }
-  .customCharacterScene button {
-    font-family: "Press Start 2P";
-  }
-  .customCharacterScene section {
-    margin: 10px;
-  }
-  .customCharacterScene section.action {
-    text-align: center;
-    margin-top: 55vh;
-  }
-  .customCharacterScene section h2 {
-    font-family: "Press Start 2P";
-    margin: 1px;
-  }
-  .customCharacterScene section.text-center{
-    text-align: center;
-  }
-  .customCharacterScene section button.customCharacterSceneButton{
-    position: absolute;
-    top: 33vh;
-    margin: 0;
-  }
-  .customCharacterScene section button.customCharacterSceneFormBack{
-    color: #292929;
-  }
-  .customCharacterScene button.customCharacterSceneButtonLeft{
-    left: 33vw;
-  }
-  .customCharacterScene button.customCharacterSceneButtonRight{
-    right: 33vw;
+
+    section {
+      margin: 10px;
+
+      &.action {
+        text-align: center;
+        margin-top: 55vh;
+      }
+
+      h2 {
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      button.customCharacterSceneButton {
+        position: absolute;
+        top: 33vh;
+        margin: 0;
+      }
+
+      button.customCharacterSceneFormBack {
+        color: #292929;
+      }
+    }
+
+    button {
+      font-family: "Press Start 2P";
+
+      &.customCharacterSceneButtonLeft {
+        left: 33vw;
+      }
+
+      &.customCharacterSceneButtonRight {
+        right: 33vw;
+      }
+    }
   }
 
   @media only screen and (max-width: 800px) {
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index f8b2867e..dafd021b 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -1,12 +1,12 @@
 <script lang="typescript">
     import {Game} from "../../Phaser/Game/Game";
-    import {EnableCameraScene} from "../../Phaser/Login/EnableCameraScene";
+    import {EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
     import {localStreamStore} from "../../Stores/MediaStore";
     import {onDestroy} from "svelte";
 
     export let game: Game;
 
-    const enableCameraScene = game.scene.scenes.find((scene) => scene instanceof EnableCameraScene);
+    const enableCameraScene = game.scene.getScene(EnableCameraSceneName);
 
     function submit() {
         enableCameraScene.login();
diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
index 7bf4dab0..5aa94cd5 100644
--- a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
+++ b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
@@ -38,7 +38,7 @@
 </form>
 
 
-<style>
+<style lang="scss">
     .helpCameraSettings {
         pointer-events: auto;
         background: #eceeee;
@@ -47,24 +47,26 @@
         margin-top: 10vh;
         max-height: 80vh;
         max-width: 80vw;
-        overflow: hidden;
+        overflow: auto;
         text-align: center;
-    }
-    .helpCameraSettings h2{
-        font-family: 'Press Start 2P';
-    }
-    .helpCameraSettings section {
-        margin: 10px;
-    }
-    .helpCameraSettings section p{
-        margin: 20px;
-        font-family: 'Press Start 2P';
-    }
-    .helpCameraSettings section p.err{
-        color: #ff0000;
-    }
-    .helpCameraSettings section img {
-        max-width: 500px;
-        width: 100%;
+
+        h2 {
+            font-family: 'Press Start 2P';
+        }
+
+        section {
+            p {
+                margin: 15px;
+                font-family: 'Press Start 2P';
+
+                & .err {
+                    color: #ff0000;
+                }
+            }
+            img {
+                max-width: 500px;
+                width: 100%;
+            }
+        }
     }
 </style>
diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte
index 594d086b..317841c2 100644
--- a/front/src/Components/Login/LoginScene.svelte
+++ b/front/src/Components/Login/LoginScene.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import {Game} from "../../Phaser/Game/Game";
-    import {LoginScene} from "../../Phaser/Login/LoginScene";
+    import {LoginSceneName} from "../../Phaser/Login/LoginScene";
     import {DISPLAY_TERMS_OF_USE, MAX_USERNAME_LENGTH} from "../../Enum/EnvironmentVariable";
     import logoImg from "../images/logo.png";
     import {gameManager} from "../../Phaser/Game/GameManager";
@@ -8,7 +8,7 @@
 
     export let game: Game;
 
-    const loginScene = game.scene.scenes.find((scene) => scene instanceof LoginScene);
+    const loginScene = game.scene.getScene(LoginSceneName);
 
     let name = gameManager.getPlayerName() || '';
     let startValidating = false;
@@ -49,7 +49,6 @@
 
 <style lang="scss">
   .loginScene {
-    font-family: "Press Start 2P";
     pointer-events: auto;
     margin: 20px auto 0;
     width: 90%;
@@ -69,52 +68,56 @@
       max-width: 400px;
     }
 
-    section.error-section {
-      min-height: 2rem;
-      margin: 0;
+    p.err {
+      color: #ce372b;
+      text-align: center;
+    }
+
+    section {
+      margin: 10px;
+
+      &.error-section {
+        min-height: 2rem;
+        margin: 0;
+
+        p {
+          margin: 0;
+        }
+      }
+
+      &.action {
+        text-align: center;
+        margin-top: 20px;
+      }
+
+      h2 {
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      a {
+        text-decoration: underline;
+        color: #ebeeee;
+      }
+
+      a:hover {
+        font-weight: 700;
+      }
 
       p {
-        margin: 0;
+        text-align: left;
+        margin: 10px 10px;
+      }
+
+      img {
+        width: 100%;
+        margin: 20px 0;
       }
     }
   }
 
-  .loginScene section {
-    margin: 10px;
-  }
-  .loginScene section.action{
-    text-align: center;
-    margin-top: 20px;
-  }
-  .loginScene section h2{
-    font-family: "Press Start 2P";
-    margin: 1px;
-  }
-  .loginScene section.text-center{
-    text-align: center;
-  }
-  .loginScene section a{
-    text-decoration: underline;
-    color: #ebeeee;
-  }
-  .loginScene section a:hover{
-    font-weight: 700;
-  }
-  .loginScene section p{
-    text-align: left;
-    margin: 10px 10px;
-  }
-  .loginScene p.err{
-    color: #ce372b;
-    text-align: center;
-  }
-  /*.loginScene section p.info{
-    display: none;
-    text-align: center;
-  }*/
-  .loginScene section img{
-    width: 100%;
-    margin: 20px 0;
-  }
-
 </style>
diff --git a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
index 9aaa0757..58207df6 100644
--- a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
+++ b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
@@ -1,10 +1,10 @@
 <script lang="typescript">
     import {Game} from "../../Phaser/Game/Game";
-    import {SelectCompanionScene} from "../../Phaser/Login/SelectCompanionScene";
+    import {SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
 
     export let game: Game;
 
-    const selectCompanionScene = game.scene.scenes.find((scene) => scene instanceof SelectCompanionScene);
+    const selectCompanionScene = game.scene.getScene(SelectCompanionSceneName);
 
     function selectLeft() {
         selectCompanionScene.moveToLeft();
@@ -40,31 +40,38 @@
     font-family: "Press Start 2P";
     pointer-events: auto;
     color: #ebeeee;
-  }
-  .selectCompanionScene section {
-    margin: 10px;
-  }
-  .selectCompanionScene section.action {
-    text-align: center;
-    margin-top: 55vh;
-  }
-  .selectCompanionScene section h2 {
-    font-family: "Press Start 2P";
-    margin: 1px;
-  }
-  .selectCompanionScene section.text-center{
-    text-align: center;
-  }
-  .selectCompanionScene section button.selectCharacterButton{
-    position: absolute;
-    top: 33vh;
-    margin: 0;
-  }
-  .selectCompanionScene button.selectCharacterButtonLeft{
-    left: 33vw;
-  }
-  .selectCompanionScene button.selectCharacterButtonRight{
-    right: 33vw;
+
+    section {
+      margin: 10px;
+
+      &.action {
+        text-align: center;
+        margin-top: 55vh;
+      }
+
+      h2 {
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      button.selectCharacterButton {
+        position: absolute;
+        top: 33vh;
+        margin: 0;
+      }
+    }
+
+    button.selectCharacterButtonLeft {
+      left: 33vw;
+    }
+
+    button.selectCharacterButtonRight {
+      right: 33vw;
+    }
   }
 
   @media only screen and (max-width: 800px) {
diff --git a/front/src/Components/selectCharacter/SelectCharacterScene.svelte b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
index 81fe2bc8..716f77ef 100644
--- a/front/src/Components/selectCharacter/SelectCharacterScene.svelte
+++ b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
@@ -1,10 +1,10 @@
 <script lang="typescript">
     import { Game } from "../../Phaser/Game/Game";
-    import { SelectCharacterScene } from "../../Phaser/Login/SelectCharacterScene";
+    import { SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
 
     export let game: Game;
 
-    const selectCharacterScene = game.scene.scenes.find((scene) => scene instanceof SelectCharacterScene);
+    const selectCharacterScene = game.scene.getScene(SelectCharacterSceneName);
 
     function selectLeft() {
         selectCharacterScene.moveToLeft();
@@ -41,34 +41,42 @@
     font-family: "Press Start 2P";
     pointer-events: auto;
     color: #ebeeee;
-  }
-  .selectCharacterScene button {
-    font-family: "Press Start 2P";
-  }
-  .selectCharacterScene section {
-    margin: 10px;
-  }
-  .selectCharacterScene section.action {
-    text-align: center;
-    margin-top: 55vh;
-  }
-  .selectCharacterScene section h2 {
-    font-family: "Press Start 2P";
-    margin: 1px;
-  }
-  .selectCharacterScene section.text-center{
-    text-align: center;
-  }
-  .selectCharacterScene section button.selectCharacterButton{
-    position: absolute;
-    top: 33vh;
-    margin: 0;
-  }
-  .selectCharacterScene button.selectCharacterButtonLeft{
-    left: 33vw;
-  }
-  .selectCharacterScene button.selectCharacterButtonRight{
-    right: 33vw;
+
+    section {
+      margin: 10px;
+
+      &.action {
+        text-align: center;
+        margin-top: 55vh;
+      }
+
+      h2 {
+        font-family: "Press Start 2P";
+        margin: 1px;
+      }
+
+      &.text-center {
+        text-align: center;
+      }
+
+      button.selectCharacterButton {
+        position: absolute;
+        top: 33vh;
+        margin: 0;
+      }
+    }
+
+    button {
+      font-family: "Press Start 2P";
+
+      &.selectCharacterButtonLeft {
+        left: 33vw;
+      }
+
+      &.selectCharacterButtonRight {
+        right: 33vw;
+      }
+    }
   }
 
   @media only screen and (max-width: 800px) {

From 9aeb18df379945bc225629b5ba594d6698c298e1 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 1 Jun 2021 16:36:13 +0200
Subject: [PATCH 036/141] correction following review by Kharhamel 2

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 5c06499c..be379033 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -1,7 +1,6 @@
 <script lang="typescript">
     import {Game} from "../../Phaser/Game/Game";
     import {EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
-    import {localStreamStore} from "../../Stores/MediaStore";
     import {
         audioConstraintStore,
         cameraListStore,

From b04c438d6f19472002b63a15d9e39b5d85379e47 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 16:43:16 +0200
Subject: [PATCH 037/141] Detect webcams unplugged

---
 front/src/Stores/MediaStore.ts | 56 +++++++++++++++++++++++++++++-----
 1 file changed, 48 insertions(+), 8 deletions(-)

diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index 51cba013..6d6fb4a8 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -209,10 +209,14 @@ function createVideoConstraintStore() {
 
     return {
         subscribe,
-        setDeviceId: (deviceId: string) => update((constraints) => {
-            constraints.deviceId = {
-                exact: deviceId
-            };
+        setDeviceId: (deviceId: string|undefined) => update((constraints) => {
+            if (deviceId !== undefined) {
+                constraints.deviceId = {
+                    exact: deviceId
+                };
+            } else {
+                delete constraints.deviceId;
+            }
 
             return constraints;
         }),
@@ -241,15 +245,19 @@ function createAudioConstraintStore() {
 
     return {
         subscribe,
-        setDeviceId: (deviceId: string) => update((constraints) => {
+        setDeviceId: (deviceId: string|undefined) => update((constraints) => {
             selectedDeviceId = deviceId;
 
             if (typeof(constraints) === 'boolean') {
                 constraints = {}
             }
-            constraints.deviceId = {
-                exact: selectedDeviceId
-            };
+            if (deviceId !== undefined) {
+                constraints.deviceId = {
+                    exact: selectedDeviceId
+                };
+            } else {
+                delete constraints.deviceId;
+            }
 
             return constraints;
         })
@@ -552,3 +560,35 @@ export const cameraListStore = derived(deviceListStore, ($deviceListStore) => {
 export const microphoneListStore = derived(deviceListStore, ($deviceListStore) => {
     return $deviceListStore.filter(device => device.kind === 'audioinput');
 });
+
+// TODO: detect the new webcam and automatically switch on it.
+cameraListStore.subscribe((devices) => {
+    // If the selected camera is unplugged, let's remove the constraint on deviceId
+    const constraints = get(videoConstraintStore);
+    if (!constraints.deviceId) {
+        return;
+    }
+
+    // If we cannot find the device ID, let's remove it.
+    // @ts-ignore
+    if (!devices.find(device => device.deviceId === constraints.deviceId.exact)) {
+        videoConstraintStore.setDeviceId(undefined);
+    }
+});
+
+microphoneListStore.subscribe((devices) => {
+    // If the selected camera is unplugged, let's remove the constraint on deviceId
+    const constraints = get(audioConstraintStore);
+    if (typeof constraints === 'boolean') {
+        return;
+    }
+    if (!constraints.deviceId) {
+        return;
+    }
+
+    // If we cannot find the device ID, let's remove it.
+    // @ts-ignore
+    if (!devices.find(device => device.deviceId === constraints.deviceId.exact)) {
+        audioConstraintStore.setDeviceId(undefined);
+    }
+});

From 9c9699d2d123ccbda9898773b6235e560e5958af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 17:07:56 +0200
Subject: [PATCH 038/141] Fixing absolute positioning of Svelte scenes

---
 front/src/Components/App.svelte               | 20 +++++++++++++++----
 .../EnableCamera/EnableCameraScene.svelte     |  4 +++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 343cb4fa..b80d7027 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -21,7 +21,7 @@
     export let game: Game;
 </script>
 
-<div>
+<div class="absolute-overlay">
     {#if $loginSceneVisibleStore}
         <LoginScene game={game}></LoginScene>
     {/if}
@@ -34,9 +34,6 @@
     {#if $selectCompanionSceneVisibleStore}
         <SelectCompanionScene game={ game }></SelectCompanionScene>
     {/if}
-    {#if $helpCameraSettingsVisibleStore}
-        <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
-    {/if}
     {#if $enableCameraSceneVisibilityStore}
         <EnableCameraScene game={game}></EnableCameraScene>
     {/if}
@@ -47,4 +44,19 @@
         <MyCamera></MyCamera>
         <CameraControls></CameraControls>
     {/if}
+    {#if $helpCameraSettingsVisibleStore}
+        <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+    {/if}
 </div>
+
+<style lang="scss">
+  .absolute-overlay {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+
+    > & {
+      position: relative;
+    }
+  }
+</style>
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index be379033..36e31cf6 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -132,11 +132,13 @@
 
 <style lang="scss">
     .enableCameraScene {
+      position: absolute;
+      width: 100vw;
+      height: 100vh;
       pointer-events: auto;
       /*background: #000000;*/
       margin: 20px auto 0;
       color: #ebeeee;
-      height: 100vh;
       overflow: auto;
       /*max-height: 48vh;
       width: 42vw;

From 22dff82bd38f7230fb04f98b1c31f0ea94d1bd35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 17:23:16 +0200
Subject: [PATCH 039/141] Adding back a transition on HelpCameraSettingsPopup

---
 .../HelpCameraSettings/HelpCameraSettingsPopup.svelte          | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
index 40a8c6ca..8f4de785 100644
--- a/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
+++ b/front/src/Components/HelpCameraSettings/HelpCameraSettingsPopup.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import { fly } from 'svelte/transition';
     import {helpCameraSettingsVisibleStore} from "../../Stores/HelpCameraSettingsStore";
     import firefoxImg from "./images/help-setting-camera-permission-firefox.png";
     import chromeImg from "./images/help-setting-camera-permission-chrome.png";
@@ -17,7 +18,7 @@
 
 </script>
 
-<form class="helpCameraSettings nes-container" on:submit|preventDefault={close}>
+<form class="helpCameraSettings nes-container" on:submit|preventDefault={close} transition:fly="{{ y: -900, duration: 500 }}">
     <section>
         <h2>Camera / Microphone access needed</h2>
         <p class="err">Permission denied</p>

From 2230f944106fc5e2f9480449cbf07969fe68680f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 17:59:00 +0200
Subject: [PATCH 040/141] Removed unused message warning

---
 front/src/Components/App.svelte       | 11 -----------
 front/style/index.scss                |  4 ++--
 front/style/{style.css => style.scss} | 10 ++++++++++
 3 files changed, 12 insertions(+), 13 deletions(-)
 rename front/style/{style.css => style.scss} (99%)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index b80d7027..f30b62b9 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -49,14 +49,3 @@
     {/if}
 </div>
 
-<style lang="scss">
-  .absolute-overlay {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-
-    > & {
-      position: relative;
-    }
-  }
-</style>
diff --git a/front/style/index.scss b/front/style/index.scss
index 47f13c3b..7ed141cd 100644
--- a/front/style/index.scss
+++ b/front/style/index.scss
@@ -1,5 +1,5 @@
 @import "cowebsite.scss";
 @import "cowebsite-mobile.scss";
-@import "style.css";
+@import "style";
 @import "mobile-style.scss";
-@import "fonts.scss";
\ No newline at end of file
+@import "fonts.scss";
diff --git a/front/style/style.css b/front/style/style.scss
similarity index 99%
rename from front/style/style.css
rename to front/style/style.scss
index 10a5fdad..78cfcc66 100644
--- a/front/style/style.css
+++ b/front/style/style.scss
@@ -1211,4 +1211,14 @@ div.action.danger p.action-body{
     width: 100%;
     height: 100%;
     pointer-events: none;
+
+    .absolute-overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+
+        & > * {
+            position: relative;
+        }
+    }
 }

From 96cd097af8a875487b4cbdae7099cc87d966ab9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 09:09:23 +0200
Subject: [PATCH 041/141] Fixing cam and controls position

---
 front/src/Components/App.svelte | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index f30b62b9..cba741fe 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -21,6 +21,11 @@
     export let game: Game;
 </script>
 
+<div>
+{#if $gameOverlayVisibilityStore}
+    <MyCamera></MyCamera>
+    <CameraControls></CameraControls>
+{/if}
 <div class="absolute-overlay">
     {#if $loginSceneVisibleStore}
         <LoginScene game={game}></LoginScene>
@@ -40,12 +45,8 @@
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->
-    {#if $gameOverlayVisibilityStore}
-        <MyCamera></MyCamera>
-        <CameraControls></CameraControls>
-    {/if}
     {#if $helpCameraSettingsVisibleStore}
         <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
     {/if}
 </div>
-
+</div>

From 9e35f96ce5284c9e6a7d5807ee72ac05315e8af7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 09:58:00 +0200
Subject: [PATCH 042/141] Fixing absolute/relative layouts of Svelte layers

---
 front/src/Components/App.svelte               | 47 ++++++++++------
 front/src/Components/CameraControls.svelte    | 44 +++++++--------
 .../EnableCamera/EnableCameraScene.svelte     | 54 ++++++++++++-------
 front/style/style.scss                        | 10 ++--
 4 files changed, 97 insertions(+), 58 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index cba741fe..d1a18f21 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -22,31 +22,48 @@
 </script>
 
 <div>
-{#if $gameOverlayVisibilityStore}
-    <MyCamera></MyCamera>
-    <CameraControls></CameraControls>
-{/if}
-<div class="absolute-overlay">
     {#if $loginSceneVisibleStore}
-        <LoginScene game={game}></LoginScene>
+        <div>
+            <LoginScene game={game}></LoginScene>
+        </div>
     {/if}
     {#if $selectCharacterSceneVisibleStore}
-        <SelectCharacterScene game={ game }></SelectCharacterScene>
+        <div>
+            <SelectCharacterScene game={ game }></SelectCharacterScene>
+        </div>
     {/if}
     {#if $customCharacterSceneVisibleStore}
-        <CustomCharacterScene game={ game }></CustomCharacterScene>
+        <div>
+           <CustomCharacterScene game={ game }></CustomCharacterScene>
+        </div>
     {/if}
     {#if $selectCompanionSceneVisibleStore}
-        <SelectCompanionScene game={ game }></SelectCompanionScene>
+        <div>
+            <SelectCompanionScene game={ game }></SelectCompanionScene>
+        </div>
     {/if}
     {#if $enableCameraSceneVisibilityStore}
-        <EnableCameraScene game={game}></EnableCameraScene>
+        <div>
+            <EnableCameraScene game={game}></EnableCameraScene>
+        </div>
+    {/if}
+
+    <!--
+    {#if $menuIconVisible}
+        <div>
+            <MenuIcon  />
+        </div>
+    {/if}
+    -->
+    {#if $gameOverlayVisibilityStore}
+        <div>
+            <MyCamera></MyCamera>
+            <CameraControls></CameraControls>
+        </div>
     {/if}
-    <!-- {#if $menuIconVisible}
-    <MenuIcon  />
-    {/if} -->
     {#if $helpCameraSettingsVisibleStore}
-        <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+        <div>
+            <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+        </div>
     {/if}
 </div>
-</div>
diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
index bd35d230..5c17a9fe 100644
--- a/front/src/Components/CameraControls.svelte
+++ b/front/src/Components/CameraControls.svelte
@@ -34,26 +34,28 @@
 
 </script>
 
-<div class="btn-cam-action">
-    <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
-        {#if $requestedScreenSharingState}
-            <img src={monitorImg} alt="Start screen sharing">
-        {:else}
-            <img src={monitorCloseImg} alt="Stop screen sharing">
-        {/if}
-    </div>
-    <div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState}>
-        {#if $requestedCameraState}
-            <img src={cinemaImg} alt="Turn on webcam">
-        {:else}
-            <img src={cinemaCloseImg} alt="Turn off webcam">
-        {/if}
-    </div>
-    <div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState}>
-        {#if $requestedMicrophoneState}
-            <img src={microphoneImg} alt="Turn on microphone">
-        {:else}
-            <img src={microphoneCloseImg} alt="Turn off microphone">
-        {/if}
+<div>
+    <div class="btn-cam-action">
+        <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
+            {#if $requestedScreenSharingState}
+                <img src={monitorImg} alt="Start screen sharing">
+            {:else}
+                <img src={monitorCloseImg} alt="Stop screen sharing">
+            {/if}
+        </div>
+        <div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState}>
+            {#if $requestedCameraState}
+                <img src={cinemaImg} alt="Turn on webcam">
+            {:else}
+                <img src={cinemaCloseImg} alt="Turn off webcam">
+            {/if}
+        </div>
+        <div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState}>
+            {#if $requestedMicrophoneState}
+                <img src={microphoneImg} alt="Turn on microphone">
+            {:else}
+                <img src={microphoneCloseImg} alt="Turn off microphone">
+            {/if}
+        </div>
     </div>
 </div>
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 36e31cf6..b5b2748a 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -11,6 +11,8 @@
     import {onDestroy} from "svelte";
     import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte";
     import cinemaCloseImg from "../images/cinema-close.svg";
+    import cinemaImg from "../images/cinema.svg";
+    import microphoneImg from "../images/microphone.svg";
 
     export let game: Game;
     let selectedCamera : string|null = null;
@@ -86,27 +88,33 @@
     <section class="selectWebcamForm">
 
         {#if $cameraListStore.length > 1 }
-        <div class="nes-select">
-            <select bind:value={selectedCamera} on:change={selectCamera}>
-                {#each $cameraListStore as camera}
-                    <option value={camera.deviceId}>
-                        {normalizeDeviceName(camera.label)}
-                    </option>
-                {/each}
-            </select>
-        </div>
+            <div class="control-group">
+                <img src={cinemaImg} alt="Camera" />
+                <div class="nes-select">
+                    <select bind:value={selectedCamera} on:change={selectCamera}>
+                        {#each $cameraListStore as camera}
+                            <option value={camera.deviceId}>
+                                {normalizeDeviceName(camera.label)}
+                            </option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
         {/if}
 
         {#if $microphoneListStore.length > 1 }
-        <div class="nes-select">
-            <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
-                {#each $microphoneListStore as microphone}
-                    <option value={microphone.deviceId}>
-                        {normalizeDeviceName(microphone.label)}
-                    </option>
-                {/each}
-            </select>
-        </div>
+            <div class="control-group">
+                <img src={microphoneImg} alt="Microphone" />
+                <div class="nes-select">
+                    <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
+                        {#each $microphoneListStore as microphone}
+                            <option value={microphone.deviceId}>
+                                {normalizeDeviceName(microphone.label)}
+                            </option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
         {/if}
 
     </section>
@@ -190,6 +198,16 @@
         font-size: 200%;
       }
 
+      .control-group {
+        display: flex;
+        flex-direction: row;
+
+        img {
+          width: 30px;
+          margin-right: 10px;
+        }
+      }
+
       .webrtcsetup{
         /*position: absolute;
         top: 140px;
diff --git a/front/style/style.scss b/front/style/style.scss
index 78cfcc66..ef3df5c5 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -1212,13 +1212,15 @@ div.action.danger p.action-body{
     height: 100%;
     pointer-events: none;
 
-    .absolute-overlay {
-        position: absolute;
+    & > div {
+        position: relative;
         width: 100%;
         height: 100%;
 
-        & > * {
-            position: relative;
+        & > div {
+            position: absolute;
+            width: 100%;
+            height: 100%;
         }
     }
 }

From ea576477cdb21383598ae0778b51430a68ec8c92 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Wed, 2 Jun 2021 09:58:34 +0200
Subject: [PATCH 043/141] Border on videocam in enable camera scene

---
 front/src/Components/App.svelte               | 52 +++++++-------
 .../EnableCamera/EnableCameraScene.svelte     | 71 +++++--------------
 2 files changed, 45 insertions(+), 78 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index cba741fe..6bf45e82 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -22,31 +22,31 @@
 </script>
 
 <div>
-{#if $gameOverlayVisibilityStore}
-    <MyCamera></MyCamera>
-    <CameraControls></CameraControls>
-{/if}
-<div class="absolute-overlay">
-    {#if $loginSceneVisibleStore}
-        <LoginScene game={game}></LoginScene>
-    {/if}
-    {#if $selectCharacterSceneVisibleStore}
-        <SelectCharacterScene game={ game }></SelectCharacterScene>
-    {/if}
-    {#if $customCharacterSceneVisibleStore}
-        <CustomCharacterScene game={ game }></CustomCharacterScene>
-    {/if}
-    {#if $selectCompanionSceneVisibleStore}
-        <SelectCompanionScene game={ game }></SelectCompanionScene>
-    {/if}
-    {#if $enableCameraSceneVisibilityStore}
-        <EnableCameraScene game={game}></EnableCameraScene>
-    {/if}
-    <!-- {#if $menuIconVisible}
-    <MenuIcon  />
-    {/if} -->
-    {#if $helpCameraSettingsVisibleStore}
-        <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+    {#if $gameOverlayVisibilityStore}
+        <MyCamera></MyCamera>
+        <CameraControls></CameraControls>
     {/if}
-</div>
+    <div class="absolute-overlay">
+        {#if $loginSceneVisibleStore}
+            <LoginScene game={game}></LoginScene>
+        {/if}
+        {#if $selectCharacterSceneVisibleStore}
+            <SelectCharacterScene game={ game }></SelectCharacterScene>
+        {/if}
+        {#if $customCharacterSceneVisibleStore}
+            <CustomCharacterScene game={ game }></CustomCharacterScene>
+        {/if}
+        {#if $selectCompanionSceneVisibleStore}
+            <SelectCompanionScene game={ game }></SelectCompanionScene>
+        {/if}
+        {#if $enableCameraSceneVisibilityStore}
+            <EnableCameraScene game={game}></EnableCameraScene>
+        {/if}
+        <!-- {#if $menuIconVisible}
+        <MenuIcon  />
+        {/if} -->
+        {#if $helpCameraSettingsVisibleStore}
+            <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+        {/if}
+    </div>
 </div>
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 36e31cf6..ddb31b1d 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -77,10 +77,13 @@
     <section class="text-center">
         <h2>Turn on your camera and microphone</h2>
     </section>
-    <div id="webRtcSetup" class="webrtcsetup">
-        <img class="background-img" src={cinemaCloseImg} alt="" class:hide={$localStreamStore.stream}>
-        <video id="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted  class:hide={!$localStreamStore.stream}></video>
-    </div>
+        {#if $localStreamStore.stream}
+            <video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted></video>
+        {:else }
+            <div class="webrtcsetup">
+                <img class="background-img" src={cinemaCloseImg} alt="">
+            </div>
+        {/if}
     <HorizontalSoundMeterWidget stream={stream}></HorizontalSoundMeterWidget>
 
     <section class="selectWebcamForm">
@@ -110,21 +113,6 @@
         {/if}
 
     </section>
-
-
-    <!--<section class="text-center">
-        <video id="myCamVideoSetup" autoplay muted></video>
-    </section>
-    <section class="text-center">
-        <h5>Select your camera</h3>
-        <select id="camera">
-        </select>
-    </section>
-    <section class="text-center">
-        <h5>Select your michrophone</h3>
-        <select id="michrophone">
-        </select>
-    </section>-->
     <section class="action">
         <button type="submit" class="nes-btn is-primary letsgo" >Let's go!</button>
     </section>
@@ -132,23 +120,10 @@
 
 <style lang="scss">
     .enableCameraScene {
-      position: absolute;
-      width: 100vw;
-      height: 100vh;
       pointer-events: auto;
-      /*background: #000000;*/
       margin: 20px auto 0;
       color: #ebeeee;
       overflow: auto;
-      /*max-height: 48vh;
-      width: 42vw;
-      max-width: 300px;*/
-
-      /*section.title {
-        position: absolute;
-        top: 1vh;
-        width: 100%;
-      }*/
 
       section.selectWebcamForm {
         margin-top: 3vh;
@@ -172,8 +147,6 @@
       section.action{
         text-align: center;
         margin: 0;
-        /*position: absolute;
-        top: 85vh;*/
         width: 100%;
       }
 
@@ -191,10 +164,6 @@
       }
 
       .webrtcsetup{
-        /*position: absolute;
-        top: 140px;
-        left: 0;
-        right: 0;*/
         margin-top: 2vh;
         margin-left: auto;
         margin-right: auto;
@@ -207,23 +176,21 @@
         justify-content: center;
 
         img.background-img {
-          /*position: relative;*/
-          /*display: block;*/
           width: 40%;
-          /*height: 60%;*/
-          /*top: 50%;*/
-          /*transform: translateY(-50%);*/
-        }
-
-        .hide {
-          display: none;
         }
       }
-      #myCamVideoSetup {
-          width: 100%;
-          height: 100%;
-          -webkit-transform: scaleX(-1);
-          transform: scaleX(-1);
+      .myCamVideoSetup {
+        margin-top: 2vh;
+        margin-left: auto;
+        margin-right: auto;
+        width: 50vw;
+        border: white 6px solid;
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
 
 

From 3f20d5b0d1ce3e1a3b98d1b86db5c000d8fbf8ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 10:14:33 +0200
Subject: [PATCH 044/141] Trying to fix cam size in portrait and overflow

---
 front/style/style.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/front/style/style.scss b/front/style/style.scss
index ef3df5c5..9cb139d8 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -151,6 +151,7 @@ body .message-info.warning{
 }
 
 video.myCamVideo{
+    max-height: 20vh;
     width: 15vw;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
@@ -1221,6 +1222,7 @@ div.action.danger p.action-body{
             position: absolute;
             width: 100%;
             height: 100%;
+            overflow: auto;
         }
     }
 }

From 321fc3184a1e334ee90f3af15bdce2328f926585 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 10:44:36 +0200
Subject: [PATCH 045/141] Fixing scrollability of enable camera scene page

---
 front/src/Components/App.svelte                            | 4 ++--
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 1 -
 front/style/style.scss                                     | 7 ++++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index d1a18f21..5e2b88ee 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -23,7 +23,7 @@
 
 <div>
     {#if $loginSceneVisibleStore}
-        <div>
+        <div class="scrollable">
             <LoginScene game={game}></LoginScene>
         </div>
     {/if}
@@ -43,7 +43,7 @@
         </div>
     {/if}
     {#if $enableCameraSceneVisibilityStore}
-        <div>
+        <div class="scrollable">
             <EnableCameraScene game={game}></EnableCameraScene>
         </div>
     {/if}
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 9d75c8ca..9cbd2c25 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -131,7 +131,6 @@
       pointer-events: auto;
       margin: 20px auto 0;
       color: #ebeeee;
-      overflow: auto;
 
       section.selectWebcamForm {
         margin-top: 3vh;
diff --git a/front/style/style.scss b/front/style/style.scss
index 9cb139d8..44002850 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -1222,7 +1222,12 @@ div.action.danger p.action-body{
             position: absolute;
             width: 100%;
             height: 100%;
-            overflow: auto;
+        }
+
+        & > div.scrollable {
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+            pointer-events: auto;
         }
     }
 }

From 5bd524504492d9d808c6e2fb58136e1c81ea638b Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Wed, 2 Jun 2021 12:00:35 +0200
Subject: [PATCH 046/141] SelectCharacterScene and CustomCharacterScene mobile
 version

---
 .../CustomCharacterScene/CustomCharacterScene.svelte      | 8 ++++----
 .../selectCharacter/SelectCharacterScene.svelte           | 8 ++++----
 front/src/Enum/EnvironmentVariable.ts                     | 2 +-
 front/src/Phaser/Login/CustomizeScene.ts                  | 2 --
 front/src/Phaser/Login/SelectCharacterScene.ts            | 5 ++---
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
index e92b996e..f9e3a66b 100644
--- a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -107,11 +107,11 @@
   }
 
   @media only screen and (max-width: 800px) {
-    .customCharacterScene button.customCharacterSceneButtonLeft{
-      left: 10vw;
+    form.customCharacterScene button.customCharacterSceneButtonLeft{
+      left: 5vw;
     }
-    .customCharacterScene button.customCharacterSceneButtonRight{
-      right: 10vw;
+    form.customCharacterScene button.customCharacterSceneButtonRight{
+      right: 5vw;
     }
   }
 
diff --git a/front/src/Components/selectCharacter/SelectCharacterScene.svelte b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
index 716f77ef..e227771c 100644
--- a/front/src/Components/selectCharacter/SelectCharacterScene.svelte
+++ b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
@@ -80,11 +80,11 @@
   }
 
   @media only screen and (max-width: 800px) {
-    .selectCharacterScene button.selectCharacterButtonLeft{
-      left: 10vw;
+    form.selectCharacterScene button.selectCharacterButtonLeft{
+      left: 5vw;
     }
-    .selectCharacterScene button.selectCharacterButtonRight{
-      right: 10vw;
+    form.selectCharacterScene button.selectCharacterButtonRight{
+      right: 5vw;
     }
   }
 
diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts
index 91e75187..73f6427c 100644
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@@ -16,7 +16,7 @@ export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '
 export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || '4');
 export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == 'true';
 
-export const isMobile = ():boolean => false;//( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
+export const isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
 
 export {
     DEBUG_MODE,
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 1715983b..b0a9f00a 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -242,7 +242,6 @@ export class CustomizeScene extends AbstractCharacterScene {
 
             gameManager.setCharacterLayers(layers);
             this.scene.sleep(CustomizeSceneName);
-            this.scene.remove(SelectCharacterSceneName);
             gameManager.tryResumingGame(this, EnableCameraSceneName);
             customCharacterSceneVisibleStore.set(false);
     }
@@ -251,6 +250,5 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.scene.sleep(CustomizeSceneName);
         this.scene.run(SelectCharacterSceneName);
         customCharacterSceneVisibleStore.set(false);
-        selectCharacterSceneVisibleStore.set(true);
     }
 }
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 5133aab6..8c79e51b 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -52,6 +52,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     create() {
         selectCharacterSceneVisibleStore.set(true);
+        this.events.addListener('wake', () => {selectCharacterSceneVisibleStore.set(true);});
 
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
@@ -63,7 +64,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
         /*create user*/
         this.createCurrentPlayer();
-        const playerNumber = localUserStore.getPlayerCharacterIndex();
 
         this.input.keyboard.on('keyup-ENTER', () => {
             return this.nextSceneToCameraScene();
@@ -93,7 +93,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.scene.stop(SelectCharacterSceneName);
         gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
-        this.scene.remove(SelectCharacterSceneName);
+        this.players = [];
         selectCharacterSceneVisibleStore.set(false);
     }
 
@@ -128,7 +128,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             });
             this.players.push(player);
         }
-
         this.selectedPlayer = this.players[this.currentSelectUser];
         this.selectedPlayer.play(this.playerModels[this.currentSelectUser].name);
     }

From 395d66e648df27f09a045ab498b3e2dfd9d61737 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 12:27:46 +0200
Subject: [PATCH 047/141] Putting grey background under video
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: David Négrier <d.negrier@thecodingmachine.com>
---
 front/style/style.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/front/style/style.scss b/front/style/style.scss
index 44002850..883f63bb 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -135,6 +135,7 @@ body .message-info.warning{
 
 .video-container.div-myCamVideo{
     border: none;
+    background-color: transparent;
 }
 
 .div-myCamVideo {
@@ -151,6 +152,7 @@ body .message-info.warning{
 }
 
 video.myCamVideo{
+    background-color: #00000099;
     max-height: 20vh;
     width: 15vw;
     -webkit-transform: scaleX(-1);

From 3d9e2ad49aa39cbd8edd984da25a232e3dafcec5 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Wed, 2 Jun 2021 16:08:31 +0200
Subject: [PATCH 048/141] Save zoom level of the game and restore it when
 quitting the login scenes SelectCompanionScene with zoom on mobile

---
 .../SelectCompanion/SelectCompanionScene.svelte  |  8 ++++----
 front/src/Phaser/Login/CustomizeScene.ts         | 16 ++++++++++------
 .../Phaser/Login/SelectCharacterMobileScene.ts   |  3 +++
 front/src/Phaser/Login/SelectCharacterScene.ts   | 10 ++++++----
 front/src/Phaser/Login/SelectCompanionScene.ts   |  7 +++++++
 front/src/Phaser/Services/WaScaleManager.ts      | 10 ++++++++++
 6 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
index 58207df6..205a18ee 100644
--- a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
+++ b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
@@ -75,11 +75,11 @@
   }
 
   @media only screen and (max-width: 800px) {
-    .selectCompanionScene button.selectCharacterButtonLeft{
-      left: 10vw;
+    form.selectCompanionScene button.selectCharacterButtonLeft{
+      left: 5vw;
     }
-    .selectCompanionScene button.selectCharacterButtonRight{
-      right: 10vw;
+    form.selectCompanionScene button.selectCharacterButtonRight{
+      right: 5vw;
     }
   }
 
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index b0a9f00a..a10d2e07 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -13,6 +13,8 @@ import { MenuScene } from "../Menu/MenuScene";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
 import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
+import {waScaleManager} from "../Services/WaScaleManager";
+import {isMobile} from "../../Enum/EnvironmentVariable";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -52,11 +54,16 @@ export class CustomizeScene extends AbstractCharacterScene {
         addLoader(this);
     }
 
-    create() {
+    create(data: { from: string; }) {
         customCharacterSceneVisibleStore.set(true);
-
         this.events.addListener('wake', () => { customCharacterSceneVisibleStore.set(true); });
 
+        if (data.from === 'NoScene') {
+            //Save the zoom level only if the previous scene didn't already save it
+            waScaleManager.saveZoom();
+        }
+        waScaleManager.zoomModifier = isMobile() ? 2 : 1;
+
         this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
         this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
         this.add.existing(this.Rectangle);
@@ -214,10 +221,6 @@ export class CustomizeScene extends AbstractCharacterScene {
                 this.containersRow[i][j].add(children);
             }
         }
-    }
-
-    update(time: number, delta: number): void {
-
     }
 
      public onResize(): void {
@@ -242,6 +245,7 @@ export class CustomizeScene extends AbstractCharacterScene {
 
             gameManager.setCharacterLayers(layers);
             this.scene.sleep(CustomizeSceneName);
+            waScaleManager.restoreZoom();
             gameManager.tryResumingGame(this, EnableCameraSceneName);
             customCharacterSceneVisibleStore.set(false);
     }
diff --git a/front/src/Phaser/Login/SelectCharacterMobileScene.ts b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
index 635e0b75..b6371eab 100644
--- a/front/src/Phaser/Login/SelectCharacterMobileScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
@@ -1,9 +1,12 @@
 import { SelectCharacterScene } from "./SelectCharacterScene";
+import {waScaleManager} from "../Services/WaScaleManager";
 
 export class SelectCharacterMobileScene extends SelectCharacterScene {
 
     create(){
         super.create();
+        waScaleManager.zoomModifier = 2;
+        this.onResize();
         this.selectedRectangle.destroy();
     }
 
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 8c79e51b..34373b57 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -13,6 +13,7 @@ import {PinchManager} from "../UserInput/PinchManager";
 import {MenuScene} from "../Menu/MenuScene";
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
+import {waScaleManager} from "../Services/WaScaleManager";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -58,6 +59,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             new PinchManager(this);
         }
 
+        waScaleManager.saveZoom();
+        waScaleManager.zoomModifier = 1;
+
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
         this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
         this.selectedRectangle.setDepth(2);
@@ -91,6 +95,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             return;
         }
         this.scene.stop(SelectCharacterSceneName);
+        waScaleManager.restoreZoom();
         gameManager.setCharacterLayers([this.selectedPlayer.texture.key]);
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.players = [];
@@ -102,7 +107,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             return;
         }
         this.scene.sleep(SelectCharacterSceneName);
-        this.scene.run(CustomizeSceneName);
+        this.scene.run(CustomizeSceneName, {from: 'SelectCharacter'});
         selectCharacterSceneVisibleStore.set(false);
     }
 
@@ -223,9 +228,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
     }
 
-    update(time: number, delta: number): void {
-    }
-
     public onResize(): void {
         //move position of user
         this.moveUser();
diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts
index 6efbbaea..9caa88f7 100644
--- a/front/src/Phaser/Login/SelectCompanionScene.ts
+++ b/front/src/Phaser/Login/SelectCompanionScene.ts
@@ -11,6 +11,8 @@ import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
 import { MenuScene } from "../Menu/MenuScene";
 import {selectCompanionSceneVisibleStore} from "../../Stores/SelectCompanionStore";
+import {waScaleManager} from "../Services/WaScaleManager";
+import {isMobile} from "../../Enum/EnvironmentVariable";
 
 export const SelectCompanionSceneName = "SelectCompanionScene";
 
@@ -18,6 +20,7 @@ export class SelectCompanionScene extends ResizableScene {
     private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
     private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
     private companionModels: Array<CompanionResourceDescriptionInterface> = [];
+    private saveZoom: number = 0;
 
     private currentCompanion = 0;
 
@@ -40,6 +43,9 @@ export class SelectCompanionScene extends ResizableScene {
 
         selectCompanionSceneVisibleStore.set(true);
 
+        waScaleManager.saveZoom();
+        waScaleManager.zoomModifier = isMobile() ? 2 : 1;
+
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
@@ -79,6 +85,7 @@ export class SelectCompanionScene extends ResizableScene {
     public closeScene(){
         // next scene
         this.scene.stop(SelectCompanionSceneName);
+        waScaleManager.restoreZoom();
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.scene.remove(SelectCompanionSceneName);
         selectCompanionSceneVisibleStore.set(false);
diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index 8ca4ad20..acbecc38 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -10,6 +10,7 @@ class WaScaleManager {
     private scaleManager!: ScaleManager;
     private game!: Game;
     private actualZoom: number = 1;
+    private _saveZoom: number = 1;
 
     public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) {
         this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber);
@@ -57,6 +58,15 @@ class WaScaleManager {
         this.applyNewSize();
     }
 
+    public saveZoom(): void {
+        this._saveZoom = this.hdpiManager.zoomModifier;
+    }
+
+    public restoreZoom(): void{
+        this.hdpiManager.zoomModifier = this._saveZoom;
+        this.applyNewSize();
+    }
+
     /**
      * This is used to scale back the ui components to counter-act the zoom.
      */

From 267d0a2cd12d15d38c25ff26c69d475408336194 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 16:46:28 +0200
Subject: [PATCH 049/141] Moving audio message to Svelte

---
 front/dist/index.tmpl.html                    |  3 --
 .../Administration/GlobalMessageManager.ts    | 43 ++-------------
 front/src/Components/App.svelte               |  7 +++
 front/src/Components/Login/LoginScene.svelte  |  2 +-
 front/src/Components/UI/AudioPlaying.svelte   | 53 +++++++++++++++++++
 front/src/Components/UI/images/megaphone.svg  | 18 +++++++
 front/src/Phaser/Game/GameScene.ts            |  2 +-
 front/src/Phaser/Game/SoundManager.ts         |  4 +-
 front/src/Stores/SoundPlayingStore.ts         | 22 ++++++++
 front/style/style.scss                        | 29 ----------
 front/webpack.config.ts                       |  1 +
 11 files changed, 110 insertions(+), 74 deletions(-)
 create mode 100644 front/src/Components/UI/AudioPlaying.svelte
 create mode 100644 front/src/Components/UI/images/megaphone.svg
 create mode 100644 front/src/Stores/SoundPlayingStore.ts

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 279609e8..7f541145 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -87,9 +87,6 @@
                     <div id="audioplayer" style="visibility: hidden"></div>
                 </div>
             </div>
-            <div class="audio-playing">
-                <img src="/resources/logos/megaphone.svg" />
-            </div>
         </div>
 
         <div id="activeScreenSharing" class="active-screen-sharing active">
diff --git a/front/src/Administration/GlobalMessageManager.ts b/front/src/Administration/GlobalMessageManager.ts
index 95364e4c..1500a6ec 100644
--- a/front/src/Administration/GlobalMessageManager.ts
+++ b/front/src/Administration/GlobalMessageManager.ts
@@ -3,6 +3,8 @@ import {AUDIO_TYPE, MESSAGE_TYPE} from "./ConsoleGlobalMessageManager";
 import {PUSHER_URL, UPLOADER_URL} from "../Enum/EnvironmentVariable";
 import type {RoomConnection} from "../Connexion/RoomConnection";
 import type {PlayGlobalMessageInterface} from "../Connexion/ConnexionModels";
+import {soundPlayingStore} from "../Stores/SoundPlayingStore";
+import {soundManager} from "../Phaser/Game/SoundManager";
 
 export class GlobalMessageManager {
 
@@ -43,45 +45,8 @@ export class GlobalMessageManager {
         }
     }
 
-    private playAudioMessage(messageId : string, urlMessage: string){
-        //delete previous elements
-        const previousDivAudio = document.getElementsByClassName('audio-playing');
-        for(let i = 0; i < previousDivAudio.length; i++){
-            previousDivAudio[i].remove();
-        }
-
-        //create new element
-        const divAudio : HTMLDivElement = document.createElement('div');
-        divAudio.id = `audio-playing-${messageId}`;
-        divAudio.classList.add('audio-playing');
-        const imgAudio : HTMLImageElement = document.createElement('img');
-        imgAudio.src = '/resources/logos/megaphone.svg';
-        const pAudio : HTMLParagraphElement = document.createElement('p');
-        pAudio.textContent = 'Message audio'
-        divAudio.appendChild(imgAudio);
-        divAudio.appendChild(pAudio);
-
-        const mainSectionDiv = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
-        mainSectionDiv.appendChild(divAudio);
-
-        const messageAudio : HTMLAudioElement = document.createElement('audio');
-        messageAudio.id = this.getHtmlMessageId(messageId);
-        messageAudio.autoplay = true;
-        messageAudio.style.display = 'none';
-        messageAudio.onended = () => {
-            divAudio.classList.remove('active');
-            messageAudio.remove();
-            setTimeout(() => {
-                divAudio.remove();
-            }, 1000);
-        }
-        messageAudio.onplay = () => {
-            divAudio.classList.add('active');
-        }
-        const messageAudioSource : HTMLSourceElement = document.createElement('source');
-        messageAudioSource.src = `${UPLOADER_URL}${urlMessage}`;
-        messageAudio.appendChild(messageAudioSource);
-        mainSectionDiv.appendChild(messageAudio);
+    private playAudioMessage(messageId : string, urlMessage: string) {
+        soundPlayingStore.playSound(UPLOADER_URL + urlMessage);
     }
 
     private playTextMessage(messageId : string, htmlMessage: string){
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 5e2b88ee..97cb5071 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -17,6 +17,8 @@
     import {Game} from "../Phaser/Game/Game";
     import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
+    import AudioPlaying from "./UI/AudioPlaying.svelte";
+    import {soundPlayingStore} from "../Stores/SoundPlayingStore";
 
     export let game: Game;
 </script>
@@ -47,6 +49,11 @@
             <EnableCameraScene game={game}></EnableCameraScene>
         </div>
     {/if}
+    {#if $soundPlayingStore}
+    <div>
+        <AudioPlaying url={$soundPlayingStore} />
+    </div>
+    {/if}
 
     <!--
     {#if $menuIconVisible}
diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte
index 317841c2..dbe3daaf 100644
--- a/front/src/Components/Login/LoginScene.svelte
+++ b/front/src/Components/Login/LoginScene.svelte
@@ -30,7 +30,7 @@
     <section class="text-center">
         <h2>Enter your name</h2>
     </section>
-    <input type="text" name="loginSceneName" class="nes-input is-dark" maxlength={MAX_USERNAME_LENGTH} bind:value={name} on:keypress={() => {startValidating = true}} class:is-error={name.trim() === '' && startValidating} />
+    <input type="text" name="loginSceneName" class="nes-input is-dark" autofocus maxlength={MAX_USERNAME_LENGTH} bind:value={name} on:keypress={() => {startValidating = true}} class:is-error={name.trim() === '' && startValidating} />
     <section class="error-section">
     {#if name.trim() === '' && startValidating }
         <p class="err">The name is empty</p>
diff --git a/front/src/Components/UI/AudioPlaying.svelte b/front/src/Components/UI/AudioPlaying.svelte
new file mode 100644
index 00000000..1001c5b2
--- /dev/null
+++ b/front/src/Components/UI/AudioPlaying.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+    import megaphoneImg from "./images/megaphone.svg";
+    import {soundPlayingStore} from "../../Stores/SoundPlayingStore";
+    import {afterUpdate, onMount} from "svelte";
+
+    export let url: string;
+    let audio: HTMLAudioElement;
+
+    function soundEnded() {
+        soundPlayingStore.soundEnded();
+    }
+
+    afterUpdate(() => {
+        audio.play();
+    });
+</script>
+
+<div class="audio-playing">
+    <img src={megaphoneImg} alt="Audio playing" />
+    <p>Audio message</p>
+    <audio bind:this={audio} src={url} on:ended={soundEnded} >
+        <track kind="captions">
+    </audio>
+</div>
+
+<style lang="scss">
+  /*audio html when audio message playing*/
+ .audio-playing {
+    position: absolute;
+    width: 200px;
+    height: 54px;
+    /*right: -210px;*/
+    right: 0;
+    top: 40px;
+    transition: all 0.1s ease-out;
+    background-color: black;
+    border-radius: 30px 0 0 30px;
+    display: inline-flex;
+
+    img {
+      /*width: 30px;*/
+      border-radius: 50%;
+      background-color: #ffda01;
+      padding: 10px;
+    }
+
+    p {
+      color: white;
+      margin-left: 10px;
+      margin-top: 14px;
+    }
+  }
+</style>
diff --git a/front/src/Components/UI/images/megaphone.svg b/front/src/Components/UI/images/megaphone.svg
new file mode 100644
index 00000000..708f860c
--- /dev/null
+++ b/front/src/Components/UI/images/megaphone.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 451.7 512" style="enable-background:new 0 0 451.7 512;" xml:space="preserve">
+<path d="M436.9,212.6L237.2,12.9c-11.7-11.7-30.7-11.7-42.4,0s-11.7,30.7,0,42.4L394.5,255c11.5,11.9,30.5,12.2,42.4,0.7
+	c11.9-11.5,12.2-30.5,0.7-42.4C437.4,213.1,437.2,212.8,436.9,212.6z"/>
+<path d="M179.5,83.1l-1.5,7.5c-10.4,53-36,103.4-70.6,144.3l109,108.3c40.7-34.9,90.2-61.5,143.1-72.3l7.5-1.5L179.5,83.1z"/>
+<path d="M87.4,257l-74.2,74.2c-17.6,17.6-17.6,46.1,0,63.6c0,0,0,0,0,0l42.4,42.4c17.6,17.6,46.1,17.6,63.6,0c0,0,0,0,0,0l74.2-74.2
+	L87.4,257z M98,373.7c-6.1,5.6-15.6,5.3-21.2-0.8c-5.4-5.8-5.4-14.7,0-20.5l21.2-21.2c6-5.8,15.5-5.6,21.2,0.4
+	c5.6,5.8,5.6,15,0,20.8L98,373.7z"/>
+<path d="M256.1,445.3l20.4-20.4c17.6-17.6,17.6-46.1,0-63.6l-15.1-15.2c-8.4,5.7-16.4,11.7-24.2,18.3l18.1,18.1
+	c5.8,5.9,5.8,15.3,0,21.2l-20.7,20.8l-30.5-29.5l-42.4,42.4l68.1,65.9c11.7,11.7,30.7,11.7,42.4,0c11.7-11.7,11.7-30.7,0-42.4l0,0
+	L256.1,445.3z"/>
+<path d="M316.7,0c-8.3,0-15,6.7-15,15v30c0,8.3,6.7,15,15,15c8.3,0,15-6.7,15-15V15C331.7,6.7,325,0,316.7,0z"/>
+<path d="M436.7,120h-30c-8.3,0-15,6.7-15,15s6.7,15,15,15h30c8.3,0,15-6.7,15-15S445,120,436.7,120z"/>
+<path d="M417.3,34.4c-5.9-5.9-15.4-5.9-21.2,0l-30,30c-6,5.8-6.1,15.3-0.4,21.2c5.8,6,15.3,6.1,21.2,0.4c0.1-0.1,0.2-0.2,0.4-0.4
+	l30-30C423.2,49.7,423.2,40.2,417.3,34.4z"/>
+</svg>
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 10a038ba..fff6912c 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -280,7 +280,7 @@ export class GameScene extends DirtyScene implements CenterListener {
         this.load.spritesheet('layout_modes', 'resources/objects/layout_modes.png', {frameWidth: 32, frameHeight: 32});
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
         //eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (this.load as any).rexWebFont({ 
+        (this.load as any).rexWebFont({
             custom: {
                 families: ['Press Start 2P'],
                 urls: ['/resources/fonts/fonts.css'],
diff --git a/front/src/Phaser/Game/SoundManager.ts b/front/src/Phaser/Game/SoundManager.ts
index f0210494..47614fca 100644
--- a/front/src/Phaser/Game/SoundManager.ts
+++ b/front/src/Phaser/Game/SoundManager.ts
@@ -17,7 +17,9 @@ class SoundManager {
                 return res(sound);
             }
             loadPlugin.audio(soundUrl, soundUrl);
-            loadPlugin.once('filecomplete-audio-' + soundUrl, () => res(soundManager.add(soundUrl)));
+            loadPlugin.once('filecomplete-audio-' + soundUrl, () => {
+                res(soundManager.add(soundUrl));
+            });
             loadPlugin.start();
         });
         this.soundPromises.set(soundUrl,soundPromise);
diff --git a/front/src/Stores/SoundPlayingStore.ts b/front/src/Stores/SoundPlayingStore.ts
new file mode 100644
index 00000000..cf1d681c
--- /dev/null
+++ b/front/src/Stores/SoundPlayingStore.ts
@@ -0,0 +1,22 @@
+import { writable } from "svelte/store";
+
+/**
+ * A store that contains the URL of the sound currently playing
+ */
+function createSoundPlayingStore() {
+    const { subscribe, set, update } = writable<string|null>(null);
+
+    return {
+        subscribe,
+        playSound: (url: string) => {
+            set(url);
+        },
+        soundEnded: () => {
+            set(null);
+        }
+
+
+    };
+}
+
+export const soundPlayingStore = createSoundPlayingStore();
diff --git a/front/style/style.scss b/front/style/style.scss
index 883f63bb..f43fb240 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -810,35 +810,6 @@ input[type=range]:focus::-ms-fill-upper {
 }
 
 
-
-/*audio html when audio message playing*/
-.main-container .audio-playing {
-    position: absolute;
-    width: 200px;
-    height: 54px;
-    right: -210px;
-    top: 40px;
-    transition: all 0.1s ease-out;
-    background-color: black;
-    border-radius: 30px 0 0 30px;
-    display: inline-flex;
-}
-
-.main-container .audio-playing.active{
-    right: 0;
-}
-.main-container .audio-playing img{
-    /*width: 30px;*/
-    border-radius: 50%;
-    background-color: #ffda01;
-    padding: 10px;
-}
-.main-container .audio-playing p{
-    color: white;
-    margin-left: 10px;
-    margin-top: 14px;
-}
-
 /* VIDEO QUALITY */
 .main-console div.setting h1{
     color: white;
diff --git a/front/webpack.config.ts b/front/webpack.config.ts
index 5ff37028..3a69b74a 100644
--- a/front/webpack.config.ts
+++ b/front/webpack.config.ts
@@ -94,6 +94,7 @@ module.exports = {
                             // See https://github.com/sveltejs/svelte/issues/4946#issuecomment-662168782
 
                             if (warning.code === 'a11y-no-onchange') { return }
+                            if (warning.code === 'a11y-autofocus') { return }
 
                             // process as usual
                             handleWarning(warning);

From d43633e936448bc44740ebdb3f21164c2a135ebe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 16:52:25 +0200
Subject: [PATCH 050/141] Added an animation when audio message played

---
 front/src/Components/UI/AudioPlaying.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/src/Components/UI/AudioPlaying.svelte b/front/src/Components/UI/AudioPlaying.svelte
index 1001c5b2..a2c6d321 100644
--- a/front/src/Components/UI/AudioPlaying.svelte
+++ b/front/src/Components/UI/AudioPlaying.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { fly } from 'svelte/transition';
     import megaphoneImg from "./images/megaphone.svg";
     import {soundPlayingStore} from "../../Stores/SoundPlayingStore";
     import {afterUpdate, onMount} from "svelte";
@@ -15,7 +16,7 @@
     });
 </script>
 
-<div class="audio-playing">
+<div class="audio-playing" transition:fly="{{ x: 210, duration: 500 }}">
     <img src={megaphoneImg} alt="Audio playing" />
     <p>Audio message</p>
     <audio bind:this={audio} src={url} on:ended={soundEnded} >
@@ -29,7 +30,6 @@
     position: absolute;
     width: 200px;
     height: 54px;
-    /*right: -210px;*/
     right: 0;
     top: 40px;
     transition: all 0.1s ease-out;

From 100198b55c2d6276f0df46d1c2caa14331d17b86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 17:58:58 +0200
Subject: [PATCH 051/141] Using "standardized-audio-context" to fix
 compatibility of AudioContext with Safari.

---
 front/package.json                            |  3 +-
 .../HorizontalSoundMeterWidget.svelte         |  1 +
 front/src/Components/SoundMeterWidget.svelte  |  1 +
 front/src/Components/UI/AudioPlaying.svelte   |  1 -
 front/src/Phaser/Components/SoundMeter.ts     | 65 ++-----------------
 front/yarn.lock                               | 31 ++++++++-
 6 files changed, 41 insertions(+), 61 deletions(-)

diff --git a/front/package.json b/front/package.json
index 6cf0ee97..1c938195 100644
--- a/front/package.json
+++ b/front/package.json
@@ -46,7 +46,8 @@
     "quill": "1.3.6",
     "rxjs": "^6.6.3",
     "simple-peer": "^9.6.2",
-    "socket.io-client": "^2.3.0"
+    "socket.io-client": "^2.3.0",
+    "standardized-audio-context": "^25.2.4"
   },
   "scripts": {
     "start": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
diff --git a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
index 02375bbd..e7f721c1 100644
--- a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
+++ b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import { AudioContext } from 'standardized-audio-context';
     import {SoundMeter} from "../../Phaser/Components/SoundMeter";
     import {onDestroy} from "svelte";
 
diff --git a/front/src/Components/SoundMeterWidget.svelte b/front/src/Components/SoundMeterWidget.svelte
index 7acb10db..d96b9681 100644
--- a/front/src/Components/SoundMeterWidget.svelte
+++ b/front/src/Components/SoundMeterWidget.svelte
@@ -1,4 +1,5 @@
 <script lang="typescript">
+    import { AudioContext } from 'standardized-audio-context';
     import {SoundMeter} from "../Phaser/Components/SoundMeter";
     import {onDestroy} from "svelte";
 
diff --git a/front/src/Components/UI/AudioPlaying.svelte b/front/src/Components/UI/AudioPlaying.svelte
index a2c6d321..8889ac52 100644
--- a/front/src/Components/UI/AudioPlaying.svelte
+++ b/front/src/Components/UI/AudioPlaying.svelte
@@ -38,7 +38,6 @@
     display: inline-flex;
 
     img {
-      /*width: 30px;*/
       border-radius: 50%;
       background-color: #ffda01;
       padding: 10px;
diff --git a/front/src/Phaser/Components/SoundMeter.ts b/front/src/Phaser/Components/SoundMeter.ts
index b60fb514..53802d31 100644
--- a/front/src/Phaser/Components/SoundMeter.ts
+++ b/front/src/Phaser/Components/SoundMeter.ts
@@ -1,3 +1,5 @@
+import type {IAnalyserNode, IAudioContext, IMediaStreamAudioSourceNode} from 'standardized-audio-context';
+
 /**
  * Class to measure the sound volume of a media stream
  */
@@ -5,10 +7,10 @@ export class SoundMeter {
     private instant: number;
     private clip: number;
     //private script: ScriptProcessorNode;
-    private analyser: AnalyserNode|undefined;
+    private analyser: IAnalyserNode<IAudioContext>|undefined;
     private dataArray: Uint8Array|undefined;
-    private context: AudioContext|undefined;
-    private source: MediaStreamAudioSourceNode|undefined;
+    private context: IAudioContext|undefined;
+    private source: IMediaStreamAudioSourceNode<IAudioContext>|undefined;
 
     constructor() {
         this.instant = 0.0;
@@ -16,7 +18,7 @@ export class SoundMeter {
         //this.script = context.createScriptProcessor(2048, 1, 1);
     }
 
-    private init(context: AudioContext) {
+    private init(context: IAudioContext) {
         this.context = context;
         this.analyser = this.context.createAnalyser();
 
@@ -25,7 +27,7 @@ export class SoundMeter {
         this.dataArray = new Uint8Array(bufferLength);
     }
 
-    public connectToSource(stream: MediaStream, context: AudioContext): void
+    public connectToSource(stream: MediaStream, context: IAudioContext): void
     {
         if (this.source !== undefined) {
             this.stop();
@@ -85,56 +87,3 @@ export class SoundMeter {
 
 }
 
-
-// Meter class that generates a number correlated to audio volume.
-// The meter class itself displays nothing, but it makes the
-// instantaneous and time-decaying volumes available for inspection.
-// It also reports on the fraction of samples that were at or near
-// the top of the measurement range.
-/*function SoundMeter(context) {
-    this.context = context;
-    this.instant = 0.0;
-    this.slow = 0.0;
-    this.clip = 0.0;
-    this.script = context.createScriptProcessor(2048, 1, 1);
-    const that = this;
-    this.script.onaudioprocess = function(event) {
-        const input = event.inputBuffer.getChannelData(0);
-        let i;
-        let sum = 0.0;
-        let clipcount = 0;
-        for (i = 0; i < input.length; ++i) {
-            sum += input[i] * input[i];
-            if (Math.abs(input[i]) > 0.99) {
-                clipcount += 1;
-            }
-        }
-        that.instant = Math.sqrt(sum / input.length);
-        that.slow = 0.95 * that.slow + 0.05 * that.instant;
-        that.clip = clipcount / input.length;
-    };
-}
-
-SoundMeter.prototype.connectToSource = function(stream, callback) {
-    console.log('SoundMeter connecting');
-    try {
-        this.mic = this.context.createMediaStreamSource(stream);
-        this.mic.connect(this.script);
-        // necessary to make sample run, but should not be.
-        this.script.connect(this.context.destination);
-        if (typeof callback !== 'undefined') {
-            callback(null);
-        }
-    } catch (e) {
-        console.error(e);
-        if (typeof callback !== 'undefined') {
-            callback(e);
-        }
-    }
-};
-
-SoundMeter.prototype.stop = function() {
-    this.mic.disconnect();
-    this.script.disconnect();
-};
-*/
diff --git a/front/yarn.lock b/front/yarn.lock
index 180c82bf..d8ee0caa 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -30,6 +30,13 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/runtime@^7.14.0":
+  version "7.14.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
+  integrity sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@discoveryjs/json-ext@^0.5.0":
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.3.tgz#90420f9f9c6d3987f176a19a7d8e764271a2f55d"
@@ -778,6 +785,14 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+automation-events@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/automation-events/-/automation-events-4.0.1.tgz#93acef8a457cbea65f16fdcef8f349fd2fafe298"
+  integrity sha512-8bQx+PVtNDMD5F2H40cQs7oexZve3Z0xC9fWRQT4fltF65f/WsSpjM4jpulL4K4yLLB71oi4/xVJJCJ5I/Kjbw==
+  dependencies:
+    "@babel/runtime" "^7.14.0"
+    tslib "^2.2.0"
+
 available-typed-arrays@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.2.tgz#6b098ca9d8039079ee3f77f7b783c4480ba513f5"
@@ -4318,6 +4333,11 @@ rechoir@^0.7.0:
   dependencies:
     resolve "^1.9.0"
 
+regenerator-runtime@^0.13.4:
+  version "0.13.7"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
+  integrity sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==
+
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -4882,6 +4902,15 @@ sprintf-js@~1.0.2:
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
   integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
 
+standardized-audio-context@^25.2.4:
+  version "25.2.4"
+  resolved "https://registry.yarnpkg.com/standardized-audio-context/-/standardized-audio-context-25.2.4.tgz#d64dbdd70615171ec90d1b7151a0d945af94cf3d"
+  integrity sha512-uQKZXRnXrPVO1V6SwZ7PiV3RkQqRY3n7i6Q8nbTXYvoz8NftRNzfOIlwefpuC8LVLUUs9dhbKTpP+WOA82dkBw==
+  dependencies:
+    "@babel/runtime" "^7.14.0"
+    automation-events "^4.0.1"
+    tslib "^2.2.0"
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -5212,7 +5241,7 @@ tslib@^1.8.1, tslib@^1.9.0:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3:
+tslib@^2.0.3, tslib@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
   integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==

From 59d60f54fe22161787fe07460e21f0b2ef822ca9 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Wed, 2 Jun 2021 18:01:36 +0200
Subject: [PATCH 052/141] Save zoom level in the gameScene and restore it after
 the SelectCharacterScene and CustomizeScene

---
 front/src/Phaser/Login/CustomizeScene.ts      | 19 ++++++++++---------
 .../Login/SelectCharacterMobileScene.ts       |  2 --
 .../src/Phaser/Login/SelectCharacterScene.ts  | 18 ++++++++++++++----
 front/src/Phaser/Services/WaScaleManager.ts   |  1 +
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index a10d2e07..88dc80c2 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -29,8 +29,6 @@ export class CustomizeScene extends AbstractCharacterScene {
     public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
-    private customizeSceneElement!: Phaser.GameObjects.DOMElement;
-
     constructor() {
         super({
             key: CustomizeSceneName
@@ -54,15 +52,16 @@ export class CustomizeScene extends AbstractCharacterScene {
         addLoader(this);
     }
 
-    create(data: { from: string; }) {
+    create() {
         customCharacterSceneVisibleStore.set(true);
-        this.events.addListener('wake', () => { customCharacterSceneVisibleStore.set(true); });
-
-        if (data.from === 'NoScene') {
-            //Save the zoom level only if the previous scene didn't already save it
+        this.events.addListener('wake', () => {
             waScaleManager.saveZoom();
-        }
-        waScaleManager.zoomModifier = isMobile() ? 2 : 1;
+            waScaleManager.zoomModifier = isMobile() ? 3 : 1;
+            customCharacterSceneVisibleStore.set(true);
+        });
+
+        waScaleManager.saveZoom();
+        waScaleManager.zoomModifier = isMobile() ? 3 : 1;
 
         this.Rectangle = this.add.rectangle(this.cameras.main.worldView.x + this.cameras.main.width / 2, this.cameras.main.worldView.y + this.cameras.main.height / 3, 32, 33)
         this.Rectangle.setStrokeStyle(2, 0xFFFFFF);
@@ -246,12 +245,14 @@ export class CustomizeScene extends AbstractCharacterScene {
             gameManager.setCharacterLayers(layers);
             this.scene.sleep(CustomizeSceneName);
             waScaleManager.restoreZoom();
+            this.events.removeListener('wake');
             gameManager.tryResumingGame(this, EnableCameraSceneName);
             customCharacterSceneVisibleStore.set(false);
     }
 
     private backToPreviousScene(){
         this.scene.sleep(CustomizeSceneName);
+        waScaleManager.restoreZoom();
         this.scene.run(SelectCharacterSceneName);
         customCharacterSceneVisibleStore.set(false);
     }
diff --git a/front/src/Phaser/Login/SelectCharacterMobileScene.ts b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
index b6371eab..0d8e49d5 100644
--- a/front/src/Phaser/Login/SelectCharacterMobileScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterMobileScene.ts
@@ -1,11 +1,9 @@
 import { SelectCharacterScene } from "./SelectCharacterScene";
-import {waScaleManager} from "../Services/WaScaleManager";
 
 export class SelectCharacterMobileScene extends SelectCharacterScene {
 
     create(){
         super.create();
-        waScaleManager.zoomModifier = 2;
         this.onResize();
         this.selectedRectangle.destroy();
     }
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 34373b57..8d614957 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -14,6 +14,7 @@ import {MenuScene} from "../Menu/MenuScene";
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
 import {waScaleManager} from "../Services/WaScaleManager";
+import {isMobile} from "../../Enum/EnvironmentVariable";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
@@ -30,6 +31,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
     protected currentSelectUser = 0;
+    protected pointerClicked: boolean = false;
 
     constructor() {
         super({
@@ -53,14 +55,18 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     create() {
         selectCharacterSceneVisibleStore.set(true);
-        this.events.addListener('wake', () => {selectCharacterSceneVisibleStore.set(true);});
+        this.events.addListener('wake', () => {
+            waScaleManager.saveZoom();
+            waScaleManager.zoomModifier = isMobile() ? 2 : 1;
+            selectCharacterSceneVisibleStore.set(true);
+        });
 
         if (touchScreenManager.supportTouchScreen) {
             new PinchManager(this);
         }
 
         waScaleManager.saveZoom();
-        waScaleManager.zoomModifier = 1;
+        waScaleManager.zoomModifier = isMobile() ? 2 : 1;
 
         const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
         this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
@@ -100,6 +106,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         gameManager.tryResumingGame(this, EnableCameraSceneName);
         this.players = [];
         selectCharacterSceneVisibleStore.set(false);
+        this.events.removeListener('wake');
     }
 
     protected nextSceneToCustomizeScene(): void {
@@ -107,7 +114,8 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             return;
         }
         this.scene.sleep(SelectCharacterSceneName);
-        this.scene.run(CustomizeSceneName, {from: 'SelectCharacter'});
+        waScaleManager.restoreZoom();
+        this.scene.run(CustomizeSceneName);
         selectCharacterSceneVisibleStore.set(false);
     }
 
@@ -125,11 +133,13 @@ export class SelectCharacterScene extends AbstractCharacterScene {
                 repeat: -1
             });
             player.setInteractive().on("pointerdown", () => {
-                if(this.currentSelectUser === i){
+                if (this.pointerClicked || this.currentSelectUser === i) {
                     return;
                 }
+                this.pointerClicked = true;
                 this.currentSelectUser = i;
                 this.moveUser();
+                setTimeout(() => {this.pointerClicked = false;}, 100);
             });
             this.players.push(player);
         }
diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index acbecc38..4e0e9208 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -60,6 +60,7 @@ class WaScaleManager {
 
     public saveZoom(): void {
         this._saveZoom = this.hdpiManager.zoomModifier;
+        console.log(this._saveZoom);
     }
 
     public restoreZoom(): void{

From 918a37173e8a412d8afe4dc415050f7177538b68 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 3 Jun 2021 08:10:49 +0000
Subject: [PATCH 053/141] Bump ws from 6.2.1 to 6.2.2 in /front

Bumps [ws](https://github.com/websockets/ws) from 6.2.1 to 6.2.2.
- [Release notes](https://github.com/websockets/ws/releases)
- [Commits](https://github.com/websockets/ws/commits)

---
updated-dependencies:
- dependency-name: ws
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 front/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/yarn.lock b/front/yarn.lock
index d8ee0caa..f422713a 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -5650,9 +5650,9 @@ wrappy@1:
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
 ws@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.1.tgz#442fdf0a47ed64f59b6a5d8ff130f4748ed524fb"
-  integrity sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"
+  integrity sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==
   dependencies:
     async-limiter "~1.0.0"
 

From 25f4adc7ad8537dadfca41c1a432f13e8ae9a4e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 10:17:38 +0200
Subject: [PATCH 054/141] Fixing Safari on MacOS compatibility

The null safe operator is not recognized and was not encoded by Webpack in Svelte expressions (inside {})

+ The Notification API of Safari is old and broken and we need to account for that.
---
 .../HorizontalSoundMeterWidget.svelte         |  6 ++++-
 front/src/Components/SoundMeterWidget.svelte  |  6 ++++-
 front/src/WebRtc/MediaManager.ts              | 26 ++++++++++++++++---
 3 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
index e7f721c1..84352ebb 100644
--- a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
+++ b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
@@ -10,9 +10,11 @@
 
     let timeout;
     const soundMeter = new SoundMeter();
+    let display = false;
 
     $: {
         if (stream && stream.getAudioTracks().length > 0) {
+            display = true;
             soundMeter.connectToSource(stream, new AudioContext());
 
             if (timeout) {
@@ -28,6 +30,8 @@
                 }
             }, 100);
 
+        } else {
+            display = false;
         }
     }
 
@@ -53,7 +57,7 @@
 </script>
 
 
-<div class="horizontal-sound-meter" class:active={stream?.getAudioTracks().length > 0}>
+<div class="horizontal-sound-meter" class:active={display}>
     {#each [...Array(NB_BARS).keys()] as i}
         <div style={color(i, volume)}></div>
     {/each}
diff --git a/front/src/Components/SoundMeterWidget.svelte b/front/src/Components/SoundMeterWidget.svelte
index d96b9681..40c467b1 100644
--- a/front/src/Components/SoundMeterWidget.svelte
+++ b/front/src/Components/SoundMeterWidget.svelte
@@ -10,9 +10,11 @@
 
     let timeout;
     const soundMeter = new SoundMeter();
+    let display = false;
 
     $: {
         if (stream && stream.getAudioTracks().length > 0) {
+            display = true;
             soundMeter.connectToSource(stream, new AudioContext());
 
             if (timeout) {
@@ -28,6 +30,8 @@
                 }
             }, 100);
 
+        } else {
+            display = false;
         }
     }
 
@@ -40,7 +44,7 @@
 </script>
 
 
-<div class="sound-progress" class:active={stream?.getAudioTracks().length > 0}>
+<div class="sound-progress" class:active={display}>
     <span class:active={volume > 1}></span>
     <span class:active={volume > 2}></span>
     <span class:active={volume > 3}></span>
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 180b5746..7b527962 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -440,12 +440,32 @@ export class MediaManager {
     public getNotification(){
         //Get notification
         if (!DISABLE_NOTIFICATIONS && window.Notification && Notification.permission !== "granted") {
-            Notification.requestPermission().catch((err) => {
-                console.error(`Notification permission error`, err);
-            });
+            if (this.checkNotificationPromise()) {
+                Notification.requestPermission().catch((err) => {
+                    console.error(`Notification permission error`, err);
+                });
+            } else {
+                Notification.requestPermission();
+            }
         }
     }
 
+    /**
+     * Return true if the browser supports the modern version of the Notification API (which is Promise based) or false
+     * if we are on Safari...
+     *
+     * See https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API
+     */
+    private checkNotificationPromise(): boolean {
+        try {
+            Notification.requestPermission().then();
+        } catch(e) {
+            return false;
+        }
+
+        return true;
+    }
+
     public createNotification(userName: string){
         if(this.focused){
             return;

From b8ffe5038c40dd7da5efef7bc27a18680099c4da Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Wed, 2 Jun 2021 15:35:20 +0200
Subject: [PATCH 055/141] FIX: on a touch screen, the menu emote will not open
 if more than one pointer is used

---
 front/src/Phaser/Components/MobileJoystick.ts |  4 ++--
 front/src/Phaser/Game/GameScene.ts            | 10 ++++------
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/front/src/Phaser/Components/MobileJoystick.ts b/front/src/Phaser/Components/MobileJoystick.ts
index 46efcbc2..b3fc021b 100644
--- a/front/src/Phaser/Components/MobileJoystick.ts
+++ b/front/src/Phaser/Components/MobileJoystick.ts
@@ -28,13 +28,13 @@ export class MobileJoystick extends VirtualJoystick {
         this.visible = false;
         this.enable = false;
 
-        this.scene.input.on('pointerdown', (pointer: { x: number; y: number; wasTouch: boolean; event: TouchEvent }) => {
+        this.scene.input.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
             if (!pointer.wasTouch) {
                 return;
             }
 
             // Let's only display the joystick if there is one finger on the screen
-            if (pointer.event.touches.length === 1) {
+            if ((pointer.event as TouchEvent).touches.length === 1) {
                 this.x = pointer.x;
                 this.y = pointer.y;
                 this.visible = true;
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index fff6912c..2de7747f 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -228,11 +228,6 @@ export class GameScene extends DirtyScene implements CenterListener {
             this.load.image(joystickBaseKey, joystickBaseImg);
             this.load.image(joystickThumbKey, joystickThumbImg);
         }
-        //todo: in an emote manager.
-        this.load.spritesheet('emote-music', 'resources/emotes/pipo-popupemotes005.png', {
-            frameHeight: 32,
-            frameWidth: 32,
-        });
         this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
             // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
             if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
@@ -1156,7 +1151,10 @@ ${escapedMessage}
                 this.companion,
                 this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
             );
-            this.CurrentPlayer.on('pointerdown', () => {
+            this.CurrentPlayer.on('pointerdown', (pointer: Phaser.Input.Pointer) => {
+                if (pointer.wasTouch && (pointer.event as TouchEvent).touches.length > 1) {
+                    return; //we don't want the menu to open when pinching on a touch screen.
+                }
                 this.emoteManager.getMenuImages().then((emoteMenuElements) => this.CurrentPlayer.openOrCloseEmoteMenu(emoteMenuElements))
             })
             this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {

From 8bcfc3cbee18ae0416fbb5fa8217b00d08d547c6 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Thu, 3 Jun 2021 10:30:53 +0200
Subject: [PATCH 056/141] Max height on EnableCameraScene

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 9cbd2c25..80b1756d 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -200,6 +200,7 @@
         margin-top: 2vh;
         margin-left: auto;
         margin-right: auto;
+        max-height: 50vh;
         width: 50vw;
         border: white 6px solid;
         -webkit-transform: scaleX(-1);

From eb6cfdf53d74dbd7e1352abb57760575e85ca1e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 10:39:30 +0200
Subject: [PATCH 057/141] Fixing missing early return if webcam not available

---
 front/src/Stores/MediaStore.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index 6d6fb4a8..dafdffc4 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -418,6 +418,7 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
                 error: new Error('Unable to access your camera or microphone. You need to use a HTTPS connection.'),
                 constraints
             });
+            return;
         } else {
             //throw new Error('Unable to access your camera or microphone. Your browser is too old.');
             set({
@@ -425,6 +426,7 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
                 error: new Error('Unable to access your camera or microphone. Your browser is too old.'),
                 constraints
             });
+            return;
         }
     }
 

From 5f562f49c3d16af5c14651b58963037944e6bd97 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 10:49:12 +0200
Subject: [PATCH 058/141] Improving error message

---
 front/src/Stores/MediaStore.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index dafdffc4..7d1911a4 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -423,7 +423,7 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
             //throw new Error('Unable to access your camera or microphone. Your browser is too old.');
             set({
                 type: 'error',
-                error: new Error('Unable to access your camera or microphone. Your browser is too old.'),
+                error: new Error('Unable to access your camera or microphone. Your browser is too old. Please consider upgrading your browser or try using a recent version of Chrome.'),
                 constraints
             });
             return;

From 4fd453ec05d6cacbb9ae7cabc8e8634c38954d62 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Thu, 3 Jun 2021 12:02:58 +0200
Subject: [PATCH 059/141] playsinline on video

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 80b1756d..07c45d26 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -19,6 +19,8 @@
     let selectedMicrophone : string|null = null;
 
     const enableCameraScene = game.scene.getScene(EnableCameraSceneName);
+    var video = document.getElementById("myCamVideoSetup");
+    video.setAttribute("playsinline", 'true');
 
     function submit() {
         enableCameraScene.login();

From 2b13b764b4fd2517e63463e1fdc64e95e7121676 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?gr=C3=A9goire=20parant?= <g.parant@thecodingmachine.com>
Date: Thu, 3 Jun 2021 13:07:52 +0200
Subject: [PATCH 060/141] Public texture (#1093)

* Public texture

 - Front => Get texture when user connected on public method
 - Front => Anonymous login will be make every connexion to get map details
 - Pusher => `/anonymLogin` permit to get map details and public texture load in customize scene

* Improve texture local user

- Permit to keep previous texture get with 'register' link

* Texture public loading

 - Texture will be load with Room class
 - Fix issue on lazzy loading atttempt

* Remove async await useless
---
 front/src/Connexion/ConnectionManager.ts      | 36 ++++++++++++++++---
 front/src/Connexion/LocalUser.ts              |  2 +-
 front/src/Connexion/Room.ts                   | 19 ++++++----
 front/src/Phaser/Game/GameManager.ts          |  4 +--
 front/src/Phaser/Login/CustomizeScene.ts      | 16 ++++++++-
 .../src/Phaser/Login/SelectCharacterScene.ts  | 13 ++++++-
 .../src/Controller/AuthenticateController.ts  |  4 +--
 7 files changed, 75 insertions(+), 19 deletions(-)

diff --git a/front/src/Connexion/ConnectionManager.ts b/front/src/Connexion/ConnectionManager.ts
index 932fb1fc..8112ba17 100644
--- a/front/src/Connexion/ConnectionManager.ts
+++ b/front/src/Connexion/ConnectionManager.ts
@@ -4,7 +4,7 @@ import {RoomConnection} from "./RoomConnection";
 import type {OnConnectInterface, PositionInterface, ViewportInterface} from "./ConnexionModels";
 import {GameConnexionTypes, urlManager} from "../Url/UrlManager";
 import {localUserStore} from "./LocalUserStore";
-import {LocalUser} from "./LocalUser";
+import {CharacterTexture, LocalUser} from "./LocalUser";
 import {Room} from "./Room";
 
 
@@ -46,8 +46,8 @@ class ConnectionManager {
             urlManager.pushRoomIdToUrl(room);
             return Promise.resolve(room);
         } else if (connexionType === GameConnexionTypes.organization || connexionType === GameConnexionTypes.anonymous || connexionType === GameConnexionTypes.empty) {
-            const localUser = localUserStore.getLocalUser();
 
+            let localUser = localUserStore.getLocalUser();
             if (localUser && localUser.jwtToken && localUser.uuid && localUser.textures) {
                 this.localUser = localUser;
                 try {
@@ -57,16 +57,42 @@ class ConnectionManager {
                     console.error('JWT token invalid. Did it expire? Login anonymously instead.');
                     await this.anonymousLogin();
                 }
-            } else {
+            }else{
                 await this.anonymousLogin();
             }
-            let roomId: string
+
+            localUser = localUserStore.getLocalUser();
+            if(!localUser){
+                throw "Error to store local user data";
+            }
+
+            let roomId: string;
             if (connexionType === GameConnexionTypes.empty) {
                 roomId = START_ROOM_URL;
             } else {
                 roomId = window.location.pathname + window.location.search + window.location.hash;
             }
-            return Promise.resolve(new Room(roomId));
+
+            //get detail map for anonymous login and set texture in local storage
+            const room = new Room(roomId);
+            const mapDetail = await room.getMapDetail();
+            if(mapDetail.textures != undefined && mapDetail.textures.length > 0) {
+                //check if texture was changed
+                if(localUser.textures.length === 0){
+                    localUser.textures = mapDetail.textures;
+                }else{
+                    mapDetail.textures.forEach((newTexture) => {
+                        const alreadyExistTexture = localUser?.textures.find((c) => newTexture.id === c.id);
+                        if(localUser?.textures.findIndex((c) => newTexture.id === c.id) !== -1){
+                            return;
+                        }
+                        localUser?.textures.push(newTexture)
+                    });
+                }
+                this.localUser = localUser;
+                localUserStore.saveUser(localUser);
+            }
+            return Promise.resolve(room);
         }
 
         return Promise.reject(new Error('Invalid URL'));
diff --git a/front/src/Connexion/LocalUser.ts b/front/src/Connexion/LocalUser.ts
index f5a4ac2a..c877d119 100644
--- a/front/src/Connexion/LocalUser.ts
+++ b/front/src/Connexion/LocalUser.ts
@@ -24,6 +24,6 @@ export function areCharacterLayersValid(value: string[] | null): boolean {
 }
 
 export class LocalUser {
-    constructor(public readonly uuid:string, public readonly jwtToken: string, public readonly textures: CharacterTexture[]) {
+    constructor(public readonly uuid:string, public readonly jwtToken: string, public textures: CharacterTexture[]) {
     }
 }
diff --git a/front/src/Connexion/Room.ts b/front/src/Connexion/Room.ts
index 05d94440..3ae8d2ed 100644
--- a/front/src/Connexion/Room.ts
+++ b/front/src/Connexion/Room.ts
@@ -1,10 +1,17 @@
 import Axios from "axios";
 import {PUSHER_URL} from "../Enum/EnvironmentVariable";
+import type {CharacterTexture} from "./LocalUser";
+
+export class MapDetail{
+    constructor(public readonly mapUrl: string, public readonly textures : CharacterTexture[]|undefined) {
+    }
+}
 
 export class Room {
     public readonly id: string;
     public readonly isPublic: boolean;
     private mapUrl: string|undefined;
+    private textures: CharacterTexture[]|undefined;
     private instance: string|undefined;
     private _search: URLSearchParams;
 
@@ -50,10 +57,10 @@ export class Room {
         return {roomId, hash}
     }
 
-    public async getMapUrl(): Promise<string> {
-        return new Promise<string>((resolve, reject) => {
-            if (this.mapUrl !== undefined) {
-                resolve(this.mapUrl);
+    public async getMapDetail(): Promise<MapDetail> {
+        return new Promise<MapDetail>((resolve, reject) => {
+            if (this.mapUrl !== undefined && this.textures != undefined) {
+                resolve(new MapDetail(this.mapUrl, this.textures));
                 return;
             }
 
@@ -61,7 +68,7 @@ export class Room {
                 const match = /_\/[^/]+\/(.+)/.exec(this.id);
                 if (!match) throw new Error('Could not extract url from "'+this.id+'"');
                 this.mapUrl = window.location.protocol+'//'+match[1];
-                resolve(this.mapUrl);
+                resolve(new MapDetail(this.mapUrl, this.textures));
                 return;
             } else {
                 // We have a private ID, we need to query the map URL from the server.
@@ -71,7 +78,7 @@ export class Room {
                     params: urlParts
                 }).then(({data}) => {
                     console.log('Map ', this.id, ' resolves to URL ', data.mapUrl);
-                    resolve(data.mapUrl);
+                    resolve(data);
                     return;
                 }).catch((reason) => {
                     reject(reason);
diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index 8c38a626..cd2575c0 100644
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/front/src/Phaser/Game/GameManager.ts
@@ -78,11 +78,11 @@ export class GameManager {
 
     public async loadMap(room: Room, scenePlugin: Phaser.Scenes.ScenePlugin): Promise<void> {
         const roomID = room.id;
-        const mapUrl = await room.getMapUrl();
+        const mapDetail = await room.getMapDetail();
 
         const gameIndex = scenePlugin.getIndex(roomID);
         if(gameIndex === -1){
-            const game : Phaser.Scene = new GameScene(room, mapUrl);
+            const game : Phaser.Scene = new GameScene(room, mapDetail.mapUrl);
             scenePlugin.add(roomID, game, false);
         }
     }
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 88dc80c2..3d85cdd5 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -29,6 +29,8 @@ export class CustomizeScene extends AbstractCharacterScene {
     public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
+    protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
+
     constructor() {
         super({
             key: CustomizeSceneName
@@ -38,7 +40,6 @@ export class CustomizeScene extends AbstractCharacterScene {
     preload() {
         this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
 
-        this.layers = loadAllLayers(this.load);
         this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
                 if(bodyResourceDescription.level == undefined || bodyResourceDescription.level < 0 || bodyResourceDescription.level > 5 ){
@@ -46,8 +47,13 @@ export class CustomizeScene extends AbstractCharacterScene {
                 }
                 this.layers[bodyResourceDescription.level].unshift(bodyResourceDescription);
             });
+            this.lazyloadingAttempt = true;
         });
 
+        this.layers = loadAllLayers(this.load);
+        this.lazyloadingAttempt = false;
+
+
         //this function must stay at the end of preload function
         addLoader(this);
     }
@@ -222,6 +228,14 @@ export class CustomizeScene extends AbstractCharacterScene {
         }
     }
 
+    update(time: number, delta: number): void {
+
+        if(this.lazyloadingAttempt){
+            this.moveLayers();
+            this.lazyloadingAttempt = false;
+        }
+    }
+
      public onResize(): void {
         this.moveLayers();
 
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 8d614957..0cfbbdef 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -33,6 +33,8 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     protected currentSelectUser = 0;
     protected pointerClicked: boolean = false;
 
+    protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
+
     constructor() {
         super({
             key: SelectCharacterSceneName,
@@ -46,8 +48,10 @@ export class SelectCharacterScene extends AbstractCharacterScene {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
                 this.playerModels.push(bodyResourceDescription);
             });
-        })
+            this.lazyloadingAttempt = true;
+        });
         this.playerModels = loadAllDefaultModels(this.load);
+        this.lazyloadingAttempt = false;
 
         //this function must stay at the end of preload function
         addLoader(this);
@@ -238,6 +242,13 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         localUserStore.setPlayerCharacterIndex(this.currentSelectUser);
     }
 
+    update(time: number, delta: number): void {
+        if(this.lazyloadingAttempt){
+            this.createCurrentPlayer();
+            this.lazyloadingAttempt = false;
+        }
+    }
+
     public onResize(): void {
         //move position of user
         this.moveUser();
diff --git a/pusher/src/Controller/AuthenticateController.ts b/pusher/src/Controller/AuthenticateController.ts
index a5aa47cc..317848c0 100644
--- a/pusher/src/Controller/AuthenticateController.ts
+++ b/pusher/src/Controller/AuthenticateController.ts
@@ -110,12 +110,10 @@ export class AuthenticateController extends BaseController {
     private anonymLogin(){
         this.App.options("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {
             this.addCorsHeaders(res);
-
             res.end();
         });
 
-        this.App.post("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {
-
+        this.App.post("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {           
             res.onAborted(() => {
                 console.warn('Login request was aborted');
             })

From ebf217057d9908e80344a94657468504639fc8c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 14:31:21 +0200
Subject: [PATCH 061/141] Switching to "playsinline" attribute in the video tag
 (both of them)

---
 .../src/Components/EnableCamera/EnableCameraScene.svelte  | 8 +++-----
 front/src/Components/MyCamera.svelte                      | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 07c45d26..537e8bdb 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import {Game} from "../../Phaser/Game/Game";
-    import {EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
+    import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
     import {
         audioConstraintStore,
         cameraListStore,
@@ -18,9 +18,7 @@
     let selectedCamera : string|null = null;
     let selectedMicrophone : string|null = null;
 
-    const enableCameraScene = game.scene.getScene(EnableCameraSceneName);
-    var video = document.getElementById("myCamVideoSetup");
-    video.setAttribute("playsinline", 'true');
+    const enableCameraScene = game.scene.getScene(EnableCameraSceneName) as EnableCameraScene;
 
     function submit() {
         enableCameraScene.login();
@@ -82,7 +80,7 @@
         <h2>Turn on your camera and microphone</h2>
     </section>
         {#if $localStreamStore.stream}
-            <video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted></video>
+            <video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
         {:else }
             <div class="webrtcsetup">
                 <img class="background-img" src={cinemaCloseImg} alt="">
diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte
index 6e1e50ef..3ff88d89 100644
--- a/front/src/Components/MyCamera.svelte
+++ b/front/src/Components/MyCamera.svelte
@@ -38,7 +38,7 @@
 
 <div>
     <div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
-        <video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted></video>
+        <video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
         <!-- {#if stream}
         <SoundMeterWidget stream={stream}></SoundMeterWidget>
         {/if} -->

From 80a698d89127b7ddf44a5117d11e9ccb495375eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 14:53:58 +0200
Subject: [PATCH 062/141] Preventing crash on iOS

On iOS, audio elements must be triggered by a user gesture.
We are catching exceptions thrown in order not to crash.

In the future, we need to find another way to play sounds.
---
 front/src/WebRtc/MediaManager.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 7b527962..7cdf1de0 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -129,7 +129,11 @@ export class MediaManager {
     }
 
     addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){
-        this.webrtcInAudio.play();
+        try {
+            this.webrtcInAudio.play();
+        } catch(e) {
+            console.error(e);
+        }
         const userId = ''+user.userId
 
         userName = userName.toUpperCase();
@@ -278,7 +282,11 @@ export class MediaManager {
     }
 
     playWebrtcOutSound(): void {
-        this.webrtcOutAudio.play();
+        try {
+            this.webrtcOutAudio.play();
+        } catch(e) {
+            console.error(e);
+        }
     }
 
     isConnecting(userId: string): void {

From 50e994c674213e1f0cdc9956cc8c725fd0f504e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 15:40:44 +0200
Subject: [PATCH 063/141] Attempt to switch bubble sound playing into Phaser

In iOS, we cannot trigger a playing sound if it does not start from a user gesture.
This is a huge bummer for a notification sound!

This is an attempt to switch sound playing to Phaser, which is using under the hood the WebAudio API.
This might solve the issue.
---
 front/dist/index.tmpl.html         |  6 ------
 front/src/Phaser/Game/GameScene.ts | 22 ++++++++++++++++++++++
 front/src/WebRtc/MediaManager.ts   | 20 --------------------
 front/src/WebRtc/SimplePeer.ts     |  1 -
 4 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 7f541145..aa63229f 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -91,12 +91,6 @@
 
         <div id="activeScreenSharing" class="active-screen-sharing active">
         </div>
-        <audio id="audio-webrtc-in">
-            <source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
-        </audio>
-        <audio id="audio-webrtc-out">
-            <source src="/resources/objects/webrtc-out.mp3" type="audio/mp3">
-        </audio>
         <audio id="report-message">
             <source src="/resources/objects/report-message.mp3" type="audio/mp3">
         </audio>
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 2de7747f..b4f79401 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -160,6 +160,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     private createPromise: Promise<void>;
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
     private iframeSubscriptionList! : Array<Subscription>;
+    private peerStoreUnsubscribe!: () => void;
     MapUrlFile: string;
     RoomId: string;
     instance: string;
@@ -228,6 +229,11 @@ export class GameScene extends DirtyScene implements CenterListener {
             this.load.image(joystickBaseKey, joystickBaseImg);
             this.load.image(joystickThumbKey, joystickThumbImg);
         }
+        this.load.audio('audio-webrtc-in', '/resources/objects/webrtc-in.mp3');
+        this.load.audio('audio-webrtc-out', '/resources/objects/webrtc-out.mp3');
+        //this.load.audio('audio-report-message', '/resources/objects/report-message.mp3');
+        this.sound.pauseOnBlur = false;
+
         this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
             // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
             if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
@@ -519,6 +525,21 @@ export class GameScene extends DirtyScene implements CenterListener {
         }
 
         this.emoteManager = new EmoteManager(this);
+
+        let oldPeerNumber = 0;
+        this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
+            const newPeerNumber = peers.size;
+            if (newPeerNumber > oldPeerNumber) {
+                this.sound.play('audio-webrtc-in', {
+                    volume: 0.2
+                });
+            } else if (newPeerNumber < oldPeerNumber) {
+                this.sound.play('audio-webrtc-out', {
+                    volume: 0.2
+                });
+            }
+            oldPeerNumber = newPeerNumber;
+        });
     }
 
     /**
@@ -960,6 +981,7 @@ ${escapedMessage}
         this.userInputManager.destroy();
         this.pinchManager?.destroy();
         this.emoteManager.destroy();
+        this.peerStoreUnsubscribe();
 
         mediaManager.hideGameOverlay();
 
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 7cdf1de0..7b537920 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -23,10 +23,8 @@ export type HelpCameraSettingsCallBack = () => void;
 
 export class MediaManager {
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
-    webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     //mySoundMeterElement: HTMLDivElement;
-    private webrtcOutAudio: HTMLAudioElement;
     startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
     stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
@@ -44,11 +42,6 @@ export class MediaManager {
 
     constructor() {
 
-        this.webrtcInAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-in');
-        this.webrtcOutAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-out');
-        this.webrtcInAudio.volume = 0.2;
-        this.webrtcOutAudio.volume = 0.2;
-
         this.pingCameraStatus();
 
         //FIX ME SOUNDMETER: check stability of sound meter calculation
@@ -129,11 +122,6 @@ export class MediaManager {
     }
 
     addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){
-        try {
-            this.webrtcInAudio.play();
-        } catch(e) {
-            console.error(e);
-        }
         const userId = ''+user.userId
 
         userName = userName.toUpperCase();
@@ -281,14 +269,6 @@ export class MediaManager {
         this.removeActiveVideo(this.getScreenSharingId(userId))
     }
 
-    playWebrtcOutSound(): void {
-        try {
-            this.webrtcOutAudio.play();
-        } catch(e) {
-            console.error(e);
-        }
-    }
-
     isConnecting(userId: string): void {
         const connectingSpinnerDiv = this.getSpinner(userId);
         if (connectingSpinnerDiv === null) {
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 9193f18b..2a502bab 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -246,7 +246,6 @@ export class SimplePeer {
      * This is triggered twice. Once by the server, and once by a remote client disconnecting
      */
     private closeConnection(userId : number) {
-        mediaManager.playWebrtcOutSound();
         try {
             const peer = this.PeerConnectionArray.get(userId);
             if (peer === undefined) {

From 46666d17dcbe8ef51e8541fd102eeba7074c607c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 15:56:06 +0200
Subject: [PATCH 064/141] Making sure the report audio sound does not break the
 application on iOS

---
 front/src/Administration/TypeMessage.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/front/src/Administration/TypeMessage.ts b/front/src/Administration/TypeMessage.ts
index 07f330fd..d735ba58 100644
--- a/front/src/Administration/TypeMessage.ts
+++ b/front/src/Administration/TypeMessage.ts
@@ -44,7 +44,13 @@ export class TypeMessageExt implements TypeMessageInterface{
         mainSectionDiv.appendChild(div);
 
         const reportMessageAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('report-message');
-        reportMessageAudio.play();
+        // FIXME: this will fail on iOS
+        // We should move the sound playing into the GameScene and listen to the event of a report using a store
+        try {
+            reportMessageAudio.play();
+        } catch (e) {
+            console.error(e);
+        }
 
         this.nbSecond = this.maxNbSecond;
         setTimeout((c) => {

From c435b7451e04d56bc4bb16fc4e5a9c31d55a730c Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Thu, 3 Jun 2021 16:54:52 +0200
Subject: [PATCH 065/141] Update don't call createPlayer but call moveUser
 Change time of pointerclicked from 100ms to 250ms Suppression of console.log

---
 front/src/Phaser/Login/SelectCharacterScene.ts | 4 ++--
 front/src/Phaser/Services/WaScaleManager.ts    | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 0cfbbdef..b56e38f5 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -143,7 +143,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
                 this.pointerClicked = true;
                 this.currentSelectUser = i;
                 this.moveUser();
-                setTimeout(() => {this.pointerClicked = false;}, 100);
+                setTimeout(() => {this.pointerClicked = false;}, 250);
             });
             this.players.push(player);
         }
@@ -244,7 +244,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     update(time: number, delta: number): void {
         if(this.lazyloadingAttempt){
-            this.createCurrentPlayer();
+            this.moveUser();
             this.lazyloadingAttempt = false;
         }
     }
diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index 4e0e9208..acbecc38 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -60,7 +60,6 @@ class WaScaleManager {
 
     public saveZoom(): void {
         this._saveZoom = this.hdpiManager.zoomModifier;
-        console.log(this._saveZoom);
     }
 
     public restoreZoom(): void{

From 02ff6fb5bf4a9718715b093e28984cd79996eed3 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Thu, 3 Jun 2021 17:08:56 +0200
Subject: [PATCH 066/141] Add timer so that pointerdown event can't be call two
 time in one click

---
 front/src/Phaser/Login/SelectCompanionScene.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts
index 9caa88f7..8f641a3a 100644
--- a/front/src/Phaser/Login/SelectCompanionScene.ts
+++ b/front/src/Phaser/Login/SelectCompanionScene.ts
@@ -23,6 +23,7 @@ export class SelectCompanionScene extends ResizableScene {
     private saveZoom: number = 0;
 
     private currentCompanion = 0;
+    private pointerClicked: boolean = false;
 
     constructor() {
         super({
@@ -105,8 +106,13 @@ export class SelectCompanionScene extends ResizableScene {
             });
 
             companion.setInteractive().on("pointerdown", () => {
+                if (this.pointerClicked) {
+                    return;
+                }
+                this.pointerClicked = true;
                 this.currentCompanion = i;
                 this.moveCompanion();
+                setTimeout(() => {this.pointerClicked = false;}, 250)
             });
 
             this.companions.push(companion);

From fffd36267de55498892d5c1ed4903ffda51ee655 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?gr=C3=A9goire=20parant?= <g.parant@thecodingmachine.com>
Date: Thu, 3 Jun 2021 17:22:31 +0200
Subject: [PATCH 067/141] Hot Custom Characters Scene (#1113)

---
 front/src/Phaser/Login/SelectCharacterScene.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 0cfbbdef..4eed17fe 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -244,7 +244,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     update(time: number, delta: number): void {
         if(this.lazyloadingAttempt){
-            this.createCurrentPlayer();
+            this.moveUser();
             this.lazyloadingAttempt = false;
         }
     }

From c5f3cfe87cee53381f614dce068e3addd7246e25 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Tue, 1 Jun 2021 15:35:25 +0200
Subject: [PATCH 068/141] FEATURE: clicking on another player show a contact
 card when possible

---
 CHANGELOG.md                                  |  5 ++
 back/src/Model/GameRoom.ts                    |  5 +-
 back/src/RoomManager.ts                       |  4 +-
 back/src/Services/AdminApi.ts                 | 22 +++++++
 back/src/Services/SocketManager.ts            | 18 +++++-
 front/src/Components/App.svelte               |  5 ++
 .../src/Components/VisitCard/VisitCard.svelte | 64 +++++++++++++++++++
 front/src/Connexion/RoomConnection.ts         | 15 ++++-
 front/src/Phaser/Entity/RemotePlayer.ts       |  8 ++-
 front/src/Phaser/Game/GameScene.ts            |  5 +-
 front/src/Stores/GameStore.ts                 |  4 +-
 messages/protos/messages.proto                | 11 ++++
 pusher/src/Controller/IoSocketController.ts   | 10 ++-
 pusher/src/Services/SocketManager.ts          | 16 ++++-
 14 files changed, 183 insertions(+), 9 deletions(-)
 create mode 100644 back/src/Services/AdminApi.ts
 create mode 100644 front/src/Components/VisitCard/VisitCard.svelte

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b9b0a926..1dd2c973 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,11 @@
   - We now create a GameObject.Text instead of GameObject.BitmapText
   - now use the 'Press Start 2P' font family and added an outline
   - As a result, we can now allow non-standard letters like french accents or chinese characters!
+  
+- Added the contact card feature. (@Kharhamel)
+  - Click on another player to see its contact info.
+  - Premium-only feature unfortunately. I need to find a way to make it available for all.
+  - If no contact data is found (either because the user is anonymous or because no admin backend), display an error card.
 
 - Mobile support has been improved
   - WorkAdventure automatically sets the zoom level based on the viewport size to ensure a sensible size of the map is visible, whatever the viewport used
diff --git a/back/src/Model/GameRoom.ts b/back/src/Model/GameRoom.ts
index be3e5cd3..22ea8ca5 100644
--- a/back/src/Model/GameRoom.ts
+++ b/back/src/Model/GameRoom.ts
@@ -89,7 +89,10 @@ export class GameRoom {
     public getUserByUuid(uuid: string): User|undefined {
         return this.usersByUuid.get(uuid);
     }
-
+    public getUserById(id: number): User|undefined {
+        return this.users.get(id);
+    }
+    
     public join(socket : UserSocket, joinRoomMessage: JoinRoomMessage): User {
         const positionMessage = joinRoomMessage.getPositionmessage();
         if (positionMessage === undefined) {
diff --git a/back/src/RoomManager.ts b/back/src/RoomManager.ts
index 19266687..a0f983e0 100644
--- a/back/src/RoomManager.ts
+++ b/back/src/RoomManager.ts
@@ -11,7 +11,7 @@ import {
     JoinRoomMessage,
     PlayGlobalMessage,
     PusherToBackMessage,
-    QueryJitsiJwtMessage, RefreshRoomPromptMessage,
+    QueryJitsiJwtMessage, RefreshRoomPromptMessage, RequestVisitCardMessage,
     ServerToAdminClientMessage,
     ServerToClientMessage,
     SilentMessage,
@@ -74,6 +74,8 @@ const roomManager: IRoomManagerServer = {
                         socketManager.handleQueryJitsiJwtMessage(user, message.getQueryjitsijwtmessage() as QueryJitsiJwtMessage);
                     } else if (message.hasEmotepromptmessage()){
                         socketManager.handleEmoteEventMessage(room, user, message.getEmotepromptmessage() as EmotePromptMessage);
+                    } else if (message.hasRequestvisitcardmessage()) {
+                        socketManager.handleRequestVisitCardMessage(room, user, message.getRequestvisitcardmessage() as RequestVisitCardMessage);
                     }else if (message.hasSendusermessage()) {
                         const sendUserMessage = message.getSendusermessage();
                         if(sendUserMessage !== undefined) {
diff --git a/back/src/Services/AdminApi.ts b/back/src/Services/AdminApi.ts
new file mode 100644
index 00000000..09b092bf
--- /dev/null
+++ b/back/src/Services/AdminApi.ts
@@ -0,0 +1,22 @@
+import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable";
+import Axios from "axios";
+
+
+class AdminApi {
+
+    fetchVisitCardUrl(membershipUuid: string): Promise<string> {
+        if (ADMIN_API_URL) {
+            return Axios.get(ADMIN_API_URL + '/api/membership/'+membershipUuid,
+                {headers: {"Authorization": `${ADMIN_API_TOKEN}`}}
+            ).then((res) => {
+                return res.data;
+            }).catch(() => {
+                return 'INVALID';
+            });
+        } else {
+            return Promise.resolve('INVALID')
+        }
+    }
+}
+
+export const adminApi = new AdminApi();
diff --git a/back/src/Services/SocketManager.ts b/back/src/Services/SocketManager.ts
index c58b3d9f..f8fe7cd3 100644
--- a/back/src/Services/SocketManager.ts
+++ b/back/src/Services/SocketManager.ts
@@ -27,7 +27,7 @@ import {
     WorldFullWarningMessage,
     UserLeftZoneMessage,
     EmoteEventMessage,
-    BanUserMessage, RefreshRoomMessage, EmotePromptMessage,
+    BanUserMessage, RefreshRoomMessage, EmotePromptMessage, RequestVisitCardMessage, VisitCardMessage,
 } from "../Messages/generated/messages_pb";
 import {User, UserSocket} from "../Model/User";
 import {ProtobufUtils} from "../Model/Websocket/ProtobufUtils";
@@ -51,6 +51,7 @@ import {Zone} from "_Model/Zone";
 import Debug from "debug";
 import {Admin} from "_Model/Admin";
 import crypto from "crypto";
+import {adminApi} from "./AdminApi";
 
 
 const debug = Debug('sockermanager');
@@ -769,6 +770,21 @@ export class SocketManager {
         emoteEventMessage.setActoruserid(user.id);
         room.emitEmoteEvent(user, emoteEventMessage);
     }
+
+    async handleRequestVisitCardMessage(room: GameRoom, user: User, requestvisitcardmessage: RequestVisitCardMessage): Promise<void> {
+        const targetUser = room.getUserById(requestvisitcardmessage.getTargetuserid());
+        if (!targetUser) {
+            throw 'Could not find user for id '+requestvisitcardmessage.getTargetuserid();
+        }
+        const url = await adminApi.fetchVisitCardUrl(targetUser.uuid);
+        
+        const visitCardMessage = new VisitCardMessage();
+        visitCardMessage.setUrl(url);
+        const clientMessage = new ServerToClientMessage();
+        clientMessage.setVisitcardmessage(visitCardMessage);
+        
+        user.socket.write(clientMessage);
+    }
 }
 
 export const socketManager = new SocketManager();
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 97cb5071..11d125b1 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -13,6 +13,8 @@
     import LoginScene from "./Login/LoginScene.svelte";
     import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
     import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
+    import VisitCard from "./VisitCard/VisitCard.svelte";
+    import {requestVisitCardsStore} from "../Stores/GameStore";
 
     import {Game} from "../Phaser/Game/Game";
     import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
@@ -73,4 +75,7 @@
             <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
         </div>
     {/if}
+    {#if $requestVisitCardsStore}
+        <VisitCard visitCardUrl={$requestVisitCardsStore}></VisitCard>
+    {/if}
 </div>
diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte
new file mode 100644
index 00000000..8c3706b0
--- /dev/null
+++ b/front/src/Components/VisitCard/VisitCard.svelte
@@ -0,0 +1,64 @@
+<script lang="typescript">
+    import { fly } from 'svelte/transition';
+    import {requestVisitCardsStore} from "../../Stores/GameStore";
+    
+    export let visitCardUrl: string;
+    
+    function closeCard() {
+        requestVisitCardsStore.set(null);
+    }
+</script>
+
+<style lang="scss">
+  .visitCard {
+    pointer-events: all;
+    margin-left: auto;
+    margin-right: auto;
+    width: 515px;
+    margin-top: 200px;
+    
+    .defaultCard {
+      border-radius: 5px;
+      border: 2px black solid;
+      background-color: whitesmoke;
+      width: 500px;
+      
+      header {
+        padding: 5px;
+      }
+    }
+
+    iframe {
+      border: 0;
+      width: 515px;
+      height: 270px;
+      overflow: hidden;
+    }
+
+    button {
+      float: right;
+    }
+  }
+</style>
+
+
+<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}">
+    {#if visitCardUrl === 'INVALID'}
+        <div class="defaultCard">
+            <header>
+                <h2>Sorry</h2>
+                <p style="font-style: italic;">This user doesn't have a contact card.</p>
+            </header>
+
+            <main style="padding: 5px; background-color: gray">
+                <p>Maybe he is offline, or this feature is deactivated.</p>
+            </main>
+        </div>
+    {:else}
+        <iframe title="visitCardTitle" src={visitCardUrl}></iframe>
+    {/if}
+    <div class="buttonContainer">
+        <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
+    </div>
+        
+</section>
diff --git a/front/src/Connexion/RoomConnection.ts b/front/src/Connexion/RoomConnection.ts
index a64e5bfd..ae9a1986 100644
--- a/front/src/Connexion/RoomConnection.ts
+++ b/front/src/Connexion/RoomConnection.ts
@@ -30,7 +30,7 @@ import {
     EmoteEventMessage,
     EmotePromptMessage,
     SendUserMessage,
-    BanUserMessage
+    BanUserMessage, RequestVisitCardMessage
 } from "../Messages/generated/messages_pb"
 
 import type {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@@ -50,6 +50,7 @@ import {worldFullMessageStream} from "./WorldFullMessageStream";
 import {worldFullWarningStream} from "./WorldFullWarningStream";
 import {connectionManager} from "./ConnectionManager";
 import {emoteEventStream} from "./EmoteEventStream";
+import {requestVisitCardsStore} from "../Stores/GameStore";
 
 const manualPingDelay = 20000;
 
@@ -203,6 +204,8 @@ export class RoomConnection implements RoomConnection {
                 adminMessagesService.onSendusermessage(message.getBanusermessage() as BanUserMessage);
             } else if (message.hasWorldfullwarningmessage()) {
                 worldFullWarningStream.onMessage();
+            } else if (message.hasVisitcardmessage()) {
+                requestVisitCardsStore.set(message?.getVisitcardmessage()?.getUrl() as unknown as string);
             } else if (message.hasRefreshroommessage()) {
                 //todo: implement a way to notify the user the room was refreshed.
             } else {
@@ -617,4 +620,14 @@ export class RoomConnection implements RoomConnection {
 
         this.socket.send(clientToServerMessage.serializeBinary().buffer);
     }
+    
+    public requestVisitCardUrl(targetUserId: number): void {
+        const message = new RequestVisitCardMessage();
+        message.setTargetuserid(targetUserId);
+
+        const clientToServerMessage = new ClientToServerMessage();
+        clientToServerMessage.setRequestvisitcardmessage(message);
+
+        this.socket.send(clientToServerMessage.serializeBinary().buffer);
+    }
 }
diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts
index 4e00f102..c2384357 100644
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/front/src/Phaser/Entity/RemotePlayer.ts
@@ -3,6 +3,8 @@ import type {PointInterface} from "../../Connexion/ConnexionModels";
 import {Character} from "../Entity/Character";
 import type {PlayerAnimationDirections} from "../Player/Animation";
 
+export const playerClickedEvent = 'playerClickedEvent';
+
 /**
  * Class representing the sprite of a remote player (a player that plays on another computer)
  */
@@ -25,6 +27,10 @@ export class RemotePlayer extends Character {
         
         //set data
         this.userId = userId;
+        
+        this.on('pointerdown', () => {
+            this.emit(playerClickedEvent, this.userId);
+        })
     }
 
     updatePosition(position: PointInterface): void {
@@ -40,6 +46,6 @@ export class RemotePlayer extends Character {
     }
 
     isClickable(): boolean {
-        return false; //todo: make remote players clickable if they are logged in.
+        return true; //todo: make remote players clickable if they are logged in.
     }
 }
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index b4f79401..e6e40df6 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -29,7 +29,7 @@ import type {AddPlayerInterface} from "./AddPlayerInterface";
 import {PlayerAnimationDirections} from "../Player/Animation";
 import {PlayerMovement} from "./PlayerMovement";
 import {PlayersPositionInterpolator} from "./PlayersPositionInterpolator";
-import {RemotePlayer} from "../Entity/RemotePlayer";
+import {playerClickedEvent, RemotePlayer} from "../Entity/RemotePlayer";
 import {Queue} from 'queue-typescript';
 import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
@@ -1379,6 +1379,9 @@ ${escapedMessage}
             addPlayerData.companion,
             addPlayerData.companion !== null ? lazyLoadCompanionResource(this.load, addPlayerData.companion) : undefined
         );
+        player.on(playerClickedEvent, (userID:number) => {
+            this.connection?.requestVisitCardUrl(userID);
+        })
         this.MapPlayers.add(player);
         this.MapPlayersByKey.set(player.userId, player);
         player.updatePosition(addPlayerData.position);
diff --git a/front/src/Stores/GameStore.ts b/front/src/Stores/GameStore.ts
index ee975f23..8899aa12 100644
--- a/front/src/Stores/GameStore.ts
+++ b/front/src/Stores/GameStore.ts
@@ -1,3 +1,5 @@
-import { derived, writable, Writable } from "svelte/store";
+import { writable } from "svelte/store";
 
 export const userMovingStore = writable(false);
+
+export const requestVisitCardsStore = writable<string|null>(null);
diff --git a/messages/protos/messages.proto b/messages/protos/messages.proto
index 3a5afb57..3cf0767d 100644
--- a/messages/protos/messages.proto
+++ b/messages/protos/messages.proto
@@ -75,6 +75,14 @@ message EmoteEventMessage {
     string emote = 2;
 }
 
+message RequestVisitCardMessage {
+    int32 targetUserId = 1;
+}
+
+message VisitCardMessage {
+    string url = 1;
+}
+
 message QueryJitsiJwtMessage {
   string jitsiRoom = 1;
   string tag = 2; // FIXME: rather than reading the tag from the query, we should read it from the current map!
@@ -94,6 +102,7 @@ message ClientToServerMessage {
     ReportPlayerMessage reportPlayerMessage = 11;
     QueryJitsiJwtMessage queryJitsiJwtMessage = 12;
     EmotePromptMessage emotePromptMessage = 13;
+    RequestVisitCardMessage requestVisitCardMessage = 14;
   }
 }
 
@@ -259,6 +268,7 @@ message ServerToClientMessage {
     RefreshRoomMessage refreshRoomMessage = 17; 
     WorldConnexionMessage worldConnexionMessage = 18;
     EmoteEventMessage emoteEventMessage = 19;
+    VisitCardMessage visitCardMessage = 20;
   }
 }
 
@@ -330,6 +340,7 @@ message PusherToBackMessage {
     SendUserMessage sendUserMessage = 12;
     BanUserMessage banUserMessage = 13;
     EmotePromptMessage emotePromptMessage = 14;
+    RequestVisitCardMessage requestVisitCardMessage = 15;
   }
 }
 
diff --git a/pusher/src/Controller/IoSocketController.ts b/pusher/src/Controller/IoSocketController.ts
index 6d120f50..d79b39a3 100644
--- a/pusher/src/Controller/IoSocketController.ts
+++ b/pusher/src/Controller/IoSocketController.ts
@@ -13,7 +13,12 @@ import {
     PlayGlobalMessage,
     ReportPlayerMessage,
     EmoteEventMessage,
-    QueryJitsiJwtMessage, SendUserMessage, ServerToClientMessage, CompanionMessage, EmotePromptMessage
+    QueryJitsiJwtMessage,
+    SendUserMessage,
+    ServerToClientMessage,
+    CompanionMessage,
+    EmotePromptMessage,
+    RequestVisitCardMessage
 } from "../Messages/generated/messages_pb";
 import {UserMovesMessage} from "../Messages/generated/messages_pb";
 import {TemplatedApp} from "uWebSockets.js"
@@ -333,6 +338,9 @@ export class IoSocketController {
                     socketManager.handleQueryJitsiJwtMessage(client, message.getQueryjitsijwtmessage() as QueryJitsiJwtMessage);
                 } else if (message.hasEmotepromptmessage()){
                     socketManager.handleEmotePromptMessage(client, message.getEmotepromptmessage() as EmotePromptMessage);
+                } else if (message.hasRequestvisitcardmessage()) {
+                    
+                    socketManager.handleRequestVisitCardMessage(client, message.getRequestvisitcardmessage() as RequestVisitCardMessage);
                 }
 
                     /* Ok is false if backpressure was built up, wait for drain */
diff --git a/pusher/src/Services/SocketManager.ts b/pusher/src/Services/SocketManager.ts
index 3bf8467a..c1727a4b 100644
--- a/pusher/src/Services/SocketManager.ts
+++ b/pusher/src/Services/SocketManager.ts
@@ -24,7 +24,13 @@ import {
     AdminPusherToBackMessage,
     ServerToAdminClientMessage,
     EmoteEventMessage,
-    UserJoinedRoomMessage, UserLeftRoomMessage, AdminMessage, BanMessage, RefreshRoomMessage, EmotePromptMessage
+    UserJoinedRoomMessage,
+    UserLeftRoomMessage,
+    AdminMessage,
+    BanMessage,
+    RefreshRoomMessage,
+    EmotePromptMessage,
+    RequestVisitCardMessage
 } from "../Messages/generated/messages_pb";
 import {ProtobufUtils} from "../Model/Websocket/ProtobufUtils";
 import {JITSI_ISS, SECRET_JITSI_KEY} from "../Enum/EnvironmentVariable";
@@ -294,6 +300,7 @@ export class SocketManager implements ZoneEventListener {
                 throw 'reported socket user not found';
             }
             //TODO report user on admin application
+            //todo: move to back because this fail if the reported player is in another pusher. 
             await adminApi.reportPlayer(reportedSocket.userUuid, reportPlayerMessage.getReportcomment(),  client.userUuid, client.roomId.split('/')[2])
         } catch (e) {
             console.error('An error occurred on "handleReportMessage"');
@@ -597,6 +604,13 @@ export class SocketManager implements ZoneEventListener {
 
         client.backConnection.write(pusherToBackMessage);
     }
+
+    handleRequestVisitCardMessage(client: ExSocketInterface, requestVisitCardMessage: RequestVisitCardMessage) {
+        const pusherToBackMessage = new PusherToBackMessage();
+        pusherToBackMessage.setRequestvisitcardmessage(requestVisitCardMessage);
+
+        client.backConnection.write(pusherToBackMessage);
+    }
 }
 
 export const socketManager = new SocketManager();

From 2f98bbaa0e8fd72850d4d0ddd4c6255981c74a2d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 18:34:55 +0200
Subject: [PATCH 069/141] Adding auto deploy to develop branch

---
 .github/workflows/build-and-deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index 48a7bae9..3e4b0fff 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -2,7 +2,7 @@ name: Build, push and deploy Docker image
 
 on:
   push:
-    branches: [master]
+    branches: [master, develop]
   release:
     types: [created]
   pull_request:

From eec15b38bb5721eb7637217b3b0d4a361f19f9b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?gr=C3=A9goire=20parant?= <g.parant@thecodingmachine.com>
Date: Thu, 3 Jun 2021 20:05:39 +0200
Subject: [PATCH 070/141] Hot Fix open & close iframe (#1115)

---
 front/src/WebRtc/CoWebsiteManager.ts | 21 ++++++++++++++++-----
 front/src/WebRtc/MediaManager.ts     | 15 +++++++++++----
 2 files changed, 27 insertions(+), 9 deletions(-)

diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
index 95885a53..ef34f913 100644
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -11,7 +11,7 @@ enum iframeStates {
 const cowebsiteDivId = 'cowebsite'; // the id of the whole container.
 const cowebsiteMainDomId = 'cowebsite-main'; // the id of the parent div of the iframe.
 const cowebsiteAsideDomId = 'cowebsite-aside'; // the id of the parent div of the iframe.
-const cowebsiteCloseButtonId = 'cowebsite-close';
+export const cowebsiteCloseButtonId = 'cowebsite-close';
 const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen';
 const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
 const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
@@ -64,10 +64,15 @@ class CoWebsiteManager {
 
         this.initResizeListeners();
 
-        HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId).addEventListener('click', () => {
+        const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
+        buttonCloseFrame.addEventListener('click', () => {
+            buttonCloseFrame.blur();
             this.closeCoWebsite();
         });
-        HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId).addEventListener('click', () => {
+
+        const buttonFullScreenFrame = HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId);
+        buttonFullScreenFrame.addEventListener('click', () => {
+            buttonFullScreenFrame.blur();
             this.fullscreen();
         });
     }
@@ -152,7 +157,10 @@ class CoWebsiteManager {
             setTimeout(() => {
                 this.fire();
             }, animationTime)
-        }).catch(() => this.closeCoWebsite());
+        }).catch((err) => {
+            console.error('Error loadCoWebsite => ', err);
+            this.closeCoWebsite()
+        });
     }
 
     /**
@@ -166,7 +174,10 @@ class CoWebsiteManager {
             setTimeout(() => {
                 this.fire();
             }, animationTime);
-        }).catch(() => this.closeCoWebsite());
+        }).catch((err) => {
+            console.error('Error insertCoWebsite => ', err);
+            this.closeCoWebsite();
+        });
     }
 
     public closeCoWebsite(): Promise<void> {
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 2bed2c68..80a102a4 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -5,6 +5,7 @@ import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
 import {localUserStore} from "../Connexion/LocalUserStore";
 import {UserSimplePeerInterface} from "./SimplePeer";
 import {SoundMeter} from "../Phaser/Components/SoundMeter";
+import {cowebsiteCloseButtonId} from "./CoWebsiteManager";
 
 declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -208,22 +209,28 @@ export class MediaManager {
         const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay');
         gameOverlay.classList.add('active');
 
-        const buttonCloseFrame = HtmlUtils.getElementByIdOrFail('cowebsite-close');
+        const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
         const functionTrigger = () => {
             this.triggerCloseJitsiFrameButton();
         }
-        buttonCloseFrame.removeEventListener('click', functionTrigger);
+        buttonCloseFrame.removeEventListener('click', () => {
+            buttonCloseFrame.blur();
+            functionTrigger();
+        });
     }
 
     public hideGameOverlay(): void {
         const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay');
         gameOverlay.classList.remove('active');
 
-        const buttonCloseFrame = HtmlUtils.getElementByIdOrFail('cowebsite-close');
+        const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
         const functionTrigger = () => {
             this.triggerCloseJitsiFrameButton();
         }
-        buttonCloseFrame.addEventListener('click', functionTrigger);
+        buttonCloseFrame.addEventListener('click', () => {
+            buttonCloseFrame.blur();
+            functionTrigger();
+        });
     }
 
     public isGameOverlayVisible(): boolean {

From 0d2b1902222b244869a2eee93693496bea92cb3a Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Fri, 4 Jun 2021 09:39:33 +0200
Subject: [PATCH 071/141] Replace setTimeout by timer manage in Update

---
 front/src/Phaser/Login/SelectCharacterScene.ts | 13 +++++++++++--
 front/src/Phaser/Login/SelectCompanionScene.ts |  8 ++++++--
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index b56e38f5..052e5900 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -32,6 +32,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
     protected currentSelectUser = 0;
     protected pointerClicked: boolean = false;
+    protected pointerTimer: number = 0;
 
     protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
 
@@ -137,13 +138,16 @@ export class SelectCharacterScene extends AbstractCharacterScene {
                 repeat: -1
             });
             player.setInteractive().on("pointerdown", () => {
-                if (this.pointerClicked || this.currentSelectUser === i) {
+                if (this.pointerClicked) {
+                    return;
+                }
+                if (this.currentSelectUser === i) {
                     return;
                 }
                 this.pointerClicked = true;
+                this.pointerTimer = 250;
                 this.currentSelectUser = i;
                 this.moveUser();
-                setTimeout(() => {this.pointerClicked = false;}, 250);
             });
             this.players.push(player);
         }
@@ -243,6 +247,11 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     update(time: number, delta: number): void {
+        this.pointerTimer -= delta;
+        if (this.pointerTimer <= 0) {
+            this.pointerClicked = false;
+        }
+
         if(this.lazyloadingAttempt){
             this.moveUser();
             this.lazyloadingAttempt = false;
diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts
index 8f641a3a..b240a553 100644
--- a/front/src/Phaser/Login/SelectCompanionScene.ts
+++ b/front/src/Phaser/Login/SelectCompanionScene.ts
@@ -24,6 +24,7 @@ export class SelectCompanionScene extends ResizableScene {
 
     private currentCompanion = 0;
     private pointerClicked: boolean = false;
+    private pointerTimer: number = 0;
 
     constructor() {
         super({
@@ -73,7 +74,10 @@ export class SelectCompanionScene extends ResizableScene {
     }
 
     update(time: number, delta: number): void {
-
+        this.pointerTimer -= delta;
+        if (this.pointerTimer <= 0) {
+            this.pointerClicked = false;
+        }
     }
 
     public selectCompanion(): void {
@@ -110,9 +114,9 @@ export class SelectCompanionScene extends ResizableScene {
                     return;
                 }
                 this.pointerClicked = true;
+                this.pointerTimer = 250;
                 this.currentCompanion = i;
                 this.moveCompanion();
-                setTimeout(() => {this.pointerClicked = false;}, 250)
             });
 
             this.companions.push(companion);

From 247d508d094e4c264075c93410624da9cd494ad7 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Fri, 4 Jun 2021 10:01:08 +0200
Subject: [PATCH 072/141] create PR to test iphone compatibility

---
 front/src/Phaser/Login/CustomizeScene.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 3d85cdd5..cc0c7208 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -236,6 +236,9 @@ export class CustomizeScene extends AbstractCharacterScene {
         }
     }
 
+
+
+
      public onResize(): void {
         this.moveLayers();
 

From b7ac3b8fada3668297e4897e5263d7f7b71aac68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 10:07:12 +0200
Subject: [PATCH 073/141] Generating HTML link using DOM manipulation rather
 that string manipulation

---
 front/dist/resources/style/style.css | 6 +++++-
 front/src/WebRtc/HtmlUtils.ts        | 7 ++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 213b00f2..f1098af4 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -381,7 +381,7 @@ body {
         max-height: 25%;
     }
 
-    
+
 }
 
 #game {
@@ -1115,6 +1115,10 @@ div.modal-report-user{
     color: white;
 }
 
+.discussion .messages .message p a:visited{
+    color: white;
+}
+
 .discussion .send-message{
     position: absolute;
     bottom: 45px;
diff --git a/front/src/WebRtc/HtmlUtils.ts b/front/src/WebRtc/HtmlUtils.ts
index 86f38216..942e553f 100644
--- a/front/src/WebRtc/HtmlUtils.ts
+++ b/front/src/WebRtc/HtmlUtils.ts
@@ -35,7 +35,12 @@ export class HtmlUtils {
         const urlRegex = /(https?:\/\/[^\s]+)/g;
         text = HtmlUtils.escapeHtml(text);
         return text.replace(urlRegex, (url: string) => {
-            return '<a href="' + url + '" target="_blank" style=":visited {color: white}">' + url + '</a>';
+            const link = document.createElement('a');
+            link.href = url;
+            link.target = "_blank";
+            const text = document.createTextNode(url);
+            link.appendChild(text);
+            return link.outerHTML;
         });
     }
 

From f4ed527fe8b8603dbb0db0e9feb21c47e975fcc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 14:10:31 +0200
Subject: [PATCH 074/141] Adding a global error message

This error message should be used for non fatal errors (otherwise, use the ErrorScene).
It is implemented using Svelte and the new "$errorStore".

Use `errorStore.addErrorMessage` to display the error popup with the message.

This PR uses this error message to display a popup explaining the browser is too old for WebRTC.
---
 front/src/Components/App.svelte               |  7 +++
 front/src/Components/UI/ErrorDialog.svelte    | 44 +++++++++++++++++++
 front/src/Stores/ErrorStore.ts                | 23 ++++++++++
 front/src/Stores/Errors/BrowserTooOldError.ts |  8 ++++
 front/src/Stores/MediaStore.ts                | 12 ++++-
 5 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 front/src/Components/UI/ErrorDialog.svelte
 create mode 100644 front/src/Stores/ErrorStore.ts
 create mode 100644 front/src/Stores/Errors/BrowserTooOldError.ts

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 11d125b1..a39f2dc7 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -9,6 +9,7 @@
     import {selectCharacterSceneVisibleStore} from "../Stores/SelectCharacterStore";
     import SelectCharacterScene from "./selectCharacter/SelectCharacterScene.svelte";
     import {customCharacterSceneVisibleStore} from "../Stores/CustomCharacterStore";
+    import {errorStore} from "../Stores/ErrorStore";
     import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
     import LoginScene from "./Login/LoginScene.svelte";
     import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
@@ -21,6 +22,7 @@
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
     import AudioPlaying from "./UI/AudioPlaying.svelte";
     import {soundPlayingStore} from "../Stores/SoundPlayingStore";
+    import ErrorDialog from "./UI/ErrorDialog.svelte";
 
     export let game: Game;
 </script>
@@ -78,4 +80,9 @@
     {#if $requestVisitCardsStore}
         <VisitCard visitCardUrl={$requestVisitCardsStore}></VisitCard>
     {/if}
+    {#if $errorStore.length > 0}
+    <div>
+        <ErrorDialog></ErrorDialog>
+    </div>
+    {/if}
 </div>
diff --git a/front/src/Components/UI/ErrorDialog.svelte b/front/src/Components/UI/ErrorDialog.svelte
new file mode 100644
index 00000000..5c684a92
--- /dev/null
+++ b/front/src/Components/UI/ErrorDialog.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+import {errorStore} from "../../Stores/ErrorStore";
+
+function close(): boolean {
+    errorStore.clearMessages();
+    return false;
+}
+
+</script>
+
+<dialog class="error-dialog nes-dialog is-dark is-rounded" id="dialog-dark-rounded" open>
+    <p class="nes-text is-error title">Error</p>
+    <div class="body">
+    {#each $errorStore as error}
+    <p>{error}</p>
+    {/each}
+    </div>
+    <div class="button-bar">
+        <button class="nes-btn is-error" on:click={close}>Close</button>
+    </div>
+</dialog>
+
+<style lang="scss">
+    dialog.error-dialog {
+      pointer-events: auto;
+      top: 10%;
+
+      .button-bar {
+        text-align: center;
+      }
+
+      .body {
+        max-height: 50vh;
+      }
+
+      p {
+        font-family: "Press Start 2P";
+
+        &.title {
+          text-align: center;
+        }
+      }
+    }
+</style>
diff --git a/front/src/Stores/ErrorStore.ts b/front/src/Stores/ErrorStore.ts
new file mode 100644
index 00000000..eaab8a13
--- /dev/null
+++ b/front/src/Stores/ErrorStore.ts
@@ -0,0 +1,23 @@
+import {writable} from "svelte/store";
+
+/**
+ * A store that contains a list of error messages to be displayed.
+ */
+function createErrorStore() {
+    const { subscribe, set, update } = writable<string[]>([]);
+
+    return {
+        subscribe,
+        addErrorMessage: (e: string|Error): void => {
+            update((messages) => {
+                messages.push(e.toString());
+                return messages;
+            });
+        },
+        clearMessages: (): void => {
+            set([]);
+        }
+    };
+}
+
+export const errorStore = createErrorStore();
diff --git a/front/src/Stores/Errors/BrowserTooOldError.ts b/front/src/Stores/Errors/BrowserTooOldError.ts
new file mode 100644
index 00000000..bf934443
--- /dev/null
+++ b/front/src/Stores/Errors/BrowserTooOldError.ts
@@ -0,0 +1,8 @@
+export class BrowserTooOldError extends Error {
+    static NAME = 'BrowserTooOldError';
+
+    constructor() {
+        super('Unable to access your camera or microphone. Your browser is too old. Please consider upgrading your browser or try using a recent version of Chrome.');
+        this.name = BrowserTooOldError.NAME;
+    }
+}
diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index 7d1911a4..2c5fc796 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -4,6 +4,8 @@ import {localUserStore} from "../Connexion/LocalUserStore";
 import {ITiledMapGroupLayer, ITiledMapObjectLayer, ITiledMapTileLayer} from "../Phaser/Map/ITiledMap";
 import {userMovingStore} from "./GameStore";
 import {HtmlUtils} from "../WebRtc/HtmlUtils";
+import {BrowserTooOldError} from "./Errors/BrowserTooOldError";
+import {errorStore} from "./ErrorStore";
 
 /**
  * A store that contains the camera state requested by the user (on or off).
@@ -423,7 +425,7 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
             //throw new Error('Unable to access your camera or microphone. Your browser is too old.');
             set({
                 type: 'error',
-                error: new Error('Unable to access your camera or microphone. Your browser is too old. Please consider upgrading your browser or try using a recent version of Chrome.'),
+                error: new BrowserTooOldError(),
                 constraints
             });
             return;
@@ -594,3 +596,11 @@ microphoneListStore.subscribe((devices) => {
         audioConstraintStore.setDeviceId(undefined);
     }
 });
+
+localStreamStore.subscribe(streamResult => {
+    if (streamResult.type === 'error') {
+        if (streamResult.error.name === BrowserTooOldError.NAME) {
+            errorStore.addErrorMessage(streamResult.error);
+        }
+    }
+});

From 2905a5570ca921462732731566372bad928ef284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Thu, 3 Jun 2021 14:29:09 +0200
Subject: [PATCH 075/141] Removing commented code

---
 front/src/Stores/MediaStore.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index 2c5fc796..13425afe 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -422,7 +422,6 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
             });
             return;
         } else {
-            //throw new Error('Unable to access your camera or microphone. Your browser is too old.');
             set({
                 type: 'error',
                 error: new BrowserTooOldError(),

From fd4f09588e1d6e46605b3019b39905f4c5486390 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 14:16:21 +0200
Subject: [PATCH 076/141] Adding "playsinline" tag in remote <video> tags for
 iPhone compatibility (test)

---
 front/src/WebRtc/MediaManager.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 3d5d3190..8292b0ad 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -145,7 +145,7 @@ export class MediaManager {
                     <img title="report this user" src="resources/logos/report.svg">
                     <span>Report/Block</span>
                 </button>
-                <video id="${userId}" autoplay></video>
+                <video id="${userId}" autoplay playsinline></video>
                 <img src="resources/logos/blockSign.svg" id="blocking-${userId}" class="block-logo">
                 <div id="soundMeter-${userId}" class="sound-progress">
                     <span></span>
@@ -182,7 +182,7 @@ export class MediaManager {
         userId = this.getScreenSharingId(userId);
         const html = `
             <div id="div-${userId}" class="video-container">
-                <video id="${userId}" autoplay></video>
+                <video id="${userId}" autoplay playsinline></video>
             </div>
         `;
 

From 01ce94585a384303f4e3b0e13024454a4ad99b0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:07:36 +0200
Subject: [PATCH 077/141] Displaying only message in the Dialog error (and not
 the exception name in front of the message)

---
 front/src/Stores/ErrorStore.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/front/src/Stores/ErrorStore.ts b/front/src/Stores/ErrorStore.ts
index eaab8a13..9647c370 100644
--- a/front/src/Stores/ErrorStore.ts
+++ b/front/src/Stores/ErrorStore.ts
@@ -10,7 +10,13 @@ function createErrorStore() {
         subscribe,
         addErrorMessage: (e: string|Error): void => {
             update((messages) => {
-                messages.push(e.toString());
+                let message: string;
+                if (e instanceof Error) {
+                    message = e.message;
+                } else {
+                    message = e;
+                }
+                messages.push(message);
                 return messages;
             });
         },

From 469cac9656805199d62d65bf382d7377276685df Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:08:02 +0200
Subject: [PATCH 078/141] Making sure the "stopped screensharing" log is not
 displayed on startup

---
 front/src/WebRtc/MediaManager.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 8292b0ad..efc9660a 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -65,6 +65,7 @@ export class MediaManager {
             }
         });
 
+        let isScreenSharing = false;
         screenSharingLocalStreamStore.subscribe((result) => {
             if (result.type === 'error') {
                 console.error(result.error);
@@ -75,10 +76,14 @@ export class MediaManager {
             }
 
             if (result.stream !== null) {
+                isScreenSharing = true;
                 this.addScreenSharingActiveVideo('me', DivImportance.Normal);
                 HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
             } else {
-                this.removeActiveScreenSharingVideo('me');
+                if (isScreenSharing) {
+                    isScreenSharing = false;
+                    this.removeActiveScreenSharingVideo('me');
+                }
             }
 
         });

From 9f09dc9df2f78d65a31d7b14a3a40b131a3e3dfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:19:41 +0200
Subject: [PATCH 079/141] Adding a special error message for non Safari
 browsers on iOS < 14.3

---
 front/src/Stores/Errors/WebviewOnOldIOS.ts |  8 ++++++++
 front/src/Stores/MediaStore.ts             | 11 ++++++++++-
 front/src/WebRtc/DeviceUtils.ts            | 12 ++++++++++++
 3 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 front/src/Stores/Errors/WebviewOnOldIOS.ts
 create mode 100644 front/src/WebRtc/DeviceUtils.ts

diff --git a/front/src/Stores/Errors/WebviewOnOldIOS.ts b/front/src/Stores/Errors/WebviewOnOldIOS.ts
new file mode 100644
index 00000000..06c03f0e
--- /dev/null
+++ b/front/src/Stores/Errors/WebviewOnOldIOS.ts
@@ -0,0 +1,8 @@
+export class WebviewOnOldIOS extends Error {
+    static NAME = 'WebviewOnOldIOS';
+
+    constructor() {
+        super('Your iOS version cannot use video/audio in the browser unless you are using Safari. Please switch to Safari or upgrade iOS to 14.3 or above.');
+        this.name = WebviewOnOldIOS.NAME;
+    }
+}
diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts
index 13425afe..d622511e 100644
--- a/front/src/Stores/MediaStore.ts
+++ b/front/src/Stores/MediaStore.ts
@@ -6,6 +6,8 @@ import {userMovingStore} from "./GameStore";
 import {HtmlUtils} from "../WebRtc/HtmlUtils";
 import {BrowserTooOldError} from "./Errors/BrowserTooOldError";
 import {errorStore} from "./ErrorStore";
+import {isIOS} from "../WebRtc/DeviceUtils";
+import {WebviewOnOldIOS} from "./Errors/WebviewOnOldIOS";
 
 /**
  * A store that contains the camera state requested by the user (on or off).
@@ -421,6 +423,13 @@ export const localStreamStore = derived<Readable<MediaStreamConstraints>, LocalS
                 constraints
             });
             return;
+        } else if (isIOS()) {
+            set({
+                type: 'error',
+                error: new WebviewOnOldIOS(),
+                constraints
+            });
+            return;
         } else {
             set({
                 type: 'error',
@@ -598,7 +607,7 @@ microphoneListStore.subscribe((devices) => {
 
 localStreamStore.subscribe(streamResult => {
     if (streamResult.type === 'error') {
-        if (streamResult.error.name === BrowserTooOldError.NAME) {
+        if (streamResult.error.name === BrowserTooOldError.NAME || streamResult.error.name === WebviewOnOldIOS.NAME) {
             errorStore.addErrorMessage(streamResult.error);
         }
     }
diff --git a/front/src/WebRtc/DeviceUtils.ts b/front/src/WebRtc/DeviceUtils.ts
new file mode 100644
index 00000000..91a3dc31
--- /dev/null
+++ b/front/src/WebRtc/DeviceUtils.ts
@@ -0,0 +1,12 @@
+export function isIOS(): boolean {
+    return [
+            'iPad Simulator',
+            'iPhone Simulator',
+            'iPod Simulator',
+            'iPad',
+            'iPhone',
+            'iPod'
+        ].includes(navigator.platform)
+        // iPad on iOS 13 detection
+        || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
+}

From bacd2605477e2daa37dbc2b3aa0a73f4445208ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:22:15 +0200
Subject: [PATCH 080/141] Prevents error message from being displayed twice in
 the same dialog

---
 front/src/Stores/ErrorStore.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/front/src/Stores/ErrorStore.ts b/front/src/Stores/ErrorStore.ts
index 9647c370..2f1e3e40 100644
--- a/front/src/Stores/ErrorStore.ts
+++ b/front/src/Stores/ErrorStore.ts
@@ -9,14 +9,18 @@ function createErrorStore() {
     return {
         subscribe,
         addErrorMessage: (e: string|Error): void => {
-            update((messages) => {
+            update((messages: string[]) => {
                 let message: string;
                 if (e instanceof Error) {
                     message = e.message;
                 } else {
                     message = e;
                 }
-                messages.push(message);
+
+                if (!messages.includes(message)) {
+                    messages.push(message);
+                }
+
                 return messages;
             });
         },

From 3e19234edc9629f597519723f44e3789ea036207 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Fri, 4 Jun 2021 16:32:07 +0200
Subject: [PATCH 081/141] Change <dialog> for ErrorDialog in <div> because only
 Chrome knows <dialog>

---
 front/src/Components/UI/ErrorDialog.svelte  | 12 ++++++++----
 front/src/Phaser/Services/WaScaleManager.ts |  1 -
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/UI/ErrorDialog.svelte b/front/src/Components/UI/ErrorDialog.svelte
index 5c684a92..3244de24 100644
--- a/front/src/Components/UI/ErrorDialog.svelte
+++ b/front/src/Components/UI/ErrorDialog.svelte
@@ -8,7 +8,7 @@ function close(): boolean {
 
 </script>
 
-<dialog class="error-dialog nes-dialog is-dark is-rounded" id="dialog-dark-rounded" open>
+<div class="error-div nes-container is-dark is-rounded" open>
     <p class="nes-text is-error title">Error</p>
     <div class="body">
     {#each $errorStore as error}
@@ -18,12 +18,16 @@ function close(): boolean {
     <div class="button-bar">
         <button class="nes-btn is-error" on:click={close}>Close</button>
     </div>
-</dialog>
+</div>
 
 <style lang="scss">
-    dialog.error-dialog {
+    div.error-div {
       pointer-events: auto;
-      top: 10%;
+      margin-top: 10vh;
+      margin-right: auto;
+      margin-left: auto;
+      width: max-content;
+      max-width: 80vw;
 
       .button-bar {
         text-align: center;
diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index 4e0e9208..acbecc38 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -60,7 +60,6 @@ class WaScaleManager {
 
     public saveZoom(): void {
         this._saveZoom = this.hdpiManager.zoomModifier;
-        console.log(this._saveZoom);
     }
 
     public restoreZoom(): void{

From 8afa94aae3732746cef5b670c7436a949db20557 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Fri, 4 Jun 2021 19:36:30 +0200
Subject: [PATCH 082/141] FIX: temporary fix for visit card on mobile

---
 front/src/Components/VisitCard/VisitCard.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte
index 8c3706b0..7a289eae 100644
--- a/front/src/Components/VisitCard/VisitCard.svelte
+++ b/front/src/Components/VisitCard/VisitCard.svelte
@@ -14,14 +14,15 @@
     pointer-events: all;
     margin-left: auto;
     margin-right: auto;
-    width: 515px;
+    width: 530px;
     margin-top: 200px;
+    max-width: 100vw;
     
     .defaultCard {
       border-radius: 5px;
       border: 2px black solid;
       background-color: whitesmoke;
-      width: 500px;
+      width: 530px;
       
       header {
         padding: 5px;
@@ -30,7 +31,7 @@
 
     iframe {
       border: 0;
-      width: 515px;
+      width: 530px;
       height: 270px;
       overflow: hidden;
     }
@@ -60,5 +61,4 @@
     <div class="buttonContainer">
         <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
     </div>
-        
 </section>

From dfb02af0f3fd84c53d86668383f2689630d4ba9a Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 09:15:34 +0200
Subject: [PATCH 083/141] comment on pointerTimer and pointerClicked

---
 front/src/Phaser/Login/SelectCharacterScene.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 052e5900..552cd709 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -144,6 +144,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
                 if (this.currentSelectUser === i) {
                     return;
                 }
+                //To not trigger two time the pointerdown events :
+                // We set a boolean to true so that pointerdown events does nothing when the boolean is true
+                // We set a timer that we decrease in update function to not trigger the pointerdown events twice
                 this.pointerClicked = true;
                 this.pointerTimer = 250;
                 this.currentSelectUser = i;
@@ -247,6 +250,8 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     update(time: number, delta: number): void {
+        // pointerTimer is set to 250 when pointerdown events is trigger
+        // After 250ms, pointerClicked is set to false and the pointerdown events can be trigger again
         this.pointerTimer -= delta;
         if (this.pointerTimer <= 0) {
             this.pointerClicked = false;

From edfdc3bf47207214285164bb9c384a1503927991 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 09:15:34 +0200
Subject: [PATCH 084/141] comment on pointerTimer and pointerClicked

---
 front/src/Phaser/Login/SelectCharacterScene.ts | 5 +++++
 front/src/Phaser/Login/SelectCompanionScene.ts | 5 +++++
 2 files changed, 10 insertions(+)

diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 052e5900..552cd709 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -144,6 +144,9 @@ export class SelectCharacterScene extends AbstractCharacterScene {
                 if (this.currentSelectUser === i) {
                     return;
                 }
+                //To not trigger two time the pointerdown events :
+                // We set a boolean to true so that pointerdown events does nothing when the boolean is true
+                // We set a timer that we decrease in update function to not trigger the pointerdown events twice
                 this.pointerClicked = true;
                 this.pointerTimer = 250;
                 this.currentSelectUser = i;
@@ -247,6 +250,8 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     update(time: number, delta: number): void {
+        // pointerTimer is set to 250 when pointerdown events is trigger
+        // After 250ms, pointerClicked is set to false and the pointerdown events can be trigger again
         this.pointerTimer -= delta;
         if (this.pointerTimer <= 0) {
             this.pointerClicked = false;
diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts
index b240a553..4c29f942 100644
--- a/front/src/Phaser/Login/SelectCompanionScene.ts
+++ b/front/src/Phaser/Login/SelectCompanionScene.ts
@@ -74,6 +74,8 @@ export class SelectCompanionScene extends ResizableScene {
     }
 
     update(time: number, delta: number): void {
+        // pointerTimer is set to 250 when pointerdown events is trigger
+        // After 250ms, pointerClicked is set to false and the pointerdown events can be trigger again
         this.pointerTimer -= delta;
         if (this.pointerTimer <= 0) {
             this.pointerClicked = false;
@@ -113,6 +115,9 @@ export class SelectCompanionScene extends ResizableScene {
                 if (this.pointerClicked) {
                     return;
                 }
+                //To not trigger two time the pointerdown events :
+                // We set a boolean to true so that pointerdown events does nothing when the boolean is true
+                // We set a timer that we decrease in update function to not trigger the pointerdown events twice
                 this.pointerClicked = true;
                 this.pointerTimer = 250;
                 this.currentCompanion = i;

From 23c74bd7aafd20eb0e0f7968254c06b4233d11bb Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 09:27:49 +0200
Subject: [PATCH 085/141] Create a PR to fix broken layout on EnableCameraScene
 on mobile

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 537e8bdb..effaa099 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -136,7 +136,7 @@
         margin-top: 3vh;
         margin-bottom: 3vh;
         min-height: 10vh;
-        width: 50%;
+        width: 50vw;
         margin-left: auto;
         margin-right: auto;
 

From e45198e4031952638772f19e4b0e1252c22be7b6 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 10:09:51 +0200
Subject: [PATCH 086/141] Remove marging bottom of SelectWebcamForm

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index effaa099..42b58d85 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -134,7 +134,7 @@
 
       section.selectWebcamForm {
         margin-top: 3vh;
-        margin-bottom: 3vh;
+/*        margin-bottom: 3vh;*/
         min-height: 10vh;
         width: 50vw;
         margin-left: auto;
@@ -158,6 +158,7 @@
       }
 
       h2{
+        color: pink;
         font-family: "Press Start 2P";
         margin: 1px;
       }
@@ -176,7 +177,7 @@
 
         img {
           width: 30px;
-          margin-right: 10px;
+          margin-right: 5px;
         }
       }
 

From cbf786fd5655b9dd227201d16c702e684a402f79 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 10:29:38 +0200
Subject: [PATCH 087/141] Remove img and margin

---
 .../src/Components/EnableCamera/EnableCameraScene.svelte | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 42b58d85..342c2a32 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -92,7 +92,7 @@
 
         {#if $cameraListStore.length > 1 }
             <div class="control-group">
-                <img src={cinemaImg} alt="Camera" />
+                <!--<img src={cinemaImg} alt="Camera" />-->
                 <div class="nes-select">
                     <select bind:value={selectedCamera} on:change={selectCamera}>
                         {#each $cameraListStore as camera}
@@ -134,7 +134,7 @@
 
       section.selectWebcamForm {
         margin-top: 3vh;
-/*        margin-bottom: 3vh;*/
+        margin-bottom: 3vh;
         min-height: 10vh;
         width: 50vw;
         margin-left: auto;
@@ -142,8 +142,8 @@
 
         select {
           font-family: "Press Start 2P";
-          margin-top: 1vh;
-          margin-bottom: 1vh;
+/*          margin-top: 1vh;
+          margin-bottom: 1vh;*/
 
           option {
             font-family: "Press Start 2P";
@@ -158,7 +158,6 @@
       }
 
       h2{
-        color: pink;
         font-family: "Press Start 2P";
         margin: 1px;
       }

From ac911cff4b07aa2f75a24193624327221ea194b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 7 Jun 2021 10:42:08 +0200
Subject: [PATCH 088/141] Properly escaping name in discussion manager

---
 front/src/WebRtc/DiscussionManager.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts
index 9bbfac5a..504ee91b 100644
--- a/front/src/WebRtc/DiscussionManager.ts
+++ b/front/src/WebRtc/DiscussionManager.ts
@@ -171,6 +171,8 @@ export class DiscussionManager {
         const date = new Date();
         if(isMe){
             name = 'Me';
+        } else {
+            name = HtmlUtils.escapeHtml(name);
         }
         pMessage.innerHTML = `<span style="font-weight: bold">${name}</span>    
                     <span style="color:#bac2cc;display:inline-block;font-size:12px;">

From dd0391687fedc18bb80845b6d84d13d21febf696 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 14:19:50 +0200
Subject: [PATCH 089/141] change font-size Change width and margin of img on
 mobile

---
 .../EnableCamera/EnableCameraScene.svelte     | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 342c2a32..0e7e84bb 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -92,7 +92,7 @@
 
         {#if $cameraListStore.length > 1 }
             <div class="control-group">
-                <!--<img src={cinemaImg} alt="Camera" />-->
+                <img src={cinemaImg} alt="Camera" />
                 <div class="nes-select">
                     <select bind:value={selectedCamera} on:change={selectCamera}>
                         {#each $cameraListStore as camera}
@@ -142,8 +142,8 @@
 
         select {
           font-family: "Press Start 2P";
-/*          margin-top: 1vh;
-          margin-bottom: 1vh;*/
+          margin-top: 1vh;
+          margin-bottom: 1vh;
 
           option {
             font-family: "Press Start 2P";
@@ -176,7 +176,7 @@
 
         img {
           width: 30px;
-          margin-right: 5px;
+          margin-right: 10px;
         }
       }
 
@@ -210,8 +210,18 @@
         align-items: center;
         justify-content: center;
       }
-
-
     }
+
+    @media only screen and (max-width: 800px) {
+      * {
+        font-size: 80%;
+      }
+        .enableCameraScene .control-group img {
+          width: 15px;
+          margin-right: 5px;
+        }
+    }
+
+
 </style>
 

From 3e1f10491a4fab4ff02e3586935c5c1b342d6834 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 14:40:38 +0200
Subject: [PATCH 090/141] font-size reduce by 20% img width = 1vw

---
 .../EnableCamera/EnableCameraScene.svelte     | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 0e7e84bb..ac8debc0 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -213,13 +213,22 @@
     }
 
     @media only screen and (max-width: 800px) {
-      * {
+      .enableCameraScene h2 {
         font-size: 80%;
       }
-        .enableCameraScene .control-group img {
-          width: 15px;
-          margin-right: 5px;
-        }
+
+      .enableCameraScene .control-group select {
+        font-size: 80%;
+      }
+
+      .enableCameraScene button.letsgo {
+        font-size: 160%;
+      }
+
+      .enableCameraScene .control-group img {
+        width: 1vw;
+        margin-right: 0px;
+      }
     }
 
 

From 88a72e015395b8894b517136871b824f12ed2525 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 15:00:01 +0200
Subject: [PATCH 091/141] change width of select field

---
 .../src/Components/EnableCamera/EnableCameraScene.svelte  | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index ac8debc0..c77342bc 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -217,18 +217,14 @@
         font-size: 80%;
       }
 
-      .enableCameraScene .control-group select {
+      .enableCameraScene .control-group .nes-select {
         font-size: 80%;
+        width: calc(100% - 50px);
       }
 
       .enableCameraScene button.letsgo {
         font-size: 160%;
       }
-
-      .enableCameraScene .control-group img {
-        width: 1vw;
-        margin-right: 0px;
-      }
     }
 
 

From 26f21fe6e4d556bf43db08ce918a019a8f94af49 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Mon, 7 Jun 2021 15:01:21 +0200
Subject: [PATCH 092/141] FIX: the visit card feature can now be disabled
 client side

---
 front/src/Enum/EnvironmentVariable.ts   | 1 +
 front/src/Phaser/Entity/RemotePlayer.ts | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts
index 73f6427c..89562456 100644
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@@ -10,6 +10,7 @@ const TURN_USER: string = process.env.TURN_USER || '';
 const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
 const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
 const JITSI_PRIVATE_MODE : boolean = process.env.JITSI_PRIVATE_MODE == "true";
+export const DISABLE_VISIT_CARD_FEATURE : boolean = process.env.DISABLE_VISIT_CARD_FEATURE == "true";
 const POSITION_DELAY = 200; // Wait 200ms between sending position events
 const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
 export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;
diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts
index c2384357..1ebf72af 100644
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/front/src/Phaser/Entity/RemotePlayer.ts
@@ -2,6 +2,7 @@ import type {GameScene} from "../Game/GameScene";
 import type {PointInterface} from "../../Connexion/ConnexionModels";
 import {Character} from "../Entity/Character";
 import type {PlayerAnimationDirections} from "../Player/Animation";
+import {DISABLE_VISIT_CARD_FEATURE} from "../../Enum/EnvironmentVariable";
 
 export const playerClickedEvent = 'playerClickedEvent';
 
@@ -46,6 +47,6 @@ export class RemotePlayer extends Character {
     }
 
     isClickable(): boolean {
-        return true; //todo: make remote players clickable if they are logged in.
+        return !DISABLE_VISIT_CARD_FEATURE; //todo: make remote players clickable if they are logged in.
     }
 }

From 1264b286b242d188a2be986a979beefa72e2aa8b Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Mon, 7 Jun 2021 15:11:54 +0200
Subject: [PATCH 093/141] FIX: trying to start a emote after a scene is
 desotryed should not crash the game

---
 front/src/Phaser/Entity/Character.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index 9c3273ec..931efb8e 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -261,7 +261,7 @@ export abstract class Character extends Container {
     }
 
     private createStartTransition(scalingFactor: number, emoteY: number) {
-        this.emoteTween = this.scene.tweens.add({
+        this.emoteTween = this.scene?.tweens.add({
             targets: this.emote,
             props: {
                 scale: scalingFactor,
@@ -277,7 +277,7 @@ export abstract class Character extends Container {
     }
 
     private startPulseTransition(emoteY: number, scalingFactor: number) {
-        this.emoteTween = this.scene.tweens.add({
+        this.emoteTween = this.scene?.tweens.add({
             targets: this.emote,
             props: {
                 y: emoteY * 1.3,
@@ -294,7 +294,7 @@ export abstract class Character extends Container {
     }
 
     private startExitTransition(emoteY: number) {
-        this.emoteTween = this.scene.tweens.add({
+        this.emoteTween = this.scene?.tweens.add({
             targets: this.emote,
             props: {
                 alpha: 0,

From 000be7aa499a113c9cecb9bfe3909d211bcea641 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 16:12:31 +0200
Subject: [PATCH 094/141] console

---
 front/src/Phaser/Login/EnableCameraScene.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index ba27cd07..3468f98c 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -33,6 +33,9 @@ export class EnableCameraScene extends ResizableScene {
         });
 
         enableCameraSceneVisibilityStore.showEnableCameraScene();
+
+        console.log('TEST');
+        console.error('TEST !!!!!');
     }
 
     public onResize(): void {

From c9da38c7ec37b6de96268f5b2834d1669e16b576 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 16:23:00 +0200
Subject: [PATCH 095/141] reduce select field

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 2 +-
 front/src/Phaser/Login/EnableCameraScene.ts                | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index c77342bc..8de52018 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -219,7 +219,7 @@
 
       .enableCameraScene .control-group .nes-select {
         font-size: 80%;
-        width: calc(100% - 50px);
+        width: 50%
       }
 
       .enableCameraScene button.letsgo {
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 3468f98c..ba27cd07 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -33,9 +33,6 @@ export class EnableCameraScene extends ResizableScene {
         });
 
         enableCameraSceneVisibilityStore.showEnableCameraScene();
-
-        console.log('TEST');
-        console.error('TEST !!!!!');
     }
 
     public onResize(): void {

From b03ee5bd53101267f91f67b88165e719e41c3a52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 7 Jun 2021 16:48:52 +0200
Subject: [PATCH 096/141] Fixing scripting origin check

When working on making the openCoWebsite URL relative, we introduced a regression.
In production, the iframe generated by "script" properties have no "src" and therefore, were treated as invalid messages.

This should fix everything in prod.
---
 front/src/Api/IframeListener.ts | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/front/src/Api/IframeListener.ts b/front/src/Api/IframeListener.ts
index fbc2b4f1..6c3afa31 100644
--- a/front/src/Api/IframeListener.ts
+++ b/front/src/Api/IframeListener.ts
@@ -70,15 +70,23 @@ class IframeListener {
             // Do we trust the sender of this message?
             // Let's only accept messages from the iframe that are allowed.
             // Note: maybe we could restrict on the domain too for additional security (in case the iframe goes to another domain).
-            let foundSrc: string | null = null;
-            for (const iframe of this.iframes) {
-                if (iframe.contentWindow === message.source) {
-                    foundSrc = iframe.src;
-                    break;
+            let foundSrc: string | undefined;
+
+            foundSrc = [...this.scripts.keys()].find(key => {
+                return this.scripts.get(key)?.contentWindow == message.source
+            });
+
+            if (foundSrc === undefined) {
+                for (const iframe of this.iframes) {
+                    if (iframe.contentWindow === message.source) {
+                        foundSrc = iframe.src;
+                        break;
+                    }
+                }
+
+                if (foundSrc === undefined) {
+                    return;
                 }
-            }
-            if (!foundSrc) {
-                return;
             }
 
             const payload = message.data;
@@ -106,11 +114,7 @@ class IframeListener {
                     this._loadSoundStream.next(payload.data);
                 }
                 else if (payload.type === 'openCoWebSite' && isOpenCoWebsite(payload.data)) {
-                    const scriptUrl = [...this.scripts.keys()].find(key => {
-                        return this.scripts.get(key)?.contentWindow == message.source
-                    })
-
-                    scriptUtils.openCoWebsite(payload.data.url, scriptUrl || foundSrc);
+                    scriptUtils.openCoWebsite(payload.data.url, foundSrc);
                 }
 
                 else if (payload.type === 'closeCoWebSite') {

From aa9c3b9f4ff5a6f732db266ea8b946c78968db88 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 7 Jun 2021 17:18:39 +0200
Subject: [PATCH 097/141] max height on select

---
 .../EnableCamera/EnableCameraScene.svelte     | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 8de52018..9318a1df 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -90,7 +90,7 @@
 
     <section class="selectWebcamForm">
 
-        {#if $cameraListStore.length > 1 }
+        <!--{#if $cameraListStore.length > 1 }-->
             <div class="control-group">
                 <img src={cinemaImg} alt="Camera" />
                 <div class="nes-select">
@@ -103,9 +103,9 @@
                     </select>
                 </div>
             </div>
-        {/if}
+<!--        {/if}
 
-        {#if $microphoneListStore.length > 1 }
+        {#if $microphoneListStore.length > 1 }-->
             <div class="control-group">
                 <img src={microphoneImg} alt="Microphone" />
                 <div class="nes-select">
@@ -118,7 +118,7 @@
                     </select>
                 </div>
             </div>
-        {/if}
+        <!--{/if}-->
 
     </section>
     <section class="action">
@@ -144,12 +144,12 @@
           font-family: "Press Start 2P";
           margin-top: 1vh;
           margin-bottom: 1vh;
+        }
 
-          option {
+        option {
             font-family: "Press Start 2P";
           }
         }
-      }
 
       section.action{
         text-align: center;
@@ -219,14 +219,16 @@
 
       .enableCameraScene .control-group .nes-select {
         font-size: 80%;
-        width: 50%
+      }
+
+      .enableCameraScene .control-group {
+        max-height: 60px;
+        margin-top: 10px;
       }
 
       .enableCameraScene button.letsgo {
         font-size: 160%;
       }
     }
-
-
 </style>
 

From a7cf0719719a37e15cbc6aaca6438790f167e544 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 8 Jun 2021 09:10:06 +0200
Subject: [PATCH 098/141] max height on select on all device and screen

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 9318a1df..d80c4267 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -173,6 +173,8 @@
       .control-group {
         display: flex;
         flex-direction: row;
+        max-height: 60px;
+        margin-top: 10px;
 
         img {
           width: 30px;
@@ -221,11 +223,6 @@
         font-size: 80%;
       }
 
-      .enableCameraScene .control-group {
-        max-height: 60px;
-        margin-top: 10px;
-      }
-
       .enableCameraScene button.letsgo {
         font-size: 160%;
       }

From 1cceed2fd63e788833a724a03375a1a1ddea2853 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 8 Jun 2021 09:52:52 +0200
Subject: [PATCH 099/141] dark mode on select

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index d80c4267..7f567009 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -93,7 +93,7 @@
         <!--{#if $cameraListStore.length > 1 }-->
             <div class="control-group">
                 <img src={cinemaImg} alt="Camera" />
-                <div class="nes-select">
+                <div class="nes-select is-dark">
                     <select bind:value={selectedCamera} on:change={selectCamera}>
                         {#each $cameraListStore as camera}
                             <option value={camera.deviceId}>

From 7a3921947aa1d546d43152bff732cee0c91db61c Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 8 Jun 2021 09:52:52 +0200
Subject: [PATCH 100/141] dark mode on select

---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 7f567009..a091a54a 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -108,7 +108,7 @@
         {#if $microphoneListStore.length > 1 }-->
             <div class="control-group">
                 <img src={microphoneImg} alt="Microphone" />
-                <div class="nes-select">
+                <div class="nes-select is-dark">
                     <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
                         {#each $microphoneListStore as microphone}
                             <option value={microphone.deviceId}>

From d615a7c6a564d3c0dc7a0f08b7449adcf2c04442 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 8 Jun 2021 10:12:59 +0200
Subject: [PATCH 101/141] suppression comments

---
 .../Components/EnableCamera/EnableCameraScene.svelte   | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index a091a54a..cec4621f 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -90,7 +90,7 @@
 
     <section class="selectWebcamForm">
 
-        <!--{#if $cameraListStore.length > 1 }-->
+        {#if $cameraListStore.length > 1 }
             <div class="control-group">
                 <img src={cinemaImg} alt="Camera" />
                 <div class="nes-select is-dark">
@@ -103,9 +103,9 @@
                     </select>
                 </div>
             </div>
-<!--        {/if}
+        {/if}
 
-        {#if $microphoneListStore.length > 1 }-->
+        {#if $microphoneListStore.length > 1 }
             <div class="control-group">
                 <img src={microphoneImg} alt="Microphone" />
                 <div class="nes-select is-dark">
@@ -118,7 +118,7 @@
                     </select>
                 </div>
             </div>
-        <!--{/if}-->
+        {/if}
 
     </section>
     <section class="action">
@@ -218,11 +218,9 @@
       .enableCameraScene h2 {
         font-size: 80%;
       }
-
       .enableCameraScene .control-group .nes-select {
         font-size: 80%;
       }
-
       .enableCameraScene button.letsgo {
         font-size: 160%;
       }

From fab5c17dc2362f3806bb7f10d146e60dbd98648c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 8 Jun 2021 12:19:07 +0200
Subject: [PATCH 102/141] Fixing the cleaning of webcam name

Closes #1130
---
 front/src/Components/EnableCamera/EnableCameraScene.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 537e8bdb..afdcc745 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -61,8 +61,8 @@
     onDestroy(unsubscribe);
 
     function normalizeDeviceName(label: string): string {
-        // remove text in parenthesis
-        return label.replace(/\([^()]*\)/g, '').trim();
+        // remove IDs (that can appear in Chrome, like: "HD Pro Webcam (4df7:4eda)"
+        return label.replace(/(\([[0-9a-f]{4}:[0-9a-f]{4}\))/g, '').trim();
     }
 
     function selectCamera() {

From 7697ed053ec22005dfe60fe34086c91bc83e1653 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Jun 2021 12:05:43 +0000
Subject: [PATCH 103/141] Bump glob-parent from 5.1.1 to 5.1.2 in /maps

Bumps [glob-parent](https://github.com/gulpjs/glob-parent) from 5.1.1 to 5.1.2.
- [Release notes](https://github.com/gulpjs/glob-parent/releases)
- [Changelog](https://github.com/gulpjs/glob-parent/blob/main/CHANGELOG.md)
- [Commits](https://github.com/gulpjs/glob-parent/compare/v5.1.1...v5.1.2)

---
updated-dependencies:
- dependency-name: glob-parent
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 maps/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/maps/yarn.lock b/maps/yarn.lock
index 041c70ed..cc8a82fa 100644
--- a/maps/yarn.lock
+++ b/maps/yarn.lock
@@ -617,9 +617,9 @@ get-stdin@^4.0.1:
   integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
 
 glob-parent@^5.0.0, glob-parent@~5.1.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
-  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 

From 81160b6dc7b324dc24ccb2c96f3f95d37b417c68 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Jun 2021 12:05:43 +0000
Subject: [PATCH 104/141] Bump glob-parent from 5.1.1 to 5.1.2 in /uploader

Bumps [glob-parent](https://github.com/gulpjs/glob-parent) from 5.1.1 to 5.1.2.
- [Release notes](https://github.com/gulpjs/glob-parent/releases)
- [Changelog](https://github.com/gulpjs/glob-parent/blob/main/CHANGELOG.md)
- [Commits](https://github.com/gulpjs/glob-parent/compare/v5.1.1...v5.1.2)

---
updated-dependencies:
- dependency-name: glob-parent
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 uploader/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/uploader/yarn.lock b/uploader/yarn.lock
index 5b6741ac..88f2744f 100644
--- a/uploader/yarn.lock
+++ b/uploader/yarn.lock
@@ -763,9 +763,9 @@ get-stdin@^4.0.1:
   integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
 
 glob-parent@^5.0.0, glob-parent@~5.1.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
-  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 

From 6e241709b1529172fb1793681897afd0efca02f3 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Jun 2021 12:05:44 +0000
Subject: [PATCH 105/141] Bump glob-parent from 5.1.1 to 5.1.2 in /messages

Bumps [glob-parent](https://github.com/gulpjs/glob-parent) from 5.1.1 to 5.1.2.
- [Release notes](https://github.com/gulpjs/glob-parent/releases)
- [Changelog](https://github.com/gulpjs/glob-parent/blob/main/CHANGELOG.md)
- [Commits](https://github.com/gulpjs/glob-parent/compare/v5.1.1...v5.1.2)

---
updated-dependencies:
- dependency-name: glob-parent
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 messages/yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/messages/yarn.lock b/messages/yarn.lock
index af71c938..564da3f4 100644
--- a/messages/yarn.lock
+++ b/messages/yarn.lock
@@ -1823,9 +1823,9 @@ getpass@^0.1.1:
     assert-plus "^1.0.0"
 
 glob-parent@^5.0.0, glob-parent@^5.1.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
-  integrity sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 

From cf8e6e2a76f562b1afc2cace72c83ca2ec2ab774 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 8 Jun 2021 12:05:46 +0000
Subject: [PATCH 106/141] Bump glob-parent from 5.1.1 to 5.1.2 in /benchmark

Bumps [glob-parent](https://github.com/gulpjs/glob-parent) from 5.1.1 to 5.1.2.
- [Release notes](https://github.com/gulpjs/glob-parent/releases)
- [Changelog](https://github.com/gulpjs/glob-parent/blob/main/CHANGELOG.md)
- [Commits](https://github.com/gulpjs/glob-parent/compare/v5.1.1...v5.1.2)

---
updated-dependencies:
- dependency-name: glob-parent
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 benchmark/package-lock.json | 6 +++---
 benchmark/yarn.lock         | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/benchmark/package-lock.json b/benchmark/package-lock.json
index 72d0aae4..ba52caf2 100644
--- a/benchmark/package-lock.json
+++ b/benchmark/package-lock.json
@@ -209,9 +209,9 @@
       }
     },
     "glob-parent": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "requires": {
         "is-glob": "^4.0.1"
       }
diff --git a/benchmark/yarn.lock b/benchmark/yarn.lock
index f1209dcf..a7f9ec0d 100644
--- a/benchmark/yarn.lock
+++ b/benchmark/yarn.lock
@@ -148,8 +148,8 @@ get-stdin@^4.0.1:
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
 
 glob-parent@~5.1.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.1.tgz#b6c1ef417c4e5663ea498f1c45afac6916bbc229"
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   dependencies:
     is-glob "^4.0.1"
 

From 4c1dd914eb9093fb25a046c5e39251caaf9de68f Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 8 Jun 2021 16:32:21 +0200
Subject: [PATCH 107/141] DOM element game 1OO% height

---
 front/style/style.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front/style/style.scss b/front/style/style.scss
index 672950e2..8522d4a4 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -367,6 +367,7 @@ body {
 }
 
 #game {
+    height: 100%;
     width: 100%;
     position: relative; /* Position relative is needed for the game-overlay. */
 }

From dd45996f9c2c6f97f894d9682183a7bb4a04549c Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Tue, 8 Jun 2021 16:30:58 +0200
Subject: [PATCH 108/141] FIX: improved the visit card, cleanup the code

---
 back/src/Model/Admin.ts                       |  5 +---
 back/src/Model/GameRoom.ts                    |  1 +
 back/src/Model/User.ts                        |  1 +
 back/src/RoomManager.ts                       |  4 +---
 back/src/Services/AdminApi.ts                 | 22 -----------------
 back/src/Services/SocketManager.ts            | 24 ++++++-------------
 back/tests/PositionNotifierTest.ts            | 12 ++++------
 .../src/Components/VisitCard/VisitCard.svelte | 15 +-----------
 front/src/Connexion/ConnexionModels.ts        |  9 ++-----
 front/src/Connexion/RoomConnection.ts         | 16 ++-----------
 front/src/Enum/EnvironmentVariable.ts         |  1 -
 front/src/Phaser/Entity/Character.ts          |  5 ++--
 front/src/Phaser/Entity/RemotePlayer.ts       | 14 +++++------
 front/src/Phaser/Game/AddPlayerInterface.ts   |  1 +
 front/src/Phaser/Game/GameScene.ts            |  8 +++----
 front/src/Phaser/Player/Player.ts             |  6 +----
 messages/protos/messages.proto                | 14 +++--------
 pusher/src/Controller/IoSocketController.ts   | 14 +++++------
 .../src/Model/Websocket/ExSocketInterface.ts  |  1 +
 pusher/src/Model/Zone.ts                      |  9 ++++---
 pusher/src/Services/AdminApi.ts               |  1 +
 pusher/src/Services/SocketManager.ts          | 11 +++------
 22 files changed, 54 insertions(+), 140 deletions(-)
 delete mode 100644 back/src/Services/AdminApi.ts

diff --git a/back/src/Model/Admin.ts b/back/src/Model/Admin.ts
index 0be74b85..29b53385 100644
--- a/back/src/Model/Admin.ts
+++ b/back/src/Model/Admin.ts
@@ -1,9 +1,6 @@
 import {
-    BatchMessage,
-    PusherToBackMessage,
     ServerToAdminClientMessage,
-    ServerToClientMessage,
-    SubMessage, UserJoinedRoomMessage, UserLeftRoomMessage
+    UserJoinedRoomMessage, UserLeftRoomMessage
 } from "../Messages/generated/messages_pb";
 import {AdminSocket} from "../RoomManager";
 
diff --git a/back/src/Model/GameRoom.ts b/back/src/Model/GameRoom.ts
index 22ea8ca5..53d0a855 100644
--- a/back/src/Model/GameRoom.ts
+++ b/back/src/Model/GameRoom.ts
@@ -108,6 +108,7 @@ export class GameRoom {
             this.positionNotifier,
             socket,
             joinRoomMessage.getTagList(),
+            joinRoomMessage.getVisitcardurl(),
             joinRoomMessage.getName(),
             ProtobufUtils.toCharacterLayerObjects(joinRoomMessage.getCharacterlayerList()),
             joinRoomMessage.getCompanion()
diff --git a/back/src/Model/User.ts b/back/src/Model/User.ts
index 52a96b61..4a3e75ec 100644
--- a/back/src/Model/User.ts
+++ b/back/src/Model/User.ts
@@ -22,6 +22,7 @@ export class User implements Movable {
         private positionNotifier: PositionNotifier,
         public readonly socket: UserSocket,
         public readonly tags: string[],
+        public readonly visitCardUrl: string|null,
         public readonly name: string,
         public readonly characterLayers: CharacterLayer[],
         public readonly companion?: CompanionMessage
diff --git a/back/src/RoomManager.ts b/back/src/RoomManager.ts
index a0f983e0..19266687 100644
--- a/back/src/RoomManager.ts
+++ b/back/src/RoomManager.ts
@@ -11,7 +11,7 @@ import {
     JoinRoomMessage,
     PlayGlobalMessage,
     PusherToBackMessage,
-    QueryJitsiJwtMessage, RefreshRoomPromptMessage, RequestVisitCardMessage,
+    QueryJitsiJwtMessage, RefreshRoomPromptMessage,
     ServerToAdminClientMessage,
     ServerToClientMessage,
     SilentMessage,
@@ -74,8 +74,6 @@ const roomManager: IRoomManagerServer = {
                         socketManager.handleQueryJitsiJwtMessage(user, message.getQueryjitsijwtmessage() as QueryJitsiJwtMessage);
                     } else if (message.hasEmotepromptmessage()){
                         socketManager.handleEmoteEventMessage(room, user, message.getEmotepromptmessage() as EmotePromptMessage);
-                    } else if (message.hasRequestvisitcardmessage()) {
-                        socketManager.handleRequestVisitCardMessage(room, user, message.getRequestvisitcardmessage() as RequestVisitCardMessage);
                     }else if (message.hasSendusermessage()) {
                         const sendUserMessage = message.getSendusermessage();
                         if(sendUserMessage !== undefined) {
diff --git a/back/src/Services/AdminApi.ts b/back/src/Services/AdminApi.ts
deleted file mode 100644
index 09b092bf..00000000
--- a/back/src/Services/AdminApi.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import {ADMIN_API_TOKEN, ADMIN_API_URL} from "../Enum/EnvironmentVariable";
-import Axios from "axios";
-
-
-class AdminApi {
-
-    fetchVisitCardUrl(membershipUuid: string): Promise<string> {
-        if (ADMIN_API_URL) {
-            return Axios.get(ADMIN_API_URL + '/api/membership/'+membershipUuid,
-                {headers: {"Authorization": `${ADMIN_API_TOKEN}`}}
-            ).then((res) => {
-                return res.data;
-            }).catch(() => {
-                return 'INVALID';
-            });
-        } else {
-            return Promise.resolve('INVALID')
-        }
-    }
-}
-
-export const adminApi = new AdminApi();
diff --git a/back/src/Services/SocketManager.ts b/back/src/Services/SocketManager.ts
index f8fe7cd3..a56a1ac4 100644
--- a/back/src/Services/SocketManager.ts
+++ b/back/src/Services/SocketManager.ts
@@ -27,7 +27,7 @@ import {
     WorldFullWarningMessage,
     UserLeftZoneMessage,
     EmoteEventMessage,
-    BanUserMessage, RefreshRoomMessage, EmotePromptMessage, RequestVisitCardMessage, VisitCardMessage,
+    BanUserMessage, RefreshRoomMessage, EmotePromptMessage,
 } from "../Messages/generated/messages_pb";
 import {User, UserSocket} from "../Model/User";
 import {ProtobufUtils} from "../Model/Websocket/ProtobufUtils";
@@ -51,7 +51,6 @@ import {Zone} from "_Model/Zone";
 import Debug from "debug";
 import {Admin} from "_Model/Admin";
 import crypto from "crypto";
-import {adminApi} from "./AdminApi";
 
 
 const debug = Debug('sockermanager');
@@ -300,6 +299,9 @@ export class SocketManager {
             userJoinedZoneMessage.setCharacterlayersList(ProtobufUtils.toCharacterLayerMessages(thing.characterLayers));
             userJoinedZoneMessage.setPosition(ProtobufUtils.toPositionMessage(thing.getPosition()));
             userJoinedZoneMessage.setFromzone(this.toProtoZone(fromZone));
+            if (thing.visitCardUrl) {
+                userJoinedZoneMessage.setVisitcardurl(thing.visitCardUrl);
+            }
             userJoinedZoneMessage.setCompanion(thing.companion);
 
             const subMessage = new SubToPusherMessage();
@@ -605,6 +607,9 @@ export class SocketManager {
                 userJoinedMessage.setName(thing.name);
                 userJoinedMessage.setCharacterlayersList(ProtobufUtils.toCharacterLayerMessages(thing.characterLayers));
                 userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(thing.getPosition()));
+                if (thing.visitCardUrl) {
+                    userJoinedMessage.setVisitcardurl(thing.visitCardUrl);
+                }
                 userJoinedMessage.setCompanion(thing.companion);
 
                 const subMessage = new SubToPusherMessage();
@@ -770,21 +775,6 @@ export class SocketManager {
         emoteEventMessage.setActoruserid(user.id);
         room.emitEmoteEvent(user, emoteEventMessage);
     }
-
-    async handleRequestVisitCardMessage(room: GameRoom, user: User, requestvisitcardmessage: RequestVisitCardMessage): Promise<void> {
-        const targetUser = room.getUserById(requestvisitcardmessage.getTargetuserid());
-        if (!targetUser) {
-            throw 'Could not find user for id '+requestvisitcardmessage.getTargetuserid();
-        }
-        const url = await adminApi.fetchVisitCardUrl(targetUser.uuid);
-        
-        const visitCardMessage = new VisitCardMessage();
-        visitCardMessage.setUrl(url);
-        const clientMessage = new ServerToClientMessage();
-        clientMessage.setVisitcardmessage(visitCardMessage);
-        
-        user.socket.write(clientMessage);
-    }
 }
 
 export const socketManager = new SocketManager();
diff --git a/back/tests/PositionNotifierTest.ts b/back/tests/PositionNotifierTest.ts
index 24b171d9..1aaf2e13 100644
--- a/back/tests/PositionNotifierTest.ts
+++ b/back/tests/PositionNotifierTest.ts
@@ -1,10 +1,6 @@
 import "jasmine";
-import {GameRoom, ConnectCallback, DisconnectCallback } from "_Model/GameRoom";
-import {Point} from "../src/Model/Websocket/MessageUserPosition";
-import { Group } from "../src/Model/Group";
 import {PositionNotifier} from "../src/Model/PositionNotifier";
 import {User, UserSocket} from "../src/Model/User";
-import {PointInterface} from "../src/Model/Websocket/PointInterface";
 import {Zone} from "_Model/Zone";
 import {Movable} from "_Model/Movable";
 import {PositionInterface} from "_Model/PositionInterface";
@@ -30,14 +26,14 @@ describe("PositionNotifier", () => {
             y: 500,
             moving: false,
             direction: 'down'
-        }, false, positionNotifier, {} as UserSocket, [], 'foo', []);
+        }, false, positionNotifier, {} as UserSocket, [], null, 'foo', []);
 
         const user2 = new User(2, 'test', '10.0.0.2', {
             x: -9999,
             y: -9999,
             moving: false,
             direction: 'down'
-        }, false, positionNotifier, {} as UserSocket, [], 'foo', []);
+        }, false, positionNotifier, {} as UserSocket, [], null, 'foo', []);
 
         positionNotifier.addZoneListener({} as ZoneSocket, 0, 0);
         positionNotifier.addZoneListener({} as ZoneSocket, 0, 1);
@@ -105,14 +101,14 @@ describe("PositionNotifier", () => {
             y: 500,
             moving: false,
             direction: 'down'
-        }, false, positionNotifier, {} as UserSocket, [], 'foo', []);
+        }, false, positionNotifier, {} as UserSocket, [], null, 'foo', []);
 
         const user2 = new User(2, 'test', '10.0.0.2', {
             x: 0,
             y: 0,
             moving: false,
             direction: 'down'
-        }, false, positionNotifier, {} as UserSocket, [], 'foo', []);
+        }, false, positionNotifier, {} as UserSocket, [], null, 'foo', []);
 
         const listener = {} as ZoneSocket;
         positionNotifier.addZoneListener(listener, 0, 0);
diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte
index 7a289eae..cc7f00d6 100644
--- a/front/src/Components/VisitCard/VisitCard.svelte
+++ b/front/src/Components/VisitCard/VisitCard.svelte
@@ -44,20 +44,7 @@
 
 
 <section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}">
-    {#if visitCardUrl === 'INVALID'}
-        <div class="defaultCard">
-            <header>
-                <h2>Sorry</h2>
-                <p style="font-style: italic;">This user doesn't have a contact card.</p>
-            </header>
-
-            <main style="padding: 5px; background-color: gray">
-                <p>Maybe he is offline, or this feature is deactivated.</p>
-            </main>
-        </div>
-    {:else}
-        <iframe title="visitCardTitle" src={visitCardUrl}></iframe>
-    {/if}
+    <iframe title="visitCardTitle" src={visitCardUrl}></iframe>
     <div class="buttonContainer">
         <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
     </div>
diff --git a/front/src/Connexion/ConnexionModels.ts b/front/src/Connexion/ConnexionModels.ts
index 09447445..b5a66296 100644
--- a/front/src/Connexion/ConnexionModels.ts
+++ b/front/src/Connexion/ConnexionModels.ts
@@ -1,5 +1,3 @@
-import {PlayerAnimationDirections} from "../Phaser/Player/Animation";
-import {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
 import type {SignalData} from "simple-peer";
 import type {RoomConnection} from "./RoomConnection";
 import type {BodyResourceDescriptionInterface} from "../Phaser/Entity/PlayerTextures";
@@ -47,6 +45,7 @@ export interface MessageUserPositionInterface {
     name: string;
     characterLayers: BodyResourceDescriptionInterface[];
     position: PointInterface;
+    visitCardUrl: string|null;
     companion: string|null;
 }
 
@@ -60,6 +59,7 @@ export interface MessageUserJoined {
     name: string;
     characterLayers: BodyResourceDescriptionInterface[];
     position: PointInterface;
+    visitCardUrl: string | null;
     companion: string|null;
 }
 
@@ -85,11 +85,6 @@ export interface WebRtcSignalReceivedMessageInterface {
     webRtcPassword: string | undefined
 }
 
-export interface StartMapInterface {
-    mapUrlStart: string,
-    startInstance: string
-}
-
 export interface ViewportInterface {
     left: number,
     top: number,
diff --git a/front/src/Connexion/RoomConnection.ts b/front/src/Connexion/RoomConnection.ts
index ae9a1986..fe1a78b0 100644
--- a/front/src/Connexion/RoomConnection.ts
+++ b/front/src/Connexion/RoomConnection.ts
@@ -30,7 +30,7 @@ import {
     EmoteEventMessage,
     EmotePromptMessage,
     SendUserMessage,
-    BanUserMessage, RequestVisitCardMessage
+    BanUserMessage,
 } from "../Messages/generated/messages_pb"
 
 import type {UserSimplePeerInterface} from "../WebRtc/SimplePeer";
@@ -50,7 +50,6 @@ import {worldFullMessageStream} from "./WorldFullMessageStream";
 import {worldFullWarningStream} from "./WorldFullWarningStream";
 import {connectionManager} from "./ConnectionManager";
 import {emoteEventStream} from "./EmoteEventStream";
-import {requestVisitCardsStore} from "../Stores/GameStore";
 
 const manualPingDelay = 20000;
 
@@ -204,8 +203,6 @@ export class RoomConnection implements RoomConnection {
                 adminMessagesService.onSendusermessage(message.getBanusermessage() as BanUserMessage);
             } else if (message.hasWorldfullwarningmessage()) {
                 worldFullWarningStream.onMessage();
-            } else if (message.hasVisitcardmessage()) {
-                requestVisitCardsStore.set(message?.getVisitcardmessage()?.getUrl() as unknown as string);
             } else if (message.hasRefreshroommessage()) {
                 //todo: implement a way to notify the user the room was refreshed.
             } else {
@@ -347,6 +344,7 @@ export class RoomConnection implements RoomConnection {
             userId: message.getUserid(),
             name: message.getName(),
             characterLayers,
+            visitCardUrl: message.getVisitcardurl(),
             position: ProtobufClientUtils.toPointInterface(position),
             companion: companion ? companion.getName() : null
         }
@@ -620,14 +618,4 @@ export class RoomConnection implements RoomConnection {
 
         this.socket.send(clientToServerMessage.serializeBinary().buffer);
     }
-    
-    public requestVisitCardUrl(targetUserId: number): void {
-        const message = new RequestVisitCardMessage();
-        message.setTargetuserid(targetUserId);
-
-        const clientToServerMessage = new ClientToServerMessage();
-        clientToServerMessage.setRequestvisitcardmessage(message);
-
-        this.socket.send(clientToServerMessage.serializeBinary().buffer);
-    }
 }
diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts
index 89562456..73f6427c 100644
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@@ -10,7 +10,6 @@ const TURN_USER: string = process.env.TURN_USER || '';
 const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
 const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
 const JITSI_PRIVATE_MODE : boolean = process.env.JITSI_PRIVATE_MODE == "true";
-export const DISABLE_VISIT_CARD_FEATURE : boolean = process.env.DISABLE_VISIT_CARD_FEATURE == "true";
 const POSITION_DELAY = 200; // Wait 200ms between sending position events
 const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
 export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;
diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index 931efb8e..b1e8dc73 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -41,6 +41,7 @@ export abstract class Character extends Container {
                 direction: PlayerAnimationDirections,
                 moving: boolean,
                 frame: string | number,
+                isClickable: boolean,
                 companion: string|null,
                 companionTexturePromise?: Promise<string>
     ) {
@@ -60,7 +61,7 @@ export abstract class Character extends Container {
         this.playerName.setOrigin(0.5).setDepth(DEPTH_INGAME_TEXT_INDEX);
         this.add(this.playerName);
 
-        if (this.isClickable()) {
+        if (isClickable) {
             this.setInteractive({
                 hitArea: new Phaser.Geom.Circle(0, 0, interactiveRadius),
                 hitAreaCallback: Phaser.Geom.Circle.Contains, //eslint-disable-line @typescript-eslint/unbound-method
@@ -90,8 +91,6 @@ export abstract class Character extends Container {
             this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);
         }
     }
-    
-    public abstract isClickable(): boolean;
 
     public addTextures(textures: string[], frame?: string | number): void {
         for (const texture of textures) {
diff --git a/front/src/Phaser/Entity/RemotePlayer.ts b/front/src/Phaser/Entity/RemotePlayer.ts
index 1ebf72af..32881e97 100644
--- a/front/src/Phaser/Entity/RemotePlayer.ts
+++ b/front/src/Phaser/Entity/RemotePlayer.ts
@@ -2,15 +2,15 @@ import type {GameScene} from "../Game/GameScene";
 import type {PointInterface} from "../../Connexion/ConnexionModels";
 import {Character} from "../Entity/Character";
 import type {PlayerAnimationDirections} from "../Player/Animation";
-import {DISABLE_VISIT_CARD_FEATURE} from "../../Enum/EnvironmentVariable";
+import {requestVisitCardsStore} from "../../Stores/GameStore";
 
-export const playerClickedEvent = 'playerClickedEvent';
 
 /**
  * Class representing the sprite of a remote player (a player that plays on another computer)
  */
 export class RemotePlayer extends Character {
     userId: number;
+    private visitCardUrl: string|null;
 
     constructor(
         userId: number,
@@ -21,16 +21,18 @@ export class RemotePlayer extends Character {
         texturesPromise: Promise<string[]>,
         direction: PlayerAnimationDirections,
         moving: boolean,
+        visitCardUrl: string|null,
         companion: string|null,
         companionTexturePromise?: Promise<string>
     ) {
-        super(Scene, x, y, texturesPromise, name, direction, moving, 1, companion, companionTexturePromise);
+        super(Scene, x, y, texturesPromise, name, direction, moving, 1, !!visitCardUrl, companion, companionTexturePromise);
         
         //set data
         this.userId = userId;
+        this.visitCardUrl = visitCardUrl;
         
         this.on('pointerdown', () => {
-            this.emit(playerClickedEvent, this.userId);
+            requestVisitCardsStore.set(this.visitCardUrl);
         })
     }
 
@@ -45,8 +47,4 @@ export class RemotePlayer extends Character {
             this.companion.setTarget(position.x, position.y, position.direction as PlayerAnimationDirections);
         }
     }
-
-    isClickable(): boolean {
-        return !DISABLE_VISIT_CARD_FEATURE; //todo: make remote players clickable if they are logged in.
-    }
 }
diff --git a/front/src/Phaser/Game/AddPlayerInterface.ts b/front/src/Phaser/Game/AddPlayerInterface.ts
index 70c341ee..1a5176f0 100644
--- a/front/src/Phaser/Game/AddPlayerInterface.ts
+++ b/front/src/Phaser/Game/AddPlayerInterface.ts
@@ -6,5 +6,6 @@ export interface AddPlayerInterface {
     name: string;
     characterLayers: BodyResourceDescriptionInterface[];
     position: PointInterface;
+    visitCardUrl: string|null;
     companion: string|null;
 }
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index e6e40df6..72279c61 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -21,7 +21,6 @@ import type {
     ITiledMapLayer,
     ITiledMapLayerProperty,
     ITiledMapObject,
-    ITiledText,
     ITiledMapTileLayer,
     ITiledTileSet
 } from "../Map/ITiledMap";
@@ -29,7 +28,7 @@ import type {AddPlayerInterface} from "./AddPlayerInterface";
 import {PlayerAnimationDirections} from "../Player/Animation";
 import {PlayerMovement} from "./PlayerMovement";
 import {PlayersPositionInterpolator} from "./PlayersPositionInterpolator";
-import {playerClickedEvent, RemotePlayer} from "../Entity/RemotePlayer";
+import {RemotePlayer} from "../Entity/RemotePlayer";
 import {Queue} from 'queue-typescript';
 import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
@@ -572,6 +571,7 @@ export class GameScene extends DirtyScene implements CenterListener {
                     characterLayers: message.characterLayers,
                     name: message.name,
                     position: message.position,
+                    visitCardUrl: message.visitCardUrl,
                     companion: message.companion
                 }
                 this.addPlayer(userMessage);
@@ -1376,12 +1376,10 @@ ${escapedMessage}
             texturesPromise,
             addPlayerData.position.direction as PlayerAnimationDirections,
             addPlayerData.position.moving,
+            addPlayerData.visitCardUrl,
             addPlayerData.companion,
             addPlayerData.companion !== null ? lazyLoadCompanionResource(this.load, addPlayerData.companion) : undefined
         );
-        player.on(playerClickedEvent, (userID:number) => {
-            this.connection?.requestVisitCardUrl(userID);
-        })
         this.MapPlayers.add(player);
         this.MapPlayersByKey.set(player.userId, player);
         player.updatePosition(addPlayerData.position);
diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts
index b7f31aad..7ed366f7 100644
--- a/front/src/Phaser/Player/Player.ts
+++ b/front/src/Phaser/Player/Player.ts
@@ -26,7 +26,7 @@ export class Player extends Character {
         companion: string|null,
         companionTexturePromise?: Promise<string>
     ) {
-        super(Scene, x, y, texturesPromise, name, direction, moving, 1, companion, companionTexturePromise);
+        super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);
 
         //the current player model should be push away by other players to prevent conflict
         this.getBody().setImmovable(false);
@@ -102,10 +102,6 @@ export class Player extends Character {
         }
     }
 
-    isClickable(): boolean {
-        return true;
-    }
-
     openEmoteMenu(emotes:RadialMenuItem[]): void {
         this.cancelPreviousEmote();
         this.emoteMenu = new RadialMenu(this.scene, this.x, this.y, emotes)
diff --git a/messages/protos/messages.proto b/messages/protos/messages.proto
index 3cf0767d..52d58d6d 100644
--- a/messages/protos/messages.proto
+++ b/messages/protos/messages.proto
@@ -75,14 +75,6 @@ message EmoteEventMessage {
     string emote = 2;
 }
 
-message RequestVisitCardMessage {
-    int32 targetUserId = 1;
-}
-
-message VisitCardMessage {
-    string url = 1;
-}
-
 message QueryJitsiJwtMessage {
   string jitsiRoom = 1;
   string tag = 2; // FIXME: rather than reading the tag from the query, we should read it from the current map!
@@ -102,7 +94,6 @@ message ClientToServerMessage {
     ReportPlayerMessage reportPlayerMessage = 11;
     QueryJitsiJwtMessage queryJitsiJwtMessage = 12;
     EmotePromptMessage emotePromptMessage = 13;
-    RequestVisitCardMessage requestVisitCardMessage = 14;
   }
 }
 
@@ -166,6 +157,7 @@ message UserJoinedMessage {
   repeated CharacterLayerMessage characterLayers = 3;
   PositionMessage position = 4;
   CompanionMessage companion = 5;
+  string visitCardUrl = 6;
 }
 
 message UserLeftMessage {
@@ -268,7 +260,6 @@ message ServerToClientMessage {
     RefreshRoomMessage refreshRoomMessage = 17; 
     WorldConnexionMessage worldConnexionMessage = 18;
     EmoteEventMessage emoteEventMessage = 19;
-    VisitCardMessage visitCardMessage = 20;
   }
 }
 
@@ -284,6 +275,7 @@ message JoinRoomMessage {
   repeated string tag = 6;
   string IPAddress = 7;
   CompanionMessage companion = 8;
+  string visitCardUrl = 9;
 }
 
 message UserJoinedZoneMessage {
@@ -293,6 +285,7 @@ message UserJoinedZoneMessage {
   PositionMessage position = 4;
   Zone fromZone = 5;
   CompanionMessage companion = 6;
+  string visitCardUrl = 7;
 }
 
 message UserLeftZoneMessage {
@@ -340,7 +333,6 @@ message PusherToBackMessage {
     SendUserMessage sendUserMessage = 12;
     BanUserMessage banUserMessage = 13;
     EmotePromptMessage emotePromptMessage = 14;
-    RequestVisitCardMessage requestVisitCardMessage = 15;
   }
 }
 
diff --git a/pusher/src/Controller/IoSocketController.ts b/pusher/src/Controller/IoSocketController.ts
index d79b39a3..b2079953 100644
--- a/pusher/src/Controller/IoSocketController.ts
+++ b/pusher/src/Controller/IoSocketController.ts
@@ -1,5 +1,5 @@
 import {CharacterLayer, ExSocketInterface} from "../Model/Websocket/ExSocketInterface"; //TODO fix import by "_Model/.."
-import {GameRoomPolicyTypes, PusherRoom} from "../Model/PusherRoom";
+import {GameRoomPolicyTypes} from "../Model/PusherRoom";
 import {PointInterface} from "../Model/Websocket/PointInterface";
 import {
     SetPlayerDetailsMessage,
@@ -12,13 +12,11 @@ import {
     WebRtcSignalToServerMessage,
     PlayGlobalMessage,
     ReportPlayerMessage,
-    EmoteEventMessage,
     QueryJitsiJwtMessage,
     SendUserMessage,
     ServerToClientMessage,
     CompanionMessage,
     EmotePromptMessage,
-    RequestVisitCardMessage
 } from "../Messages/generated/messages_pb";
 import {UserMovesMessage} from "../Messages/generated/messages_pb";
 import {TemplatedApp} from "uWebSockets.js"
@@ -26,7 +24,7 @@ import {parse} from "query-string";
 import {jwtTokenManager} from "../Services/JWTTokenManager";
 import {adminApi, CharacterTexture, FetchMemberDataByUuidResponse} from "../Services/AdminApi";
 import {SocketManager, socketManager} from "../Services/SocketManager";
-import {emitError, emitInBatch} from "../Services/IoSocketHelpers";
+import {emitInBatch} from "../Services/IoSocketHelpers";
 import {ADMIN_API_TOKEN, ADMIN_API_URL, SOCKET_IDLE_TIMER} from "../Enum/EnvironmentVariable";
 import {Zone} from "_Model/Zone";
 import {ExAdminSocketInterface} from "_Model/Websocket/ExAdminSocketInterface";
@@ -169,6 +167,7 @@ export class IoSocketController {
                         const userUuid = await jwtTokenManager.getUserUuidFromToken(token, IPAddress, roomId);
 
                         let memberTags: string[] = [];
+                        let memberVisitCardUrl: string|null = null;
                         let memberMessages: unknown;
                         let memberTextures: CharacterTexture[] = [];
                         const room = await socketManager.getOrCreateRoom(roomId);
@@ -177,6 +176,7 @@ export class IoSocketController {
                                 let userData : FetchMemberDataByUuidResponse = {
                                     uuid: v4(),
                                     tags: [],
+                                    visitCardUrl: null,
                                     textures: [],
                                     messages: [],
                                     anonymous: true
@@ -204,6 +204,7 @@ export class IoSocketController {
                                 }
                                 memberMessages = userData.messages;
                                 memberTags = userData.tags;
+                                memberVisitCardUrl = userData.visitCardUrl;
                                 memberTextures = userData.textures;
                                 if (!room.public && room.policyType === GameRoomPolicyTypes.USE_TAGS_POLICY && (userData.anonymous === true || !room.canAccess(memberTags))) {
                                     throw new Error('Insufficient privileges to access this room')
@@ -240,6 +241,7 @@ export class IoSocketController {
                                 characterLayers: characterLayerObjs,
                                 messages: memberMessages,
                                 tags: memberTags,
+                                visitCardUrl: memberVisitCardUrl,
                                 textures: memberTextures,
                                 position: {
                                     x: x,
@@ -338,9 +340,6 @@ export class IoSocketController {
                     socketManager.handleQueryJitsiJwtMessage(client, message.getQueryjitsijwtmessage() as QueryJitsiJwtMessage);
                 } else if (message.hasEmotepromptmessage()){
                     socketManager.handleEmotePromptMessage(client, message.getEmotepromptmessage() as EmotePromptMessage);
-                } else if (message.hasRequestvisitcardmessage()) {
-                    
-                    socketManager.handleRequestVisitCardMessage(client, message.getRequestvisitcardmessage() as RequestVisitCardMessage);
                 }
 
                     /* Ok is false if backpressure was built up, wait for drain */
@@ -381,6 +380,7 @@ export class IoSocketController {
         client.messages = ws.messages;
         client.name = ws.name;
         client.tags = ws.tags;
+        client.visitCardUrl = ws.visitCardUrl;
         client.textures = ws.textures;
         client.characterLayers = ws.characterLayers;
         client.companion = ws.companion;
diff --git a/pusher/src/Model/Websocket/ExSocketInterface.ts b/pusher/src/Model/Websocket/ExSocketInterface.ts
index 5b9a4f7e..98759142 100644
--- a/pusher/src/Model/Websocket/ExSocketInterface.ts
+++ b/pusher/src/Model/Websocket/ExSocketInterface.ts
@@ -40,6 +40,7 @@ export interface ExSocketInterface extends WebSocket, Identificable {
     disconnecting: boolean,
     messages: unknown,
     tags: string[],
+    visitCardUrl: string|null,
     textures: CharacterTexture[],
     backConnection: BackConnection,
     listenedZones: Set<Zone>;
diff --git a/pusher/src/Model/Zone.ts b/pusher/src/Model/Zone.ts
index 5c50ef00..318a119b 100644
--- a/pusher/src/Model/Zone.ts
+++ b/pusher/src/Model/Zone.ts
@@ -30,7 +30,7 @@ export type MovesCallback = (thing: Movable, position: PositionInterface, listen
 export type LeavesCallback = (thing: Movable, listener: User) => void;*/
 
 export class UserDescriptor {
-    private constructor(public readonly userId: number, private name: string, private characterLayers: CharacterLayerMessage[], private position: PositionMessage, private companion?: CompanionMessage) {
+    private constructor(public readonly userId: number, private name: string, private characterLayers: CharacterLayerMessage[], private position: PositionMessage, private visitCardUrl: string | null, private companion?: CompanionMessage) {
         if (!Number.isInteger(this.userId)) {
             throw new Error('UserDescriptor.userId is not an integer: '+this.userId);
         }
@@ -41,7 +41,7 @@ export class UserDescriptor {
         if (position === undefined) {
             throw new Error('Missing position');
         }
-        return new UserDescriptor(message.getUserid(), message.getName(), message.getCharacterlayersList(), position, message.getCompanion());
+        return new UserDescriptor(message.getUserid(), message.getName(), message.getCharacterlayersList(), position, message.getVisitcardurl(),  message.getCompanion());
     }
 
     public update(userMovedMessage: UserMovedMessage) {
@@ -59,7 +59,10 @@ export class UserDescriptor {
         userJoinedMessage.setName(this.name);
         userJoinedMessage.setCharacterlayersList(this.characterLayers);
         userJoinedMessage.setPosition(this.position);
-        userJoinedMessage.setCompanion(this.companion)
+        if (this.visitCardUrl) {
+            userJoinedMessage.setVisitcardurl(this.visitCardUrl);
+        }
+        userJoinedMessage.setCompanion(this.companion);
 
         return userJoinedMessage;
     }
diff --git a/pusher/src/Services/AdminApi.ts b/pusher/src/Services/AdminApi.ts
index bd8edeb6..fbd7a070 100644
--- a/pusher/src/Services/AdminApi.ts
+++ b/pusher/src/Services/AdminApi.ts
@@ -36,6 +36,7 @@ export interface CharacterTexture {
 export interface FetchMemberDataByUuidResponse {
     uuid: string;
     tags: string[];
+    visitCardUrl: string|null;
     textures: CharacterTexture[];
     messages: unknown[];
     anonymous?: boolean;
diff --git a/pusher/src/Services/SocketManager.ts b/pusher/src/Services/SocketManager.ts
index c1727a4b..319d2b5e 100644
--- a/pusher/src/Services/SocketManager.ts
+++ b/pusher/src/Services/SocketManager.ts
@@ -30,7 +30,6 @@ import {
     BanMessage,
     RefreshRoomMessage,
     EmotePromptMessage,
-    RequestVisitCardMessage
 } from "../Messages/generated/messages_pb";
 import {ProtobufUtils} from "../Model/Websocket/ProtobufUtils";
 import {JITSI_ISS, SECRET_JITSI_KEY} from "../Enum/EnvironmentVariable";
@@ -162,6 +161,9 @@ export class SocketManager implements ZoneEventListener {
             joinRoomMessage.setName(client.name);
             joinRoomMessage.setPositionmessage(ProtobufUtils.toPositionMessage(client.position));
             joinRoomMessage.setTagList(client.tags);
+            if (client.visitCardUrl) {
+                joinRoomMessage.setVisitcardurl(client.visitCardUrl);
+            }
             joinRoomMessage.setCompanion(client.companion);
 
             for (const characterLayer of client.characterLayers) {
@@ -604,13 +606,6 @@ export class SocketManager implements ZoneEventListener {
 
         client.backConnection.write(pusherToBackMessage);
     }
-
-    handleRequestVisitCardMessage(client: ExSocketInterface, requestVisitCardMessage: RequestVisitCardMessage) {
-        const pusherToBackMessage = new PusherToBackMessage();
-        pusherToBackMessage.setRequestvisitcardmessage(requestVisitCardMessage);
-
-        client.backConnection.write(pusherToBackMessage);
-    }
 }
 
 export const socketManager = new SocketManager();

From f6b3b9cfd4dc565b9d98a4be80768e2aa0ad6954 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 8 Jun 2021 18:05:03 +0200
Subject: [PATCH 109/141] Update facebook link

---
 front/dist/resources/html/gameMenu.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/dist/resources/html/gameMenu.html b/front/dist/resources/html/gameMenu.html
index 399cf349..26be2a1c 100644
--- a/front/dist/resources/html/gameMenu.html
+++ b/front/dist/resources/html/gameMenu.html
@@ -64,7 +64,7 @@
             <button id="adminConsoleButton">Admin console</button>
         </section>
         <section id="socialLinks" hidden>
-            <a class="not-button" href="https://www.facebook.com/workadventurebytcm" target="_blank"><img class="not-button" src="/resources/objects/facebook-icon.png"/></a>
+            <a class="not-button" href="https://www.facebook.com/workadventure.WA" target="_blank"><img class="not-button" src="/resources/objects/facebook-icon.png"/></a>
             <a class="not-button" href="https://twitter.com/Workadventure_" target="_blank"><img class="not-button" src="/resources/objects/twitter-icon.png"/></a>
         </section>
     </main>

From 61180a6e649460e71adccfc22e71b184d93ff797 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Wed, 9 Jun 2021 15:29:37 +0200
Subject: [PATCH 110/141] The cam of other people in a bubble is at the top of
 the screen even when a iframe is open on mobile

---
 front/style/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/style/style.scss b/front/style/style.scss
index 8522d4a4..b22a3f57 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -589,7 +589,6 @@ input[type=range]:focus::-ms-fill-upper {
 /* Let's make sure videos are vertically centered if they need to be cropped */
 .media-container {
     display: flex;
-    justify-content: center;
     flex-direction: column;
     overflow: hidden;
     border-radius: 15px;

From 6868128267e05180f94942b847184360157686b4 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Wed, 9 Jun 2021 18:08:14 +0200
Subject: [PATCH 111/141] DOM Element game resize at the same time and the same
 size at the canvas of phaser Remove VisitCard scss unused

---
 front/src/Components/VisitCard/VisitCard.svelte | 11 -----------
 front/src/Phaser/Services/WaScaleManager.ts     |  8 ++++++++
 front/style/style.scss                          |  2 --
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte
index cc7f00d6..c2e53f0c 100644
--- a/front/src/Components/VisitCard/VisitCard.svelte
+++ b/front/src/Components/VisitCard/VisitCard.svelte
@@ -17,17 +17,6 @@
     width: 530px;
     margin-top: 200px;
     max-width: 100vw;
-    
-    .defaultCard {
-      border-radius: 5px;
-      border: 2px black solid;
-      background-color: whitesmoke;
-      width: 530px;
-      
-      header {
-        padding: 5px;
-      }
-    }
 
     iframe {
       border: 0;
diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index acbecc38..cf10f195 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -39,6 +39,14 @@ class WaScaleManager {
         const style = this.scaleManager.canvas.style;
         style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
         style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
+
+        // Resize the game element at the same size at the canvas
+        const gameStyle = document.getElementById('game')?.style;
+        if (gameStyle != undefined) {
+            gameStyle.height = style.height;
+            gameStyle.width = style.width;
+        }
+
         // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way.
         for (const scene of this.game.scene.getScenes(true)) {
             if (scene instanceof ResizableScene) {
diff --git a/front/style/style.scss b/front/style/style.scss
index b22a3f57..b034baec 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -367,8 +367,6 @@ body {
 }
 
 #game {
-    height: 100%;
-    width: 100%;
     position: relative; /* Position relative is needed for the game-overlay. */
 }
 

From 5a2b3a303aab80e810bb251341dcb67b42d7cf9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?gr=C3=A9goire=20parant?= <g.parant@thecodingmachine.com>
Date: Wed, 9 Jun 2021 22:33:42 +0200
Subject: [PATCH 112/141] Improve texture loaded from admin (#1151)

---
 front/src/Phaser/Login/SelectCharacterScene.ts | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 552cd709..0d01bd88 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -124,10 +124,15 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         selectCharacterSceneVisibleStore.set(false);
     }
 
-    createCurrentPlayer(): void {
+    createCurrentPlayer(): void {        
         for (let i = 0; i <this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
+            //check already exist texture
+            if(this.players.find((c) => c.texture.key === playerResource.name)){
+                continue;
+            }
+
             const [middleX, middleY] = this.getCharacterPosition();
             const player = this.physics.add.sprite(middleX, middleY, playerResource.name, 0);
             this.setUpPlayer(player, i);
@@ -258,6 +263,8 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         }
 
         if(this.lazyloadingAttempt){
+            //re-render players list
+            this.createCurrentPlayer();
             this.moveUser();
             this.lazyloadingAttempt = false;
         }

From d26502a724a01e6a9dac2f8e3ba641b314b8142f Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Thu, 10 Jun 2021 09:23:25 +0200
Subject: [PATCH 113/141] Use HtmlUtils to get DOM Element game

---
 front/src/Phaser/Services/WaScaleManager.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index cf10f195..52e5e14a 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -3,6 +3,8 @@ import ScaleManager = Phaser.Scale.ScaleManager;
 import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
 import type {Game} from "../Game/Game";
 import {ResizableScene} from "../Login/ResizableScene";
+import {HtmlUtils} from "../../WebRtc/HtmlUtils";
+import {INPUT_CONSOLE_MESSAGE} from "../../Administration/ConsoleGlobalMessageManager";
 
 
 class WaScaleManager {
@@ -41,11 +43,9 @@ class WaScaleManager {
         style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
 
         // Resize the game element at the same size at the canvas
-        const gameStyle = document.getElementById('game')?.style;
-        if (gameStyle != undefined) {
-            gameStyle.height = style.height;
-            gameStyle.width = style.width;
-        }
+        const gameStyle = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('game').style;
+        gameStyle.height = style.height;
+        gameStyle.width = style.width;
 
         // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way.
         for (const scene of this.game.scene.getScenes(true)) {

From 4d467e9f868b5d6647a444ca4bbc058e255c7237 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Thu, 10 Jun 2021 16:57:33 +0200
Subject: [PATCH 114/141] FIX: Improved the visuals of the visit card

---
 .../src/Components/VisitCard/VisitCard.svelte | 73 ++++++++++++++-----
 1 file changed, 53 insertions(+), 20 deletions(-)

diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte
index cc7f00d6..5cdb4cfe 100644
--- a/front/src/Components/VisitCard/VisitCard.svelte
+++ b/front/src/Components/VisitCard/VisitCard.svelte
@@ -1,39 +1,64 @@
 <script lang="typescript">
     import { fly } from 'svelte/transition';
     import {requestVisitCardsStore} from "../../Stores/GameStore";
+    import {onMount} from "svelte";
     
     export let visitCardUrl: string;
+    let w = '500px';
+    let h = '250px';
+    let hidden = true;
+    let cvIframe;
     
     function closeCard() {
         requestVisitCardsStore.set(null);
     }
+    
+    function handleIframeMessage(message:any) {
+        if (message.data.type === 'cvIframeSize') {
+            w = (message.data.data.w) + 'px';
+            h = (message.data.data.h) + 'px';
+        }
+    }
+    
+    onMount(() => {
+        cvIframe.onload = () => hidden = false
+        cvIframe.onerror = () => hidden = false
+    })
 </script>
 
 <style lang="scss">
+
+  .loader {
+    border: 16px solid #f3f3f3; /* Light grey */
+    border-top: 16px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    margin:auto;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  
   .visitCard {
     pointer-events: all;
     margin-left: auto;
     margin-right: auto;
-    width: 530px;
     margin-top: 200px;
-    max-width: 100vw;
-    
-    .defaultCard {
-      border-radius: 5px;
-      border: 2px black solid;
-      background-color: whitesmoke;
-      width: 530px;
-      
-      header {
-        padding: 5px;
-      }
-    }
+    max-width: 80vw;
 
     iframe {
       border: 0;
-      width: 530px;
-      height: 270px;
+      max-width: 80vw;
       overflow: hidden;
+      
+      &.hidden {
+        visibility: hidden;
+        position: absolute;
+      }
     }
 
     button {
@@ -43,9 +68,17 @@
 </style>
 
 
-<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}">
-    <iframe title="visitCardTitle" src={visitCardUrl}></iframe>
-    <div class="buttonContainer">
-        <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
-    </div>
+<section class="visitCard" transition:fly="{{ y: -200, duration: 1000 }}" style="width: {w}">
+    {#if hidden}
+        <div class="loader"></div>
+    {/if}
+    <iframe title="visitCard" src={visitCardUrl} allow="clipboard-read; clipboard-write self {visitCardUrl}" style="width: {w}; height: {h}" class:hidden={hidden} bind:this={cvIframe}></iframe>
+    {#if !hidden}
+        <div class="buttonContainer">
+            <button class="nes-btn is-popUpElement" on:click={closeCard}>Close</button>
+        </div>
+    {/if}
+    
 </section>
+
+<svelte:window on:message={handleIframeMessage}/>

From 9330a3ec89dbe3a61851bd345c25ea51690243a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Jun 2021 11:57:27 +0200
Subject: [PATCH 115/141] Installing Wildcard certificate in CD environments

Because we are limited to 50 domain names per week with Let's encrypt, the continuous delivery environment is pretty fast failing to get new certificates.
We need to download a Wilcard certificate instead for the CD environments.
---
 .github/workflows/build-and-deploy.yml | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index 3e4b0fff..8c726d7b 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -149,6 +149,21 @@ jobs:
       # Create a slugified value of the branch
       - uses: rlespinasse/github-slug-action@3.1.0
 
+      - name: Write certificate
+        run: echo "${CERTS_PRIVATE_KEY}" > secret.key
+        env:
+          CERTS_PRIVATE_KEY: ${{ secrets.CERTS_PRIVATE_KEY }}
+
+      - name: Download certificate
+        run: mkdir secrets && scp -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/
+
+      - name: Install certificates in namespace
+        uses: steebchen/kubectl@v1.0.0
+        env:
+          KUBE_CONFIG_DATA: ${{ secrets.KUBE_CONFIG_FILE }}
+        with:
+          args: -n workadventure-${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} create secret tls certificate-tls --key="secrets/privkey.pem" --cert="secrets/fullchain.pem"
+
       - name: Deploy
         uses: thecodingmachine/deeployer-action@master
         env:

From 8b5055c7ef91035f9dacee6421e2aab6d1b75b51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Jun 2021 14:06:08 +0200
Subject: [PATCH 116/141] Disabling host check (not a big deal since we are
 only downloading files from the host)

---
 .github/workflows/build-and-deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index 8c726d7b..22c42ec5 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -155,7 +155,7 @@ jobs:
           CERTS_PRIVATE_KEY: ${{ secrets.CERTS_PRIVATE_KEY }}
 
       - name: Download certificate
-        run: mkdir secrets && scp -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/
+        run: mkdir secrets && scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/
 
       - name: Install certificates in namespace
         uses: steebchen/kubectl@v1.0.0

From c07d54f4c3c9a8efed95e94d82634236967ac51a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Jun 2021 14:13:23 +0200
Subject: [PATCH 117/141] Fixing key access rights

---
 .github/workflows/build-and-deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index 22c42ec5..27d895e1 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -155,7 +155,7 @@ jobs:
           CERTS_PRIVATE_KEY: ${{ secrets.CERTS_PRIVATE_KEY }}
 
       - name: Download certificate
-        run: mkdir secrets && scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/
+        run: mkdir secrets && scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/ && chmod 0600 secrets/*
 
       - name: Install certificates in namespace
         uses: steebchen/kubectl@v1.0.0

From 83089f11975082c96887665c87adec2ce8dfd2f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Jun 2021 14:25:02 +0200
Subject: [PATCH 118/141] Fixing key access rights

---
 .github/workflows/build-and-deploy.yml |  4 +--
 deeployer.libsonnet                    | 35 +++++++++++++-------------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index 27d895e1..b01b2b64 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -150,12 +150,12 @@ jobs:
       - uses: rlespinasse/github-slug-action@3.1.0
 
       - name: Write certificate
-        run: echo "${CERTS_PRIVATE_KEY}" > secret.key
+        run: echo "${CERTS_PRIVATE_KEY}" > secret.key && chmod 0600 secret.key
         env:
           CERTS_PRIVATE_KEY: ${{ secrets.CERTS_PRIVATE_KEY }}
 
       - name: Download certificate
-        run: mkdir secrets && scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/ && chmod 0600 secrets/*
+        run: mkdir secrets && scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/*
 
       - name: Install certificates in namespace
         uses: steebchen/kubectl@v1.0.0
diff --git a/deeployer.libsonnet b/deeployer.libsonnet
index f9dd87bd..40da555d 100644
--- a/deeployer.libsonnet
+++ b/deeployer.libsonnet
@@ -11,8 +11,7 @@
      "back1": {
        "image": "thecodingmachine/workadventure-back:"+tag,
        "host": {
-         "url": "api1."+url,
-         "https": "enable",
+         "url": "api1-"+url,
          "containerPort": 8080
        },
        "ports": [8080, 50051],
@@ -30,8 +29,7 @@
      "back2": {
             "image": "thecodingmachine/workadventure-back:"+tag,
             "host": {
-              "url": "api2."+url,
-              "https": "enable",
+              "url": "api2-"+url,
               "containerPort": 8080
             },
             "ports": [8080, 50051],
@@ -50,8 +48,7 @@
             "replicas": 2,
             "image": "thecodingmachine/workadventure-pusher:"+tag,
             "host": {
-              "url": "pusher."+url,
-              "https": "enable"
+              "url": "pusher-"+url,
             },
             "ports": [8080],
             "env": {
@@ -68,27 +65,25 @@
     "front": {
       "image": "thecodingmachine/workadventure-front:"+tag,
       "host": {
-        "url": "play."+url,
-        "https": "enable"
+        "url": "play-"+url,
       },
       "ports": [80],
       "env": {
-        "PUSHER_URL": "//pusher."+url,
-        "UPLOADER_URL": "//uploader."+url,
+        "PUSHER_URL": "//pusher-"+url,
+        "UPLOADER_URL": "//uploader-"+url,
         "ADMIN_URL": "//"+url,
         "JITSI_URL": env.JITSI_URL,
         "SECRET_JITSI_KEY": env.SECRET_JITSI_KEY,
         "TURN_SERVER": "turn:coturn.workadventu.re:443,turns:coturn.workadventu.re:443",
         "JITSI_PRIVATE_MODE": if env.SECRET_JITSI_KEY != '' then "true" else "false",
-        "START_ROOM_URL": "/_/global/maps."+url+"/Floor0/floor0.json"
+        "START_ROOM_URL": "/_/global/maps-"+url+"/Floor0/floor0.json"
         //"GA_TRACKING_ID": "UA-10196481-11"
       }
     },
     "uploader": {
            "image": "thecodingmachine/workadventure-uploader:"+tag,
            "host": {
-             "url": "uploader."+url,
-             "https": "enable",
+             "url": "uploader-"+url,
              "containerPort": 8080
            },
            "ports": [8080],
@@ -98,16 +93,12 @@
     "maps": {
       "image": "thecodingmachine/workadventure-maps:"+tag,
       "host": {
-        "url": "maps."+url,
-        "https": "enable"
+        "url": "maps-"+url
       },
       "ports": [80]
     },
   },
   "config": {
-    "https": {
-      "mail": "d.negrier@thecodingmachine.com"
-    },
     k8sextension(k8sConf)::
         k8sConf + {
           back1+: {
@@ -122,6 +113,14 @@
                   }
                 }
               }
+            },
+            ingress+: {
+              spec+: {
+                tls+: [{
+                  hosts: ["api1-"+url],
+                  secretName: "certificate-tls"
+                }]
+              }
             }
           },
           back2+: {

From 9b985a2a0c70e6d6b5142efe18f2c25d5e970290 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Jun 2021 14:37:43 +0200
Subject: [PATCH 119/141] Providing Base 64 config file

---
 .github/workflows/build-and-deploy.yml |  2 +-
 deeployer.libsonnet                    | 50 ++++++++++++++++++++++++--
 2 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index b01b2b64..14af5cfe 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -160,7 +160,7 @@ jobs:
       - name: Install certificates in namespace
         uses: steebchen/kubectl@v1.0.0
         env:
-          KUBE_CONFIG_DATA: ${{ secrets.KUBE_CONFIG_FILE }}
+          KUBE_CONFIG_DATA: ${{ secrets.KUBE_CONFIG_FILE_BASE64 }}
         with:
           args: -n workadventure-${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} create secret tls certificate-tls --key="secrets/privkey.pem" --cert="secrets/fullchain.pem"
 
diff --git a/deeployer.libsonnet b/deeployer.libsonnet
index 40da555d..8d9c2bfd 100644
--- a/deeployer.libsonnet
+++ b/deeployer.libsonnet
@@ -135,6 +135,14 @@
                   }
                 }
               }
+            },
+            ingress+: {
+              spec+: {
+                tls+: [{
+                  hosts: ["api2-"+url],
+                  secretName: "certificate-tls"
+                }]
+              }
             }
           },
           pusher+: {
@@ -149,8 +157,46 @@
                   }
                 }
               }
-            }
-          }
+            },
+            ingress+: {
+              spec+: {
+                tls+: [{
+                  hosts: ["pusher-"+url],
+                  secretName: "certificate-tls"
+                }]
+              }
+             }
+          },
+          front+: {
+            ingress+: {
+              spec+: {
+                tls+: [{
+                  hosts: ["play-"+url],
+                  secretName: "certificate-tls"
+                }]
+              }
+             }
+          },
+          uploader+: {
+            ingress+: {
+              spec+: {
+                tls+: [{
+                  hosts: ["uploader-"+url],
+                  secretName: "certificate-tls"
+                }]
+              }
+             }
+          },
+          maps+: {
+            ingress+: {
+              spec+: {
+                tls+: [{
+                  hosts: ["maps-"+url],
+                  secretName: "certificate-tls"
+                }]
+              }
+             }
+          },
         }
   }
 }

From a6effe0a29dda8ce762e9ef55df212c18d80131d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Jun 2021 14:44:23 +0200
Subject: [PATCH 120/141] Fixing scp

---
 .github/workflows/build-and-deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index 14af5cfe..8049ea03 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -155,7 +155,7 @@ jobs:
           CERTS_PRIVATE_KEY: ${{ secrets.CERTS_PRIVATE_KEY }}
 
       - name: Download certificate
-        run: mkdir secrets && scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/*
+        run: mkdir secrets && scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/
 
       - name: Install certificates in namespace
         uses: steebchen/kubectl@v1.0.0

From 2260f772a756ff8e8c507829eb9f220f9118f729 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Jun 2021 14:52:59 +0200
Subject: [PATCH 121/141] Create the K8S namespace if required

---
 .github/workflows/build-and-deploy.yml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index 8049ea03..70944bfa 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -157,6 +157,14 @@ jobs:
       - name: Download certificate
         run: mkdir secrets && scp -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null -i secret.key ubuntu@cert.workadventu.re:./config/live/workadventu.re/* secrets/
 
+      - name: Create namespace
+        uses: steebchen/kubectl@v1.0.0
+        env:
+          KUBE_CONFIG_DATA: ${{ secrets.KUBE_CONFIG_FILE_BASE64 }}
+        with:
+          args: create namespace workadventure-${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
+        continue-on-error: true
+
       - name: Install certificates in namespace
         uses: steebchen/kubectl@v1.0.0
         env:

From fdf4b901b848d4807849a3af6ecf1deccceb4c07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Jun 2021 15:02:54 +0200
Subject: [PATCH 122/141] Fixing URL in message

---
 .github/workflows/build-and-deploy.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index 70944bfa..f9602572 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -191,4 +191,4 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          msg: Environment deployed at https://play.${{ env.GITHUB_HEAD_REF_SLUG }}.test.workadventu.re
+          msg: Environment deployed at https://play-${{ env.GITHUB_HEAD_REF_SLUG }}.test.workadventu.re

From 2159e70399dcfbcbadc98a7b13355c04aec07db9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 11 Jun 2021 15:31:27 +0200
Subject: [PATCH 123/141] Deleting old certificate if one already exists

---
 .github/workflows/build-and-deploy.yml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
index f9602572..3bf00b99 100644
--- a/.github/workflows/build-and-deploy.yml
+++ b/.github/workflows/build-and-deploy.yml
@@ -165,6 +165,14 @@ jobs:
           args: create namespace workadventure-${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }}
         continue-on-error: true
 
+      - name: Delete old certificates in namespace
+        uses: steebchen/kubectl@v1.0.0
+        env:
+          KUBE_CONFIG_DATA: ${{ secrets.KUBE_CONFIG_FILE_BASE64 }}
+        with:
+          args: -n workadventure-${{ github.event_name == 'pull_request' && env.GITHUB_HEAD_REF_SLUG || env.GITHUB_REF_SLUG }} delete secret certificate-tls
+        continue-on-error: true
+
       - name: Install certificates in namespace
         uses: steebchen/kubectl@v1.0.0
         env:

From 281b8580cd6be6d9d5c993408d2fc838cec3491a Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 14 Jun 2021 15:54:22 +0200
Subject: [PATCH 124/141] Use window and not viewport in css for main-container

---
 front/src/Phaser/Services/WaScaleManager.ts | 2 +-
 front/style/style.scss                      | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index 52e5e14a..e40ef65f 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -44,8 +44,8 @@ class WaScaleManager {
 
         // Resize the game element at the same size at the canvas
         const gameStyle = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('game').style;
-        gameStyle.height = style.height;
         gameStyle.width = style.width;
+        gameStyle.height = style.height;
 
         // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way.
         for (const scene of this.game.scene.getScenes(true)) {
diff --git a/front/style/style.scss b/front/style/style.scss
index b034baec..8eae5330 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -337,13 +337,14 @@ video.myCamVideo{
 /* New layout */
 body {
     margin: 0;
-    height: 100vh;
-    width: 100vw;
+    height: 100%;
+    width: 100%;
 }
 .main-container {
-    height: 100vh;
-    width: 100vw;
+    height: 100%;
+    width: 100%;
     position: absolute;
+    background-color: #00d4ff;
 }
 
 @media (min-aspect-ratio: 1/1) {

From c2fba353608a0cb51a49eb39613e192b919e757d Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 14 Jun 2021 16:04:55 +0200
Subject: [PATCH 125/141] Suppression blue back-ground

---
 front/style/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/style/style.scss b/front/style/style.scss
index 8eae5330..beed1db5 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -344,7 +344,6 @@ body {
     height: 100%;
     width: 100%;
     position: absolute;
-    background-color: #00d4ff;
 }
 
 @media (min-aspect-ratio: 1/1) {

From b239edb2665492420a0422098e50400ca876ca40 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Mon, 14 Jun 2021 16:09:41 +0200
Subject: [PATCH 126/141] Clean code

---
 front/src/Phaser/Services/WaScaleManager.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index e40ef65f..ff3bef0c 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -4,7 +4,6 @@ import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
 import type {Game} from "../Game/Game";
 import {ResizableScene} from "../Login/ResizableScene";
 import {HtmlUtils} from "../../WebRtc/HtmlUtils";
-import {INPUT_CONSOLE_MESSAGE} from "../../Administration/ConsoleGlobalMessageManager";
 
 
 class WaScaleManager {

From e3ee66527a20b5b31788f874952dce8528a13115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 14 Jun 2021 16:32:09 +0200
Subject: [PATCH 127/141] Fixing bug slowing down the CustomizeScene a lot

By forcing the containers to be updated only in the "update" method, we seem to be solving some bugs regarding the way sprites are handled.
There is still an issue though. Some times, for some reasons, the update list seems to be growing a lot.
The more we click the left/right arrow to choose a character, the slower it gets (but with this commit, it does not lock anymore)
---
 .../src/Phaser/Entity/CustomizedCharacter.ts  | 20 ++++++++
 front/src/Phaser/Login/CustomizeScene.ts      | 48 ++++++++++++-------
 2 files changed, 52 insertions(+), 16 deletions(-)
 create mode 100644 front/src/Phaser/Entity/CustomizedCharacter.ts

diff --git a/front/src/Phaser/Entity/CustomizedCharacter.ts b/front/src/Phaser/Entity/CustomizedCharacter.ts
new file mode 100644
index 00000000..3a7f1597
--- /dev/null
+++ b/front/src/Phaser/Entity/CustomizedCharacter.ts
@@ -0,0 +1,20 @@
+import Container = Phaser.GameObjects.Container;
+import type {Scene} from "phaser";
+import Sprite = Phaser.GameObjects.Sprite;
+
+/**
+ * A sprite of a customized character (used in the Customize Scene only)
+ */
+export class CustomizedCharacter extends Container {
+    public constructor(scene: Scene, x: number, y: number, layers: string[]) {
+        super(scene, x, y);
+        this.updateSprites(layers);
+    }
+
+    public updateSprites(layers: string[]): void {
+        this.removeAll(true);
+        for (const layer of layers) {
+            this.add(new Sprite(this.scene, 0, 0, layer));
+        }
+    }
+}
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index cc0c7208..f1d48235 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -15,6 +15,7 @@ import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStor
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 import {waScaleManager} from "../Services/WaScaleManager";
 import {isMobile} from "../../Enum/EnvironmentVariable";
+import {CustomizedCharacter} from "../Entity/CustomizedCharacter";
 
 export const CustomizeSceneName = "CustomizeScene";
 
@@ -25,12 +26,15 @@ export class CustomizeScene extends AbstractCharacterScene {
     private Rectangle!: Rectangle;
 
     private selectedLayers: number[] = [0];
-    private containersRow: Container[][] = [];
+    private containersRow: CustomizedCharacter[][] = [];
     public activeRow:number = 0;
     private layers: BodyResourceDescriptionInterface[][] = [];
 
     protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
 
+    private moveHorizontally: number = 0;
+    private moveVertically: number = 0;
+
     constructor() {
         super({
             key: CustomizeSceneName
@@ -88,10 +92,13 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.backToPreviousScene();
         });
 
-        this.input.keyboard.on('keyup-RIGHT', () => this.moveCursorHorizontally(1));
-        this.input.keyboard.on('keyup-LEFT', () => this.moveCursorHorizontally(-1));
-        this.input.keyboard.on('keyup-DOWN', () => this.moveCursorVertically(1));
-        this.input.keyboard.on('keyup-UP', () => this.moveCursorVertically(-1));
+        // Note: the key bindings are not directly put on the moveCursorVertically or moveCursorHorizontally methods
+        // because if 2 such events are fired close to one another, it makes the whole application crawl to a halt (for a reason I cannot
+        // explain, the list of sprites managed by the update list become immense
+        this.input.keyboard.on('keyup-RIGHT', () => this.moveHorizontally = 1);
+        this.input.keyboard.on('keyup-LEFT', () => this.moveHorizontally = -1);
+        this.input.keyboard.on('keyup-DOWN', () => this.moveVertically = 1);
+        this.input.keyboard.on('keyup-UP', () => this.moveVertically = -1);
 
         const customCursorPosition = localUserStore.getCustomCursorPosition();
         if (customCursorPosition) {
@@ -104,7 +111,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.onResize();
     }
 
-    public moveCursorHorizontally(index: number): void {
+    public doMoveCursorHorizontally(index: number): void {
         this.selectedLayers[this.activeRow] += index;
         if (this.selectedLayers[this.activeRow] < 0) {
             this.selectedLayers[this.activeRow] = 0
@@ -116,7 +123,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.saveInLocalStorage();
     }
 
-    public moveCursorVertically(index:number): void {
+    public doMoveCursorVertically(index:number): void {
 
         this.activeRow += index;
         if (this.activeRow < 0) {
@@ -165,20 +172,20 @@ export class CustomizeScene extends AbstractCharacterScene {
      * @param selectedItem, The number of the item select (0 for black body...)
      */
     private generateCharacter(x: number, y: number, layerNumber: number, selectedItem: number) {
-        return new Container(this, x, y,this.getContainerChildren(layerNumber,selectedItem));
+        return new CustomizedCharacter(this, x, y, this.getContainerChildren(layerNumber,selectedItem));
     }
 
-    private getContainerChildren(layerNumber: number, selectedItem: number): Array<Sprite> {
-        const children: Array<Sprite> = new Array<Sprite>();
+    private getContainerChildren(layerNumber: number, selectedItem: number): Array<string> {
+        const children: Array<string> = new Array<string>();
         for (let j = 0; j <= layerNumber; j++) {
             if (j === layerNumber) {
-                children.push(this.generateLayers(0, 0, this.layers[j][selectedItem].name));
+                children.push(this.layers[j][selectedItem].name);
             } else {
                 const layer = this.selectedLayers[j];
                 if (layer === undefined) {
                     continue;
                 }
-                children.push(this.generateLayers(0, 0, this.layers[j][layer].name));
+                children.push(this.layers[j][layer].name);
             }
          }
         return children;
@@ -215,15 +222,15 @@ export class CustomizeScene extends AbstractCharacterScene {
      * @return a new sprite
      */
     private generateLayers(x: number, y: number, name: string): Sprite {
-        return new Sprite(this, x, y, name);
+        //return new Sprite(this, x, y, name);
+        return this.add.sprite(0, 0, name);
     }
 
     private updateSelectedLayer() {
         for(let i = 0; i < this.containersRow.length; i++){
             for(let j = 0; j < this.containersRow[i].length; j++){
-               const children = this.getContainerChildren(i, j);
-               this.containersRow[i][j].removeAll(true);
-                this.containersRow[i][j].add(children);
+                const children = this.getContainerChildren(i, j);
+                this.containersRow[i][j].updateSprites(children);
             }
         }
     }
@@ -234,6 +241,15 @@ export class CustomizeScene extends AbstractCharacterScene {
             this.moveLayers();
             this.lazyloadingAttempt = false;
         }
+
+        if (this.moveHorizontally !== 0) {
+            this.doMoveCursorHorizontally(this.moveHorizontally);
+            this.moveHorizontally = 0;
+        }
+        if (this.moveVertically !== 0) {
+            this.doMoveCursorVertically(this.moveVertically);
+            this.moveVertically = 0;
+        }
     }
 
 

From dcd44f283f1b98136db251e7af8cdd56515512a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 14 Jun 2021 16:40:33 +0200
Subject: [PATCH 128/141] Making code more robust regarding scene being null in
 Character class

Not sure how this can happen but it does.
Closes #1167
---
 front/src/Phaser/Entity/Character.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index b1e8dc73..2ff66178 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/front/src/Phaser/Entity/Character.ts
@@ -56,7 +56,7 @@ export abstract class Character extends Container {
             this.addTextures(textures, frame);
             this.invisible = false
         })
-        
+
         this.playerName = new Text(scene, 0,  playerNameY, name, {fontFamily: '"Press Start 2P"', fontSize: '8px', strokeThickness: 2, stroke: "gray"});
         this.playerName.setOrigin(0.5).setDepth(DEPTH_INGAME_TEXT_INDEX);
         this.add(this.playerName);
@@ -80,7 +80,7 @@ export abstract class Character extends Container {
         this.setDepth(-1);
 
         this.playAnimation(direction, moving);
-        
+
         if (typeof companion === 'string') {
             this.addCompanion(companion, companionTexturePromise);
         }
@@ -94,7 +94,7 @@ export abstract class Character extends Container {
 
     public addTextures(textures: string[], frame?: string | number): void {
         for (const texture of textures) {
-            if(!this.scene.textures.exists(texture)){
+            if(this.scene && !this.scene.textures.exists(texture)){
                 throw new TextureError('texture not found');
             }
             const sprite = new Sprite(this.scene, 0, 0, texture, frame);
@@ -239,23 +239,23 @@ export abstract class Character extends Container {
                 this.scene.sys.updateList.remove(sprite);
             }
         }
-        this.list.forEach(objectContaining => objectContaining.destroy()) 
+        this.list.forEach(objectContaining => objectContaining.destroy())
         super.destroy();
     }
-    
+
     playEmote(emoteKey: string) {
         this.cancelPreviousEmote();
 
         const scalingFactor = waScaleManager.uiScalingFactor * 0.05;
         const emoteY = -30 - scalingFactor * 10;
-        
+
         this.playerName.setVisible(false);
         this.emote = new Sprite(this.scene, 0,  0, emoteKey);
         this.emote.setAlpha(0);
         this.emote.setScale(0.1 * scalingFactor);
         this.add(this.emote);
         this.scene.sys.updateList.add(this.emote);
-        
+
         this.createStartTransition(scalingFactor, emoteY);
     }
 

From 6af9b5d0fc7366f08fc9a26375f20504c4972183 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 14 Jun 2021 18:18:57 +0200
Subject: [PATCH 129/141] Disable screensharing button if user refuses rights

If the user refuses the popup to screen-share, we should switch back the button to gray.

Closes #1179
---
 front/src/Stores/ScreenSharingStore.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front/src/Stores/ScreenSharingStore.ts b/front/src/Stores/ScreenSharingStore.ts
index 0a7ef3e6..ec5aa46f 100644
--- a/front/src/Stores/ScreenSharingStore.ts
+++ b/front/src/Stores/ScreenSharingStore.ts
@@ -169,6 +169,7 @@ export const screenSharingLocalStreamStore = derived<Readable<MediaStreamConstra
             return;
         } catch (e) {
             currentStream = null;
+            requestedScreenSharingState.disableScreenSharing();
             console.info("Error. Unable to share screen.", e);
             set({
                 type: 'error',

From 1fa03e44df81d07ed34c10168025786aace7ec19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 14 Jun 2021 18:40:58 +0200
Subject: [PATCH 130/141] Fixing size of camera on resize

The size of the Camera after a change in zoom is only computed on the "render" step.
Therefore, we should wait the "render" step to call GameScene.onResize.

Closes #1180
---
 front/src/Phaser/Services/WaScaleManager.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index acbecc38..1fa46e4f 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -3,6 +3,7 @@ import ScaleManager = Phaser.Scale.ScaleManager;
 import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
 import type {Game} from "../Game/Game";
 import {ResizableScene} from "../Login/ResizableScene";
+import * as Phaser from "phaser";
 
 
 class WaScaleManager {
@@ -39,10 +40,11 @@ class WaScaleManager {
         const style = this.scaleManager.canvas.style;
         style.width = Math.ceil(realSize.width / devicePixelRatio) + 'px';
         style.height = Math.ceil(realSize.height / devicePixelRatio) + 'px';
-        // Note: onResize will be called twice (once here and once is Game.ts), but we have no better way.
+        // Note: onResize will be called twice (once here and once in Game.ts), but we have no better way.
         for (const scene of this.game.scene.getScenes(true)) {
             if (scene instanceof ResizableScene) {
-                scene.onResize();
+                // We are delaying the call to the "render" event because otherwise, the "camera" coordinates are not correctly updated.
+                scene.events.once(Phaser.Scenes.Events.RENDER, () => scene.onResize());
             }
         }
 

From 6bca3469b6469ba4576644e49e5ef9d32ebb8354 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Mon, 14 Jun 2021 18:44:20 +0200
Subject: [PATCH 131/141] Removing useless import

---
 front/src/Phaser/Services/WaScaleManager.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts
index 1fa46e4f..1da0fcf3 100644
--- a/front/src/Phaser/Services/WaScaleManager.ts
+++ b/front/src/Phaser/Services/WaScaleManager.ts
@@ -3,7 +3,6 @@ import ScaleManager = Phaser.Scale.ScaleManager;
 import {coWebsiteManager} from "../../WebRtc/CoWebsiteManager";
 import type {Game} from "../Game/Game";
 import {ResizableScene} from "../Login/ResizableScene";
-import * as Phaser from "phaser";
 
 
 class WaScaleManager {

From a5779095f8f964ec3b66da026da8c7d9575726d6 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Mon, 7 Jun 2021 17:48:39 +0200
Subject: [PATCH 132/141] FIX: cowebsite resize now works on touchscreens

---
 front/src/WebRtc/CoWebsiteManager.ts | 47 +++++++++++++++++++++++-----
 front/style/cowebsite.scss           |  2 ++
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
index 9793cd25..1fb28487 100644
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -1,6 +1,7 @@
 import {HtmlUtils} from "./HtmlUtils";
 import {Subject} from "rxjs";
 import {iframeListener} from "../Api/IframeListener";
+import {touchScreenManager} from "../Touch/TouchScreenManager";
 
 enum iframeStates {
     closed = 1,
@@ -17,6 +18,11 @@ const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
 const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
 const animationTime = 500; //time used by the css transitions, in ms.
 
+interface TouchMoveCoordinates {
+    x: number;
+    y: number;
+}
+
 class CoWebsiteManager {
 
     private opened: iframeStates = iframeStates.closed;
@@ -32,6 +38,7 @@ class CoWebsiteManager {
     private resizing: boolean = false;
     private cowebsiteMainDom: HTMLDivElement;
     private cowebsiteAsideDom: HTMLDivElement;
+    private previousTouchMoveCoordinates: TouchMoveCoordinates|null = null; //only use on touchscreens to track touch movement
 
     get width(): number {
         return this.cowebsiteDiv.clientWidth;
@@ -62,7 +69,10 @@ class CoWebsiteManager {
         this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteMainDomId);
         this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId);
 
-        this.initResizeListeners();
+        if (touchScreenManager.supportTouchScreen) {
+            this.initResizeListeners(true);
+        }
+        this.initResizeListeners(false);
 
         const buttonCloseFrame = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
         buttonCloseFrame.addEventListener('click', () => {
@@ -77,22 +87,43 @@ class CoWebsiteManager {
         });
     }
 
-    private initResizeListeners() {
-        const movecallback = (event:MouseEvent) => {
-            this.verticalMode ? this.height += event.movementY / this.getDevicePixelRatio() : this.width -= event.movementX / this.getDevicePixelRatio();
+    private initResizeListeners(touchMode:boolean) {
+        const movecallback = (event:MouseEvent|TouchEvent) => {
+            let x, y;
+            if (event.type === 'mousemove') {
+                x = (event as MouseEvent).movementX / this.getDevicePixelRatio();
+                y = (event as MouseEvent).movementY / this.getDevicePixelRatio();
+            } else {
+                const touchEvent = (event as TouchEvent).touches[0];
+                const last = {x: touchEvent.pageX, y: touchEvent.pageY};
+                const previous = this.previousTouchMoveCoordinates as TouchMoveCoordinates;
+                this.previousTouchMoveCoordinates = last;
+                x = last.x - previous.x;
+                y = last.y - previous.y;
+            }
+            
+            
+            this.verticalMode ? this.height += y : this.width -= x;
             this.fire();
         }
 
-        this.cowebsiteAsideDom.addEventListener('mousedown', (event) => {
+        this.cowebsiteAsideDom.addEventListener( touchMode ? 'touchstart' : 'mousedown', (event) => {
             this.resizing = true;
             this.getIframeDom().style.display = 'none';
+            if (touchMode) {
+                const touchEvent = (event as TouchEvent).touches[0];
+                this.previousTouchMoveCoordinates = {x: touchEvent.pageX, y: touchEvent.pageY};
+            }
 
-            document.addEventListener('mousemove', movecallback);
+            document.addEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
         });
 
-        document.addEventListener('mouseup', (event) => {
+        document.addEventListener(touchMode ? 'touchend' : 'mouseup', (event) => {
             if (!this.resizing) return;
-            document.removeEventListener('mousemove', movecallback);
+            if (touchMode) {
+                this.previousTouchMoveCoordinates = null;
+            }
+            document.removeEventListener(touchMode ? 'touchmove' : 'mousemove', movecallback);
             this.getIframeDom().style.display = 'block';
             this.resizing = false;
         });
diff --git a/front/style/cowebsite.scss b/front/style/cowebsite.scss
index 2ed1ef69..e508b58d 100644
--- a/front/style/cowebsite.scss
+++ b/front/style/cowebsite.scss
@@ -13,6 +13,8 @@
     iframe {
       width: 100%;
       height: 100%;
+      max-width: 100vw;
+      max-height: 100vh;
     }
   }
 

From 09da69c24af786b97c81b3b88d82cdb66f17c1f2 Mon Sep 17 00:00:00 2001
From: GRL <g.lesniewski@thecodingmachine.com>
Date: Tue, 15 Jun 2021 11:16:44 +0200
Subject: [PATCH 133/141] CustomizeScene buttons use moveHorizontally and
 moveVertically

---
 front/src/Phaser/Login/CustomizeScene.ts | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index f1d48235..4c19d944 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -111,7 +111,15 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.onResize();
     }
 
-    public doMoveCursorHorizontally(index: number): void {
+    public moveCursorHorizontally(index: number): void {
+        this.moveHorizontally = index;
+    }
+
+    public moveCursorVertically(index: number): void {
+        this.moveVertically = index;
+    }
+
+    private doMoveCursorHorizontally(index: number): void {
         this.selectedLayers[this.activeRow] += index;
         if (this.selectedLayers[this.activeRow] < 0) {
             this.selectedLayers[this.activeRow] = 0
@@ -123,7 +131,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.saveInLocalStorage();
     }
 
-    public doMoveCursorVertically(index:number): void {
+    private doMoveCursorVertically(index:number): void {
 
         this.activeRow += index;
         if (this.activeRow < 0) {

From 40e2ba196d1b40d6054b2e0b0d26e20dba742b38 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Tue, 15 Jun 2021 14:35:29 +0200
Subject: [PATCH 134/141] FIX: fixed the cowebsite aside dom not being visible
 on some browser

---
 front/style/cowebsite-mobile.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/front/style/cowebsite-mobile.scss b/front/style/cowebsite-mobile.scss
index 85b41511..48a6689e 100644
--- a/front/style/cowebsite-mobile.scss
+++ b/front/style/cowebsite-mobile.scss
@@ -28,6 +28,7 @@
   
       aside {
         height: 30px;
+        min-height: 30px;
         cursor: ns-resize;
         flex-direction: column;
   

From 7712bd685b6257c31bdb146776f5342e72b4abdc Mon Sep 17 00:00:00 2001
From: jonny <ga86lad@mytum.de>
Date: Tue, 15 Jun 2021 15:19:45 +0200
Subject: [PATCH 135/141] fixed merge errors

---
 front/src/Phaser/Game/GameScene.ts | 4 ++--
 front/src/iframe_api.ts            | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index b09f5a1e..b5876d5a 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1102,10 +1102,10 @@ ${escapedMessage}
     }
 
     //todo: push that into the gameManager
-    private loadNextGame(exitSceneIdentifier: string): void {
+    private loadNextGame(exitSceneIdentifier: string): Promise<void> {
         const {roomId, hash} = Room.getIdFromIdentifier(exitSceneIdentifier, this.MapUrlFile, this.instance);
         const room = new Room(roomId);
-        gameManager.loadMap(room, this.scene).catch(() => {});
+        return gameManager.loadMap(room, this.scene).catch(() => {});
     }
 
     private startUser(layer: ITiledMapTileLayer): PositionInterface {
diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index ea987f21..d4146fd1 100644
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@@ -9,11 +9,11 @@ import type { ClosePopupEvent } from "./Api/Events/ClosePopupEvent";
 import type { OpenTabEvent } from "./Api/Events/OpenTabEvent";
 import type { GoToPageEvent } from "./Api/Events/GoToPageEvent";
 import type { OpenCoWebSiteEvent } from "./Api/Events/OpenCoWebSiteEvent";
-import type {PlaySoundEvent} from "./Api/Events/PlaySoundEvent";
-import type  {StopSoundEvent} from "./Api/Events/StopSoundEvent";
-import type {LoadSoundEvent} from "./Api/Events/LoadSoundEvent";
+import type { PlaySoundEvent } from "./Api/Events/PlaySoundEvent";
+import type { StopSoundEvent } from "./Api/Events/StopSoundEvent";
+import type { LoadSoundEvent } from "./Api/Events/LoadSoundEvent";
 import SoundConfig = Phaser.Types.Sound.SoundConfig;
-import { LoadPageEvent } from './Api/Events/LoadPageEvent';
+import type { LoadPageEvent } from './Api/Events/LoadPageEvent';
 
 interface WorkAdventureApi {
     sendChatMessage(message: string, author: string): void;

From c559b2104b4e28da9ebaaf218b7ec7b78d82e733 Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Tue, 15 Jun 2021 15:32:40 +0200
Subject: [PATCH 136/141] scene cleanup

---
 front/src/Phaser/Login/CustomizeScene.ts       | 7 -------
 front/src/Phaser/Login/SelectCharacterScene.ts | 6 ------
 2 files changed, 13 deletions(-)

diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 4c19d944..9d0e7877 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -2,26 +2,20 @@ import {EnableCameraSceneName} from "./EnableCameraScene";
 import Rectangle = Phaser.GameObjects.Rectangle;
 import {loadAllLayers} from "../Entity/PlayerTexturesLoadingManager";
 import Sprite = Phaser.GameObjects.Sprite;
-import Container = Phaser.GameObjects.Container;
 import {gameManager} from "../Game/GameManager";
 import {localUserStore} from "../../Connexion/LocalUserStore";
 import {addLoader} from "../Components/Loader";
 import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures";
 import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
-import { MenuScene } from "../Menu/MenuScene";
 import { SelectCharacterSceneName } from "./SelectCharacterScene";
 import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
-import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
 import {waScaleManager} from "../Services/WaScaleManager";
 import {isMobile} from "../../Enum/EnvironmentVariable";
 import {CustomizedCharacter} from "../Entity/CustomizedCharacter";
 
 export const CustomizeSceneName = "CustomizeScene";
 
-export const CustomizeSceneKey = "CustomizeScene";
-const customizeSceneKey = 'customizeScene';
-
 export class CustomizeScene extends AbstractCharacterScene {
     private Rectangle!: Rectangle;
 
@@ -42,7 +36,6 @@ export class CustomizeScene extends AbstractCharacterScene {
     }
 
     preload() {
-        this.load.html(customizeSceneKey, 'resources/html/CustomCharacterScene.html');
 
         this.loadCustomSceneSelectCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 0d01bd88..1abd58e5 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -10,17 +10,13 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene";
 import {areCharacterLayersValid} from "../../Connexion/LocalUser";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {PinchManager} from "../UserInput/PinchManager";
-import {MenuScene} from "../Menu/MenuScene";
 import {selectCharacterSceneVisibleStore} from "../../Stores/SelectCharacterStore";
-import {customCharacterSceneVisibleStore} from "../../Stores/CustomCharacterStore";
 import {waScaleManager} from "../Services/WaScaleManager";
 import {isMobile} from "../../Enum/EnvironmentVariable";
 
 //todo: put this constants in a dedicated file
 export const SelectCharacterSceneName = "SelectCharacterScene";
 
-const selectCharacterKey = 'selectCharacterScene';
-
 export class SelectCharacterScene extends AbstractCharacterScene {
     protected readonly nbCharactersPerRow = 6;
     protected selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option
@@ -29,7 +25,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
 
     protected selectedRectangle!: Rectangle;
 
-    protected selectCharacterSceneElement!: Phaser.GameObjects.DOMElement;
     protected currentSelectUser = 0;
     protected pointerClicked: boolean = false;
     protected pointerTimer: number = 0;
@@ -43,7 +38,6 @@ export class SelectCharacterScene extends AbstractCharacterScene {
     }
 
     preload() {
-        this.load.html(selectCharacterKey, 'resources/html/selectCharacterScene.html');
 
         this.loadSelectSceneCharacters().then((bodyResourceDescriptions) => {
             bodyResourceDescriptions.forEach((bodyResourceDescription) => {

From 085a4d41fdfe08aa3fb957a10e7716bbb8ad4a3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 15 Jun 2021 18:08:16 +0200
Subject: [PATCH 137/141] Adding svelte-check to the build process

Type checking in Svelte was not enabled (because we were not running svelte-check).
This PR adds:

- run svelte-check in watch mode in development
- run svelte-check in CI
---
 .github/workflows/continuous_integration.yml |   4 +
 front/package.json                           |   9 +-
 front/yarn.lock                              | 199 ++++++++++++++++++-
 3 files changed, 201 insertions(+), 11 deletions(-)

diff --git a/.github/workflows/continuous_integration.yml b/.github/workflows/continuous_integration.yml
index 06c1c58e..2036e4e6 100644
--- a/.github/workflows/continuous_integration.yml
+++ b/.github/workflows/continuous_integration.yml
@@ -52,6 +52,10 @@ jobs:
           PUSHER_URL: "//localhost:8080"
         working-directory: "front"
 
+      - name: "Svelte check"
+        run: yarn run svelte-check
+        working-directory: "front"
+
       - name: "Lint"
         run: yarn run lint
         working-directory: "front"
diff --git a/front/package.json b/front/package.json
index 1c938195..05d3e29c 100644
--- a/front/package.json
+++ b/front/package.json
@@ -20,9 +20,11 @@
     "jasmine": "^3.5.0",
     "mini-css-extract-plugin": "^1.6.0",
     "node-polyfill-webpack-plugin": "^1.1.2",
+    "npm-run-all": "^4.1.5",
     "sass": "^1.32.12",
     "sass-loader": "^11.1.0",
     "svelte": "^3.38.2",
+    "svelte-check": "^2.1.0",
     "svelte-loader": "^3.1.1",
     "svelte-preprocess": "^4.7.3",
     "ts-loader": "^9.1.2",
@@ -50,10 +52,13 @@
     "standardized-audio-context": "^25.2.4"
   },
   "scripts": {
-    "start": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
+    "start": "run-p serve svelte-check-watch",
+    "serve": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" webpack serve --open",
     "build": "TS_NODE_PROJECT=\"tsconfig-for-webpack.json\" NODE_ENV=production webpack",
     "test": "TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
     "lint": "node_modules/.bin/eslint src/ . --ext .ts",
-    "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts"
+    "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts",
+    "svelte-check-watch": "svelte-check --fail-on-warnings --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\" --watch",
+    "svelte-check":       "svelte-check --fail-on-warnings --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\""
   }
 }
diff --git a/front/yarn.lock b/front/yarn.lock
index dc43f559..e64a76c1 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -651,7 +651,7 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-anymatch@~3.1.1:
+anymatch@~3.1.1, anymatch@~3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
   integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
@@ -1112,7 +1112,7 @@ caniuse-lite@^1.0.30001219:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
   integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
 
-chalk@^2.0.0:
+chalk@^2.0.0, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -1163,6 +1163,21 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
+chokidar@^3.4.1:
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
+  integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@@ -1402,7 +1417,7 @@ create-require@^1.1.0:
   resolved "https://registry.yarnpkg.com/create-require/-/create-require-1.1.1.tgz#c1d7e8f1e5f6cfc9ff65f9cd352d37348756c333"
   integrity sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==
 
-cross-spawn@^6.0.0:
+cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -2365,7 +2380,7 @@ fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
-fsevents@~2.3.1:
+fsevents@~2.3.1, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -2429,7 +2444,7 @@ glob-parent@^3.1.0:
     is-glob "^3.1.0"
     path-dirname "^1.0.0"
 
-glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0:
+glob-parent@^5.0.0, glob-parent@^5.1.0, glob-parent@~5.1.0, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
@@ -2606,6 +2621,11 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hosted-git-info@^2.1.4:
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
@@ -3177,7 +3197,7 @@ js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
-json-parse-better-errors@^1.0.2:
+json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
@@ -3282,6 +3302,16 @@ linked-list-typescript@^1.0.11:
   resolved "https://registry.yarnpkg.com/linked-list-typescript/-/linked-list-typescript-1.0.15.tgz#faeed93cf9203f102e2158c29edcddda320abe82"
   integrity sha512-RIyUu9lnJIyIaMe63O7/aFv/T2v3KsMFuXMBbUQCHX+cgtGro86ETDj5ed0a8gQL2+DFjzYYsgVG4I36/cUwgw==
 
+load-json-file@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
+  integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
+  dependencies:
+    graceful-fs "^4.1.2"
+    parse-json "^4.0.0"
+    pify "^3.0.0"
+    strip-bom "^3.0.0"
+
 loader-runner@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
@@ -3396,6 +3426,11 @@ memory-fs@^0.4.1:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
+memorystream@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
+  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
+
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -3529,6 +3564,11 @@ mkdirp@^0.5.1, mkdirp@^0.5.5:
   dependencies:
     minimist "^1.2.5"
 
+mri@^1.1.0:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/mri/-/mri-1.1.6.tgz#49952e1044db21dbf90f6cd92bc9c9a777d415a6"
+  integrity sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -3657,6 +3697,16 @@ node-releases@^1.1.71:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
   integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
 
+normalize-package-data@^2.3.2:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
+  integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
+  dependencies:
+    hosted-git-info "^2.1.4"
+    resolve "^1.10.0"
+    semver "2 || 3 || 4 || 5"
+    validate-npm-package-license "^3.0.1"
+
 normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
@@ -3669,6 +3719,21 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+npm-run-all@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
+  integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    memorystream "^0.3.1"
+    minimatch "^3.0.4"
+    pidtree "^0.3.0"
+    read-pkg "^3.0.0"
+    shell-quote "^1.6.1"
+    string.prototype.padend "^3.0.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -3899,6 +3964,14 @@ parse-asn1@^5.0.0, parse-asn1@^5.1.5:
     pbkdf2 "^3.0.3"
     safe-buffer "^5.1.1"
 
+parse-json@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
+  integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
+  dependencies:
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+
 parse-json@^5.0.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
@@ -3987,6 +4060,13 @@ path-to-regexp@0.1.7:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
   integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
 
+path-type@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
+  integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
+  dependencies:
+    pify "^3.0.0"
+
 path-type@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
@@ -4034,11 +4114,21 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.3.tgz#465547f359ccc206d3c48e46a1bcb89bf7ee619d"
   integrity sha512-KpELjfwcCDUb9PeigTs2mBJzXUPzAuP2oPcA989He8Rte0+YUAjw1JVedDhuTKPkHjSYzMN3npC9luThGYEKdg==
 
+pidtree@^0.3.0:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
+  integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
 
+pify@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
+  integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
+
 pify@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
@@ -4288,6 +4378,15 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+read-pkg@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
+  integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
+  dependencies:
+    load-json-file "^4.0.0"
+    normalize-package-data "^2.3.2"
+    path-type "^3.0.0"
+
 readable-stream@^2.0.1, readable-stream@^2.0.2:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
@@ -4326,6 +4425,13 @@ readdirp@~3.5.0:
   dependencies:
     picomatch "^2.2.1"
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 rechoir@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.7.0.tgz#32650fd52c21ab252aa5d65b19310441c7e03aca"
@@ -4444,7 +4550,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.9.0:
+resolve@^1.10.0, resolve@^1.9.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
@@ -4503,6 +4609,13 @@ rxjs@^6.6.3:
   dependencies:
     tslib "^1.9.0"
 
+sade@^1.7.4:
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/sade/-/sade-1.7.4.tgz#ea681e0c65d248d2095c90578c03ca0bb1b54691"
+  integrity sha512-y5yauMD93rX840MwUJr7C1ysLFBgMspsdTo4UVrDg3fXDvtwOyIqykhVAAm6fk/3au77773itJStObgK+LKaiA==
+  dependencies:
+    mri "^1.1.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -4579,7 +4692,7 @@ selfsigned@^1.10.8:
   dependencies:
     node-forge "^0.10.0"
 
-semver@^5.5.0:
+"semver@2 || 3 || 4 || 5", semver@^5.5.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -4714,6 +4827,11 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+shell-quote@^1.6.1:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
+  integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
+
 signal-exit@^3.0.0, signal-exit@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
@@ -4867,6 +4985,32 @@ source-map@^0.7.3, source-map@~0.7.2:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
+spdx-correct@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
+  integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
+  dependencies:
+    spdx-expression-parse "^3.0.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-exceptions@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
+  integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
+
+spdx-expression-parse@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
+  dependencies:
+    spdx-exceptions "^2.1.0"
+    spdx-license-ids "^3.0.0"
+
+spdx-license-ids@^3.0.0:
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.9.tgz#8a595135def9592bda69709474f1cbeea7c2467f"
+  integrity sha512-Ki212dKK4ogX+xDo4CtOZBVIwhsKBEfsEEcwmJfLQzirgc2jIWdzg40Unxz/HzEUqM1WFzVlQSMF9kZZ2HboLQ==
+
 spdy-transport@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/spdy-transport/-/spdy-transport-3.0.0.tgz#00d4863a6400ad75df93361a1608605e5dcdcf31"
@@ -4960,6 +5104,15 @@ string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
+string.prototype.padend@^3.0.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.2.tgz#6858ca4f35c5268ebd5e8615e1327d55f59ee311"
+  integrity sha512-/AQFLdYvePENU3W5rgurfWSMU6n+Ww8n/3cUt7E+vPBB/D7YDG8x+qjoFs4M/alR2bW7Qg6xMjVwWUOvuQ0XpQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.18.0-next.2"
+
 string.prototype.trimend@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
@@ -5059,6 +5212,21 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelte-check@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/svelte-check/-/svelte-check-2.1.0.tgz#3ee8ad86068256346ebca862bbee8417a757fc53"
+  integrity sha512-kKLXkFt0XZTn+O1fnilGTQ1SFLsOFF+lXp1YjPfeN9nX+Y3ZpELtZSQCkbuK6HMkWugFvsOM17FCOSa1mfrEFA==
+  dependencies:
+    chalk "^4.0.0"
+    chokidar "^3.4.1"
+    glob "^7.1.6"
+    import-fresh "^3.2.1"
+    minimist "^1.2.5"
+    sade "^1.7.4"
+    source-map "^0.7.3"
+    svelte-preprocess "^4.0.0"
+    typescript "*"
+
 svelte-dev-helper@^1.1.9:
   version "1.1.9"
   resolved "https://registry.yarnpkg.com/svelte-dev-helper/-/svelte-dev-helper-1.1.9.tgz#7d187db5c6cdbbd64d75a32f91b8998bde3273c3"
@@ -5078,7 +5246,7 @@ svelte-loader@^3.1.1:
     svelte-dev-helper "^1.1.9"
     svelte-hmr "^0.12.3"
 
-svelte-preprocess@^4.7.3:
+svelte-preprocess@^4.0.0, svelte-preprocess@^4.7.3:
   version "4.7.3"
   resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.7.3.tgz#454fa059c2400b15e7a3caeca18993cff9df0e96"
   integrity sha512-Zx1/xLeGOIBlZMGPRCaXtlMe4ZA0faato5Dc3CosEqwu75MIEPuOstdkH6cy+RYTUYynoxzNaDxkPX4DbrPwRA==
@@ -5283,6 +5451,11 @@ type-is@~1.6.17, type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
+typescript@*:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
+  integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==
+
 typescript@^4.2.4:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
@@ -5408,6 +5581,14 @@ v8-compile-cache@^2.0.3, v8-compile-cache@^2.2.0:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
+validate-npm-package-license@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
+  integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
+  dependencies:
+    spdx-correct "^3.0.0"
+    spdx-expression-parse "^3.0.0"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"

From 0afdbf704091a901b3bf36af9545d860bd45b679 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 15 Jun 2021 18:34:11 +0200
Subject: [PATCH 138/141] Fixing Svelte-check errors

---
 front/package.json                            |  4 +-
 front/src/Components/App.svelte               |  6 +--
 .../CustomCharacterScene.svelte               |  8 ++--
 .../EnableCamera/EnableCameraScene.svelte     | 16 ++++----
 .../HorizontalSoundMeterWidget.svelte         |  2 +-
 front/src/Components/Login/LoginScene.svelte  |  7 ++--
 front/src/Components/MyCamera.svelte          |  8 ++--
 .../SelectCompanionScene.svelte               |  6 +--
 front/src/Components/SoundMeterWidget.svelte  |  2 +-
 front/src/Components/UI/AudioPlaying.svelte   |  2 +-
 .../src/Components/VisitCard/VisitCard.svelte |  2 +-
 .../SelectCharacterScene.svelte               |  8 ++--
 front/src/Phaser/Login/CustomizeScene.ts      |  4 +-
 .../src/Phaser/Login/SelectCharacterScene.ts  | 10 ++---
 front/src/ambient.d.ts                        | 38 +++++++++++++++++++
 15 files changed, 79 insertions(+), 44 deletions(-)
 create mode 100644 front/src/ambient.d.ts

diff --git a/front/package.json b/front/package.json
index 05d3e29c..f6b99bcb 100644
--- a/front/package.json
+++ b/front/package.json
@@ -58,7 +58,7 @@
     "test": "TS_NODE_PROJECT=\"tsconfig-for-jasmine.json\" ts-node node_modules/jasmine/bin/jasmine --config=jasmine.json",
     "lint": "node_modules/.bin/eslint src/ . --ext .ts",
     "fix": "node_modules/.bin/eslint --fix src/ . --ext .ts",
-    "svelte-check-watch": "svelte-check --fail-on-warnings --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\" --watch",
-    "svelte-check":       "svelte-check --fail-on-warnings --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\""
+    "svelte-check-watch": "svelte-check --fail-on-warnings --fail-on-hints --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\" --watch",
+    "svelte-check":       "svelte-check --fail-on-warnings --fail-on-hints --compiler-warnings \"a11y-no-onchange:ignore,a11y-autofocus:ignore\""
   }
 }
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index a39f2dc7..c973a6c2 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -1,6 +1,4 @@
 <script lang="typescript">
-    import MenuIcon from "./Menu/MenuIcon.svelte";
-    import {menuIconVisible} from "../Stores/MenuStore";
     import {enableCameraSceneVisibilityStore, gameOverlayVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
     import MyCamera from "./MyCamera.svelte";
@@ -17,7 +15,7 @@
     import VisitCard from "./VisitCard/VisitCard.svelte";
     import {requestVisitCardsStore} from "../Stores/GameStore";
 
-    import {Game} from "../Phaser/Game/Game";
+    import type {Game} from "../Phaser/Game/Game";
     import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore";
     import HelpCameraSettingsPopup from "./HelpCameraSettings/HelpCameraSettingsPopup.svelte";
     import AudioPlaying from "./UI/AudioPlaying.svelte";
@@ -74,7 +72,7 @@
     {/if}
     {#if $helpCameraSettingsVisibleStore}
         <div>
-            <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+            <HelpCameraSettingsPopup></HelpCameraSettingsPopup>
         </div>
     {/if}
     {#if $requestVisitCardsStore}
diff --git a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
index f9e3a66b..1807f15d 100644
--- a/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
+++ b/front/src/Components/CustomCharacterScene/CustomCharacterScene.svelte
@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import { Game } from "../../Phaser/Game/Game";
-    import { CustomizeSceneName } from "../../Phaser/Login/CustomizeScene";
+    import type { Game } from "../../Phaser/Game/Game";
+    import {CustomizeScene, CustomizeSceneName} from "../../Phaser/Login/CustomizeScene";
 
     export let game: Game;
 
-    const customCharacterScene = game.scene.getScene(CustomizeSceneName);
+    const customCharacterScene = game.scene.getScene(CustomizeSceneName) as CustomizeScene;
     let activeRow = customCharacterScene.activeRow;
 
     function selectLeft() {
@@ -116,4 +116,4 @@
   }
 
 
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 605a1458..1f9ef027 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import {Game} from "../../Phaser/Game/Game";
+    import type {Game} from "../../Phaser/Game/Game";
     import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
     import {
         audioConstraintStore,
@@ -15,8 +15,8 @@
     import microphoneImg from "../images/microphone.svg";
 
     export let game: Game;
-    let selectedCamera : string|null = null;
-    let selectedMicrophone : string|null = null;
+    let selectedCamera : string|undefined = undefined;
+    let selectedMicrophone : string|undefined = undefined;
 
     const enableCameraScene = game.scene.getScene(EnableCameraSceneName) as EnableCameraScene;
 
@@ -24,10 +24,10 @@
         enableCameraScene.login();
     }
 
-    function srcObject(node, stream) {
+    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
         node.srcObject = stream;
         return {
-            update(newStream) {
+            update(newStream: MediaStream) {
                 if (node.srcObject != newStream) {
                     node.srcObject = newStream
                 }
@@ -53,8 +53,8 @@
             }
         } else {
             stream = null;
-            selectedCamera = null;
-            selectedMicrophone = null;
+            selectedCamera = undefined;
+            selectedMicrophone = undefined;
         }
     });
 
@@ -79,7 +79,7 @@
     <section class="text-center">
         <h2>Turn on your camera and microphone</h2>
     </section>
-        {#if $localStreamStore.stream}
+        {#if $localStreamStore.type === 'success' && $localStreamStore.stream}
             <video class="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
         {:else }
             <div class="webrtcsetup">
diff --git a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
index 84352ebb..a22da2fa 100644
--- a/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
+++ b/front/src/Components/EnableCamera/HorizontalSoundMeterWidget.svelte
@@ -8,7 +8,7 @@
 
     const NB_BARS = 20;
 
-    let timeout;
+    let timeout: ReturnType<typeof setTimeout>;
     const soundMeter = new SoundMeter();
     let display = false;
 
diff --git a/front/src/Components/Login/LoginScene.svelte b/front/src/Components/Login/LoginScene.svelte
index dbe3daaf..fe3c2c63 100644
--- a/front/src/Components/Login/LoginScene.svelte
+++ b/front/src/Components/Login/LoginScene.svelte
@@ -1,14 +1,13 @@
 <script lang="typescript">
-    import {Game} from "../../Phaser/Game/Game";
-    import {LoginSceneName} from "../../Phaser/Login/LoginScene";
+    import type {Game} from "../../Phaser/Game/Game";
+    import {LoginScene, LoginSceneName} from "../../Phaser/Login/LoginScene";
     import {DISPLAY_TERMS_OF_USE, MAX_USERNAME_LENGTH} from "../../Enum/EnvironmentVariable";
     import logoImg from "../images/logo.png";
     import {gameManager} from "../../Phaser/Game/GameManager";
-    import {maxUserNameLength} from "../../Connexion/LocalUser";
 
     export let game: Game;
 
-    const loginScene = game.scene.getScene(LoginSceneName);
+    const loginScene = game.scene.getScene(LoginSceneName) as LoginScene;
 
     let name = gameManager.getPlayerName() || '';
     let startValidating = false;
diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte
index 3ff88d89..ed4154a9 100644
--- a/front/src/Components/MyCamera.svelte
+++ b/front/src/Components/MyCamera.svelte
@@ -3,10 +3,10 @@
     import SoundMeterWidget from "./SoundMeterWidget.svelte";
     import {onDestroy} from "svelte";
 
-    function srcObject(node, stream) {
+    function srcObject(node: HTMLVideoElement, stream: MediaStream) {
         node.srcObject = stream;
         return {
-            update(newStream) {
+            update(newStream: MediaStream) {
                 if (node.srcObject != newStream) {
                     node.srcObject = newStream
                 }
@@ -38,9 +38,9 @@
 
 <div>
     <div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
+        {#if $localStreamStore.type === "success" && $localStreamStore.stream }
         <video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted playsinline></video>
-        <!-- {#if stream}
         <SoundMeterWidget stream={stream}></SoundMeterWidget>
-        {/if} -->
+        {/if}
     </div>
 </div>
diff --git a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
index 205a18ee..04efe124 100644
--- a/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
+++ b/front/src/Components/SelectCompanion/SelectCompanionScene.svelte
@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import {Game} from "../../Phaser/Game/Game";
-    import {SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
+    import type {Game} from "../../Phaser/Game/Game";
+    import {SelectCompanionScene, SelectCompanionSceneName} from "../../Phaser/Login/SelectCompanionScene";
 
     export let game: Game;
 
-    const selectCompanionScene = game.scene.getScene(SelectCompanionSceneName);
+    const selectCompanionScene = game.scene.getScene(SelectCompanionSceneName) as SelectCompanionScene;
 
     function selectLeft() {
         selectCompanionScene.moveToLeft();
diff --git a/front/src/Components/SoundMeterWidget.svelte b/front/src/Components/SoundMeterWidget.svelte
index 40c467b1..30650e3f 100644
--- a/front/src/Components/SoundMeterWidget.svelte
+++ b/front/src/Components/SoundMeterWidget.svelte
@@ -8,7 +8,7 @@
 
     const NB_BARS = 5;
 
-    let timeout;
+    let timeout: ReturnType<typeof setTimeout>;
     const soundMeter = new SoundMeter();
     let display = false;
 
diff --git a/front/src/Components/UI/AudioPlaying.svelte b/front/src/Components/UI/AudioPlaying.svelte
index 8889ac52..97f77429 100644
--- a/front/src/Components/UI/AudioPlaying.svelte
+++ b/front/src/Components/UI/AudioPlaying.svelte
@@ -2,7 +2,7 @@
     import { fly } from 'svelte/transition';
     import megaphoneImg from "./images/megaphone.svg";
     import {soundPlayingStore} from "../../Stores/SoundPlayingStore";
-    import {afterUpdate, onMount} from "svelte";
+    import {afterUpdate} from "svelte";
 
     export let url: string;
     let audio: HTMLAudioElement;
diff --git a/front/src/Components/VisitCard/VisitCard.svelte b/front/src/Components/VisitCard/VisitCard.svelte
index ebf22934..78f10359 100644
--- a/front/src/Components/VisitCard/VisitCard.svelte
+++ b/front/src/Components/VisitCard/VisitCard.svelte
@@ -7,7 +7,7 @@
     let w = '500px';
     let h = '250px';
     let hidden = true;
-    let cvIframe;
+    let cvIframe: HTMLIFrameElement;
 
     function closeCard() {
         requestVisitCardsStore.set(null);
diff --git a/front/src/Components/selectCharacter/SelectCharacterScene.svelte b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
index e227771c..5a37efda 100644
--- a/front/src/Components/selectCharacter/SelectCharacterScene.svelte
+++ b/front/src/Components/selectCharacter/SelectCharacterScene.svelte
@@ -1,10 +1,10 @@
 <script lang="typescript">
-    import { Game } from "../../Phaser/Game/Game";
-    import { SelectCharacterSceneName } from "../../Phaser/Login/SelectCharacterScene";
+    import type { Game } from "../../Phaser/Game/Game";
+    import {SelectCharacterScene, SelectCharacterSceneName} from "../../Phaser/Login/SelectCharacterScene";
 
     export let game: Game;
 
-    const selectCharacterScene = game.scene.getScene(SelectCharacterSceneName);
+    const selectCharacterScene = game.scene.getScene(SelectCharacterSceneName) as SelectCharacterScene;
 
     function selectLeft() {
         selectCharacterScene.moveToLeft();
@@ -89,4 +89,4 @@
   }
 
 
-</style>
\ No newline at end of file
+</style>
diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts
index 9d0e7877..715cb67d 100644
--- a/front/src/Phaser/Login/CustomizeScene.ts
+++ b/front/src/Phaser/Login/CustomizeScene.ts
@@ -263,7 +263,7 @@ export class CustomizeScene extends AbstractCharacterScene {
         this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
      }
 
-    private nextSceneToCamera(){
+    public nextSceneToCamera(){
         const layers: string[] = [];
             let i = 0;
             for (const layerItem of this.selectedLayers) {
@@ -284,7 +284,7 @@ export class CustomizeScene extends AbstractCharacterScene {
             customCharacterSceneVisibleStore.set(false);
     }
 
-    private backToPreviousScene(){
+    public backToPreviousScene(){
         this.scene.sleep(CustomizeSceneName);
         waScaleManager.restoreZoom();
         this.scene.run(SelectCharacterSceneName);
diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts
index 1abd58e5..0f590840 100644
--- a/front/src/Phaser/Login/SelectCharacterScene.ts
+++ b/front/src/Phaser/Login/SelectCharacterScene.ts
@@ -92,7 +92,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         });
     }
 
-    protected nextSceneToCameraScene(): void {
+    public nextSceneToCameraScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
@@ -108,7 +108,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.events.removeListener('wake');
     }
 
-    protected nextSceneToCustomizeScene(): void {
+    public nextSceneToCustomizeScene(): void {
         if (this.selectedPlayer !== null && !areCharacterLayersValid([this.selectedPlayer.texture.key])) {
             return;
         }
@@ -118,7 +118,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         selectCharacterSceneVisibleStore.set(false);
     }
 
-    createCurrentPlayer(): void {        
+    createCurrentPlayer(): void {
         for (let i = 0; i <this.playerModels.length; i++) {
             const playerResource = this.playerModels[i];
 
@@ -165,7 +165,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.updateSelectedPlayer();
     }
 
-    protected moveToLeft(){
+    public moveToLeft(){
         if(this.currentSelectUser === 0){
             return;
         }
@@ -173,7 +173,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
         this.moveUser();
     }
 
-    protected moveToRight(){
+    public moveToRight(){
         if(this.currentSelectUser === (this.players.length - 1)){
             return;
         }
diff --git a/front/src/ambient.d.ts b/front/src/ambient.d.ts
new file mode 100644
index 00000000..eee8d6c1
--- /dev/null
+++ b/front/src/ambient.d.ts
@@ -0,0 +1,38 @@
+/**
+ * These declarations tell TypeScript that we allow import of images, e.g.
+ * ```
+ <script lang='ts'>
+ import successkid from 'images/successkid.jpg';
+ </script>
+ <img src="{successkid}">
+ ```
+ */
+declare module "*.gif" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.jpg" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.jpeg" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.png" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.svg" {
+    const value: string;
+    export = value;
+}
+
+declare module "*.webp" {
+    const value: string;
+    export = value;
+}

From c1e202b7b113bbd06411d0dee8fbd57a59afed97 Mon Sep 17 00:00:00 2001
From: jonny <ga86lad@mytum.de>
Date: Wed, 16 Jun 2021 17:16:00 +0200
Subject: [PATCH 139/141] renamed to goToRoom

---
 front/src/iframe_api.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/front/src/iframe_api.ts b/front/src/iframe_api.ts
index d4146fd1..89279a64 100644
--- a/front/src/iframe_api.ts
+++ b/front/src/iframe_api.ts
@@ -21,10 +21,10 @@ interface WorkAdventureApi {
     onEnterZone(name: string, callback: () => void): void;
     onLeaveZone(name: string, callback: () => void): void;
     openPopup(targetObject: string, message: string, buttons: ButtonDescriptor[]): Popup;
-    openTab(url : string): void;
-    goToPage(url : string): void;
-    exitSceneTo(url : string): void;
-    openCoWebSite(url : string): void;
+    openTab(url: string): void;
+    goToPage(url: string): void;
+    goToRoom(url: string): void;
+    openCoWebSite(url: string): void;
     closeCoWebSite(): void;
     disablePlayerControls(): void;
     restorePlayerControls(): void;
@@ -168,7 +168,7 @@ window.WA = {
         }, '*');
     },
 
-    exitSceneTo(url : string) : void{
+    goToRoom(url: string): void {
         window.parent.postMessage({
             "type" : 'loadPage',
             "data" : {

From 1147a21ddeaf4e32147c6e0de15c4a5653ae32f9 Mon Sep 17 00:00:00 2001
From: jonny <ga86lad@mytum.de>
Date: Wed, 16 Jun 2021 17:34:00 +0200
Subject: [PATCH 140/141] fixed documentation

---
 docs/maps/api-reference.md   | 19 +++++++++++++++++++
 maps/tests/goToPageScript.js |  2 +-
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/docs/maps/api-reference.md b/docs/maps/api-reference.md
index 9891a88a..80d57ea9 100644
--- a/docs/maps/api-reference.md
+++ b/docs/maps/api-reference.md
@@ -187,6 +187,25 @@ Example:
 WA.goToPage('https://www.wikipedia.org/');
 ```
 
+### Going to a different map from the script
+
+```
+
+goToRoom(url: string): void
+```
+
+Load the map at url without unloading workadventure
+
+relative urls: "../subFolder/map.json[#start-layer-name]"
+global urls: "/_/global/domain/path/map.json[#start-layer-name]"
+
+Example:
+
+```javascript
+WA.goToRoom('../otherMap/map.json');
+WA.goToRoom("/_/global/<path to global map>.json#start-layer-2")
+```
+
 ### Opening/closing a web page in an iFrame
 
 ```
diff --git a/maps/tests/goToPageScript.js b/maps/tests/goToPageScript.js
index af5b7f9f..bccbc5d2 100644
--- a/maps/tests/goToPageScript.js
+++ b/maps/tests/goToPageScript.js
@@ -39,7 +39,7 @@ WA.onEnterZone(zoneName, () => {
             label: "load grouped map",
             className: "popUpElement",
             callback: (popup => {
-                WA.exitSceneTo(urlRelativeMap);
+                WA.goToRoom(urlRelativeMap);
                 popup.close();
             })
 

From 8d2baa8d1a8e03a08063ffc06e3b3a4f2069c3f2 Mon Sep 17 00:00:00 2001
From: jonny <ga86lad@mytum.de>
Date: Wed, 16 Jun 2021 17:36:52 +0200
Subject: [PATCH 141/141] added workadventure specific url

---
 docs/maps/api-reference.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/maps/api-reference.md b/docs/maps/api-reference.md
index 80d57ea9..b9525d3c 100644
--- a/docs/maps/api-reference.md
+++ b/docs/maps/api-reference.md
@@ -202,6 +202,7 @@ global urls: "/_/global/domain/path/map.json[#start-layer-name]"
 Example:
 
 ```javascript
+WA.goToRoom("/@/tcm/workadventure/floor0")  // workadventure urls
 WA.goToRoom('../otherMap/map.json');
 WA.goToRoom("/_/global/<path to global map>.json#start-layer-2")
 ```