created a login screen

front/src/ConnexionManager.ts

@@ -1,4 +1,4 @@
-import {GameManagerInterface} from "./Phaser/Game/GameManager";
+import {gameManager, GameManagerInterface} from "./Phaser/Game/GameManager";
 
 const SocketIo = require('socket.io-client');
 import Axios from "axios";
@@ -105,54 +105,43 @@ export interface ConnexionInterface {
     email : string;
     userId: string;
     startedRoom : string;
-    createConnexion() : Promise<any>;
+    createConnexion(userName:string, email: string) : Promise<any>;
     joinARoom(roomId : string) : void;
     sharePosition(roomId : string, x : number, y : number, direction : string) : void;
     positionOfAllUser() : void;
 }
-export class Connexion implements ConnexionInterface{
+export class ConnexionManager implements ConnexionInterface{
     socket : any;
     token : string;
     email : string;
     userId: string;
     startedRoom : string;
 
-    GameManager: GameManagerInterface;
+    shareUserPositionCallback: Function;
+    
 
-    constructor(email : string, GameManager: GameManagerInterface) {
-        this.email = email;
-        this.GameManager = GameManager;
+    constructor() {
     }
 
-    createConnexion() : Promise<ConnexionInterface>{
-        return Axios.post(`${API_URL}/login`, {email: this.email})
-            .then((res) => {
-                this.token = res.data.token;
-                this.startedRoom = res.data.roomId;
-                this.userId = res.data.userId;
+    async createConnexion(email : string) : Promise<ConnexionInterface>{
+        let res = await Axios.post(`${API_URL}/login`, {email});
+        this.token = res.data.token;
+        this.startedRoom = res.data.roomId;
+        this.userId = res.data.userId;
 
-                this.socket = SocketIo(`${API_URL}`, {
-                    query: {
-                        token: this.token
-                    }
-                });
+        this.socket = SocketIo(`${API_URL}`, {
+            query: {
+                token: this.token
+            }
+        });
 
-                //join the room
-                this.joinARoom(this.startedRoom);
-
-                //share your first position
-                this.sharePosition(this.startedRoom, 0, 0);
-
-                this.positionOfAllUser();
-
-                this.errorMessage();
-
-                return this;
-            })
-            .catch((err) => {
-                console.error(err);
-                throw err;
-            });
+        //join the room
+        this.joinARoom(this.startedRoom);
+        //share your first position
+        this.sharePosition(this.startedRoom, 0, 0);
+        this.positionOfAllUser();
+        this.errorMessage();
+        return this;
     }
 
     /**
@@ -199,7 +188,9 @@ export class Connexion implements ConnexionInterface{
             let dataList = JSON.parse(message);
             dataList.forEach((UserPositions: any) => {
                 let listMessageUserPosition = new ListMessageUserPosition(UserPositions[0], UserPositions[1]);
-                this.GameManager.shareUserPosition(listMessageUserPosition);
+                if (this.shareUserPositionCallback) {
+                    this.shareUserPositionCallback(listMessageUserPosition)
+                }
             });
         });
     }
@@ -209,4 +200,10 @@ export class Connexion implements ConnexionInterface{
             console.error("message-error", message);
         })
     }
-}
+    
+    registerShareUserPositionCallback(callback: (l:ListMessageUserPosition) => {}) {
+        this.shareUserPositionCallback = callback;
+    }
+}
+
+export const connectionManager = new ConnexionManager();

front/src/Phaser/Game/GameManager.ts

@@ -1,6 +1,10 @@
 import {GameSceneInterface, GameScene} from "./GameScene";
 import {ROOM} from "../../Enum/EnvironmentVariable"
-import {Connexion, ConnexionInterface, ListMessageUserPositionInterface} from "../../Connexion";
+import {
+    ConnexionInterface,
+    ListMessageUserPositionInterface,
+    connectionManager
+} from "../../ConnexionManager";
 
 export enum StatusGameManagerEnum {
     IN_PROGRESS = 1,
@@ -21,36 +25,12 @@ export class GameManager implements GameManagerInterface {
 
     constructor() {
         this.status = StatusGameManagerEnum.IN_PROGRESS;
-        ConnexionInstance = new Connexion("test@gmail.com", this);
-    }
-
-    createGame(){
-        return ConnexionInstance.createConnexion().then(() => {
-            this.configureGame();
-            /** TODO add loader in the page **/
-        }).catch((err) => {
-            console.error(err);
-            throw err;
-        });
-    }
-
-    /**
-     * permit to config rooms
-     */
-    configureGame() {
-        ROOM.forEach((roomId) => {
-            let newGame = new GameScene(roomId, this);
-            this.GameScenes.push((newGame as GameSceneInterface));
-        });
     }
 
     /**
      * Permit to create player in started room
      */
     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);
         this.status = StatusGameManagerEnum.CURRENT_USER_CREATED;
     }
 
