Migrating LoginScene to Svelte

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}

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>

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>

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 {

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

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

front/src/Stores/LoginSceneStore.ts

@@ -0,0 +1,3 @@
+import { writable } from "svelte/store";
+
+export const loginSceneVisibleStore = writable(false);

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