basic login page with a text input and a click button

diff --git a/front/dist/resources/objects/play_button.png b/front/dist/resources/objects/play_button.png
new file mode 100644 (file)
index 0000000..36aa309
Binary files /dev/null and b/front/dist/resources/objects/play_button.png differ

diff --git a/front/dist/resources/objects/rockSprite.png b/front/dist/resources/objects/rockSprite.png
deleted file mode 100644 (file)
index 40820ab..0000000
Binary files a/front/dist/resources/objects/rockSprite.png and /dev/null differ

diff --git a/front/src/Phaser/Components/ClickButton.ts b/front/src/Phaser/Components/ClickButton.ts
new file mode 100644 (file)
index 0000000..204e954
--- /dev/null
+++ b/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);
+    }
+    
+}
\ No newline at end of file

diff --git a/front/src/Phaser/Components/TextField.ts b/front/src/Phaser/Components/TextField.ts
new file mode 100644 (file)
index 0000000..c2a5897
--- /dev/null
+++ b/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)
+    }
+}
\ No newline at end of file

diff --git a/front/src/Phaser/Components/TextInput.ts b/front/src/Phaser/Components/TextInput.ts
new file mode 100644 (file)
index 0000000..e1ea5e8
--- /dev/null
+++ b/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;
+    }
+
+
+}
\ No newline at end of file

diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index d03a3152233bbe3c957768ae5b496878bca5f929..e18bbdd616510735758604388dd21bac7a9cd5bc 100644 (file)
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/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(){
-        return ConnexionInstance.createConnexion().then(() => {
-            this.configureGame();
-            /** TODO add loader in the page **/
-        }).catch((err) => {
-            console.error(err);
-            throw err;
-        });
+    
+    connect(email:string) {
+        this.ConnexionInstance = new Connexion(email, this);
+        return this.ConnexionInstance.createConnexion()
     }
 
     /**
@@ -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);
-        game.createCurrentPlayer(ConnexionInstance.userId);
+        let game: GameSceneInterface = this.GameScenes.find((Game: GameSceneInterface) => Game.RoomId === this.ConnexionInstance.startedRoom);
+        game.createCurrentPlayer(this.ConnexionInstance.userId);
         this.status = StatusGameManagerEnum.CURRENT_USER_CREATED;
     }
 
@@ -74,4 +70,6 @@ export class GameManager implements GameManagerInterface {
             console.error(e);
         }
     }
-}
\ No newline at end of file
+}
+
+export const gameManager = new GameManager();
\ No newline at end of file

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 32f57ae35a9819355cbc801aa4e9ed18d7330af8..494508e994d055ee4cf4080e691d0097363f755e 100644 (file)
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/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();

diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts
new file mode 100644 (file)
index 0000000..845219c
--- /dev/null
+++ b/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");
+    }
+}
\ No newline at end of file

diff --git a/front/src/index.ts b/front/src/index.ts
index e53063893d8841aac4c3307c299b8a12b9b7ba9c..c55a5d0db6741fc8007c326f8d28a50e222385cd 100644 (file)
--- a/front/src/index.ts
+++ b/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";
-
-let gameManager = new GameManager();
+import {LogincScene} from "./Phaser/Login/LogincScene";
 
 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) {
-        game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION);
-    });
-});
+window.addEventListener('resize', function (event) {
+    game.scale.resize(window.innerWidth / RESOLUTION, window.innerHeight / RESOLUTION);
+});
\ No newline at end of file