Adding the display of a circle around the group

This PR adds the display of a circle around groups. This is useful to view where you need to go to speak to someone but also to debug.

Note: implementation is suboptimal, relying on a "graphics" object that is known to be slow. In the future, we need to use a circle as a sprite instead.

front/src/Connexion.ts

@@ -11,7 +11,9 @@ enum EventMessage{
     JOIN_ROOM = "join-room",
     USER_POSITION = "user-position",
     MESSAGE_ERROR = "message-error",
-    WEBRTC_DISCONNECT = "webrtc-disconect"
+    WEBRTC_DISCONNECT = "webrtc-disconect",
+    GROUP_CREATE_UPDATE = "group-create-update",
+    GROUP_DELETE = "group-delete",
 }
 
 class Message {
@@ -122,6 +124,16 @@ class ListMessageUserPosition {
     }
 }
 
+export interface PositionInterface {
+    x: number,
+    y: number
+}
+
+export interface GroupCreatedUpdatedMessageInterface {
+    position: PositionInterface,
+    groupId: string
+}
+
 export interface ConnexionInterface {
     socket: any;
     token: string;
@@ -184,6 +196,9 @@ export class Connexion implements ConnexionInterface {
 
                 this.errorMessage();
 
+                this.groupUpdatedOrCreated();
+                this.groupDeleted();
+
                 return this;
             })
             .catch((err) => {
@@ -254,6 +269,19 @@ export class Connexion implements ConnexionInterface {
         });
     }
 
+    private groupUpdatedOrCreated(): void {
+        this.socket.on(EventMessage.GROUP_CREATE_UPDATE, (groupCreateUpdateMessage: GroupCreatedUpdatedMessageInterface) => {
+            //console.log('Group ', groupCreateUpdateMessage.groupId, " position :", groupCreateUpdateMessage.position.x, groupCreateUpdateMessage.position.y)
+            this.GameManager.shareGroupPosition(groupCreateUpdateMessage);
+        })
+    }
+
+    private groupDeleted(): void {
+        this.socket.on(EventMessage.GROUP_DELETE, (groupId: string) => {
+            this.GameManager.deleteGroup(groupId);
+        })
+    }
+
     sendWebrtcSignal(signal: any, roomId: string, userId? : string, receiverId? : string) {
         return this.socket.emit(EventMessage.WEBRTC_SIGNAL, JSON.stringify({
             userId: userId ? userId : this.userId,
@@ -280,4 +308,4 @@ export class Connexion implements ConnexionInterface {
     disconnectMessage(callback: Function): void {
         this.socket.on(EventMessage.WEBRTC_DISCONNECT, callback);
     }
-}
+}

front/src/Phaser/Game/GameManager.ts

@@ -1,6 +1,11 @@
 import {GameScene} from "./GameScene";
 import {ROOM} from "../../Enum/EnvironmentVariable"
-import {Connexion, ConnexionInterface, ListMessageUserPositionInterface} from "../../Connexion";
+import {
+    Connexion,
+    ConnexionInterface,
+    GroupCreatedUpdatedMessageInterface,
+    ListMessageUserPositionInterface
+} from "../../Connexion";
 import {SimplePeerInterface, SimplePeer} from "../../WebRtc/SimplePeer";
 import {LogincScene} from "../Login/LogincScene";
 
@@ -66,6 +71,31 @@ export class GameManager {
         }
     }
 
+    /**
+     * Share group position in game
+     */
+    shareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface): void {
+        if (this.status === StatusGameManagerEnum.IN_PROGRESS) {
+            return;
+        }
+        try {
+            this.currentGameScene.shareGroupPosition(groupPositionMessage)
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    deleteGroup(groupId: string): void {
+        if (this.status === StatusGameManagerEnum.IN_PROGRESS) {
+            return;
+        }
+        try {
+            this.currentGameScene.deleteGroup(groupId)
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     getPlayerName(): string {
         return this.playerName;
     }

front/src/Phaser/Game/GameScene.ts

@@ -1,11 +1,13 @@
 import {GameManager, gameManager, HasMovedEvent, StatusGameManagerEnum} from "./GameManager";
-import {MessageUserPositionInterface} from "../../Connexion";
+import {GroupCreatedUpdatedMessageInterface, MessageUserPositionInterface} from "../../Connexion";
 import {CurrentGamerInterface, GamerInterface, hasMovedEventName, Player} from "../Player/Player";
 import {DEBUG_MODE, RESOLUTION, ROOM, ZOOM_LEVEL} from "../../Enum/EnvironmentVariable";
 import Tile = Phaser.Tilemaps.Tile;
 import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap";
 import {cypressAsserter} from "../../Cypress/CypressAsserter";
 import {PLAYER_RESOURCES} from "../Entity/PlayableCaracter";
+import Circle = Phaser.Geom.Circle;
+import Graphics = Phaser.GameObjects.Graphics;
 
 export const GameSceneName = "GameScene";
 export enum Textures {
@@ -27,9 +29,12 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
     Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
     Objects : Array<Phaser.Physics.Arcade.Sprite>;
     map: ITiledMap;
+    groups: Map<string, Circle>
     startX = 704;// 22 case
     startY = 32; // 1 case
 
+    // Note: graphics object is costly to generate. We should find another way (maybe sprite based way to draw circles)
+    graphics: Graphics;
 
     constructor() {
         super({
@@ -37,6 +42,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         });
         this.GameManager = gameManager;
         this.Terrains = [];
+        this.groups = new Map<string, Circle>();
     }
 
     //hook preload scene
@@ -115,6 +121,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
 
         //initialise camera
         this.initCamera();
+
+        this.graphics = this.add.graphics();
     }
 
     //todo: in a dedicated class/function?
@@ -199,6 +207,13 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
      */
     update(time: number, delta: number) : void {
         this.CurrentPlayer.moveUser(delta);
+
+        // Also, let's redraw the circle (can be costly, we need to change this!)
+        this.graphics.clear();
+        this.graphics.lineStyle(1, 0x00ff00, 0.4);
+        this.groups.forEach((circle: Circle) => {
+            this.graphics.strokeCircleShape(circle);
+        })
     }
 
     /**
@@ -272,4 +287,21 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
             CurrentPlayer.say("Hello, how are you ? ");
         });
     }
+
+    shareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) {
+        let groupId = groupPositionMessage.groupId;
+
+        if (this.groups.has(groupId)) {
+            this.groups.get(groupId).setPosition(groupPositionMessage.position.x, groupPositionMessage.position.y);
+        } else {
+            //console.log('Adding group ', groupId, ' to the scene');
+            // TODO: circle radius should not be hard stored
+            this.groups.set(groupId, new Circle(groupPositionMessage.position.x, groupPositionMessage.position.y, 48));
+        }
+    }
+
+    deleteGroup(groupId: string): void {
+        //console.log('Deleting group ', groupId);
+        this.groups.delete(groupId);
+    }
 }

front/src/Phaser/Player/Animation.ts

@@ -53,7 +53,6 @@ export const playAnimation = (Player : Phaser.GameObjects.Sprite, direction : st
     if (direction !== PlayerAnimationNames.None && (!Player.anims.currentAnim || Player.anims.currentAnim.key !== direction)) {
         Player.anims.play(direction);
     } else if (direction === PlayerAnimationNames.None && Player.anims.currentAnim) {
-        //Player.anims.currentAnim.destroy();
         Player.anims.stop();
     }
 }