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] 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) {