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

Red circle when have 4 users during webrtc meet

Browse source
This commit is contained in:
Gregoire Parant 2020-10-21 16:07:42 +02:00
parent 142e5c3f66
commit 1df4cb3e17
4 changed files with 30 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
front/src/Connexion/ConnexionModels.ts
View file

@ -73,7 +73,8 @@ export interface PositionInterface {
export interface GroupCreatedUpdatedMessageInterface {
position: PositionInterface,
groupId: number
groupId: number,
groupSize: number
}
export interface WebRtcStartMessageInterface {

3
front/src/Connexion/RoomConnection.ts
View file

@ -335,7 +335,8 @@ export class RoomConnection implements RoomConnection {
return {
groupId: message.getGroupid(),
position: position.toObject()
position: position.toObject(),
groupSize: message.getGroupsize()
}
}

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

@ -109,6 +109,7 @@ export class GameScene extends ResizableScene implements CenterListener {
startX!: number;
startY!: number;
circleTexture!: CanvasTexture;
circleRedTexture!: CanvasTexture;
pendingEvents: Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface> = new Queue<InitUserPositionEventInterface|AddPlayerEventInterface|RemovePlayerEventInterface|UserMovedEventInterface|GroupCreatedUpdatedEventInterface|DeleteGroupEventInterface>();
private initPosition: PositionInterface|null = null;
private playersPositionInterpolator = new PlayersPositionInterpolator();
@ -413,7 +414,9 @@ export class GameScene extends ResizableScene implements CenterListener {
if (circleElement) {
this.textures.remove('circleSprite');
}
this.circleTexture = this.textures.createCanvas('circleSprite', 96, 96);
//create white circle canvas use to create sprite
this.circleTexture = this.textures.createCanvas('circleSprite-white', 96, 96);
const context = this.circleTexture.context;
context.beginPath();
context.arc(48, 48, 48, 0, 2 * Math.PI, false);
@ -422,6 +425,16 @@ export class GameScene extends ResizableScene implements CenterListener {
context.stroke();
this.circleTexture.refresh();
//create red circle canvas use to create sprite
this.circleRedTexture = this.textures.createCanvas('circleSprite-red', 96, 96);
const contextRed = this.circleRedTexture.context;
contextRed.beginPath();
contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false);
// context.lineWidth = 5;
contextRed.strokeStyle = '#ff0000';
contextRed.stroke();
this.circleRedTexture.refresh();
// Let's pause the scene if the connection is not established yet
if (this.connection === undefined) {
// Let's wait 0.5 seconds before printing the "connecting" screen to avoid blinking
@ -1123,18 +1136,27 @@ export class GameScene extends ResizableScene implements CenterListener {
private doShareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) {
const groupId = groupPositionMessage.groupId;
const groupSize = groupPositionMessage.groupSize;
const group = this.groups.get(groupId);
if (group !== undefined) {
group.setPosition(Math.round(groupPositionMessage.position.x), Math.round(groupPositionMessage.position.y));
} else {
// TODO: circle radius should not be hard stored
const positionX = 48;
const positionY = 48;
let texture = 'circleSprite-red';
if(groupSize < 4){
texture = 'circleSprite-white';
}
const sprite = new Sprite(
this,
Math.round(groupPositionMessage.position.x),
Math.round(groupPositionMessage.position.y),
'circleSprite');
sprite.setDisplayOrigin(48, 48);
texture
);
sprite.setDisplayOrigin(positionX, positionY);
this.add.existing(sprite);
this.groups.set(groupId, sprite);
}

1
messages/messages.proto
View file

@ -125,6 +125,7 @@ message BatchMessage {
message GroupUpdateMessage {
int32 groupId = 1;
PointMessage position = 2;
int32 groupSize = 3;
}
message GroupDeleteMessage {