_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #120 from thecodingmachine/refactor_messages

Browse Source 
Refactored and optimized messages
This commit is contained in:
David Négrier 2020-05-23 17:25:18 +02:00 committed by GitHub
commit 1f2b33baec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
24 changed files with 529 additions and 391 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
back/src/Controller/AuthenticateController.ts
View File

@ -15,21 +15,21 @@ export class AuthenticateController {
//permit to login on application. Return token to connect on Websocket IO. //permit to login on application. Return token to connect on Websocket IO.
login(){ login(){
// For now, let's completely forget the /login route. // For now, let's completely forget the /login route.
/*this.App.post("/login", (req: Request, res: Response) => { this.App.post("/login", (req: Request, res: Response) => {
let param = req.body; let param = req.body;
if(!param.email){ /*if(!param.name){
return res.status(BAD_REQUEST).send({ return res.status(BAD_REQUEST).send({
message: "email parameter is empty" message: "email parameter is empty"
}); });
} }*/
//TODO check user email for The Coding Machine game //TODO check user email for The Coding Machine game
let userId = uuid(); let userId = uuid();
let token = Jwt.sign({email: param.email, userId: userId}, SECRET_KEY, {expiresIn: '24h'}); let token = Jwt.sign({name: param.name, userId: userId}, SECRET_KEY, {expiresIn: '24h'});
return res.status(OK).send({ return res.status(OK).send({
token: token, token: token,
mapUrlStart: URL_ROOM_STARTED, mapUrlStart: URL_ROOM_STARTED,
userId: userId, userId: userId,
}); });
});*/ });
} }
} }

246
back/src/Controller/IoSocketController.ts
View File

