diff --git a/back/src/Controller/IoSocketController.ts b/back/src/Controller/IoSocketController.ts index 7db6b059..64012349 100644 --- a/back/src/Controller/IoSocketController.ts +++ b/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() { diff --git a/back/src/Model/Websocket/ExSocketInterface.ts b/back/src/Model/Websocket/ExSocketInterface.ts index 4d1d9fee..7798509b 100644 --- a/back/src/Model/Websocket/ExSocketInterface.ts +++ b/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; } \ No newline at end of file diff --git a/back/src/Model/Websocket/ExtRoom.ts b/back/src/Model/Websocket/ExtRoom.ts index 0cbe2f61..a1b2cb65 100644 --- a/back/src/Model/Websocket/ExtRoom.ts +++ b/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, - roomId : socket.roomId, - position : socket.position, + userId: socket.userId, + roomId: socket.roomId, + position: socket.position, + name: socket.name, + frame: socket.frame, }; let dataArray = []; - 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); diff --git a/back/src/Model/Websocket/Message.ts b/back/src/Model/Websocket/Message.ts index da265464..16589e3b 100644 --- a/back/src/Model/Websocket/Message.ts +++ b/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 } } } \ No newline at end of file diff --git a/back/tests/MessageTest.ts b/back/tests/MessageTest.ts index 070ddf57..47e4cac1 100644 --- a/back/tests/MessageTest.ts +++ b/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")); + }); }) \ No newline at end of file diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 58c32bb7..04de491c 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -49,8 +49,8 @@ video{ cursor: pointer; position: absolute; border: solid 0px black; - width: 64px; - height: 64px; + width: 44px; + 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; - width: 40px; - top: calc(48px - 32px); - left: calc(48px - 35px); + height: 22px; + width: 30px; + top: calc(48px - 37px); + left: calc(48px - 41px); position: relative; } \ No newline at end of file diff --git a/front/src/Connexion.ts b/front/src/Connexion.ts index 56531b67..4dfddee1 100644 --- a/front/src/Connexion.ts +++ b/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) { - super(userId, roomId); + constructor(userId : string, roomId : string, point : Point, name: string, frame: string) { + 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; + createConnexion(frameSelected: string): Promise; - 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 { + createConnexion(frameSelected: string): Promise { 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 { - let messageUserPosition = new MessageUserPosition(this.userId, this.startedRoom, new Point(0, 0)); + joinARoom(roomId: string, frame: string): void { + 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()); } diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index f44f717b..30250d5e 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/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 { diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts index aaf53224..e60e0a53 100644 --- a/front/src/Phaser/Entity/PlayableCaracter.ts +++ b/front/src/Phaser/Entity/PlayableCaracter.ts @@ -1,15 +1,41 @@ -import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation"; -import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager"; +import {PlayerAnimationNames} from "../Player/Animation"; import {SpeechBubble} from "./SpeechBubble"; import BitmapText = Phaser.GameObjects.BitmapText; +export const PLAYER_RESOURCES: Array = [ + {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(); + } } diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts index ad4d5a2c..4cc95c2a 100644 --- a/front/src/Phaser/Game/GameManager.ts +++ b/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); } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index b0ace1fe..f449f076 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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', - { frameWidth: 32, frameHeight: 32 } - ); + + //add player png + 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); diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts index 10c7e5db..7aadfbc5 100644 --- a/front/src/Phaser/Login/LogincScene.ts +++ b/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 = new Array(); + 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; - //let y = this.game.renderer.height / 2; - //this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this)); + this.selectedRectangle = this.add.rectangle(32, 32, 32, 32).setStrokeStyle(2, 0xFFFFFF); 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 { + 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."); + } } diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts deleted file mode 100644 index 42917505..00000000 --- a/front/src/Phaser/NonPlayer/NonPlayer.ts +++ /dev/null @@ -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} - } -} diff --git a/front/src/Phaser/Player/Animation.ts b/front/src/Phaser/Player/Animation.ts index 48f34682..46c05154 100644 --- a/front/src/Phaser/Player/Animation.ts +++ b/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, - frameModel: Textures.Player, + key: `${name}-${PlayerAnimationNames.WalkDown}`, + frameModel: name, frameStart: 0, frameEnd: 2, frameRate: 10, repeat: -1 }, { - key: PlayerAnimationNames.WalkLeft, - frameModel: Textures.Player, + key: `${name}-${PlayerAnimationNames.WalkLeft}`, + frameModel: name, frameStart: 3, frameEnd: 5, frameRate: 10, repeat: -1 }, { - key: PlayerAnimationNames.WalkRight, - frameModel: Textures.Player, + key: `${name}-${PlayerAnimationNames.WalkRight}`, + frameModel: name, frameStart: 6, frameEnd: 8, frameRate: 10, repeat: -1 }, { - key: PlayerAnimationNames.WalkUp, - frameModel: Textures.Player, + key: `${name}-${PlayerAnimationNames.WalkUp}`, + frameModel: name, frameStart: 9, frameEnd: 11, frameRate: 10, diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index 59971cf2..4dbda5bb 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/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; - this.stop(); + if (this.previousMove !== PlayerAnimationNames.None) { + 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); } }