Changed font from text

Input name can only be 4 characters long
Passing name to next scene

front/src/Phaser/Components/TextField.ts

@@ -1,7 +1,7 @@
 
-export class TextField extends Phaser.GameObjects.Text {
+export class TextField extends Phaser.GameObjects.BitmapText {
     constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) {
-        super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "15px", color: '#ffffff'});
+        super(scene, x, y, 'main_font', text, 8);
         this.scene.add.existing(this)
     }
 }

front/src/Phaser/Components/TextInput.ts

@@ -1,25 +1,25 @@
 
-export class TextInput extends Phaser.GameObjects.Text {
+export class TextInput extends Phaser.GameObjects.BitmapText {
     private underLineLength = 10;
     private underLine: Phaser.GameObjects.Text;
-    constructor(scene: Phaser.Scene, x: number, y: number) {
-        super(scene, x, y, '', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'});
+    constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number) {
+        super(scene, x, y, 'main_font', '', 32);
         this.scene.add.existing(this);
 
-        this.underLine = this.scene.add.text(x, y+1, '__________', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'})
+        this.underLine = this.scene.add.text(x, y+1, '_______', { fontFamily: 'Arial', fontSize: "32px", 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.deleteLetter();
-            } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) {
+            } else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) {
                 this.addLetter(event.key);
             }
         });
     }
-    
+
     private deleteLetter() {
         this.text = this.text.substr(0, this.text.length - 1);
         if (this.underLine.text.length > this.underLineLength) {
@@ -40,4 +40,4 @@ export class TextInput extends Phaser.GameObjects.Text {
     }
 
 
-}
+}

front/src/Phaser/Game/GameScene.ts

@@ -5,6 +5,7 @@ import {DEBUG_MODE, RESOLUTION, ROOM, ZOOM_LEVEL} from "../../Enum/EnvironmentVa
 import Tile = Phaser.Tilemaps.Tile;
 import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap";
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
+import { GameSceneInitDataInterface } from "./GameSceneInitDataInterface";
 
 export const GameSceneName = "GameScene";
 export enum Textures {
@@ -28,6 +29,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
     map: ITiledMap;
     startX = (window.innerWidth / 2) / RESOLUTION;
     startY = (window.innerHeight / 2) / RESOLUTION;
+    playerName: string;
 
 
     constructor() {
@@ -65,7 +67,9 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
     }
 
     //hook initialisation
-    init(){}
+    init(data: GameSceneInitDataInterface) {
+        this.playerName = data.name;
+    }
 
     //hook create scene
     create(): void {

front/src/Phaser/Game/GameSceneInitDataInterface.ts

@@ -0,0 +1,3 @@
+export interface GameSceneInitDataInterface {
+    name: string
+}

front/src/Phaser/Login/LogincScene.ts

@@ -4,19 +4,22 @@ import {TextInput} from "../Components/TextInput";
 import {ClickButton} from "../Components/ClickButton";
 import {GameSceneName} from "../Game/GameScene";
 import Image = Phaser.GameObjects.Image;
+import Key = Phaser.Input.Keyboard.Key;
 
 //todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
 enum LoginTextures {
-    playButton = "play_button",
-    icon = "icon"
+    //playButton = "play_button",
+    icon = "icon",
+    mainFont = "main_font"
 }
 
 export class LogincScene extends Phaser.Scene {
-    private emailInput: TextInput;
+    private nameInput: TextInput;
     private textField: TextField;
     private playButton: ClickButton;
     private infoTextField: TextField;
+    private pressReturnField: TextField;
     private logo: Image;
 
     constructor() {
@@ -26,35 +29,55 @@ export class LogincScene extends Phaser.Scene {
     }
 
     preload() {
-        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
+        //this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
         this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
+        // Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
+        this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
     }
 
     create() {
-        this.textField = new TextField(this, 10, 10, 'Enter your name:');
-        this.emailInput = new TextInput(this, 10, 50);
+        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);
 
-        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));
+        this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
+        this.pressReturnField.setOrigin(0.5).setCenterAlign()
+
+        //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));
 
         this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
         this.add.existing(this.logo);
 
-
         let infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run";
-        this.infoTextField = new TextField(this, 10, this.game.renderer.height - 60, infoText);
+        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 === '') {
+                return
+            };
+            gameManager.connect(name).then(() => {
+                this.scene.start(GameSceneName, { name });
+            });
+        });
+
     }
 
     update(time: number, delta: number): void {
-
+        if (this.nameInput.getText() == '') {
+            this.pressReturnField.setVisible(false);
+        } else {
+            this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
+        }
     }
 
-    async login() {
-        let email = this.emailInput.text;
-        if (!email) return;
-        gameManager.connect(email).then(() => {
+    /*async login() {
+        let name = this.nameInput.text;
+        if (!name) return;
+        gameManager.connect(name).then(() => {
             this.scene.start(GameSceneName);
         });
-    }
+    }*/
 }