socket.roomId = message.roomId;
socket.userId = message.userId;
socket.name = message.name;
+ socket.frame = message.frame;
}
refreshUserPosition() {
webRtcRoomId: string;
userId: string;
name: string;
+ frame: string;
position: PointInterface;
}
\ No newline at end of file
roomId: socket.roomId,
position: socket.position,
name: socket.name,
+ frame: socket.frame,
};
let dataArray = <any>[];
if (mapPositionUserByRoom.get(data.roomId)) {
userId: string;
roomId: string;
name: string;
+ frame: string;
constructor(data: any) {
if (!data.userId || !data.roomId) {
this.userId = data.userId;
this.roomId = data.roomId;
this.name = data.name;
+ this.frame = data.frame;
}
toJson() {
return {
userId: this.userId,
roomId: this.roomId,
- name: this.name
+ name: this.name,
+ frame: this.frame
}
}
}
\ No newline at end of file
describe("Message Model", () => {
it("should find userId and roomId", () => {
- let message = {userId: "test1", roomId: "test2", name: "foo"};
+ 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.name).toBe("user");
})
it("should expose a toJson method", () => {
let message = {userId: "test1", roomId: "test2", name: "foo"};
let messageObject = new Message(message);
- expect(messageObject.toJson()).toEqual({userId: "test1", roomId: "test2", name: "foo"});
- })
+ 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
userId: string;
roomId: string;
name: string;
+ frame: string;
- constructor(userId : string, roomId : string, name: 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
+ name: this.name,
+ frame: this.frame
}
}
}
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, name: string) {
- super(userId, roomId, name);
+ constructor(userId : string, roomId : string, point : Point, name: string, frame: string) {
+ super(userId, roomId, name, frame);
this.position = point;
}
userPosition.position.y,
userPosition.position.direction
),
- userPosition.name
+ userPosition.name,
+ userPosition.frame
));
});
}
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;
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;
});
//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();
}
/**
- * 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), this.email);
+ 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());
}
*
* @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), this.email);
+ let messageUserPosition = new MessageUserPosition(
+ this.userId,
+ ROOM[0],
+ new Point(x, y, direction),
+ this.email,
+ frame
+ );
this.socket.emit(EventMessage.USER_POSITION, messageUserPosition.toString());
}
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);
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.updatePlayerNamePosition(this.x, this.y);
direction: string;
x: number;
y: number;
+ frame: string;
}
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);
});
}
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);
}
}
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'
}
})
});
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');
cypressAsserter.preloadFinished();
this,
this.startX,
this.startY,
- this.GameManager.getPlayerName()
+ this.GameManager.getPlayerName(),
+ this.GameManager.getFrameSelected()
);
this.CurrentPlayer.initAnimation();
this,
MessageUserPosition.position.x,
MessageUserPosition.position.y,
- MessageUserPosition.name
+ MessageUserPosition.name,
+ MessageUserPosition.frame
);
player.initAnimation();
this.MapPlayers.add(player);
-import {gameManager, HasMovedEvent} from "../Game/GameManager";
+import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import {TextInput} from "../Components/TextInput";
import {ClickButton} from "../Components/ClickButton";
import {Player} from "../Player/Player";
import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation";
import Rectangle = Phaser.GameObjects.Rectangle;
+import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
//todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene";
private selectedPlayer: Phaser.Physics.Arcade.Sprite;
private players: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
- private playerResources: 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}
- ];
-
constructor() {
super({
key: LoginSceneName
// 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');
//add player png
- this.playerResources.forEach((playerResource: any) => {
+ PLAYER_RESOURCES.forEach((playerResource: any) => {
this.load.spritesheet(
playerResource.name,
playerResource.img,
}
private async login(name: string) {
- gameManager.connect(name).then(() => {
+ gameManager.connect(name, this.selectedPlayer.texture.key).then(() => {
this.scene.start(GameSceneName);
});
}
}
createCurrentPlayer(UserId: string): void {
- for (let i = 0; i < this.playerResources.length; i++) {
- let playerResource = this.playerResources[i];
+ 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.players.push(player);
}
this.selectedPlayer = this.players[0];
- this.selectedPlayer.play(this.playerResources[0].name);
+ this.selectedPlayer.play(PLAYER_RESOURCES[0].name);
}
shareUserPosition(UsersPosition: import("../../Connexion").MessageUserPositionInterface[]): void {
export const getPlayerAnimations = (name: string = Textures.Player): AnimationData[] => {
return [{
- key: PlayerAnimationNames.WalkDown, //TODO chnage, it's a key for one anumation of ine user type.
+ key: `${name}-${PlayerAnimationNames.WalkDown}`, //TODO chnage, it's a key for one anumation of ine user type.
frameModel: name,
frameStart: 0,
frameEnd: 2,
frameRate: 10,
repeat: -1
}, {
- key: PlayerAnimationNames.WalkLeft,
+ key: `${name}-${PlayerAnimationNames.WalkLeft}`,
frameModel: name,
frameStart: 3,
frameEnd: 5,
frameRate: 10,
repeat: -1
}, {
- key: PlayerAnimationNames.WalkRight,
+ key: `${name}-${PlayerAnimationNames.WalkRight}`,
frameModel: name,
frameStart: 6,
frameEnd: 8,
frameRate: 10,
repeat: -1
}, {
- key: PlayerAnimationNames.WalkUp,
+ key: `${name}-${PlayerAnimationNames.WalkUp}`,
frameModel: name,
frameStart: 9,
frameEnd: 11,
export const hasMovedEventName = "hasMoved";
export interface CurrentGamerInterface extends PlayableCaracter{
userId : string;
- PlayerValue : string;
initAnimation() : void;
moveUser(delta: number) : void;
say(text : string) : void;
export interface GamerInterface extends PlayableCaracter{
userId : string;
- PlayerValue : string;
initAnimation() : void;
updatePosition(MessageUserPosition : MessageUserPositionInterface) : void;
say(text : string) : void;
export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface {
userId: string;
- PlayerValue: string;
userInputManager: UserInputManager;
previousMove: string;
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}),
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);
direction = PlayerAnimationNames.None;
this.stop();
}
-
- this.emit(hasMovedEventName, {direction, x: this.x, y: this.y});
+ this.emit(hasMovedEventName, {direction, x: this.x, y: this.y, frame: this.PlayerTexture});
}
//todo: put this method into the NonPlayer class instead