correction following review by Kharhamel

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 {
+    section {
-    font-family: "Press Start 2P";
+      margin: 10px;
-  }
+
-  .customCharacterScene section {
+      &.action {
-    margin: 10px;
+        text-align: center;
-  }
+        margin-top: 55vh;
-  .customCharacterScene section.action {
+      }
-    text-align: center;
+
-    margin-top: 55vh;
+      h2 {
-  }
+        font-family: "Press Start 2P";
-  .customCharacterScene section h2 {
+        margin: 1px;
-    font-family: "Press Start 2P";
+      }
-    margin: 1px;
+
-  }
+      &.text-center {
-  .customCharacterScene section.text-center{
+        text-align: center;
-    text-align: center;
+      }
-  }
+
-  .customCharacterScene section button.customCharacterSceneButton{
+      button.customCharacterSceneButton {
-    position: absolute;
+        position: absolute;
-    top: 33vh;
+        top: 33vh;
-    margin: 0;
+        margin: 0;
-  }
+      }
-  .customCharacterScene section button.customCharacterSceneFormBack{
+
-    color: #292929;
+      button.customCharacterSceneFormBack {
-  }
+        color: #292929;
-  .customCharacterScene button.customCharacterSceneButtonLeft{
+      }
-    left: 33vw;
+    }
-  }
+
-  .customCharacterScene button.customCharacterSceneButtonRight{
+    button {
-    right: 33vw;
+      font-family: "Press Start 2P";
+
+      &.customCharacterSceneButtonLeft {
+        left: 33vw;
+      }
+
+      &.customCharacterSceneButtonRight {
+        right: 33vw;
+      }
+    }
   }
 
   @media only screen and (max-width: 800px) {

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();

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{
+        h2 {
-        font-family: 'Press Start 2P';
+            font-family: 'Press Start 2P';
-    }
+        }
-    .helpCameraSettings section {
+
-        margin: 10px;
+        section {
-    }
+            p {
-    .helpCameraSettings section p{
+                margin: 15px;
-        margin: 20px;
+                font-family: 'Press Start 2P';
-        font-family: 'Press Start 2P';
+
-    }
+                & .err {
-    .helpCameraSettings section p.err{
+                    color: #ff0000;
-        color: #ff0000;
+                }
-    }
+            }
-    .helpCameraSettings section img {
+            img {
-        max-width: 500px;
+                max-width: 500px;
-        width: 100%;
+                width: 100%;
+            }
+        }
     }
 </style>

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 {
+    p.err {
-      min-height: 2rem;
+      color: #ce372b;
-      margin: 0;
+      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>

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 {
+    section {
-    margin: 10px;
+      margin: 10px;
-  }
+
-  .selectCompanionScene section.action {
+      &.action {
-    text-align: center;
+        text-align: center;
-    margin-top: 55vh;
+        margin-top: 55vh;
-  }
+      }
-  .selectCompanionScene section h2 {
+
-    font-family: "Press Start 2P";
+      h2 {
-    margin: 1px;
+        font-family: "Press Start 2P";
-  }
+        margin: 1px;
-  .selectCompanionScene section.text-center{
+      }
-    text-align: center;
+
-  }
+      &.text-center {
-  .selectCompanionScene section button.selectCharacterButton{
+        text-align: center;
-    position: absolute;
+      }
-    top: 33vh;
+
-    margin: 0;
+      button.selectCharacterButton {
-  }
+        position: absolute;
-  .selectCompanionScene button.selectCharacterButtonLeft{
+        top: 33vh;
-    left: 33vw;
+        margin: 0;
-  }
+      }
-  .selectCompanionScene button.selectCharacterButtonRight{
+    }
-    right: 33vw;
+
+    button.selectCharacterButtonLeft {
+      left: 33vw;
+    }
+
+    button.selectCharacterButtonRight {
+      right: 33vw;
+    }
   }
 
   @media only screen and (max-width: 800px) {

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 {
+    section {
-    font-family: "Press Start 2P";
+      margin: 10px;
-  }
+
-  .selectCharacterScene section {
+      &.action {
-    margin: 10px;
+        text-align: center;
-  }
+        margin-top: 55vh;
-  .selectCharacterScene section.action {
+      }
-    text-align: center;
+
-    margin-top: 55vh;
+      h2 {
-  }
+        font-family: "Press Start 2P";
-  .selectCharacterScene section h2 {
+        margin: 1px;
-    font-family: "Press Start 2P";
+      }
-    margin: 1px;
+
-  }
+      &.text-center {
-  .selectCharacterScene section.text-center{
+        text-align: center;
-    text-align: center;
+      }
-  }
+
-  .selectCharacterScene section button.selectCharacterButton{
+      button.selectCharacterButton {
-    position: absolute;
+        position: absolute;
-    top: 33vh;
+        top: 33vh;
-    margin: 0;
+        margin: 0;
-  }
+      }
-  .selectCharacterScene button.selectCharacterButtonLeft{
+    }
-    left: 33vw;
+
-  }
+    button {
-  .selectCharacterScene button.selectCharacterButtonRight{
+      font-family: "Press Start 2P";
-    right: 33vw;
+
+      &.selectCharacterButtonLeft {
+        left: 33vw;
+      }
+
+      &.selectCharacterButtonRight {
+        right: 33vw;
+      }
+    }
   }
 
   @media only screen and (max-width: 800px) {