Merge pull request #81 from thecodingmachine/display_groups

Adding the display of a circle around the group

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,16 @@
 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;
+import Texture = Phaser.Textures.Texture;
+import Sprite = Phaser.GameObjects.Sprite;
+import CanvasTexture = Phaser.Textures.CanvasTexture;
 
 export const GameSceneName = "GameScene";
 export enum Textures {
@@ -27,9 +32,10 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
     Layers : Array<Phaser.Tilemaps.StaticTilemapLayer>;
     Objects : Array<Phaser.Physics.Arcade.Sprite>;
     map: ITiledMap;
+    groups: Map<string, Sprite>
     startX = 704;// 22 case
     startY = 32; // 1 case
-
+    circleTexture: CanvasTexture;
 
     constructor() {
         super({
@@ -37,6 +43,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         });
         this.GameManager = gameManager;
         this.Terrains = [];
+        this.groups = new Map<string, Sprite>();
     }
 
     //hook preload scene
@@ -120,6 +127,19 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
 
         //initialise camera
         this.initCamera();
+
+
+        // Let's generate the circle for the group delimiter
+
+        this.circleTexture = this.textures.createCanvas('circleSprite', 96, 96);
+        let context = this.circleTexture.context;
+        context.beginPath();
+        context.arc(48, 48, 48, 0, 2 * Math.PI, false);
+        // context.lineWidth = 5;
+        context.strokeStyle = '#ffffff';
+        context.stroke();
+
+        this.circleTexture.refresh();
     }
 
     //todo: in a dedicated class/function?
@@ -277,4 +297,23 @@ 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(Math.round(groupPositionMessage.position.x), Math.round(groupPositionMessage.position.y));
+        } else {
+            // TODO: circle radius should not be hard stored
+            let sprite = new Sprite(this, Math.round(groupPositionMessage.position.x), Math.round(groupPositionMessage.position.y), 'circleSprite');
+            sprite.setDisplayOrigin(48, 48);
+            this.add.existing(sprite);
+            this.groups.set(groupId, sprite);
+        }
+    }
+
+    deleteGroup(groupId: string): void {
+        this.groups.get(groupId).destroy();
+        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();
     }
 }