@@ -72,4 +52,6 @@ export class GameManager implements GameManagerInterface {
             console.error(e);
         }
     }
-}
+}
+
+export const gameManager = new GameManager();

front/src/Phaser/Game/GameScene.ts

@@ -1,13 +1,14 @@
-import {GameManagerInterface, StatusGameManagerEnum} from "./GameManager";
-import {MessageUserPositionInterface} from "../../Connexion";
+import {gameManager, GameManagerInterface, StatusGameManagerEnum} from "./GameManager";
+import {connectionManager, MessageUserPositionInterface} from "../../ConnexionManager";
 import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player";
 import {DEBUG_MODE, RESOLUTION, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
 import Tile = Phaser.Tilemaps.Tile;
 import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap";
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
+import {NonPlayer} from "../NonPlayer/NonPlayer";
 
+export const GameSceneName = "GameScene";
 export enum Textures {
-    Rock = 'rock',
     Player = 'playerModel',
     Map = 'map'
 }
@@ -32,12 +33,12 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
     startY = (window.innerHeight / 2) / RESOLUTION;
 
 
-    constructor(RoomId : string, GameManager : GameManagerInterface) {
+    constructor() {
         super({
-            key: "GameScene"
+            key: GameSceneName
         });
-        this.RoomId = RoomId;
-        this.GameManager = GameManager;
+        this.RoomId = connectionManager.startedRoom;
+        this.GameManager = gameManager;
         this.Terrains = [];
     }
 
@@ -95,7 +96,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();
@@ -104,7 +104,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         this.MapPlayers = this.physics.add.group({ immovable: true });
 
         //notify game manager can to create currentUser in map
-        this.GameManager.createCurrentPlayer();
+        this.createCurrentPlayer();
 
 
         //initialise camera
@@ -154,10 +154,11 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         })
     }
 
