From 1df4cb3e1789440f9fb7c4a0e6b2d839b94f322b Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 21 Oct 2020 16:07:42 +0200 Subject: [PATCH 1/2] Red circle when have 4 users during webrtc meet --- front/src/Connexion/ConnexionModels.ts | 3 ++- front/src/Connexion/RoomConnection.ts | 3 ++- front/src/Phaser/Game/GameScene.ts | 28 +++++++++++++++++++++++--- messages/messages.proto | 1 + 4 files changed, 30 insertions(+), 5 deletions(-) diff --git a/front/src/Connexion/ConnexionModels.ts b/front/src/Connexion/ConnexionModels.ts index d1d80aff..63d87566 100644 --- a/front/src/Connexion/ConnexionModels.ts +++ b/front/src/Connexion/ConnexionModels.ts @@ -73,7 +73,8 @@ export interface PositionInterface { export interface GroupCreatedUpdatedMessageInterface { position: PositionInterface, - groupId: number + groupId: number, + groupSize: number } export interface WebRtcStartMessageInterface { diff --git a/front/src/Connexion/RoomConnection.ts b/front/src/Connexion/RoomConnection.ts index 7c57558a..19d011ff 100644 --- a/front/src/Connexion/RoomConnection.ts +++ b/front/src/Connexion/RoomConnection.ts @@ -335,7 +335,8 @@ export class RoomConnection implements RoomConnection { return { groupId: message.getGroupid(), - position: position.toObject() + position: position.toObject(), + groupSize: message.getGroupsize() } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 03d79920..bcef8fc2 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -109,6 +109,7 @@ export class GameScene extends ResizableScene implements CenterListener { startX!: number; startY!: number; circleTexture!: CanvasTexture; + circleRedTexture!: CanvasTexture; pendingEvents: Queue = new Queue(); 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); } diff --git a/messages/messages.proto b/messages/messages.proto index 63fb6059..89353825 100644 --- a/messages/messages.proto +++ b/messages/messages.proto @@ -125,6 +125,7 @@ message BatchMessage { message GroupUpdateMessage { int32 groupId = 1; PointMessage position = 2; + int32 groupSize = 3; } message GroupDeleteMessage { From e97392139092ac6921f14ee8c40907ffc1c2ab1d Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Wed, 21 Oct 2020 17:22:17 +0200 Subject: [PATCH 2/2] Fix admin tags - Fix get size group - Fix admin tags - Fix texture already used --- back/src/Model/Group.ts | 4 ++++ back/src/Services/SocketManager.ts | 2 ++ front/src/Phaser/Game/GameScene.ts | 9 +++++++-- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/back/src/Model/Group.ts b/back/src/Model/Group.ts index 9afa9764..d3b042a6 100644 --- a/back/src/Model/Group.ts +++ b/back/src/Model/Group.ts @@ -117,4 +117,8 @@ export class Group implements Movable { this.leave(user); } } + + get getSize(){ + return this.users.size; + } } diff --git a/back/src/Services/SocketManager.ts b/back/src/Services/SocketManager.ts index 50bd149e..35f97c37 100644 --- a/back/src/Services/SocketManager.ts +++ b/back/src/Services/SocketManager.ts @@ -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); diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index bcef8fc2..c235d032 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -410,9 +410,14 @@ 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'); + } + + 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