Merge branch 'resizeSelect' of github.com:thecodingmachine/workadventure into resizeSelect

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,16 +9,20 @@
     import {selectCharacterSceneVisibleStore} from "../Stores/SelectCharacterStore";
     import SelectCharacterScene from "./selectCharacter/SelectCharacterScene.svelte";
     import {customCharacterSceneVisibleStore} from "../Stores/CustomCharacterStore";
+    import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
+    import LoginScene from "./Login/LoginScene.svelte";
+    import {loginSceneVisibleStore} from "../Stores/LoginSceneStore";
+    import EnableCameraScene from "./EnableCamera/EnableCameraScene.svelte";
 
     import {Game} from "../Phaser/Game/Game";
-    import CustomCharacterScene from "./CustomCharacterScene/CustomCharacterScene.svelte";
-
 
     export let game: Game;
-
 </script>
 
 <div>
+    {#if $loginSceneVisibleStore}
+        <LoginScene game={game}></LoginScene>
+    {/if}
     {#if $selectCharacterSceneVisibleStore}
         <SelectCharacterScene game={ game }></SelectCharacterScene>
     {/if}
@@ -28,6 +32,9 @@
     {#if $selectCompanionSceneVisibleStore}
         <SelectCompanionScene game={ game }></SelectCompanionScene>
     {/if}
+    {#if $enableCameraSceneVisibilityStore}
+        <EnableCameraScene game={game}></EnableCameraScene>
+    {/if}
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->

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>
+

front/src/Components/Login/LoginScene.svelte

@@ -0,0 +1,120 @@
+<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} 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;
+      margin: 0;
+
+      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>

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>
+</style>