Merge pull request #76 from thecodingmachine/feature/login-page

Feature/login page

back/src/Controller/IoSocketController.ts

@@ -215,6 +215,8 @@ export class IoSocketController {
         socket.position = message.position;
         socket.roomId = message.roomId;
         socket.userId = message.userId;
+        socket.name = message.name;
+        socket.frame = message.frame;
     }
 
     refreshUserPosition() {

back/src/Model/Websocket/ExSocketInterface.ts

@@ -6,5 +6,7 @@ export interface ExSocketInterface extends Socket {
     roomId: string;
     webRtcRoomId: string;
     userId: string;
+    name: string;
+    frame: string;
     position: PointInterface;
 }

back/src/Model/Websocket/ExtRoom.ts

@@ -9,27 +9,29 @@ export class ExtRooms implements ExtRoomsInterface{
     [room: string]: SocketIO.Room;
 }
 
-let RefreshUserPositionFunction = function(rooms : ExtRooms, Io: socketIO.Server){
+let RefreshUserPositionFunction = function(rooms : ExtRooms, Io: socketIO.Server) {
     let clients = Io.clients();
     let socketsKey = Object.keys(Io.clients().sockets);
 
     //create mapping with all users in all rooms
     let mapPositionUserByRoom = new Map();
-    for(let i = 0; i < socketsKey.length; i++){
+    for (let i = 0; i < socketsKey.length; i++) {
         let socket = clients.sockets[socketsKey[i]] as ExSocketInterface;
-        if(!socket.position){
+        if (!socket.position) {
             continue;
         }
         let data = {
-            userId : socket.userId,
+            userId: socket.userId,
-            roomId : socket.roomId,
+            roomId: socket.roomId,
-            position : socket.position,
+            position: socket.position,
+            name: socket.name,
+            frame: socket.frame,
         };
         let dataArray = <any>[];
-        if(mapPositionUserByRoom.get(data.roomId)){
+        if (mapPositionUserByRoom.get(data.roomId)) {
             dataArray = mapPositionUserByRoom.get(data.roomId);
             dataArray.push(data);
-        }else{
+        } else {
             dataArray = [data];
         }
         mapPositionUserByRoom.set(data.roomId, dataArray);

back/src/Model/Websocket/Message.ts

@@ -1,6 +1,8 @@
 export class Message {
     userId: string;
     roomId: string;
+    name: string;
+    frame: string;
 
     constructor(data: any) {
         if (!data.userId || !data.roomId) {
@@ -8,12 +10,16 @@ export class Message {
         }
         this.userId = data.userId;
         this.roomId = data.roomId;
+        this.name = data.name;
+        this.frame = data.frame;
     }
 
     toJson() {
         return {
             userId: this.userId,
-            roomId: this.roomId
+            roomId: this.roomId,
+            name: this.name,
+            frame: this.frame
         }
     }
 }

back/tests/MessageTest.ts

@@ -3,29 +3,38 @@ import {Message} from "../src/Model/Websocket/Message";
 
 describe("Message Model", () => {
     it("should find userId and roomId", () => {
-        let message = {userId: "test1", roomId: "test2"};
+        let message = {userId: "test1", roomId: "test2", name: "foo", frame: "user"};
         let messageObject = new Message(message);
         expect(messageObject.userId).toBe("test1");
         expect(messageObject.roomId).toBe("test2");
+        expect(messageObject.name).toBe("foo");
+        expect(messageObject.frame).toBe("user");
     })
 
     it("should expose a toJson method", () => {
-        let message = {userId: "test1", roomId: "test2"};
+        let message = {userId: "test1", roomId: "test2", name: "foo", frame: "user"};
         let messageObject = new Message(message);
-        expect(messageObject.toJson()).toEqual({userId: "test1", roomId: "test2"});
+        expect(messageObject.toJson()).toEqual({userId: "test1", roomId: "test2", name: "foo", frame: "user"});
-    })
+    });
 
     it("should find throw error when no userId", () => {
         let message = {roomId: "test2"};
         expect(() => {
             let messageObject = new Message(message);
         }).toThrow(new Error("userId or roomId cannot be null"));
-    })
+    });
 
     it("should find throw error when no roomId", () => {
         let message = {userId: "test1"};
         expect(() => {
             let messageObject = new Message(message);
         }).toThrow(new Error("userId or roomId cannot be null"));
-    })
+    });
+
+    it("should find throw error when no roomId", () => {
+        let message = {name: "foo"};
+        expect(() => {
+            let messageObject = new Message(message);
+        }).toThrow(new Error("userId or roomId cannot be null"));
+    });
 })

front/dist/resources/style/style.css

@@ -49,8 +49,8 @@ video{
     cursor: pointer;
     position: absolute;
     border: solid 0px black;
-    width: 64px;
+    width: 44px;
-    height: 64px;
+    height: 44px;
     background: #666;
     box-shadow: 2px 2px 24px #444;
     border-radius: 48px;
@@ -68,20 +68,20 @@ video{
 }
 .btn-micro{
     transition: all .3s;
-    right: 10px;
+    right: 44px;
 }
 .btn-video{
     transition: all .2s;
-    right: 114px;
+    right: 134px;
 }
 /*.btn-call{
     transition: all .1s;
     left: 0px;
 }*/
 .btn-cam-action div img{
-    height: 32px;
+    height: 22px;
-    width: 40px;
+    width: 30px;
-    top: calc(48px - 32px);
+    top: calc(48px - 37px);
-    left: calc(48px - 35px);
+    left: calc(48px - 41px);
     position: relative;
 }

front/src/Connexion.ts

@@ -17,16 +17,22 @@ enum EventMessage{
 class Message {
     userId: string;
     roomId: string;
+    name: string;
+    frame: string;
 
-    constructor(userId : string, roomId : string) {
+    constructor(userId : string, roomId : string, name: string, frame: string) {
         this.userId = userId;
         this.roomId = roomId;
+        this.name = name;
+        this.frame = frame;
     }
 
     toJson() {
         return {
             userId: this.userId,
             roomId: this.roomId,
+            name: this.name,
+            frame: this.frame
         }
     }
 }
@@ -64,14 +70,16 @@ class Point implements PointInterface{
 export interface MessageUserPositionInterface {
     userId: string;
     roomId: string;
+    name: string;
+    frame: string;
     position: PointInterface;
 }
 
 class MessageUserPosition extends Message implements MessageUserPositionInterface{
     position: PointInterface;
 
-    constructor(userId : string, roomId : string, point : Point) {
+    constructor(userId : string, roomId : string, point : Point, name: string, frame: string) {
-        super(userId, roomId);
+        super(userId, roomId, name, frame);
         this.position = point;
     }
 
@@ -106,7 +114,9 @@ class ListMessageUserPosition {
                     userPosition.position.x,
                     userPosition.position.y,
                     userPosition.position.direction
-                )
+                ),
+                userPosition.name,
+                userPosition.frame
             ));
         });
     }
@@ -119,11 +129,11 @@ export interface ConnexionInterface {
     userId: string;
     startedRoom: string;
 
-    createConnexion(): Promise<any>;
+    createConnexion(frameSelected: string): Promise<any>;
 
-    joinARoom(roomId: string): void;
+    joinARoom(roomId: string, frame: string): void;
 
-    sharePosition(x: number, y: number, direction: string): void;
+    sharePosition(x: number, y: number, direction: string, frame: string): void;
 
     positionOfAllUser(): void;
 
@@ -151,7 +161,7 @@ export class Connexion implements ConnexionInterface {
         this.GameManager = GameManager;
     }
 
-    createConnexion(): Promise<ConnexionInterface> {
+    createConnexion(frameSelected: string): Promise<ConnexionInterface> {
         return Axios.post(`${API_URL}/login`, {email: this.email})
             .then((res) => {
                 this.token = res.data.token;
@@ -165,10 +175,10 @@ export class Connexion implements ConnexionInterface {
                 });
 
                 //join the room
-                this.joinARoom(this.startedRoom);
+                this.joinARoom(this.startedRoom, frameSelected);
 
                 //share your first position
-                this.sharePosition(0, 0);
+                this.sharePosition(0, 0, frameSelected);
 
                 this.positionOfAllUser();
 
@@ -183,11 +193,18 @@ export class Connexion implements ConnexionInterface {
     }
 
     /**
-     * Permit to join a room
+     *
      * @param roomId
+     * @param frame
      */
-    joinARoom(roomId: string): void {
+    joinARoom(roomId: string, frame: string): void {
-        let messageUserPosition = new MessageUserPosition(this.userId, this.startedRoom, new Point(0, 0));
+        let messageUserPosition = new MessageUserPosition(
+            this.userId,
+            this.startedRoom,
+            new Point(0, 0),
+            this.email,
+            frame
+        );
         this.socket.emit(EventMessage.JOIN_ROOM, messageUserPosition.toString());
     }
 
@@ -195,13 +212,20 @@ export class Connexion implements ConnexionInterface {
      *
      * @param x
      * @param y
+     * @param frame
      * @param direction
      */
-    sharePosition(x : number, y : number, direction : string = "none") : void{
+    sharePosition(x : number, y : number, frame : string, direction : string = "none") : void{
         if(!this.socket){
             return;
         }
-        let messageUserPosition = new MessageUserPosition(this.userId, ROOM[0], new Point(x, y, direction));
+        let messageUserPosition = new MessageUserPosition(
+            this.userId,
+            ROOM[0],
+            new Point(x, y, direction),
+            this.email,
+            frame
+        );
         this.socket.emit(EventMessage.USER_POSITION, messageUserPosition.toString());
     }
 

front/src/Enum/EnvironmentVariable.ts

@@ -1,7 +1,7 @@
 const DEBUG_MODE: boolean = process.env.DEBUG_MODE as any === true;
 const API_URL = process.env.API_URL || "http://api.workadventure.localhost";
 const ROOM = [process.env.ROOM || "THECODINGMACHINE"];
-const RESOLUTION = 4;
+const RESOLUTION = 3;
 const ZOOM_LEVEL = 1/*3/4*/;
 
 export {

front/src/Phaser/Entity/PlayableCaracter.ts

@@ -1,15 +1,41 @@
-import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation";
+import {PlayerAnimationNames} from "../Player/Animation";
-import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager";
 import {SpeechBubble} from "./SpeechBubble";
 import BitmapText = Phaser.GameObjects.BitmapText;
 
+export const PLAYER_RESOURCES: Array<any> = [
+    {name: "male1", img: "resources/characters/pipoya/Male 01-1.png", x: 32, y: 32},
+    {name: "male2", img: "resources/characters/pipoya/Male 02-2.png", x: 64, y: 32},
+    {name: "male3", img: "resources/characters/pipoya/Male 03-4.png", x: 96, y: 32},
+    {name: "male4", img: "resources/characters/pipoya/Male 09-1.png", x: 128, y: 32},
+
+    {name: "male5", img: "resources/characters/pipoya/Male 10-3.png", x: 32, y: 64},
+    {name: "male6", img: "resources/characters/pipoya/Male 17-2.png", x: 64, y: 64},
+    {name: "male7", img: "resources/characters/pipoya/Male 18-1.png", x: 96, y: 64},
+    {name: "male8", img: "resources/characters/pipoya/Male 16-4.png", x: 128, y: 64},
+
+    {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png", x: 32, y: 96},
+    {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png", x: 64, y: 96},
+    {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png", x: 96, y: 96},
+    {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png", x: 128, y: 96},
+
+    {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png", x: 32, y: 128},
+    {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png", x: 64, y: 128},
+    {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png", x: 96, y: 128},
+    {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png", x: 128, y: 128}
+];
+
 export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
     private bubble: SpeechBubble;
     private playerName: BitmapText;
+    public PlayerValue: string;
+    public PlayerTexture: string;
+
 
     constructor(scene: Phaser.Scene, x: number, y: number, texture: string, name: string, frame?: string | number) {
         super(scene, x, y, texture, frame);
 
+        this.PlayerValue = name;
+        this.PlayerTexture = texture;
         this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8);
         this.playerName.setOrigin(0.5).setCenterAlign();
         scene.add.existing(this.playerName);
@@ -24,30 +50,34 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
         this.setOffset(8, 16);
     }
 
-    move(x: number, y: number){
+    move(x: number, y: number) {
 
         this.setVelocity(x, y);
 
         //up or down animationss are prioritized over left and right
         if (this.body.velocity.y < 0) { //moving up
-            this.play(PlayerAnimationNames.WalkUp, true);
+            this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`, true);
         } else if (this.body.velocity.y > 0) { //moving down
-            this.play(PlayerAnimationNames.WalkDown, true);
+            this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`, true);
         } else if (this.body.velocity.x > 0) { //moving right
-            this.play(PlayerAnimationNames.WalkRight, true);
+            this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`, true);
         } else if (this.body.velocity.x < 0) { //moving left
-            this.anims.playReverse(PlayerAnimationNames.WalkLeft, true);
+            this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true);
         }
 
-        if(this.bubble) {
+        if (this.bubble) {
             this.bubble.moveBubble(this.x, this.y);
         }
-        this.playerName.setPosition(this.x, this.y - 25);
+        this.updatePlayerNamePosition(this.x, this.y);
+    }
+
+    updatePlayerNamePosition(x: number, y: number){
+        this.playerName.setPosition(x, y - 25);
     }
 
     stop(){
         this.setVelocity(0, 0);
-        this.play(PlayerAnimationNames.None, true);
+        this.anims.stop();
     }
 
     say(text: string) {
@@ -59,4 +89,9 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
             this.bubble = null;
         }, 3000)
     }
+
+    destroy(fromScene?: boolean): void {
+        super.destroy(fromScene);
+        this.playerName.destroy();
+    }
 }

front/src/Phaser/Game/GameManager.ts

@@ -13,6 +13,7 @@ export interface HasMovedEvent {
     direction: string;
     x: number;
     y: number;
+    frame: string;
 }
 
 export class GameManager {
@@ -21,15 +22,17 @@ export class GameManager {
     private currentGameScene: GameScene;
     private playerName: string;
     SimplePeer : SimplePeerInterface;
+    private frameUserSelected: string;
 
     constructor() {
         this.status = StatusGameManagerEnum.IN_PROGRESS;
     }
 
-    connect(name:string) {
+    connect(name: string, frameUserSelected : string) {
         this.playerName = name;
+        this.frameUserSelected = frameUserSelected;
         this.ConnexionInstance = new Connexion(name, this);
-        return this.ConnexionInstance.createConnexion().then(() => {
+        return this.ConnexionInstance.createConnexion(frameUserSelected).then(() => {
             this.SimplePeer = new SimplePeer(this.ConnexionInstance);
         });
     }
@@ -67,8 +70,12 @@ export class GameManager {
         return this.playerName;
     }
 
+    getFrameSelected(): string {
+        return this.frameUserSelected;
+    }
+
     pushPlayerPosition(event: HasMovedEvent) {
-        this.ConnexionInstance.sharePosition(event.x, event.y, event.direction);
+        this.ConnexionInstance.sharePosition(event.x, event.y, event.frame, event.direction);
     }
 }
 

front/src/Phaser/Game/GameScene.ts

@@ -4,10 +4,12 @@ import {CurrentGamerInterface, GamerInterface, hasMovedEventName, Player} from "
 import {DEBUG_MODE, RESOLUTION, ROOM, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
 import Tile = Phaser.Tilemaps.Tile;
 import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap";
+import {cypressAsserter} from "../../Cypress/CypressAsserter";
+import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
 
 export const GameSceneName = "GameScene";
 export enum Textures {
-    Player = 'playerModel',
+    Player = 'male1',
     Map = 'map'
 }
 
@@ -55,10 +57,16 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             })
         });
         this.load.tilemapTiledJSON(Textures.Map, mapUrl);
-        this.load.spritesheet(Textures.Player,
+
-            'resources/characters/pipoya/Male 01-1.png',
+        //add player png
-            { frameWidth: 32, frameHeight: 32 }
+        PLAYER_RESOURCES.forEach((playerResource: any) => {
-        );
+            this.load.spritesheet(
+                playerResource.name,
+                playerResource.img,
+                {frameWidth: 32, frameHeight: 32}
+            );
+        });
+
         this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
     }
 
@@ -158,7 +166,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             this,
             this.startX,
             this.startY,
-            this.GameManager.getPlayerName()
+            this.GameManager.getPlayerName(),
+            this.GameManager.getFrameSelected()
         );
         this.CurrentPlayer.initAnimation();
 
@@ -251,7 +260,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             this,
             MessageUserPosition.position.x,
             MessageUserPosition.position.y,
-            'Foo'
+            MessageUserPosition.name,
+            MessageUserPosition.frame
         );
         player.initAnimation();
         this.MapPlayers.add(player);

front/src/Phaser/Login/LogincScene.ts

@@ -2,8 +2,12 @@ import {gameManager} from "../Game/GameManager";
 import {TextField} from "../Components/TextField";
 import {TextInput} from "../Components/TextInput";
 import {ClickButton} from "../Components/ClickButton";
-import {GameSceneName} from "../Game/GameScene";
+import {GameSceneInterface, GameSceneName, Textures} from "../Game/GameScene";
 import Image = Phaser.GameObjects.Image;
+import {Player} from "../Player/Player";
+import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation";
+import Rectangle = Phaser.GameObjects.Rectangle;
+import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
 
 //todo: put this constants in a dedicated file
@@ -14,7 +18,7 @@ enum LoginTextures {
     mainFont = "main_font"
 }
 
-export class LogincScene extends Phaser.Scene {
+export class LogincScene extends Phaser.Scene implements GameSceneInterface {
     private nameInput: TextInput;
     private textField: TextField;
     private playButton: ClickButton;
@@ -22,6 +26,10 @@ export class LogincScene extends Phaser.Scene {
     private pressReturnField: TextField;
     private logo: Image;
 
+    private selectedRectangle: Rectangle;
+    private selectedPlayer: Phaser.Physics.Arcade.Sprite;
+    private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
+
     constructor() {
         super({
             key: LoginSceneName
@@ -35,6 +43,14 @@ export class LogincScene extends Phaser.Scene {
         // 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');
         cypressAsserter.preloadFinished();
+        //add player png
+        PLAYER_RESOURCES.forEach((playerResource: any) => {
+            this.load.spritesheet(
+                playerResource.name,
+                playerResource.img,
+                {frameWidth: 32, frameHeight: 32}
+            );
+        });
     }
 
     create() {
@@ -47,9 +63,7 @@ export class LogincScene extends Phaser.Scene {
         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;
+        this.selectedRectangle = this.add.rectangle(32, 32, 32, 32).setStrokeStyle(2, 0xFFFFFF);
-        //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);
@@ -64,6 +78,9 @@ export class LogincScene extends Phaser.Scene {
             }
             return this.login(name);
         });
+
+        /*create user*/
+        this.createCurrentPlayer("test");
         cypressAsserter.initFinished();
     }
 
@@ -76,8 +93,43 @@ export class LogincScene extends Phaser.Scene {
     }
 
     private async login(name: string) {
-        gameManager.connect(name).then(() => {
+        gameManager.connect(name, this.selectedPlayer.texture.key).then(() => {
             this.scene.start(GameSceneName);
         });
     }
+
+    Map: Phaser.Tilemaps.Tilemap;
+
+    initAnimation(): void {
+
+    }
+
+    createCurrentPlayer(UserId: string): void {
+        for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
+            let playerResource = PLAYER_RESOURCES[i];
+            let player = this.physics.add.sprite(playerResource.x, playerResource.y, playerResource.name, playerResource.name);
+            player.setBounce(0.2);
+            player.setCollideWorldBounds(true);
+            this.anims.create({
+                key: playerResource.name,
+                frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 2,}),
+                frameRate: 10,
+                repeat: -1
+            });
+            player.setInteractive().on("pointerdown", () => {
+                this.selectedPlayer.anims.pause();
+                this.selectedRectangle.setY(player.y);
+                this.selectedRectangle.setX(player.x);
+                player.play(playerResource.name);
+                this.selectedPlayer = player;
+            });
+            this.players.push(player);
+        }
+        this.selectedPlayer = this.players[0];
+        this.selectedPlayer.play(PLAYER_RESOURCES[0].name);
+    }
+
+    shareUserPosition(UsersPosition: import("../../Connexion").MessageUserPositionInterface[]): void {
+        throw new Error("Method not implemented.");
+    }
 }

front/src/Phaser/NonPlayer/NonPlayer.ts

@@ -1,40 +0,0 @@
-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";
-
-export class NonPlayer extends PlayableCaracter {
-
-    isFleeing: boolean = false;
-    fleeingDirection:any = null //todo create a vector class
-
-    constructor(scene: Phaser.Scene, x: number, y: number, name: string) {
-        super(scene, x, y, Textures.Player, name, 1);
-        this.setSize(32, 32); //edit the hitbox to better match the character model
-    }
-
-
-    updatePosition(MessageUserPosition : MessageUserPositionInterface){
-        playAnimation(this, MessageUserPosition.position.direction);
-        this.setX(MessageUserPosition.position.x);
-        this.setY(MessageUserPosition.position.y);
-    }
-
-    fleeFrom(player:Player) {
-        if (this.isFleeing) return;
-        this.say("Don't touch me!");
-        this.isFleeing = true;
-
-        setTimeout(() => {
-            this.say("Feww, I escaped.");
-            this.isFleeing = false
-            this.fleeingDirection = null
-        }, 3000);
-
-        let vectorX = this.x - player.x;
-        let vectorY = this.y - player.y;
-        this.fleeingDirection = {x: vectorX, y: vectorY}
-    }
-}

front/src/Phaser/Player/Animation.ts

@@ -17,31 +17,31 @@ export enum PlayerAnimationNames {
     None = 'none',
 }
 
-export const getPlayerAnimations = (): AnimationData[] => {
+export const getPlayerAnimations = (name: string = Textures.Player): AnimationData[] => {
     return [{
-        key: PlayerAnimationNames.WalkDown,
+        key: `${name}-${PlayerAnimationNames.WalkDown}`,
-        frameModel: Textures.Player,
+        frameModel: name,
         frameStart: 0,
         frameEnd: 2,
         frameRate: 10,
         repeat: -1
     }, {
-        key: PlayerAnimationNames.WalkLeft,
+        key: `${name}-${PlayerAnimationNames.WalkLeft}`,
-        frameModel: Textures.Player,
+        frameModel: name,
         frameStart: 3,
         frameEnd: 5,
         frameRate: 10,
         repeat: -1
     }, {
-        key: PlayerAnimationNames.WalkRight,
+        key: `${name}-${PlayerAnimationNames.WalkRight}`,
-        frameModel: Textures.Player,
+        frameModel: name,
         frameStart: 6,
         frameEnd: 8,
         frameRate: 10,
         repeat: -1
     }, {
-        key: PlayerAnimationNames.WalkUp,
+        key: `${name}-${PlayerAnimationNames.WalkUp}`,
-        frameModel: Textures.Player,
+        frameModel: name,
         frameStart: 9,
         frameEnd: 11,
         frameRate: 10,

front/src/Phaser/Player/Player.ts

@@ -8,7 +8,6 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter";
 export const hasMovedEventName = "hasMoved";
 export interface CurrentGamerInterface extends PlayableCaracter{
     userId : string;
-    PlayerValue : string;
     initAnimation() : void;
     moveUser(delta: number) : void;
     say(text : string) : void;
@@ -16,7 +15,6 @@ export interface CurrentGamerInterface extends PlayableCaracter{
 
 export interface GamerInterface extends PlayableCaracter{
     userId : string;
-    PlayerValue : string;
     initAnimation() : void;
     updatePosition(MessageUserPosition : MessageUserPositionInterface) : void;
     say(text : string) : void;
@@ -24,7 +22,6 @@ export interface GamerInterface extends PlayableCaracter{
 
 export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface {
     userId: string;
-    PlayerValue: string;
     userInputManager: UserInputManager;
     previousMove: string;
 
@@ -34,23 +31,23 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
         x: number,
         y: number,
         name: string,
-        PlayerValue: string = Textures.Player
+        PlayerTexture: string = Textures.Player
     ) {
-        super(Scene, x, y, PlayerValue, name, 1);
+        super(Scene, x, y, PlayerTexture, name, 1);
 
         //create input to move
         this.userInputManager = new UserInputManager(Scene);
 
         //set data
         this.userId = userId;
-        this.PlayerValue = PlayerValue;
+
 
         //the current player model should be push away by other players to prevent conflict
         this.setImmovable(false);
     }
 
     initAnimation(): void {
-        getPlayerAnimations().forEach(d => {
+        getPlayerAnimations(this.PlayerTexture).forEach(d => {
             this.scene.anims.create({
                 key: d.key,
                 frames: this.scene.anims.generateFrameNumbers(d.frameModel, {start: d.frameStart, end: d.frameEnd}),
@@ -62,7 +59,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
 
     moveUser(delta: number): void {
         //if user client on shift, camera and player speed
-        let haveMove = false;
         let direction = null;
 
         let activeEvents = this.userInputManager.getEventListForGameTick();
@@ -73,26 +69,32 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
         let y = 0;
         if (activeEvents.get(UserInputEvent.MoveUp)) {
             y = - moveAmount;
-            direction = PlayerAnimationNames.WalkUp;
+            direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`;
         } else if (activeEvents.get(UserInputEvent.MoveDown)) {
             y = moveAmount;
-            direction = PlayerAnimationNames.WalkDown;
+            direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`;
         }
         if (activeEvents.get(UserInputEvent.MoveLeft)) {
             x = -moveAmount;
-            direction = PlayerAnimationNames.WalkLeft;
+            direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`;
         } else if (activeEvents.get(UserInputEvent.MoveRight)) {
             x = moveAmount;
-            direction = PlayerAnimationNames.WalkRight;
+            direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`;
         }
         if (x !== 0 || y !== 0) {
             this.move(x, y);
+            this.emit(hasMovedEventName, {direction, x: this.x, y: this.y, frame: this.PlayerTexture});
         } else {
-            direction = PlayerAnimationNames.None;
+            if (this.previousMove !== PlayerAnimationNames.None) {
-            this.stop();
+                direction = PlayerAnimationNames.None;
+                this.stop();
+                this.emit(hasMovedEventName, {direction, x: this.x, y: this.y, frame: this.PlayerTexture});
+            }
         }
 
-        this.emit(hasMovedEventName, {direction, x: this.x, y: this.y});
+        if (direction !== null) {
+            this.previousMove = direction;
+        }
     }
 
     //todo: put this method into the NonPlayer class instead
@@ -100,5 +102,6 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
         playAnimation(this, MessageUserPosition.position.direction);
         this.setX(MessageUserPosition.position.x);
         this.setY(MessageUserPosition.position.y);
+        this.updatePlayerNamePosition(MessageUserPosition.position.x, MessageUserPosition.position.y);
     }
 }