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