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

Red circle when have 4 users during webrtc meet

back/src/Model/Group.ts

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

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);

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 {

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()
         }
     }
 

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<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);
         }

messages/messages.proto

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