From: kharhamel <oognic@gmail.com>
Date: Sun, 26 Apr 2020 16:48:41 +0000 (+0200)
Subject: prettier login page
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=25ac579a90dea6ec0eb50c7b6deeddcb52d99094;p=libreadventure.git

prettier login page
---

diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts
index c2a5897..427a25a 100644
--- a/front/src/Phaser/Components/TextField.ts
+++ b/front/src/Phaser/Components/TextField.ts
@@ -1,7 +1,7 @@
 
 export class TextField extends Phaser.GameObjects.Text {
     constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) {
-        super(scene, x, y, text, { fontSize: '32px', fontStyle: 'Courier', color: '#ffffff'});
+        super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'});
         this.scene.add.existing(this)
     }
 }
\ No newline at end of file
diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts
index e1ea5e8..b6cfd9f 100644
--- a/front/src/Phaser/Components/TextInput.ts
+++ b/front/src/Phaser/Components/TextInput.ts
@@ -1,21 +1,40 @@
 
 export class TextInput extends Phaser.GameObjects.Text {
+    private underLineLength = 10;
+    private underLine: Phaser.GameObjects.Text;
     constructor(scene: Phaser.Scene, x: number, y: number) {
-        super(scene, x, y, '', { fontSize: '32px', fontStyle: 'Courier', color: '#fff'});
+        super(scene, x, y, '', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'});
         this.scene.add.existing(this);
 
+        this.underLine = this.scene.add.text(x, y+1, '__________', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'})
+
         
         let keySpace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
         let keyBackspace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.BACKSPACE);
         this.scene.input.keyboard.on('keydown', (event: any) => {
             if (event.keyCode === 8 && this.text.length > 0) {
-                this.text = this.text.substr(0, this.text.length - 1);
+                this.deleteLetter();
             } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) {
-                this.text += event.key;
+                this.addLetter(event.key);
             }
         });
     }
     
+    private deleteLetter() {
+        this.text = this.text.substr(0, this.text.length - 1);
+        if (this.underLine.text.length > this.underLineLength) {
+            this.underLine.text = this.underLine.text.substr(0, this.underLine.text.length - 1);
+        }
+    }
+
+
+    private addLetter(letter: string) {
+        this.text += letter;
+        if (this.text.length > this.underLineLength) {
+            this.underLine.text +=  '_';
+        }
+    }
+
     getText(): string {
         return this.text;
     }
diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts
index 845219c..0fb4d2a 100644
--- a/front/src/Phaser/Login/LogincScene.ts
+++ b/front/src/Phaser/Login/LogincScene.ts
@@ -15,6 +15,7 @@ export class LogincScene extends Phaser.Scene {
     private emailInput: TextInput;
     private textField: TextField;
     private playButton: ClickButton;
+    private infoTextField: TextField;
     constructor() {
         super({
             key: LoginSceneName
@@ -28,10 +29,13 @@ export class LogincScene extends Phaser.Scene {
     create() {
         this.textField = new TextField(this, 10, 10, 'Enter your email:');
         this.emailInput = new TextInput(this, 10, 50);
-        
+
         let x = this.game.renderer.width / 2;
         let y = this.game.renderer.height / 2;
         this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this));
+
+        let infoText = "Commandes de base: \n - Z,Q,S,D (ou les flèches de direction) pour bouger\n - SHIFT pour accélerer";
+        this.infoTextField = new TextField(this, 10, 300, infoText);
     }
     
     update(time: number, delta: number): void {