lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Merge pull request #81 from thecodingmachine/display_groups

Browse source 
Adding the display of a circle around the group
This commit is contained in:
David Négrier 2020-05-08 16:20:56 +02:00 committed by GitHub
parent 25b7fc5e36 b2a5cb1720
commit e4824fe34d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 161 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
back/src/Controller/IoSocketController.ts
View file

@ -9,6 +9,7 @@ import {ExtRooms, RefreshUserPositionFunction} from "../Model/Websocket/ExtRoom"
import {ExtRoomsInterface} from "../Model/Websocket/ExtRoomsInterface";
import {World} from "../Model/World";
import {Group} from "_Model/Group";
import {UserInterface} from "_Model/UserInterface";
enum SockerIoEvent {
CONNECTION = "connection",
@ -20,6 +21,8 @@ enum SockerIoEvent {
WEBRTC_START = "webrtc-start",
WEBRTC_DISCONNECT = "webrtc-disconect",
MESSAGE_ERROR = "message-error",
GROUP_CREATE_UPDATE = "group-create-update",
GROUP_DELETE = "group-delete",
}
export class IoSocketController {
@ -51,7 +54,38 @@ export class IoSocketController {
this.connectedUser(user1, group);
}, (user1: string, group: Group) => {
this.disConnectedUser(user1, group);
}, MINIMUM_DISTANCE, GROUP_RADIUS);
}, MINIMUM_DISTANCE, GROUP_RADIUS, (group: Group) => {
this.sendUpdateGroupEvent(group);
}, (groupUuid: string, lastUser: UserInterface) => {
this.sendDeleteGroupEvent(groupUuid, lastUser);
});
}
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.
// Note: this is suboptimal
let userId = group.getUsers()[0].id;
let client: ExSocketInterface|null = this.searchClientById(userId);
if (client === null) {
return;
}
let roomId = client.roomId;
this.Io.in(roomId).emit(SockerIoEvent.GROUP_CREATE_UPDATE, {
position: group.getPosition(),
groupId: group.getId()
});
}
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.
// Note: this is suboptimal
let userId = lastUser.id;
let client: ExSocketInterface|null = this.searchClientById(userId);
if (client === null) {
return;
}
let roomId = client.roomId;
this.Io.in(roomId).emit(SockerIoEvent.GROUP_DELETE, uuid);
}
ioConnection() {
@ -146,7 +180,7 @@ export class IoSocketController {
}
/**
*
* TODO: each call to this method is suboptimal. It means that instead of passing an ID, we should pass a client object.
* @param userId
*/
searchClientById(userId: string): ExSocketInterface | null {
@ -286,7 +320,7 @@ export class IoSocketController {
this.joinWebRtcRoom(Client, group.getId());
}
//connected user
//disconnect user
disConnectedUser(userId: string, group: Group) {
let Client = this.searchClientById(userId);
if (!Client) {

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

@ -9,6 +9,10 @@ import {PositionInterface} from "_Model/PositionInterface";
export type ConnectCallback = (user: string, group: Group) => void;
export type DisconnectCallback = (user: string, group: Group) => void;
// callback called when a group is created or moved or changes users
export type GroupUpdatedCallback = (group: Group) => void;
export type GroupDeletedCallback = (uuid: string, lastUser: UserInterface) => void;
export class World {
private minDistance: number;
private groupRadius: number;
@ -19,11 +23,15 @@ export class World {
private connectCallback: ConnectCallback;
private disconnectCallback: DisconnectCallback;
private groupUpdatedCallback: GroupUpdatedCallback;
private groupDeletedCallback: GroupDeletedCallback;
constructor(connectCallback: ConnectCallback,
disconnectCallback: DisconnectCallback,
minDistance: number,
groupRadius: number)
groupRadius: number,
groupUpdatedCallback: GroupUpdatedCallback,
groupDeletedCallback: GroupDeletedCallback)
{
this.users = new Map<string, UserInterface>();
this.groups = [];
@ -31,6 +39,8 @@ export class World {
this.disconnectCallback = disconnectCallback;
this.minDistance = minDistance;
this.groupRadius = groupRadius;
this.groupUpdatedCallback = groupUpdatedCallback;
this.groupDeletedCallback = groupDeletedCallback;
}
public join(userPosition: MessageUserPosition): void {
@ -86,6 +96,11 @@ export class World {
this.leaveGroup(user);
}
}
// At the very end, if the user is part of a group, let's call the callback to update group position
if (typeof user.group !== 'undefined') {
this.groupUpdatedCallback(user.group);
}
}
/**
@ -101,12 +116,15 @@ export class World {
group.leave(user);
if (group.isEmpty()) {
this.groupDeletedCallback(group.getId(), user);
group.destroy();
const index = this.groups.indexOf(group, 0);
if (index === -1) {
throw new Error("Could not find group");
}
this.groups.splice(index, 1);
} else {
this.groupUpdatedCallback(group);
}
}

6
back/tests/WorldTest.ts
View file

@ -15,7 +15,7 @@ describe("World", () => {
}
let world = new World(connect, disconnect, 160, 160);
let world = new World(connect, disconnect, 160, 160, () => {}, () => {});
world.join(new MessageUserPosition({
userId: "foo",
@ -62,7 +62,7 @@ describe("World", () => {
}
let world = new World(connect, disconnect, 160, 160);
let world = new World(connect, disconnect, 160, 160, () => {}, () => {});
world.join(new MessageUserPosition({
userId: "foo",
@ -107,7 +107,7 @@ describe("World", () => {
disconnectCallNumber++;
}
let world = new World(connect, disconnect, 160, 160);
let world = new World(connect, disconnect, 160, 160, () => {}, () => {});
world.join(new MessageUserPosition({
userId: "foo",

32
front/src/Connexion.ts
View file

@ -11,7 +11,9 @@ enum EventMessage{
JOIN_ROOM = "join-room",
USER_POSITION = "user-position",
MESSAGE_ERROR = "message-error",
WEBRTC_DISCONNECT = "webrtc-disconect"
WEBRTC_DISCONNECT = "webrtc-disconect",
GROUP_CREATE_UPDATE = "group-create-update",
GROUP_DELETE = "group-delete",
}
class Message {
@ -122,6 +124,16 @@ class ListMessageUserPosition {
}
}
export interface PositionInterface {
x: number,
y: number
}
export interface GroupCreatedUpdatedMessageInterface {
position: PositionInterface,
groupId: string
}
export interface ConnexionInterface {
socket: any;
token: string;
@ -184,6 +196,9 @@ export class Connexion implements ConnexionInterface {
this.errorMessage();
this.groupUpdatedOrCreated();
this.groupDeleted();
return this;
})
.catch((err) => {
@ -254,6 +269,19 @@ export class Connexion implements ConnexionInterface {
});
}
private groupUpdatedOrCreated(): void {
this.socket.on(EventMessage.GROUP_CREATE_UPDATE, (groupCreateUpdateMessage: GroupCreatedUpdatedMessageInterface) => {
//console.log('Group ', groupCreateUpdateMessage.groupId, " position :", groupCreateUpdateMessage.position.x, groupCreateUpdateMessage.position.y)
this.GameManager.shareGroupPosition(groupCreateUpdateMessage);
})
}
private groupDeleted(): void {
this.socket.on(EventMessage.GROUP_DELETE, (groupId: string) => {
this.GameManager.deleteGroup(groupId);
})
}
sendWebrtcSignal(signal: any, roomId: string, userId? : string, receiverId? : string) {
return this.socket.emit(EventMessage.WEBRTC_SIGNAL, JSON.stringify({
userId: userId ? userId : this.userId,
@ -280,4 +308,4 @@ export class Connexion implements ConnexionInterface {
disconnectMessage(callback: Function): void {
this.socket.on(EventMessage.WEBRTC_DISCONNECT, callback);
}
}
}

32
front/src/Phaser/Game/GameManager.ts
View file

@ -1,6 +1,11 @@
import {GameScene} from "./GameScene";
import {ROOM} from "../../Enum/EnvironmentVariable"
import {Connexion, ConnexionInterface, ListMessageUserPositionInterface} from "../../Connexion";
import {
Connexion,
ConnexionInterface,
GroupCreatedUpdatedMessageInterface,
ListMessageUserPositionInterface
} from "../../Connexion";
import {SimplePeerInterface, SimplePeer} from "../../WebRtc/SimplePeer";
import {LogincScene} from "../Login/LogincScene";
@ -66,6 +71,31 @@ export class GameManager {
}
}
/**
* Share group position in game
*/
shareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface): void {
if (this.status === StatusGameManagerEnum.IN_PROGRESS) {
return;
}
try {
this.currentGameScene.shareGroupPosition(groupPositionMessage)
} catch (e) {
console.error(e);
}
}
deleteGroup(groupId: string): void {
if (this.status === StatusGameManagerEnum.IN_PROGRESS) {
return;
}
try {
this.currentGameScene.deleteGroup(groupId)
} catch (e) {
console.error(e);
}
}
getPlayerName(): string {
return this.playerName;
}

43
front/src/Phaser/Game/GameScene.ts
View file

@ -1,11 +1,16 @@
import {GameManager, gameManager, HasMovedEvent, StatusGameManagerEnum} from "./GameManager";
import {MessageUserPositionInterface} from "../../Connexion";
import {GroupCreatedUpdatedMessageInterface, MessageUserPositionInterface} from "../../Connexion";
import {CurrentGamerInterface, GamerInterface, hasMovedEventName, Player} from "../Player/Player";
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";
import Circle = Phaser.Geom.Circle;
import Graphics = Phaser.GameObjects.Graphics;
import Texture = Phaser.Textures.Texture;
import Sprite = Phaser.GameObjects.Sprite;
import CanvasTexture = Phaser.Textures.CanvasTexture;
export const GameSceneName = "GameScene";
export enum Textures {
@ -27,9 +32,10 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
Objects : Array<Phaser.Physics.Arcade.Sprite>;
map: ITiledMap;
groups: Map<string, Sprite>
startX = 704;// 22 case
startY = 32; // 1 case
circleTexture: CanvasTexture;
constructor() {
super({
@ -37,6 +43,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
});
this.GameManager = gameManager;
this.Terrains = [];
this.groups = new Map<string, Sprite>();
}
//hook preload scene
@ -120,6 +127,19 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
//initialise camera
this.initCamera();
// Let's generate the circle for the group delimiter
this.circleTexture = this.textures.createCanvas('circleSprite', 96, 96);
let context = this.circleTexture.context;
context.beginPath();
context.arc(48, 48, 48, 0, 2 * Math.PI, false);
// context.lineWidth = 5;
context.strokeStyle = '#ffffff';
context.stroke();
this.circleTexture.refresh();
}
//todo: in a dedicated class/function?
@ -277,4 +297,23 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
CurrentPlayer.say("Hello, how are you ? ");
});
}
shareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) {
let groupId = groupPositionMessage.groupId;
if (this.groups.has(groupId)) {
this.groups.get(groupId).setPosition(Math.round(groupPositionMessage.position.x), Math.round(groupPositionMessage.position.y));
} else {
// TODO: circle radius should not be hard stored
let sprite = new Sprite(this, Math.round(groupPositionMessage.position.x), Math.round(groupPositionMessage.position.y), 'circleSprite');
sprite.setDisplayOrigin(48, 48);
this.add.existing(sprite);
this.groups.set(groupId, sprite);
}
}
deleteGroup(groupId: string): void {
this.groups.get(groupId).destroy();
this.groups.delete(groupId);
}
}

1
front/src/Phaser/Player/Animation.ts
View file

@ -53,7 +53,6 @@ export const playAnimation = (Player : Phaser.GameObjects.Sprite, direction : st
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.currentAnim.destroy();
Player.anims.stop();
}
}