From 52e3b47cc16b0ba1ec9b8179303359e0f21386d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 26 May 2020 22:17:00 +0200
Subject: [PATCH] Storing user name in local storage

---
 front/src/Phaser/Components/TextInput.ts |  8 ++++----
 front/src/Phaser/Login/LoginScene.ts     | 18 +++++++++++++-----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts
index b92da1ff..92ddcb56 100644
--- a/front/src/Phaser/Components/TextInput.ts
+++ b/front/src/Phaser/Components/TextInput.ts
@@ -2,8 +2,9 @@
 export class TextInput extends Phaser.GameObjects.BitmapText {
     private underLineLength = 10;
     private underLine: Phaser.GameObjects.Text;
-    constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number) {
-        super(scene, x, y, 'main_font', '', 32);
+
+    constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number, text: string, onChange: (text: string) => void) {
+        super(scene, x, y, 'main_font', text, 32);
         this.scene.add.existing(this);
 
         this.underLine = this.scene.add.text(x, y+1, '_______', { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'})
@@ -17,6 +18,7 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
             } else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) {
                 this.addLetter(event.key);
             }
+            onChange(this.text);
         });
     }
 
@@ -38,6 +40,4 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
     getText(): string {
         return this.text;
     }
-
-
 }
diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index dc344565..e406e752 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -21,11 +21,15 @@ export class LoginScene extends Phaser.Scene {
     private infoTextField: TextField;
     private pressReturnField: TextField;
     private logo: Image;
+    private name: string;
 
     constructor() {
         super({
             key: LoginSceneName
         });
+        if (window.localStorage && window.localStorage.playerName) {
+            this.name = window.localStorage.getItem('playerName');
+        }
     }
 
     preload() {
@@ -50,7 +54,12 @@ export class LoginScene extends Phaser.Scene {
 
         this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:');
         this.textField.setOrigin(0.5).setCenterAlign()
-        this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 64, 70, 4);
+        this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 64, 70, 4, this.name,(text: string) => {
+            this.name = text;
+            if (window.localStorage) {
+                window.localStorage.setItem('playerName', text);
+            }
+        });
 
         this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
         this.pressReturnField.setOrigin(0.5).setCenterAlign()
@@ -62,18 +71,17 @@ export class LoginScene extends Phaser.Scene {
         this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText);
 
         this.input.keyboard.on('keyup-ENTER', () => {
-            let name = this.nameInput.getText();
-            if (name === '') {
+            if (this.name === '') {
                 return
             }
-            this.login(name);
+            this.login(this.name);
         });
 
         cypressAsserter.initFinished();
     }
 
     update(time: number, delta: number): void {
-        if (this.nameInput.getText() == '') {
+        if (this.name == '') {
             this.pressReturnField.setVisible(false);
         } else {
             this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));