@ -5,18 +5,20 @@ import {MessageUserPosition, Point} from "../Model/Websocket/MessageUserPosition
import {ExSocketInterface} from "../Model/Websocket/ExSocketInterface"; //TODO fix import by "_Model/.." import {ExSocketInterface} from "../Model/Websocket/ExSocketInterface"; //TODO fix import by "_Model/.."
import Jwt, {JsonWebTokenError} from "jsonwebtoken"; import Jwt, {JsonWebTokenError} from "jsonwebtoken";
import {SECRET_KEY, MINIMUM_DISTANCE, GROUP_RADIUS} from "../Enum/EnvironmentVariable"; //TODO fix import by "_Enum/..." import {SECRET_KEY, MINIMUM_DISTANCE, GROUP_RADIUS} from "../Enum/EnvironmentVariable"; //TODO fix import by "_Enum/..."
import {ExtRooms, RefreshUserPositionFunction} from "../Model/Websocket/ExtRooms";
import {ExtRoomsInterface} from "../Model/Websocket/ExtRoomsInterface";
import {World} from "../Model/World"; import {World} from "../Model/World";
import {Group} from "_Model/Group"; import {Group} from "_Model/Group";
import {UserInterface} from "_Model/UserInterface"; import {UserInterface} from "_Model/UserInterface";
import {SetPlayerDetailsMessage} from "_Model/Websocket/SetPlayerDetailsMessage"; import {SetPlayerDetailsMessage} from "_Model/Websocket/SetPlayerDetailsMessage";
import {MessageUserJoined} from "../Model/Websocket/MessageUserJoined";
import {MessageUserMoved} from "../Model/Websocket/MessageUserMoved";
enum SockerIoEvent { enum SockerIoEvent {
CONNECTION = "connection", CONNECTION = "connection",
DISCONNECT = "disconnect", DISCONNECT = "disconnect",
JOIN_ROOM = "join-room", JOIN_ROOM = "join-room", // bi-directional
USER_POSITION = "user-position", USER_POSITION = "user-position", // bi-directional
USER_MOVED = "user-moved", // From server to client
USER_LEFT = "user-left", // From server to client
WEBRTC_SIGNAL = "webrtc-signal", WEBRTC_SIGNAL = "webrtc-signal",
WEBRTC_OFFER = "webrtc-offer", WEBRTC_OFFER = "webrtc-offer",
WEBRTC_START = "webrtc-start", WEBRTC_START = "webrtc-start",
@ -30,40 +32,54 @@ enum SockerIoEvent {
export class IoSocketController { export class IoSocketController {
Io: socketIO.Server; Io: socketIO.Server;
Worlds: Map<string, World> = new Map<string, World>(); Worlds: Map<string, World> = new Map<string, World>();
sockets: Map<string, ExSocketInterface> = new Map<string, ExSocketInterface>();
constructor(server: http.Server) { constructor(server: http.Server) {
this.Io = socketIO(server); this.Io = socketIO(server);
// Authentication with token. it will be decoded and stored in the socket. // Authentication with token. it will be decoded and stored in the socket.
// Completely commented for now, as we do not use the "/login" route at all. // Completely commented for now, as we do not use the "/login" route at all.
/*this.Io.use((socket: Socket, next) => { this.Io.use((socket: Socket, next) => {
if (!socket.handshake.query || !socket.handshake.query.token) { if (!socket.handshake.query || !socket.handshake.query.token) {
return next(new Error('Authentication error')); return next(new Error('Authentication error'));
} }
if(this.searchClientByToken(socket.handshake.query.token)){ if(this.searchClientByToken(socket.handshake.query.token)){
return next(new Error('Authentication error')); return next(new Error('Authentication error'));
} }
Jwt.verify(socket.handshake.query.token, SECRET_KEY, (err: JsonWebTokenError, tokenDecoded: object) => { Jwt.verify(socket.handshake.query.token, SECRET_KEY, (err: JsonWebTokenError, tokenDecoded: any) => {
if (err) { if (err) {
return next(new Error('Authentication error')); return next(new Error('Authentication error'));
} }
(socket as ExSocketInterface).token = tokenDecoded; (socket as ExSocketInterface).token = tokenDecoded;
(socket as ExSocketInterface).userId = tokenDecoded.userId;
next(); next();
}); });
});*/ });
this.ioConnection(); this.ioConnection();
this.shareUsersPosition(); }
/**
*
* @param token
*/
searchClientByToken(token: string): ExSocketInterface | null {
let clients: Array<any> = Object.values(this.Io.sockets.sockets);
for (let i = 0; i < clients.length; i++) {
let client: ExSocketInterface = clients[i];
if (client.token !== token) {
continue
}
return client;
}
return null;
} }
private sendUpdateGroupEvent(group: Group): void { private sendUpdateGroupEvent(group: Group): void {
// Let's get the room of the group. To do this, let's get anyone in the group and find its room. // Let's get the room of the group. To do this, let's get anyone in the group and find its room.
// Note: this is suboptimal // Note: this is suboptimal
let userId = group.getUsers()[0].id; let userId = group.getUsers()[0].id;
let client: ExSocketInterface|null = this.searchClientById(userId); let client: ExSocketInterface = this.searchClientByIdOrFail(userId);
if (client === null) {
return;
}
let roomId = client.roomId; let roomId = client.roomId;
this.Io.in(roomId).emit(SockerIoEvent.GROUP_CREATE_UPDATE, { this.Io.in(roomId).emit(SockerIoEvent.GROUP_CREATE_UPDATE, {
position: group.getPosition(), position: group.getPosition(),
@ -73,19 +89,16 @@ export class IoSocketController {
private sendDeleteGroupEvent(uuid: string, lastUser: UserInterface): void { private sendDeleteGroupEvent(uuid: string, lastUser: UserInterface): void {
// Let's get the room of the group. To do this, let's get anyone in the group and find its room. // Let's get the room of the group. To do this, let's get anyone in the group and find its room.
// Note: this is suboptimal
let userId = lastUser.id; let userId = lastUser.id;
let client: ExSocketInterface|null = this.searchClientById(userId); let client: ExSocketInterface = this.searchClientByIdOrFail(userId);
if (client === null) {
console.warn('Could not find client ', userId, ' in group')
return;
}
let roomId = client.roomId; let roomId = client.roomId;
this.Io.in(roomId).emit(SockerIoEvent.GROUP_DELETE, uuid); this.Io.in(roomId).emit(SockerIoEvent.GROUP_DELETE, uuid);
} }
ioConnection() { ioConnection() {
this.Io.on(SockerIoEvent.CONNECTION, (socket: Socket) => { this.Io.on(SockerIoEvent.CONNECTION, (socket: Socket) => {
let client : ExSocketInterface = socket as ExSocketInterface;
this.sockets.set(client.userId, client);
/*join-rom event permit to join one room. /*join-rom event permit to join one room.
message : message :
userId : user identification userId : user identification
@ -94,12 +107,19 @@ export class IoSocketController {
x: user x position on map x: user x position on map
y: user y position on map y: user y position on map
*/ */
socket.on(SockerIoEvent.JOIN_ROOM, (roomId: any): void => { socket.on(SockerIoEvent.JOIN_ROOM, (message: any, answerFn): void => {
try { try {
let roomId = message.roomId;
if (typeof(roomId) !== 'string') { if (typeof(roomId) !== 'string') {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Expected roomId as a string.'}); socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: 'Expected roomId as a string.'});
return; return;
} }
let position = this.hydratePositionReceive(message.position);
if (position instanceof Error) {
socket.emit(SockerIoEvent.MESSAGE_ERROR, {message: position.message});
return;
}
let Client = (socket as ExSocketInterface); let Client = (socket as ExSocketInterface);
@ -111,14 +131,21 @@ export class IoSocketController {
this.leaveRoom(Client); this.leaveRoom(Client);
//join new previous room //join new previous room
this.joinRoom(Client, roomId); let world = this.joinRoom(Client, roomId, position);
//add function to refresh position user in real time. //add function to refresh position user in real time.
this.refreshUserPosition(Client); //this.refreshUserPosition(Client);
let messageUserPosition = new MessageUserPosition(Client.id, Client.name, Client.character,new Point(0, 0, 'none')); let messageUserJoined = new MessageUserJoined(Client.userId, Client.name, Client.character, Client.position);
socket.to(roomId).emit(SockerIoEvent.JOIN_ROOM, messageUserPosition); socket.to(roomId).emit(SockerIoEvent.JOIN_ROOM, messageUserJoined);
// The answer shall contain the list of all users of the room with their positions:
let listOfUsers = Array.from(world.getUsers(), ([key, user]) => {
let player = this.searchClientByIdOrFail(user.id);
return new MessageUserPosition(user.id, player.name, player.character, player.position);
});
answerFn(listOfUsers);
} catch (e) { } catch (e) {
console.error('An error occurred on "join_room" event'); console.error('An error occurred on "join_room" event');
console.error(e); console.error(e);
@ -138,8 +165,15 @@ export class IoSocketController {
// sending to all clients in room except sender // sending to all clients in room except sender
Client.position = position; Client.position = position;
//refresh position of all user in all rooms in real time // update position in the world
this.refreshUserPosition(Client); let world = this.Worlds.get(Client.roomId);
if (!world) {
console.error("Could not find world with id '", Client.roomId, "'");
return;
}
world.updatePosition(Client, position);
socket.to(Client.roomId).emit(SockerIoEvent.USER_MOVED, new MessageUserMoved(Client.userId, Client.position));
} catch (e) { } catch (e) {
console.error('An error occurred on "user_position" event'); console.error('An error occurred on "user_position" event');
console.error(e); console.error(e);
@ -148,38 +182,32 @@ export class IoSocketController {
socket.on(SockerIoEvent.WEBRTC_SIGNAL, (data: any) => { socket.on(SockerIoEvent.WEBRTC_SIGNAL, (data: any) => {
//send only at user //send only at user
let client = this.searchClientById(data.receiverId); let client = this.sockets.get(data.receiverId);
if (!client) { if (client === undefined) {
console.error("While exchanging a WebRTC signal: client doesn't exist for ", data.receiverId); console.warn("While exchanging a WebRTC signal: client with id ", data.receiverId, " does not exist. This might be a race condition.");
return; return;
} }
return client.emit(SockerIoEvent.WEBRTC_SIGNAL, data); return client.emit(SockerIoEvent.WEBRTC_SIGNAL, data);
}); });
socket.on(SockerIoEvent.WEBRTC_OFFER, (data: any) => { socket.on(SockerIoEvent.WEBRTC_OFFER, (data: any) => {
//send only at user //send only at user
let client = this.searchClientById(data.receiverId); let client = this.sockets.get(data.receiverId);
if (!client) { if (client === undefined) {
console.error("client doesn't exist for ", data.receiverId); console.warn("While exchanging a WebRTC offer: client with id ", data.receiverId, " does not exist. This might be a race condition.");
return; return;
} }
client.emit(SockerIoEvent.WEBRTC_OFFER, data); client.emit(SockerIoEvent.WEBRTC_OFFER, data);
}); });
socket.on(SockerIoEvent.DISCONNECT, () => { socket.on(SockerIoEvent.DISCONNECT, () => {
try {
let Client = (socket as ExSocketInterface); let Client = (socket as ExSocketInterface);
this.sendDisconnectedEvent(Client); try {
//refresh position of all user in all rooms in real time
this.refreshUserPosition(Client);
//leave room //leave room
this.leaveRoom(Client); this.leaveRoom(Client);
//leave webrtc room //leave webrtc room
socket.leave(Client.webRtcRoomId); //socket.leave(Client.webRtcRoomId);
//delete all socket information //delete all socket information
delete Client.webRtcRoomId; delete Client.webRtcRoomId;
@ -190,6 +218,7 @@ export class IoSocketController {
console.error('An error occurred on "disconnect"'); console.error('An error occurred on "disconnect"');
console.error(e); console.error(e);
} }
this.sockets.delete(Client.userId);
}); });
// Let's send the user id to the user // Let's send the user id to the user
@ -197,69 +226,28 @@ export class IoSocketController {
let Client = (socket as ExSocketInterface); let Client = (socket as ExSocketInterface);
Client.name = playerDetails.name; Client.name = playerDetails.name;
Client.character = playerDetails.character; Client.character = playerDetails.character;
answerFn(socket.id); answerFn(Client.userId);
}); });
}); });
} }
/** searchClientByIdOrFail(userId: string): ExSocketInterface {
* TODO: each call to this method is suboptimal. It means that instead of passing an ID, we should pass a client object. let client: ExSocketInterface|undefined = this.sockets.get(userId);
* @param userId if (client === undefined) {
*/ throw new Error("Could not find user with id " + userId);
searchClientById(userId: string): ExSocketInterface | null {
let clients: Array<any> = Object.values(this.Io.sockets.sockets);
for (let i = 0; i < clients.length; i++) {
let client: ExSocketInterface = clients[i];
if (client.id !== userId) {
continue;
} }
return client; return client;
} }
console.log("Could not find user with id ", userId);
//throw new Error("Could not find user with id " + userId);
return null;
}
/**
* @param userId
*/
searchClientByToken(userId: string): ExSocketInterface | null {
let clients: Array<any> = Object.values(this.Io.sockets.sockets);
for (let i = 0; i < clients.length; i++) {
let client: ExSocketInterface = clients[i];
if (client.id !== userId) {
continue
}
return client;
}
return null;
}
/**
*
* @param Client: ExSocketInterface
*/
sendDisconnectedEvent(Client: ExSocketInterface) {
Client.broadcast.emit(SockerIoEvent.WEBRTC_DISCONNECT, {
userId: Client.id
});
//disconnect webrtc room
if(!Client.webRtcRoomId){
return;
}
Client.leave(Client.webRtcRoomId);
delete Client.webRtcRoomId;
}
leaveRoom(Client : ExSocketInterface){ leaveRoom(Client : ExSocketInterface){
//lease previous room and world // leave previous room and world
if(Client.roomId){ if(Client.roomId){
Client.to(Client.roomId).emit(SockerIoEvent.USER_LEFT, Client.userId);
//user leave previous world //user leave previous world
let world : World|undefined = this.Worlds.get(Client.roomId); let world : World|undefined = this.Worlds.get(Client.roomId);
if(world){ if(world){
world.leave(Client); world.leave(Client);
//this.Worlds.set(Client.roomId, world);
} }
//user leave previous room //user leave previous room
Client.leave(Client.roomId); Client.leave(Client.roomId);
@ -267,15 +255,16 @@ export class IoSocketController {
} }
} }
joinRoom(Client : ExSocketInterface, roomId: string){ private joinRoom(Client : ExSocketInterface, roomId: string, position: Point): World {
//join user in room //join user in room
Client.join(roomId); Client.join(roomId);
Client.roomId = roomId; Client.roomId = roomId;
Client.position = new Point(-1000, -1000); Client.position = position;
//check and create new world for a room //check and create new world for a room
if(!this.Worlds.get(roomId)){ let world = this.Worlds.get(roomId)
let world = new World((user1: string, group: Group) => { if(world === undefined){
world = new World((user1: string, group: Group) => {
this.connectedUser(user1, group); this.connectedUser(user1, group);
}, (user1: string, group: Group) => { }, (user1: string, group: Group) => {
this.disConnectedUser(user1, group); this.disConnectedUser(user1, group);
@ -287,9 +276,6 @@ export class IoSocketController {
this.Worlds.set(roomId, world); this.Worlds.set(roomId, world);
} }
let world : World|undefined = this.Worlds.get(roomId);
if(world) {
// Dispatch groups position to newly connected user // Dispatch groups position to newly connected user
world.getGroups().forEach((group: Group) => { world.getGroups().forEach((group: Group) => {
Client.emit(SockerIoEvent.GROUP_CREATE_UPDATE, { Client.emit(SockerIoEvent.GROUP_CREATE_UPDATE, {
@ -299,8 +285,7 @@ export class IoSocketController {
}); });
//join world //join world
world.join(Client, Client.position); world.join(Client, Client.position);
this.Worlds.set(roomId, world); return world;
}
} }
/** /**
@ -325,11 +310,11 @@ export class IoSocketController {
clients.forEach((client: ExSocketInterface, index: number) => { clients.forEach((client: ExSocketInterface, index: number) => {
let clientsId = clients.reduce((tabs: Array<any>, clientId: ExSocketInterface, indexClientId: number) => { let clientsId = clients.reduce((tabs: Array<any>, clientId: ExSocketInterface, indexClientId: number) => {
if (!clientId.id || clientId.id === client.id) { if (!clientId.userId || clientId.userId === client.userId) {
return tabs; return tabs;
} }
tabs.push({ tabs.push({
userId: clientId.id, userId: clientId.userId,
name: clientId.name, name: clientId.name,
initiator: index <= indexClientId initiator: index <= indexClientId
}); });
@ -340,31 +325,13 @@ export class IoSocketController {
}); });
} }
refreshUserPosition(Client : ExSocketInterface) {
//refresh position of all user in all rooms in real time
let rooms = (this.Io.sockets.adapter.rooms as ExtRoomsInterface);
if (!rooms.refreshUserPosition) {
rooms.refreshUserPosition = RefreshUserPositionFunction;
}
rooms.refreshUserPosition(rooms, this.Io);
// update position in the world
let messageUserPosition = new MessageUserPosition(Client.id, Client.name, Client.character, Client.position);
let world = this.Worlds.get(Client.roomId);
if (!world) {
return;
}
world.updatePosition(Client, messageUserPosition.position);
this.Worlds.set(Client.roomId, world);
}
//Hydrate and manage error //Hydrate and manage error
hydratePositionReceive(message: any): Point | Error { hydratePositionReceive(message: any): Point | Error {
try { try {
if (!message.x || !message.y || !message.direction) { if (!message.x || !message.y || !message.direction || message.moving === undefined) {
return new Error("invalid point message sent"); return new Error("invalid point message sent");
} }
return new Point(message.x, message.y, message.direction); return new Point(message.x, message.y, message.direction, message.moving);
} catch (err) { } catch (err) {
//TODO log error //TODO log error
return new Error(err); return new Error(err);
@ -387,44 +354,29 @@ export class IoSocketController {
... ...
] ]
**/ **/
seTimeOutInProgress: any = null;
shareUsersPosition() {
if (this.seTimeOutInProgress) {
clearTimeout(this.seTimeOutInProgress);
}
//send for each room, all data of position user
let arrayMap = (this.Io.sockets.adapter.rooms as ExtRooms).userPositionMapByRoom;
if (!arrayMap) {
this.seTimeOutInProgress = setTimeout(() => {
this.shareUsersPosition();
}, 10);
return;
}
arrayMap.forEach((value: any) => {
let roomId = value[0];
this.Io.in(roomId).emit(SockerIoEvent.USER_POSITION, value);
});
this.seTimeOutInProgress = setTimeout(() => {
this.shareUsersPosition();
}, 10);
}
//connected user //connected user
connectedUser(userId: string, group: Group) { connectedUser(userId: string, group: Group) {
let Client = this.searchClientById(userId); /*let Client = this.sockets.get(userId);
if (!Client) { if (Client === undefined) {
return; return;
} }*/
let Client = this.searchClientByIdOrFail(userId);
this.joinWebRtcRoom(Client, group.getId()); this.joinWebRtcRoom(Client, group.getId());
} }
//disconnect user //disconnect user
disConnectedUser(userId: string, group: Group) { disConnectedUser(userId: string, group: Group) {
let Client = this.searchClientById(userId); let Client = this.searchClientByIdOrFail(userId);
if (!Client) { Client.to(group.getId()).emit(SockerIoEvent.WEBRTC_DISCONNECT, {
userId: userId
});
//disconnect webrtc room
if(!Client.webRtcRoomId){
return; return;
} }
this.sendDisconnectedEvent(Client) Client.leave(Client.webRtcRoomId);
delete Client.webRtcRoomId;
} }
} }

2
back/src/Model/Websocket/ExSocketInterface.ts
View File

@ -6,7 +6,7 @@ export interface ExSocketInterface extends Socket, Identificable {
token: any; token: any;
roomId: string; roomId: string;
webRtcRoomId: string; webRtcRoomId: string;
//userId: string; userId: string;
name: string; name: string;
character: string; character: string;
position: PointInterface; position: PointInterface;

44
back/src/Model/Websocket/ExtRooms.ts
View File

@ -1,44 +0,0 @@
import {ExtRoomsInterface} from "./ExtRoomsInterface";
import socketIO = require('socket.io');
import {ExSocketInterface} from "./ExSocketInterface";
export class ExtRooms implements ExtRoomsInterface{
userPositionMapByRoom: any;
refreshUserPosition: any;
Worlds: any;
[room: string]: SocketIO.Room;
}
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++) {
let socket = clients.sockets[socketsKey[i]] as ExSocketInterface;
if (!socket.position) {
continue;
}
let data = {
userId: socket.id,
position: socket.position,
name: socket.name,
character: socket.character,
};
let dataArray = <any>[];
if (mapPositionUserByRoom.get(socket.roomId)) {
dataArray = mapPositionUserByRoom.get(socket.roomId);
dataArray.push(data);
} else {
dataArray = [data];
}
mapPositionUserByRoom.set(socket.roomId, dataArray);
}
rooms.userPositionMapByRoom = Array.from(mapPositionUserByRoom);
};
export {
RefreshUserPositionFunction
};

6
back/src/Model/Websocket/ExtRoomsInterface.ts
View File

@ -1,6 +0,0 @@
import {Rooms} from "socket.io";
export interface ExtRoomsInterface extends Rooms{
userPositionMapByRoom: any;
refreshUserPosition: any;
}

2
back/src/Model/Websocket/Identificable.ts
View File

@ -1,3 +1,3 @@
export interface Identificable { export interface Identificable {
id: string; userId: string;
} }

7
back/src/Model/Websocket/MessageUserJoined.ts Normal file
View File

@ -0,0 +1,7 @@
import {Point} from "./MessageUserPosition";
import {PointInterface} from "_Model/Websocket/PointInterface";
export class MessageUserJoined {
constructor(public userId: string, public name: string, public character: string, public position: PointInterface) {
}
}

6
back/src/Model/Websocket/MessageUserMoved.ts Normal file
View File

@ -0,0 +1,6 @@
import {PointInterface} from "./PointInterface";
export class MessageUserMoved {
constructor(public userId: string, public position: PointInterface) {
}
}

2
back/src/Model/Websocket/MessageUserPosition.ts
View File

@ -1,7 +1,7 @@
import {PointInterface} from "./PointInterface"; import {PointInterface} from "./PointInterface";
export class Point implements PointInterface{ export class Point implements PointInterface{
constructor(public x : number, public y : number, public direction : string = "none") { constructor(public x : number, public y : number, public direction : string = "none", public moving : boolean = false) {
} }
} }

6
back/src/Model/Websocket/PointInterface.ts
View File

@ -1,5 +1,5 @@
export interface PointInterface { export interface PointInterface {
x: number; readonly x: number;
y: number; readonly y: number;
direction: string; readonly direction: string;
} }

20
back/src/Model/World.ts
View File

@ -48,9 +48,13 @@ export class World {
return this.groups; return this.groups;
} }
public getUsers(): Map<string, UserInterface> {
return this.users;
}
public join(socket : Identificable, userPosition: PointInterface): void { public join(socket : Identificable, userPosition: PointInterface): void {
this.users.set(socket.id, { this.users.set(socket.userId, {
id: socket.id, id: socket.userId,
position: userPosition position: userPosition
}); });
// Let's call update position to trigger the join / leave room // Let's call update position to trigger the join / leave room
@ -58,25 +62,23 @@ export class World {
} }
public leave(user : Identificable){ public leave(user : Identificable){
let userObj = this.users.get(user.id); let userObj = this.users.get(user.userId);
if (userObj === undefined) { if (userObj === undefined) {
// FIXME: this seems always wrong. I guess user.id is different from userPosition.userId console.warn('User ', user.userId, 'does not belong to world! It should!');
console.warn('User ', user.id, 'does not belong to world! It should!');
} }
if (userObj !== undefined && typeof userObj.group !== 'undefined') { if (userObj !== undefined && typeof userObj.group !== 'undefined') {
this.leaveGroup(userObj); this.leaveGroup(userObj);
} }
this.users.delete(user.id); this.users.delete(user.userId);
} }
public updatePosition(socket : Identificable, userPosition: PointInterface): void { public updatePosition(socket : Identificable, userPosition: PointInterface): void {
let user = this.users.get(socket.id); let user = this.users.get(socket.userId);
if(typeof user === 'undefined') { if(typeof user === 'undefined') {
return; return;
} }
user.position.x = userPosition.x; user.position = userPosition;
user.position.y = userPosition.y;
if (typeof user.group === 'undefined') { if (typeof user.group === 'undefined') {
// If the user is not part of a group: // If the user is not part of a group:

26
back/tests/WorldTest.ts
View File

@ -15,19 +15,19 @@ describe("World", () => {
let world = new World(connect, disconnect, 160, 160, () => {}, () => {}); let world = new World(connect, disconnect, 160, 160, () => {}, () => {});
world.join({ id: "foo" }, new Point(100, 100)); world.join({ userId: "foo" }, new Point(100, 100));
world.join({ id: "bar" }, new Point(500, 100)); world.join({ userId: "bar" }, new Point(500, 100));
world.updatePosition({ id: "bar" }, new Point(261, 100)); world.updatePosition({ userId: "bar" }, new Point(261, 100));
expect(connectCalledNumber).toBe(0); expect(connectCalledNumber).toBe(0);
world.updatePosition({ id: "bar" }, new Point(101, 100)); world.updatePosition({ userId: "bar" }, new Point(101, 100));
expect(connectCalledNumber).toBe(2); expect(connectCalledNumber).toBe(2);
world.updatePosition({ id: "bar" }, new Point(102, 100)); world.updatePosition({ userId: "bar" }, new Point(102, 100));
expect(connectCalledNumber).toBe(2); expect(connectCalledNumber).toBe(2);
}); });
@ -42,19 +42,19 @@ describe("World", () => {
let world = new World(connect, disconnect, 160, 160, () => {}, () => {}); let world = new World(connect, disconnect, 160, 160, () => {}, () => {});
world.join({ id: "foo" }, new Point(100, 100)); world.join({ userId: "foo" }, new Point(100, 100));
world.join({ id: "bar" }, new Point(200, 100)); world.join({ userId: "bar" }, new Point(200, 100));
expect(connectCalled).toBe(true); expect(connectCalled).toBe(true);
connectCalled = false; connectCalled = false;
// baz joins at the outer limit of the group // baz joins at the outer limit of the group
world.join({ id: "baz" }, new Point(311, 100)); world.join({ userId: "baz" }, new Point(311, 100));
expect(connectCalled).toBe(false); expect(connectCalled).toBe(false);
world.updatePosition({ id: "baz" }, new Point(309, 100)); world.updatePosition({ userId: "baz" }, new Point(309, 100));
expect(connectCalled).toBe(true); expect(connectCalled).toBe(true);
}); });
@ -71,18 +71,18 @@ describe("World", () => {
let world = new World(connect, disconnect, 160, 160, () => {}, () => {}); let world = new World(connect, disconnect, 160, 160, () => {}, () => {});
world.join({ id: "foo" }, new Point(100, 100)); world.join({ userId: "foo" }, new Point(100, 100));
world.join({ id: "bar" }, new Point(259, 100)); world.join({ userId: "bar" }, new Point(259, 100));
expect(connectCalled).toBe(true); expect(connectCalled).toBe(true);
expect(disconnectCallNumber).toBe(0); expect(disconnectCallNumber).toBe(0);
world.updatePosition({ id: "bar" }, new Point(100+160+160+1, 100)); world.updatePosition({ userId: "bar" }, new Point(100+160+160+1, 100));
expect(disconnectCallNumber).toBe(2); expect(disconnectCallNumber).toBe(2);
world.updatePosition({ id: "bar" }, new Point(262, 100)); world.updatePosition({ userId: "bar" }, new Point(262, 100));
expect(disconnectCallNumber).toBe(2); expect(disconnectCallNumber).toBe(2);
}); });

122
front/src/Connexion.ts
View File

@ -6,14 +6,17 @@ import {SetPlayerDetailsMessage} from "./Messages/SetPlayerDetailsMessage";
const SocketIo = require('socket.io-client'); const SocketIo = require('socket.io-client');
import Socket = SocketIOClient.Socket; import Socket = SocketIOClient.Socket;
import {PlayerAnimationNames} from "./Phaser/Player/Animation";
enum EventMessage{ enum EventMessage{
WEBRTC_SIGNAL = "webrtc-signal", WEBRTC_SIGNAL = "webrtc-signal",
WEBRTC_START = "webrtc-start", WEBRTC_START = "webrtc-start",
WEBRTC_JOIN_ROOM = "webrtc-join-room", WEBRTC_JOIN_ROOM = "webrtc-join-room",
JOIN_ROOM = "join-room", JOIN_ROOM = "join-room", // bi-directional
USER_POSITION = "user-position", USER_POSITION = "user-position", // bi-directional
USER_MOVED = "user-moved", // From server to client
USER_LEFT = "user-left", // From server to client
MESSAGE_ERROR = "message-error", MESSAGE_ERROR = "message-error",
WEBRTC_DISCONNECT = "webrtc-disconect", WEBRTC_DISCONNECT = "webrtc-disconect",
GROUP_CREATE_UPDATE = "group-create-update", GROUP_CREATE_UPDATE = "group-create-update",
@ -40,20 +43,14 @@ export interface PointInterface {
x: number; x: number;
y: number; y: number;
direction : string; direction : string;
moving: boolean;
} }
class Point implements PointInterface{ export class Point implements PointInterface{
x: number; constructor(public x : number, public y : number, public direction : string = PlayerAnimationNames.WalkDown, public moving : boolean = false) {
y: number;
direction : string;
constructor(x : number, y : number, direction : string = "none") {
if(x === null || y === null){ if(x === null || y === null){
throw Error("position x and y cannot be null"); throw Error("position x and y cannot be null");
} }
this.x = x;
this.y = y;
this.direction = direction;
} }
} }
@ -64,6 +61,11 @@ export interface MessageUserPositionInterface {
position: PointInterface; position: PointInterface;
} }
export interface MessageUserMovedInterface {
userId: string;
position: PointInterface;
}
class MessageUserPosition extends Message implements MessageUserPositionInterface{ class MessageUserPosition extends Message implements MessageUserPositionInterface{
position: PointInterface; position: PointInterface;
@ -73,6 +75,13 @@ class MessageUserPosition extends Message implements MessageUserPositionInterfac
} }
} }
export interface MessageUserJoined {
userId: string;
name: string;
character: string;
position: PointInterface
}
export interface ListMessageUserPositionInterface { export interface ListMessageUserPositionInterface {
roomId: string; roomId: string;
listUsersPosition: Array<MessageUserPosition>; listUsersPosition: Array<MessageUserPosition>;
@ -91,7 +100,8 @@ class ListMessageUserPosition {
new Point( new Point(
userPosition.position.x, userPosition.position.x,
userPosition.position.y, userPosition.position.y,
userPosition.position.direction userPosition.position.direction,
userPosition.position.moving
), ),
userPosition.name, userPosition.name,
userPosition.character userPosition.character
@ -120,9 +130,9 @@ export interface ConnexionInterface {
loadMaps(): Promise<any>; loadMaps(): Promise<any>;
joinARoom(roomId: string, character: string): void; joinARoom(roomId: string, startX: number, startY: number, direction: string, moving: boolean): void;
sharePosition(x: number, y: number, direction: string, roomId: string, character: string): void; sharePosition(x: number, y: number, direction: string, moving: boolean): void;
positionOfAllUser(): void; positionOfAllUser(): void;
@ -155,25 +165,20 @@ export class Connexion implements ConnexionInterface {
createConnexion(name: string, characterSelected: string): Promise<ConnexionInterface> { createConnexion(name: string, characterSelected: string): Promise<ConnexionInterface> {
this.name = name; this.name = name;
this.character = characterSelected; this.character = characterSelected;
/*return Axios.post(`${API_URL}/login`, {email: this.email}) return Axios.post(`${API_URL}/login`, {name: name})
.then((res) => { .then((res) => {
this.token = res.data.token; this.token = res.data.token;
this.userId = res.data.userId;*/
this.socket = SocketIo(`${API_URL}`, { this.socket = SocketIo(`${API_URL}`, {
/*query: { query: {
token: this.token token: this.token
}*/ }
}); });
return this.connectSocketServer(); return this.connectSocketServer();
/* return res.data;
}) })
.catch((err) => { .catch((err) => {
console.error(err); console.error(err);
throw err; throw err;
});*/ });
} }
/** /**
@ -187,6 +192,9 @@ export class Connexion implements ConnexionInterface {
this.errorMessage(); this.errorMessage();
this.groupUpdatedOrCreated(); this.groupUpdatedOrCreated();
this.groupDeleted(); this.groupDeleted();
this.onUserJoins();
this.onUserMoved();
this.onUserLeft();
return new Promise<ConnexionInterface>((resolve, reject) => { return new Promise<ConnexionInterface>((resolve, reject) => {
this.socket.emit(EventMessage.SET_PLAYER_DETAILS, { this.socket.emit(EventMessage.SET_PLAYER_DETAILS, {
@ -197,22 +205,25 @@ export class Connexion implements ConnexionInterface {
}); });
//if try to reconnect with last position //if try to reconnect with last position
if(this.lastRoom) { /*if(this.lastRoom) {
//join the room //join the room
this.joinARoom( this.joinARoom(this.lastRoom,
this.lastRoom this.lastPositionShared ? this.lastPositionShared.x : 0,
); this.lastPositionShared ? this.lastPositionShared.y : 0,
} this.lastPositionShared ? this.lastPositionShared.direction : PlayerAnimationNames.WalkDown,
this.lastPositionShared ? this.lastPositionShared.moving : false);
}*/
if(this.lastPositionShared) { /*if(this.lastPositionShared) {
//share your first position //share your first position
this.sharePosition( this.sharePosition(
this.lastPositionShared ? this.lastPositionShared.x : 0, this.lastPositionShared ? this.lastPositionShared.x : 0,
this.lastPositionShared ? this.lastPositionShared.y : 0, this.lastPositionShared ? this.lastPositionShared.y : 0,
this.lastPositionShared.direction this.lastPositionShared.direction,
this.lastPositionShared.moving
); );
} }*/
resolve(this); resolve(this);
}); });
@ -229,29 +240,18 @@ export class Connexion implements ConnexionInterface {
}); });
} }
/** joinARoom(roomId: string, startX: number, startY: number, direction: string, moving: boolean): void {
* this.socket.emit(EventMessage.JOIN_ROOM, { roomId, position: {x: startX, y: startY, direction, moving }}, (userPositions: MessageUserPositionInterface[]) => {
* @param roomId this.GameManager.initUsersPosition(userPositions);
* @param character });
*/
joinARoom(roomId: string): void {
this.socket.emit(EventMessage.JOIN_ROOM, roomId);
this.lastRoom = roomId; this.lastRoom = roomId;
} }
/** sharePosition(x : number, y : number, direction : string, moving: boolean) : void{
*
* @param x
* @param y
* @param character
* @param roomId
* @param direction
*/
sharePosition(x : number, y : number, direction : string = "none") : void{
if(!this.socket){ if(!this.socket){
return; return;
} }
let point = new Point(x, y, direction); let point = new Point(x, y, direction, moving);
this.lastPositionShared = point; this.lastPositionShared = point;
this.socket.emit(EventMessage.USER_POSITION, point); this.socket.emit(EventMessage.USER_POSITION, point);
} }
@ -261,11 +261,11 @@ export class Connexion implements ConnexionInterface {
* [ * [
* { * {
* userId: <string>, * userId: <string>,
* roomId: <string>,
* position: { * position: {
* x : <number>, * x : <number>,
* y : <number>, * y : <number>,
* direction: <string> * direction: <string>,
* moving: <bool>
* } * }
* }, * },
* ... * ...
@ -280,6 +280,24 @@ export class Connexion implements ConnexionInterface {
}); });
} }
onUserJoins(): void {
this.socket.on(EventMessage.JOIN_ROOM, (message: MessageUserJoined) => {
this.GameManager.onUserJoins(message);
});
}
onUserMoved(): void {
this.socket.on(EventMessage.USER_MOVED, (message: MessageUserMovedInterface) => {
this.GameManager.onUserMoved(message);
});
}
onUserLeft(): void {
this.socket.on(EventMessage.USER_LEFT, (userId: string) => {
this.GameManager.onUserLeft(userId);
});
}
private groupUpdatedOrCreated(): void { private groupUpdatedOrCreated(): void {
this.socket.on(EventMessage.GROUP_CREATE_UPDATE, (groupCreateUpdateMessage: GroupCreatedUpdatedMessageInterface) => { this.socket.on(EventMessage.GROUP_CREATE_UPDATE, (groupCreateUpdateMessage: GroupCreatedUpdatedMessageInterface) => {
//console.log('Group ', groupCreateUpdateMessage.groupId, " position :", groupCreateUpdateMessage.position.x, groupCreateUpdateMessage.position.y) //console.log('Group ', groupCreateUpdateMessage.groupId, " position :", groupCreateUpdateMessage.position.x, groupCreateUpdateMessage.position.y)
@ -318,12 +336,12 @@ export class Connexion implements ConnexionInterface {
disconnectServer(): void { disconnectServer(): void {
this.socket.on(EventMessage.CONNECT_ERROR, () => { this.socket.on(EventMessage.CONNECT_ERROR, () => {
MessageUI.warningMessage("Trying to connect!"); this.GameManager.switchToDisconnectedScene();
}); });
this.socket.on(EventMessage.RECONNECT, () => { this.socket.on(EventMessage.RECONNECT, () => {
MessageUI.removeMessage();
this.connectSocketServer(); this.connectSocketServer();
this.GameManager.reconnectToGameScene(this.lastPositionShared);
}); });
} }

2
front/src/Phaser/Entity/PlayableCaracter.ts
View File

@ -26,7 +26,7 @@ export const PLAYER_RESOURCES: Array<any> = [
export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite {
private bubble: SpeechBubble; private bubble: SpeechBubble;
private playerName: BitmapText; private readonly playerName: BitmapText;
public PlayerValue: string; public PlayerValue: string;
public PlayerTexture: string; public PlayerTexture: string;

8
front/src/Phaser/Game/AddPlayerInterface.ts Normal file
View File

@ -0,0 +1,8 @@
import {PointInterface} from "../../Connexion";
export interface AddPlayerInterface {
userId: string;
name: string;
character: string;
position: PointInterface;
}

63
front/src/Phaser/Game/GameManager.ts
View File

@ -1,12 +1,19 @@
import {GameScene, GameSceneInterface} from "./GameScene"; import {GameScene} from "./GameScene";
import { import {
Connexion, Connexion,
GroupCreatedUpdatedMessageInterface, GroupCreatedUpdatedMessageInterface,
ListMessageUserPositionInterface ListMessageUserPositionInterface,
MessageUserJoined,
MessageUserMovedInterface,
MessageUserPositionInterface,
Point,
PointInterface
} from "../../Connexion"; } from "../../Connexion";
import {SimplePeerInterface, SimplePeer} from "../../WebRtc/SimplePeer"; import {SimplePeerInterface, SimplePeer} from "../../WebRtc/SimplePeer";
import {getMapKeyByUrl} from "../Login/LogincScene"; import {getMapKeyByUrl} from "../Login/LogincScene";
import ScenePlugin = Phaser.Scenes.ScenePlugin; import ScenePlugin = Phaser.Scenes.ScenePlugin;
import {AddPlayerInterface} from "./AddPlayerInterface";
import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
export enum StatusGameManagerEnum { export enum StatusGameManagerEnum {
IN_PROGRESS = 1, IN_PROGRESS = 1,
@ -15,6 +22,7 @@ export enum StatusGameManagerEnum {
export interface HasMovedEvent { export interface HasMovedEvent {
direction: string; direction: string;
moving: boolean;
x: number; x: number;
y: number; y: number;
} }
@ -27,7 +35,7 @@ export interface MapObject {
export class GameManager { export class GameManager {
status: number; status: number;
private ConnexionInstance: Connexion; private ConnexionInstance: Connexion;
private currentGameScene: GameSceneInterface; private currentGameScene: GameScene;
private playerName: string; private playerName: string;
SimplePeer : SimplePeerInterface; SimplePeer : SimplePeerInterface;
private characterUserSelected: string; private characterUserSelected: string;
@ -56,7 +64,7 @@ export class GameManager {
}); });
} }
setCurrentGameScene(gameScene: GameSceneInterface) { setCurrentGameScene(gameScene: GameScene) {
this.currentGameScene = gameScene; this.currentGameScene = gameScene;
} }
@ -70,13 +78,32 @@ export class GameManager {
this.status = StatusGameManagerEnum.CURRENT_USER_CREATED; this.status = StatusGameManagerEnum.CURRENT_USER_CREATED;
} }
joinRoom(sceneKey : string){ joinRoom(sceneKey: string, startX: number, startY: number, direction: string, moving: boolean){
this.ConnexionInstance.joinARoom(sceneKey); this.ConnexionInstance.joinARoom(sceneKey, startX, startY, direction, moving);
}
onUserJoins(message: MessageUserJoined): void {
let userMessage: AddPlayerInterface = {
userId: message.userId,
character: message.character,
name: message.name,
position: message.position
}
this.currentGameScene.addPlayer(userMessage);
}
onUserMoved(message: MessageUserMovedInterface): void {
this.currentGameScene.updatePlayerPosition(message);
}
onUserLeft(userId: string): void {
this.currentGameScene.removePlayer(userId);
} }
/** /**
* Share position in game * Share position in game
* @param ListMessageUserPosition * @param ListMessageUserPosition
* @deprecated
*/ */
shareUserPosition(ListMessageUserPosition: ListMessageUserPositionInterface): void { shareUserPosition(ListMessageUserPosition: ListMessageUserPositionInterface): void {
if (this.status === StatusGameManagerEnum.IN_PROGRESS) { if (this.status === StatusGameManagerEnum.IN_PROGRESS) {
@ -89,6 +116,18 @@ export class GameManager {
} }
} }
initUsersPosition(usersPosition: MessageUserPositionInterface[]): void {
// Shall we wait for room to be loaded?
/*if (this.status === StatusGameManagerEnum.IN_PROGRESS) {
return;
}*/
try {
this.currentGameScene.initUsersPosition(usersPosition)
} catch (e) {
console.error(e);
}
}
/** /**
* Share group position in game * Share group position in game
*/ */
@ -127,7 +166,7 @@ export class GameManager {
} }
pushPlayerPosition(event: HasMovedEvent) { pushPlayerPosition(event: HasMovedEvent) {
this.ConnexionInstance.sharePosition(event.x, event.y, event.direction); this.ConnexionInstance.sharePosition(event.x, event.y, event.direction, event.moving);
} }
loadMap(mapUrl: string, scene: ScenePlugin): string { loadMap(mapUrl: string, scene: ScenePlugin): string {
@ -141,6 +180,16 @@ export class GameManager {
} }
return sceneKey; return sceneKey;
} }
private oldSceneKey : string;
switchToDisconnectedScene(): void {
this.oldSceneKey = this.currentGameScene.scene.key;
this.currentGameScene.scene.start(ReconnectingSceneName);
}
reconnectToGameScene(lastPositionShared: PointInterface) {
this.currentGameScene.scene.start(this.oldSceneKey, { initPosition: lastPositionShared });
}
} }
export const gameManager = new GameManager(); export const gameManager = new GameManager();

124
front/src/Phaser/Game/GameScene.ts
View File

@ -1,31 +1,33 @@
import {GameManager, gameManager, HasMovedEvent, MapObject, StatusGameManagerEnum} from "./GameManager"; import {GameManager, gameManager, HasMovedEvent} from "./GameManager";
import {GroupCreatedUpdatedMessageInterface, MessageUserPositionInterface} from "../../Connexion"; import {
GroupCreatedUpdatedMessageInterface,
MessageUserMovedInterface,
MessageUserPositionInterface, PointInterface, PositionInterface
} from "../../Connexion";
import {CurrentGamerInterface, GamerInterface, hasMovedEventName, Player} from "../Player/Player"; import {CurrentGamerInterface, GamerInterface, hasMovedEventName, Player} from "../Player/Player";
import { DEBUG_MODE, RESOLUTION, ROOM, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable"; import { DEBUG_MODE, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
import {ITiledMap, ITiledMapLayer, ITiledTileSet} from "../Map/ITiledMap"; import {ITiledMap, ITiledMapLayer, ITiledTileSet} from "../Map/ITiledMap";
import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter"; import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
import Texture = Phaser.Textures.Texture; import Texture = Phaser.Textures.Texture;
import Sprite = Phaser.GameObjects.Sprite; import Sprite = Phaser.GameObjects.Sprite;
import CanvasTexture = Phaser.Textures.CanvasTexture; import CanvasTexture = Phaser.Textures.CanvasTexture;
import CreateSceneFromObjectConfig = Phaser.Types.Scenes.CreateSceneFromObjectConfig; import {AddPlayerInterface} from "./AddPlayerInterface";
import {PlayerAnimationNames} from "../Player/Animation";
export enum Textures { export enum Textures {
Player = "male1" Player = "male1"
} }
export interface GameSceneInterface extends Phaser.Scene { interface GameSceneInitInterface {
Map: Phaser.Tilemaps.Tilemap; initPosition: PointInterface|null
createCurrentPlayer() : void;
shareUserPosition(UsersPosition : Array<MessageUserPositionInterface>): void;
shareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface): void;
updateOrCreateMapPlayer(UsersPosition : Array<MessageUserPositionInterface>): void;
deleteGroup(groupId: string): void;
} }
export class GameScene extends Phaser.Scene implements GameSceneInterface, CreateSceneFromObjectConfig{
export class GameScene extends Phaser.Scene {
GameManager : GameManager; GameManager : GameManager;
Terrains : Array<Phaser.Tilemaps.Tileset>; Terrains : Array<Phaser.Tilemaps.Tileset>;
CurrentPlayer: CurrentGamerInterface; CurrentPlayer: CurrentGamerInterface;
MapPlayers : Phaser.Physics.Arcade.Group; MapPlayers : Phaser.Physics.Arcade.Group;
MapPlayersByKey : Map<string, GamerInterface> = new Map<string, GamerInterface>();
Map: Phaser.Tilemaps.Tilemap; Map: Phaser.Tilemaps.Tilemap;
Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>; Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
Objects : Array<Phaser.Physics.Arcade.Sprite>; Objects : Array<Phaser.Physics.Arcade.Sprite>;
@ -34,6 +36,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface, Creat
startX = 704;// 22 case startX = 704;// 22 case
startY = 32; // 1 case startY = 32; // 1 case
circleTexture: CanvasTexture; circleTexture: CanvasTexture;
initPosition: PositionInterface;
MapKey: string; MapKey: string;
MapUrlFile: string; MapUrlFile: string;
@ -86,7 +89,9 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface, Creat
} }
//hook initialisation //hook initialisation
init() {} init(initData : GameSceneInitInterface) {
this.initPosition = initData.initPosition;
}
//hook create scene //hook create scene
create(): void { create(): void {
@ -210,7 +215,13 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface, Creat
/** /**
* @param layer * @param layer
*/ */
private startUser(layer: ITiledMapLayer){ private startUser(layer: ITiledMapLayer): void {
if (this.initPosition !== undefined) {
this.startX = this.initPosition.x;
this.startY = this.initPosition.y;
return;
}
let tiles : any = layer.data; let tiles : any = layer.data;
tiles.forEach((objectKey : number, key: number) => { tiles.forEach((objectKey : number, key: number) => {
if(objectKey === 0){ if(objectKey === 0){
@ -275,16 +286,17 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface, Creat
this.startX, this.startX,
this.startY, this.startY,
this.GameManager.getPlayerName(), this.GameManager.getPlayerName(),
this.GameManager.getCharacterSelected() this.GameManager.getCharacterSelected(),
PlayerAnimationNames.WalkDown,
false
); );
this.CurrentPlayer.initAnimation();
//create collision //create collision
this.createCollisionWithPlayer(); this.createCollisionWithPlayer();
this.createCollisionObject(); this.createCollisionObject();
//join room //join room
this.GameManager.joinRoom(this.scene.key); this.GameManager.joinRoom(this.scene.key, this.startX, this.startY, PlayerAnimationNames.WalkDown, false);
//listen event to share position of user //listen event to share position of user
this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this)) this.CurrentPlayer.on(hasMovedEventName, this.pushPlayerPosition.bind(this))
@ -333,6 +345,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface, Creat
/** /**
* Share position in scene * Share position in scene
* @param UsersPosition * @param UsersPosition
* @deprecated
*/ */
shareUserPosition(UsersPosition : Array<MessageUserPositionInterface>): void { shareUserPosition(UsersPosition : Array<MessageUserPositionInterface>): void {
this.updateOrCreateMapPlayer(UsersPosition); this.updateOrCreateMapPlayer(UsersPosition);
@ -358,7 +371,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface, Creat
if(!player){ if(!player){
this.addPlayer(userPosition); this.addPlayer(userPosition);
}else{ }else{
player.updatePosition(userPosition); player.updatePosition(userPosition.position);
} }
}); });
@ -372,31 +385,65 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface, Creat
}); });
} }
public initUsersPosition(usersPosition: MessageUserPositionInterface[]): void {
if(!this.CurrentPlayer){
console.error('Cannot initiate users list because map is not loaded yet')
return;
}
let currentPlayerId = this.GameManager.getPlayerId();
// clean map
this.MapPlayersByKey.forEach((player: GamerInterface) => {
player.destroy();
this.MapPlayers.remove(player);
});
this.MapPlayersByKey = new Map<string, GamerInterface>();
// load map
usersPosition.forEach((userPosition : MessageUserPositionInterface) => {
if(userPosition.userId === currentPlayerId){
return;
}
this.addPlayer(userPosition);
});
}
private findPlayerInMap(UserId : string) : GamerInterface | null{ private findPlayerInMap(UserId : string) : GamerInterface | null{
let player = this.MapPlayers.getChildren().find((player: Player) => UserId === player.userId); return this.MapPlayersByKey.get(UserId);
/*let player = this.MapPlayers.getChildren().find((player: Player) => UserId === player.userId);
if(!player){ if(!player){
return null; return null;
} }
return (player as GamerInterface); return (player as GamerInterface);*/
} }
/** /**
* Create new player * Create new player
* @param MessageUserPosition
*/ */
addPlayer(MessageUserPosition : MessageUserPositionInterface) : void{ public addPlayer(addPlayerData : AddPlayerInterface) : void{
//check if exist player, if exist, move position
if(this.MapPlayersByKey.has(addPlayerData.userId)){
this.updatePlayerPosition({
userId: addPlayerData.userId,
position: addPlayerData.position
});
return;
}
//initialise player //initialise player
let player = new Player( let player = new Player(
MessageUserPosition.userId, addPlayerData.userId,
this, this,
MessageUserPosition.position.x, addPlayerData.position.x,
MessageUserPosition.position.y, addPlayerData.position.y,
MessageUserPosition.name, addPlayerData.name,
MessageUserPosition.character addPlayerData.character,
addPlayerData.position.direction,
addPlayerData.position.moving
); );
player.initAnimation();
this.MapPlayers.add(player); this.MapPlayers.add(player);
player.updatePosition(MessageUserPosition); this.MapPlayersByKey.set(player.userId, player);
player.updatePosition(addPlayerData.position);
//init collision //init collision
/*this.physics.add.collider(this.CurrentPlayer, player, (CurrentPlayer: CurrentGamerInterface, MapPlayer: GamerInterface) => { /*this.physics.add.collider(this.CurrentPlayer, player, (CurrentPlayer: CurrentGamerInterface, MapPlayer: GamerInterface) => {
@ -404,6 +451,25 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface, Creat
});*/ });*/
} }
public removePlayer(userId: string) {
console.log('Removing player ', userId)
let player = this.MapPlayersByKey.get(userId);
if (player === undefined) {
console.error('Cannot find user with id ', userId);
}
player.destroy();
this.MapPlayers.remove(player);
this.MapPlayersByKey.delete(userId);
}
updatePlayerPosition(message: MessageUserMovedInterface): void {
let player : GamerInterface | undefined = this.MapPlayersByKey.get(message.userId);
if (player === undefined) {
throw new Error('Cannot find player with ID "' + message.userId +'"');
}
player.updatePosition(message.position);
}
shareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) { shareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) {
let groupId = groupPositionMessage.groupId; let groupId = groupPositionMessage.groupId;

21
front/src/Phaser/Login/LogincScene.ts
View File

@ -2,12 +2,11 @@ import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField"; import {TextField} from "../Components/TextField";
import {TextInput} from "../Components/TextInput"; import {TextInput} from "../Components/TextInput";
import {ClickButton} from "../Components/ClickButton"; import {ClickButton} from "../Components/ClickButton";
import {GameScene, GameSceneInterface} from "../Game/GameScene";
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle; import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter"; import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
import {cypressAsserter} from "../../Cypress/CypressAsserter"; import {cypressAsserter} from "../../Cypress/CypressAsserter";
import {GroupCreatedUpdatedMessageInterface, MessageUserPositionInterface} from "../../Connexion"; import {GroupCreatedUpdatedMessageInterface, MessageUserJoined, MessageUserPositionInterface} from "../../Connexion";
export function getMapKeyByUrl(mapUrlStart: string){ export function getMapKeyByUrl(mapUrlStart: string){
// FIXME: the key should be computed from the full URL of the map. // FIXME: the key should be computed from the full URL of the map.
@ -28,7 +27,7 @@ enum LoginTextures {
mainFont = "main_font" mainFont = "main_font"
} }
export class LogincScene extends Phaser.Scene implements GameSceneInterface { export class LogincScene extends Phaser.Scene {
private nameInput: TextInput; private nameInput: TextInput;
private textField: TextField; private textField: TextField;
private playButton: ClickButton; private playButton: ClickButton;
@ -168,20 +167,4 @@ export class LogincScene extends Phaser.Scene implements GameSceneInterface {
this.selectedPlayer = this.players[0]; this.selectedPlayer = this.players[0];
this.selectedPlayer.play(PLAYER_RESOURCES[0].name); this.selectedPlayer.play(PLAYER_RESOURCES[0].name);
} }
shareUserPosition(UsersPosition: import("../../Connexion").MessageUserPositionInterface[]): void {
throw new Error("Method not implemented.");
}
deleteGroup(groupId: string): void {
throw new Error("Method not implemented.");
}
shareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface): void {
throw new Error("Method not implemented.");
}
updateOrCreateMapPlayer(UsersPosition: Array<MessageUserPositionInterface>): void {
throw new Error("Method not implemented.");
}
} }

9
front/src/Phaser/Player/Animation.ts
View File

@ -14,7 +14,6 @@ export enum PlayerAnimationNames {
WalkLeft = 'left', WalkLeft = 'left',
WalkUp = 'up', WalkUp = 'up',
WalkRight = 'right', WalkRight = 'right',
None = 'none',
} }
export const getPlayerAnimations = (name: string = Textures.Player): AnimationData[] => { export const getPlayerAnimations = (name: string = Textures.Player): AnimationData[] => {
@ -48,11 +47,3 @@ export const getPlayerAnimations = (name: string = Textures.Player): AnimationDa
repeat: -1 repeat: -1
}]; }];
}; };
export const playAnimation = (Player : Phaser.GameObjects.Sprite, direction : string) => {
if (direction !== PlayerAnimationNames.None && (!Player.anims.currentAnim || Player.anims.currentAnim.key !== direction)) {
Player.anims.play(direction);
} else if (direction === PlayerAnimationNames.None && Player.anims.currentAnim) {
Player.anims.stop();
}
}

76
front/src/Phaser/Player/Player.ts
View File

@ -1,36 +1,37 @@
import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animation"; import {getPlayerAnimations, PlayerAnimationNames} from "./Animation";
import {GameSceneInterface, Textures} from "../Game/GameScene"; import {GameScene, Textures} from "../Game/GameScene";
import {MessageUserPositionInterface} from "../../Connexion"; import {MessageUserPositionInterface, PointInterface} from "../../Connexion";
import {ActiveEventList, UserInputEvent, UserInputManager} from "../UserInput/UserInputManager"; import {ActiveEventList, UserInputEvent, UserInputManager} from "../UserInput/UserInputManager";
import {PlayableCaracter} from "../Entity/PlayableCaracter"; import {PlayableCaracter} from "../Entity/PlayableCaracter";
export const hasMovedEventName = "hasMoved"; export const hasMovedEventName = "hasMoved";
export interface CurrentGamerInterface extends PlayableCaracter{ export interface CurrentGamerInterface extends PlayableCaracter{
initAnimation() : void;
moveUser(delta: number) : void; moveUser(delta: number) : void;
say(text : string) : void; say(text : string) : void;
} }
export interface GamerInterface extends PlayableCaracter{ export interface GamerInterface extends PlayableCaracter{
userId : string; userId : string;
initAnimation() : void; updatePosition(position: PointInterface): void;
updatePosition(MessageUserPosition : MessageUserPositionInterface) : void;
say(text : string) : void; say(text : string) : void;
} }
export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface { export class Player extends PlayableCaracter implements CurrentGamerInterface, GamerInterface {
userId: string; userId: string;
userInputManager: UserInputManager; userInputManager: UserInputManager;
previousMove: string; previousDirection: string;
wasMoving: boolean;
constructor( constructor(
userId: string, userId: string,
Scene: GameSceneInterface, Scene: GameScene,
x: number, x: number,
y: number, y: number,
name: string, name: string,
PlayerTexture: string = Textures.Player PlayerTexture: string,
direction: string,
moving: boolean
) { ) {
super(Scene, x, y, PlayerTexture, name, 1); super(Scene, x, y, PlayerTexture, name, 1);
@ -42,9 +43,18 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
//the current player model should be push away by other players to prevent conflict //the current player model should be push away by other players to prevent conflict
this.setImmovable(false); this.setImmovable(false);
this.initAnimation();
console.warn("Start direction for added player ", direction)
console.warn("Position ", x, y)
/*this.play(`${PlayerTexture}-${direction}`, true);
if (!moving) {
this.stop();
}*/
this.playAnimation(direction, moving);
} }
initAnimation(): void { private initAnimation(): void {
getPlayerAnimations(this.PlayerTexture).forEach(d => { getPlayerAnimations(this.PlayerTexture).forEach(d => {
this.scene.anims.create({ this.scene.anims.create({
key: d.key, key: d.key,
@ -58,6 +68,7 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
moveUser(delta: number): void { moveUser(delta: number): void {
//if user client on shift, camera and player speed //if user client on shift, camera and player speed
let direction = null; let direction = null;
let moving = false;
let activeEvents = this.userInputManager.getEventListForGameTick(); let activeEvents = this.userInputManager.getEventListForGameTick();
let speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 25 : 9; let speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 25 : 9;
@ -67,39 +78,56 @@ export class Player extends PlayableCaracter implements CurrentGamerInterface, G
let y = 0; let y = 0;
if (activeEvents.get(UserInputEvent.MoveUp)) { if (activeEvents.get(UserInputEvent.MoveUp)) {
y = - moveAmount; y = - moveAmount;
direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`; direction = PlayerAnimationNames.WalkUp;
moving = true;
} else if (activeEvents.get(UserInputEvent.MoveDown)) { } else if (activeEvents.get(UserInputEvent.MoveDown)) {
y = moveAmount; y = moveAmount;
direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`; direction = PlayerAnimationNames.WalkDown;
moving = true;
} }
if (activeEvents.get(UserInputEvent.MoveLeft)) { if (activeEvents.get(UserInputEvent.MoveLeft)) {
x = -moveAmount; x = -moveAmount;
direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`; direction = PlayerAnimationNames.WalkLeft;
moving = true;
} else if (activeEvents.get(UserInputEvent.MoveRight)) { } else if (activeEvents.get(UserInputEvent.MoveRight)) {
x = moveAmount; x = moveAmount;
direction = `${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`; direction = PlayerAnimationNames.WalkRight;
moving = true;
} }
if (x !== 0 || y !== 0) { if (x !== 0 || y !== 0) {
this.move(x, y); this.move(x, y);
this.emit(hasMovedEventName, {direction, x: this.x, y: this.y}); this.emit(hasMovedEventName, {moving, direction, x: this.x, y: this.y});
} else { } else {
if (this.previousMove !== PlayerAnimationNames.None) { if (this.wasMoving) {
direction = PlayerAnimationNames.None; //direction = PlayerAnimationNames.None;
this.stop(); this.stop();
this.emit(hasMovedEventName, {direction, x: this.x, y: this.y}); this.emit(hasMovedEventName, {moving, direction: this.previousDirection, x: this.x, y: this.y});
} }
} }
if (direction !== null) { if (direction !== null) {
this.previousMove = direction; this.previousDirection = direction;
} }
this.wasMoving = moving;
} }
//todo: put this method into the NonPlayer class instead //todo: put this method into the NonPlayer class instead
updatePosition(MessageUserPosition: MessageUserPositionInterface) { updatePosition(position: PointInterface): void {
playAnimation(this, MessageUserPosition.position.direction); this.playAnimation(position.direction, position.moving);
this.setX(MessageUserPosition.position.x); this.setX(position.x);
this.setY(MessageUserPosition.position.y); this.setY(position.y);
this.setDepth(MessageUserPosition.position.y); this.setDepth(position.y);
}
private playAnimation(direction : string, moving: boolean): void {
if (moving && (!this.anims.currentAnim || this.anims.currentAnim.key !== direction)) {
this.anims.play(this.PlayerTexture+'-'+direction);
} else if (!moving) {
/*if (this.anims.currentAnim) {
this.anims.stop();
}*/
this.anims.play(this.PlayerTexture+'-'+direction);
this.anims.stop();
}
} }
} }

56
front/src/Phaser/Reconnecting/ReconnectingScene.ts Normal file
View File

@ -0,0 +1,56 @@
import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import {TextInput} from "../Components/TextInput";
import {ClickButton} from "../Components/ClickButton";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
import {cypressAsserter} from "../../Cypress/CypressAsserter";
import Sprite = Phaser.GameObjects.Sprite;
export const ReconnectingSceneName = "ReconnectingScene";
enum ReconnectingTextures {
icon = "icon",
mainFont = "main_font"
}
export class ReconnectingScene extends Phaser.Scene {
private reconnectingField: TextField;
private logo: Image;
private cat: Sprite;
constructor() {
super({
key: ReconnectingSceneName
});
}
preload() {
this.load.image(ReconnectingTextures.icon, "resources/logos/tcm_full.png");
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
this.load.bitmapFont(ReconnectingTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
this.load.spritesheet(
'cat',
'resources/characters/pipoya/Cat 01-1.png',
{frameWidth: 32, frameHeight: 32}
);
}
create() {
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, ReconnectingTextures.icon);
this.add.existing(this.logo);
this.reconnectingField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "Connection lost. Reconnecting...");
this.reconnectingField.setOrigin(0.5, 0.5).setCenterAlign();
let cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat');
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('cat', { start: 6, end: 8 }),
frameRate: 10,
repeat: -1
});
cat.play('right');
}
}

4
front/src/Phaser/UserInput/UserInputManager.ts
View File

@ -1,5 +1,5 @@
import Map = Phaser.Structs.Map; import Map = Phaser.Structs.Map;
import {GameSceneInterface} from "../Game/GameScene"; import {GameScene} from "../Game/GameScene";
interface UserInputManagerDatum { interface UserInputManagerDatum {
keyCode: number; keyCode: number;
@ -50,7 +50,7 @@ export class UserInputManager {
{keyCode: Phaser.Input.Keyboard.KeyCodes.F, event: UserInputEvent.Shout, keyInstance: null}, {keyCode: Phaser.Input.Keyboard.KeyCodes.F, event: UserInputEvent.Shout, keyInstance: null},
]; ];
constructor(Scene : GameSceneInterface) { constructor(Scene : GameScene) {
this.KeysCode.forEach(d => { this.KeysCode.forEach(d => {
d.keyInstance = Scene.input.keyboard.addKey(d.keyCode); d.keyInstance = Scene.input.keyboard.addKey(d.keyCode);
}); });

24
front/src/WebRtc/SimplePeer.ts
View File

@ -141,9 +141,9 @@ export class SimplePeer implements SimplePeerInterface{
this.stream(user.userId, stream); this.stream(user.userId, stream);
}); });
this.PeerConnexionArray.get(user.userId).on('track', (track: MediaStreamTrack, stream: MediaStream) => { /*this.PeerConnexionArray.get(user.userId).on('track', (track: MediaStreamTrack, stream: MediaStream) => {
this.stream(user.userId, stream); this.stream(user.userId, stream);
}); });*/
this.PeerConnexionArray.get(user.userId).on('close', () => { this.PeerConnexionArray.get(user.userId).on('close', () => {
this.closeConnexion(user.userId); this.closeConnexion(user.userId);
@ -157,6 +157,13 @@ export class SimplePeer implements SimplePeerInterface{
console.info(`connect => ${user.userId}`); console.info(`connect => ${user.userId}`);
}); });
this.PeerConnexionArray.get(user.userId).on('data', (chunk: Buffer) => {
let data = JSON.parse(chunk.toString('utf8'));
if(data.type === "stream"){
this.stream(user.userId, data.stream);
}
});
this.addMedia(user.userId); this.addMedia(user.userId);
} }
@ -205,6 +212,11 @@ export class SimplePeer implements SimplePeerInterface{
* @param stream * @param stream
*/ */
private stream(userId : any, stream: MediaStream) { private stream(userId : any, stream: MediaStream) {
if(!stream){
this.MediaManager.disabledVideoByUserId(userId);
this.MediaManager.disabledMicrophoneByUserId(userId);
return;
}
this.MediaManager.addStreamRemoteVideo(userId, stream); this.MediaManager.addStreamRemoteVideo(userId, stream);
} }
@ -216,6 +228,14 @@ export class SimplePeer implements SimplePeerInterface{
try { try {
let transceiver : any = null; let transceiver : any = null;
if(!this.MediaManager.localStream){ if(!this.MediaManager.localStream){
//send fake signal
if(!this.PeerConnexionArray.has(userId)){
return;
}
this.PeerConnexionArray.get(userId).write(new Buffer(JSON.stringify({
type: "stream",
stream: null
})));
return; return;
} }
this.MediaManager.localStream.getTracks().forEach( this.MediaManager.localStream.getTracks().forEach(

4
front/src/index.ts
View File

@ -3,13 +3,15 @@ import GameConfig = Phaser.Types.Core.GameConfig;
import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable"; import {DEBUG_MODE, RESOLUTION} from "./Enum/EnvironmentVariable";
import {cypressAsserter} from "./Cypress/CypressAsserter"; import {cypressAsserter} from "./Cypress/CypressAsserter";
import {LogincScene} from "./Phaser/Login/LogincScene"; import {LogincScene} from "./Phaser/Login/LogincScene";
import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
import {gameManager} from "./Phaser/Game/GameManager";
const config: GameConfig = { const config: GameConfig = {
title: "Office game", title: "Office game",
width: window.innerWidth / RESOLUTION, width: window.innerWidth / RESOLUTION,
height: window.innerHeight / RESOLUTION, height: window.innerHeight / RESOLUTION,
parent: "game", parent: "game",
scene: [LogincScene], scene: [LogincScene, ReconnectingScene],
zoom: RESOLUTION, zoom: RESOLUTION,
physics: { physics: {
default: "arcade", default: "arcade",