prettier login page

diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts
index c2a5897cbe7ffd50eaeff7065cc229db74252fdf..427a25abe80e07c175d1591b6f3c263a9bd34d68 100644 (file)
--- 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 e1ea5e8ee18874cd5523a08ff1e33b06a560e924..b6cfd9f4b34af9f240194d891619d0739596c096 100644 (file)
--- 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 845219c7a143a3c6777b4997c0b3e22abbfff62f..0fb4d2a49eea843110004d7070a05af97fe17d37 100644 (file)
--- 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 {