prettier login page

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

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

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
@@ -32,6 +33,9 @@ export class LogincScene extends Phaser.Scene {
         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 {