-    createCurrentPlayer(UserId : string){
+    createCurrentPlayer(){
         //initialise player
         this.CurrentPlayer = new Player(
-            UserId,
+            connectionManager.userId,
+            connectionManager.email,
             this,
             this.startX,
             this.startY,
@@ -167,6 +168,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         //create collision
         this.createCollisionWithPlayer();
         this.createCollisionObject();
+        gameManager.createCurrentPlayer();
     }
 
     EventToClickOnTile(){
@@ -239,7 +241,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
      */
     addPlayer(MessageUserPosition : MessageUserPositionInterface){
         //initialise player
-        let player = new Player(
+        let player = new NonPlayer(
             MessageUserPosition.userId,
             this,
             MessageUserPosition.position.x,

front/src/Phaser/Login/LogincScene.ts

@@ -0,0 +1,52 @@
+import KeyboardKeydownCallback = Phaser.Types.Input.Keyboard.KeyboardKeydownCallback;
+import {connectionManager} from "../../ConnexionManager";
+import {GameSceneName} from "../Game/GameScene";
+
+export const LoginSceneName = "LoginScene";
+enum LoginTextures {
+    playButton = "play_button",
+}
+
+export class LogincScene extends Phaser.Scene {
+    private playButton: Phaser.GameObjects.Image;
+    private textEntry: Phaser.GameObjects.Text;
+    constructor() {
+        super({
+            key: LoginSceneName
+        });
+    }
+    
+    preload() {
+        this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
+    }
+    
+    create() {
+        this.add.text(10, 10, 'Enter your email:', { font: '32px Courier', fill: '#ffffff' });
+
+        this.textEntry = this.add.text(10, 50, '', { font: '32px Courier', fill: '#ffff00' });
+        let keySpace = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
+        let keyBackspace = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.BACKSPACE);
+        this.input.keyboard.on('keydown', (event: any) => {
+            if (event.keyCode === 8 && this.textEntry.text.length > 0) {
+                this.textEntry.text = this.textEntry.text.substr(0, this.textEntry.text.length - 1);
+            } else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) {
+                this.textEntry.text += event.key;
+            }
+        });
+        
+        this.playButton = this.add.image(this.game.renderer.width / 2, this.game.renderer.height / 2, LoginTextures.playButton).setDepth(1);
+        this.playButton.setInteractive();
+        this.playButton.on("pointerup", this.login.bind(this));
+    }
+    
+    update(time: number, delta: number): void {
+        
+    }
+    
+    async login() {
+        let email = this.textEntry.text;
+        if (!email) return;
+        await connectionManager.createConnexion("a.poly@thecodingmachine.com");
+        this.scene.start(GameSceneName);
+    }
+}

front/src/Phaser/NonPlayer/NonPlayer.ts

@@ -2,16 +2,20 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter";
 import {Textures} from "../Game/GameScene";
 import {UserInputEvent} from "../UserInput/UserInputManager";
 import {Player} from "../Player/Player";
-import {MessageUserPositionInterface} from "../../Connexion";
-import {playAnimation} from "../Player/Animation";
+import {MessageUserPositionInterface} from "../../ConnexionManager";
+import {getPlayerAnimations, playAnimation} from "../Player/Animation";
 
 export class NonPlayer extends PlayableCaracter {
     
     isFleeing: boolean = false;
-    fleeingDirection:any = null //todo create a vector class
+    fleeingDirection:any = null
+    private userId: string;
+
+    //todo create a vector class
     
-    constructor(scene: Phaser.Scene, x: number, y: number) {
+    constructor(userId:string, scene: Phaser.Scene, x: number, y: number) {
         super(scene, x, y, Textures.Player, 1);
+        this.userId = userId
         this.setSize(32, 32); //edit the hitbox to better match the caracter model
     }
 
@@ -22,7 +26,18 @@ export class NonPlayer extends PlayableCaracter {
         this.setY(MessageUserPosition.position.y);
     }
 
-    fleeFrom(player:Player) {
+    initAnimation(): void {
+        getPlayerAnimations().forEach(d => {
+            this.scene.anims.create({
+                key: d.key,
+                frames: this.scene.anims.generateFrameNumbers(d.frameModel, {start: d.frameStart, end: d.frameEnd}),
+                frameRate: d.frameRate,
+                repeat: d.repeat
+            });
+        })
+    }
+
+    /*fleeFrom(player:Player) {
         if (this.isFleeing) return;
         this.say("Don't touch me!");
         this.isFleeing = true;
@@ -36,5 +51,5 @@ export class NonPlayer extends PlayableCaracter {
         let vectorX = this.x - player.x; 
         let vectorY = this.y - player.y;
         this.fleeingDirection = {x: vectorX, y: vectorY}
-    }
+    }*/
 }

front/src/Phaser/Player/Player.ts

@@ -1,7 +1,7 @@
 import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animation";
 import {GameSceneInterface, Textures} from "../Game/GameScene";
 import {ConnexionInstance} from "../Game/GameManager";
-import {MessageUserPositionInterface} from "../../Connexion";
+import {MessageUserPositionInterface} from "../../ConnexionManager";
 import {ActiveEventList, UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
 import {PlayableCaracter} from "../Entity/PlayableCaracter";
 
@@ -25,9 +25,11 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
     userId: string;
     PlayerValue: string;
     userInputManager: UserInputManager;
+    private email: string;
 
     constructor(
         userId: string,
+        email: string,
         Scene: GameSceneInterface,
         x: number,
         y: number,
@@ -40,10 +42,12 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
 
         //set data
         this.userId = userId;
+        this.email = email;
         this.PlayerValue = PlayerValue;
 
         //the current player model should be push away by other players to prevent conflict
         this.setImmovable(false);
+        this.say("My email is "+this.email)
     }
 
     initAnimation(): void {

front/src/index.ts

@@ -1,17 +1,16 @@
 import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
-import {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";
+import {GameScene} from "./Phaser/Game/GameScene";
 
 const config: GameConfig = {
     title: "Office game",
     width: window.innerWidth / RESOLUTION,
     height: window.innerHeight / RESOLUTION,
     parent: "game",
-    scene: gameManager.GameScenes,
+    scene: [LogincScene, GameScene],
     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);
+});