diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts index c2a5897c..427a25ab 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 e1ea5e8e..b6cfd9f4 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 845219c7..0fb4d2a4 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 {