basic login page with a text input and a click button

front/src/Phaser/Components/ClickButton.ts

@@ -0,0 +1,11 @@
+
+export class ClickButton extends Phaser.GameObjects.Image{
+    
+    constructor(scene: Phaser.Scene, x: number, y: number, textureName: string, callback: Function) {
+        super(scene, x, y, textureName);
+        this.scene.add.existing(this);
+        this.setInteractive();
+        this.on("pointerup", callback);
+    }
+    
+}

front/src/Phaser/Components/TextField.ts

@@ -0,0 +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'});
+        this.scene.add.existing(this)
+    }
+}

front/src/Phaser/Components/TextInput.ts

@@ -0,0 +1,24 @@
+
+export class TextInput extends Phaser.GameObjects.Text {
+    constructor(scene: Phaser.Scene, x: number, y: number) {
+        super(scene, x, y, '', { fontSize: '32px', fontStyle: 'Courier', color: '#fff'});
+        this.scene.add.existing(this);
+
+        
+        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);
+            } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) {
+                this.text += event.key;
+            }
+        });
+    }
+    
+    getText(): string {
+        return this.text;
+    }
+
+
+}

front/src/Phaser/Game/GameManager.ts

@@ -18,20 +18,16 @@ export interface GameManagerInterface {
 export class GameManager implements GameManagerInterface {
     GameScenes: Array<GameSceneInterface> = [];
     status: number;
+    private ConnexionInstance: Connexion;
 
     constructor() {
         this.status = StatusGameManagerEnum.IN_PROGRESS;
-        ConnexionInstance = new Connexion("test@gmail.com", this);
+        this.configureGame();
     }
-
+    
-    createGame(){
+    connect(email:string) {
-        return ConnexionInstance.createConnexion().then(() => {
+        this.ConnexionInstance = new Connexion(email, this);
-            this.configureGame();
+        return this.ConnexionInstance.createConnexion()
-            /** TODO add loader in the page **/
-        }).catch((err) => {
-            console.error(err);
-            throw err;
-        });
     }
 
     /**
@@ -51,8 +47,8 @@ export class GameManager implements GameManagerInterface {
      */
     createCurrentPlayer(): void {
         //Get started room send by the backend
-        let game: GameSceneInterface = this.GameScenes.find((Game: GameSceneInterface) => Game.RoomId === ConnexionInstance.startedRoom);
+        let game: GameSceneInterface = this.GameScenes.find((Game: GameSceneInterface) => Game.RoomId === this.ConnexionInstance.startedRoom);
-        game.createCurrentPlayer(ConnexionInstance.userId);
+        game.createCurrentPlayer(this.ConnexionInstance.userId);
         this.status = StatusGameManagerEnum.CURRENT_USER_CREATED;
     }
 
@@ -74,4 +70,6 @@ export class GameManager implements GameManagerInterface {
             console.error(e);
         }
     }
-}
+}
+
+export const gameManager = new GameManager();

front/src/Phaser/Game/GameScene.ts

@@ -59,7 +59,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             })
         });
         this.load.tilemapTiledJSON(Textures.Map, mapUrl);
-        this.load.image(Textures.Rock, 'resources/objects/rockSprite.png');
         this.load.spritesheet(Textures.Player,
             'resources/characters/pipoya/Male 01-1.png',
             { frameWidth: 32, frameHeight: 32 }
@@ -100,7 +99,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
 
         //add entities
         this.Objects = new Array<Phaser.Physics.Arcade.Sprite>();
-        this.addSpite(this.physics.add.sprite(200, 400, Textures.Rock, 26));
 
         //init event click
         this.EventToClickOnTile();

front/src/Phaser/Login/LogincScene.ts

@@ -0,0 +1,47 @@
+import KeyboardKeydownCallback = Phaser.Types.Input.Keyboard.KeyboardKeydownCallback;
+import {gameManager} from "../Game/GameManager";
+import {ROOM} from "../../Enum/EnvironmentVariable";
+import {TextField} from "../Components/TextField";
+import {TextInput} from "../Components/TextInput";
+import {ClickButton} from "../Components/ClickButton";
+
+//todo: put this constants in a dedicated file
+export const LoginSceneName = "LoginScene";
+enum LoginTextures {
+    playButton = "play_button",
+}
+
+export class LogincScene extends Phaser.Scene {
+    private emailInput: TextInput;
+    private textField: TextField;
+    private playButton: ClickButton;
+    constructor() {
+        super({
+            key: LoginSceneName
+        });
+    }
+    
+    preload() {
+        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
+    }
+    
+    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));
+    }
+    
+    update(time: number, delta: number): void {
+        
+    }
+    
+    async login() {
+        let email = this.emailInput.text;
+        if (!email) return;
+        await gameManager.connect(email);
+        this.scene.start("GameScene");
+    }
+}

front/src/index.ts

@@ -1,17 +1,16 @@
 import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
-import {GameManager} from "./Phaser/Game/GameManager";
+import {gameManager, GameManager} from "./Phaser/Game/GameManager";
 import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
 import {cypressAsserter} from "./Cypress/CypressAsserter";
-
+import {LogincScene} from "./Phaser/Login/LogincScene";
-let gameManager = new GameManager();
 
 const config: GameConfig = {
     title: "Office game",
     width: window.innerWidth / RESOLUTION,
     height: window.innerHeight / RESOLUTION,
     parent: "game",
-    scene: gameManager.GameScenes,
+    scene: [LogincScene, ...gameManager.GameScenes as any],
     zoom: RESOLUTION,
     physics: {
         default: "arcade",
@@ -23,10 +22,8 @@ const config: GameConfig = {
 
 cypressAsserter.gameStarted();
 
-gameManager.createGame().then(() => {
+let game = new Phaser.Game(config);
-    let game = new Phaser.Game(config);
 
-    window.addEventListener('resize', function (event) {
+window.addEventListener('resize', function (event) {
-        game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION);
+    game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION);
-    });
+});
-});