Merge pull request #354 from thecodingmachine/red-circle-full-webrtc

Red circle when have 4 users during webrtc meet
This commit is contained in:
David Négrier 2020-10-21 17:34:59 +02:00 committed by GitHub
commit 9d8bf8bdab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 43 additions and 7 deletions

View File

@ -117,4 +117,8 @@ export class Group implements Movable {
this.leave(user);
}
}
get getSize(){
return this.users.size;
}
}

View File

@ -130,6 +130,7 @@ export class SocketManager {
userJoinedMessage.setPosition(ProtobufUtils.toPositionMessage(player.position));
roomJoinedMessage.addUser(userJoinedMessage);
roomJoinedMessage.setTagList(client.tags);
} else if (thing instanceof Group) {
const groupUpdateMessage = new GroupUpdateMessage();
groupUpdateMessage.setGroupid(thing.getId());
@ -493,6 +494,7 @@ export class SocketManager {
const groupUpdateMessage = new GroupUpdateMessage();
groupUpdateMessage.setGroupid(group.getId());
groupUpdateMessage.setPosition(pointMessage);
groupUpdateMessage.setGroupsize(group.getSize);
const subMessage = new SubMessage();
subMessage.setGroupupdatemessage(groupUpdateMessage);

View File

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

View File

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

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();
@ -409,11 +410,18 @@ export class GameScene extends ResizableScene implements CenterListener {
this.initCamera();
// Let's generate the circle for the group delimiter
const circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite');
let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
if (circleElement) {
this.textures.remove('circleSprite');
this.textures.remove('circleSprite-white');
}
this.circleTexture = this.textures.createCanvas('circleSprite', 96, 96);
circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red');
if (circleElement) {
this.textures.remove('circleSprite-red');
}
//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 +430,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 +1141,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);
}

View File

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