Red circle when have 4 users during webrtc meet

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();
@@ -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');
+                texture
-            sprite.setDisplayOrigin(48, 48);
+            );
+            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 {