Update ellipse to use canvas

- Create class Ellipse to use object sprite phaser

front/src/Phaser/Components/EllipseTexture.ts

@@ -0,0 +1,72 @@
+import Sprite = Phaser.GameObjects.Sprite;
+import {Scene} from "phaser";
+import Texture = Phaser.Textures.Texture;
+
+export const CIRCLE_ELLIPSE_WHITE = 'ellipseSprite-white';
+export const CIRCLE_ELLIPSE_RED = 'ellipseSprite-red';
+export const LINE_WIDTH = 2;
+export const RADIUS_X = 45;
+export const RADIUS_Y = 28;
+export const START_ANGLE = 0;
+export const END_ANGLE = 2 * Math.PI;
+export const STROKE_STYLE_WHITE = '#ffffff';
+export const STROKE_STYLE_RED = '#ff0000';
+
+export class EllipseTexture extends Sprite {
+
+    constructor(scene: Scene, x: number, y: number, public groupSize: number) {
+        super(
+            scene,
+            x,
+            y,
+            groupSize === 4 ? CIRCLE_ELLIPSE_RED : CIRCLE_ELLIPSE_WHITE
+        );
+
+        this.setDisplayOrigin(RADIUS_X, RADIUS_Y);
+        scene.add.existing(this);
+    }
+
+
+    public update(x: number, y: number, groupSize: number) {
+        this.x = x;
+        this.y = y;
+        this.groupSize = groupSize;
+    }
+
+    public static createEllipseCanvas(scene: Scene) {
+        // Let's generate the circle for the group delimiter
+        let circleElement = Object.values(scene.textures.list).find((object: Texture) => object.key === CIRCLE_ELLIPSE_WHITE);
+        if (circleElement) {
+            scene.textures.remove(CIRCLE_ELLIPSE_WHITE);
+        }
+
+        circleElement = Object.values(scene.textures.list).find((object: Texture) => object.key === CIRCLE_ELLIPSE_RED);
+        if (circleElement) {
+            scene.textures.remove(CIRCLE_ELLIPSE_RED);
+        }
+
+        //create white circle canvas use to create sprite
+        const circleTexture = scene.textures.createCanvas(CIRCLE_ELLIPSE_WHITE, (RADIUS_X * 2) + LINE_WIDTH , (RADIUS_Y * 2) + LINE_WIDTH);
+        const context = circleTexture.context;
+        context.lineWidth = LINE_WIDTH;
+        context.strokeStyle = STROKE_STYLE_WHITE;
+        context.fillStyle = STROKE_STYLE_WHITE+'2F';
+        context.beginPath();
+        context.ellipse(RADIUS_X + (LINE_WIDTH / 2), RADIUS_Y + (LINE_WIDTH / 2), RADIUS_X, RADIUS_Y, 0, 0,2 * Math.PI);
+        context.fill();
+        context.stroke();
+        circleTexture.refresh();
+
+        //create red circle canvas use to create sprite
+        const circleRedTexture = scene.textures.createCanvas(CIRCLE_ELLIPSE_RED, (RADIUS_X * 2) + LINE_WIDTH , (RADIUS_Y * 2) + LINE_WIDTH);
+        const contextRed = circleRedTexture.context;
+        contextRed.lineWidth = 2;
+        contextRed.strokeStyle = STROKE_STYLE_RED;
+        contextRed.fillStyle = STROKE_STYLE_RED+'2F';
+        contextRed.beginPath();
+        contextRed.ellipse(RADIUS_X + (LINE_WIDTH / 2), RADIUS_Y + (LINE_WIDTH / 2), RADIUS_X, RADIUS_Y, 0, 0,2 * Math.PI);
+        contextRed.fill();
+        contextRed.stroke();
+        circleRedTexture.refresh();
+    }
+}

front/src/Phaser/Game/GameScene.ts

@@ -54,6 +54,7 @@ import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMes
 import {ResizableScene} from "../Login/ResizableScene";
 import {Room} from "../../Connexion/Room";
 import {jitsiFactory} from "../../WebRtc/JitsiFactory";
+import {EllipseTexture} from "../Components/EllipseTexture";
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null
@@ -99,7 +100,7 @@ export class GameScene extends ResizableScene implements CenterListener {
     Layers!: Array<Phaser.Tilemaps.StaticTilemapLayer>;
     Objects!: Array<Phaser.Physics.Arcade.Sprite>;
     mapFile!: ITiledMap;
-    groups: Map<number, Sprite>;
+    groups: Map<number, EllipseTexture>;
     startX!: number;
     startY!: number;
     circleTexture!: CanvasTexture;
@@ -156,7 +157,7 @@ export class GameScene extends ResizableScene implements CenterListener {
 
         this.GameManager = gameManager;
         this.Terrains = [];
-        this.groups = new Map<number, Sprite>();
+        this.groups = new Map<number, EllipseTexture>();
         this.instance = room.getInstance();
 
         this.MapKey = MapUrlFile;
@@ -401,36 +402,8 @@ export class GameScene extends ResizableScene implements CenterListener {
         //initialise camera
         this.initCamera();
 
-        // Let's generate the circle for the group delimiter
-        let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
-        if (circleElement) {
-            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
-        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);
-        // context.lineWidth = 5;
-        context.strokeStyle = '#ffffff';
-        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();
+        //create canvas ellipse
+        EllipseTexture.createEllipseCanvas(this);
 
         // Let's pause the scene if the connection is not established yet
         if (this.connection === undefined) {
@@ -1132,21 +1105,37 @@ export class GameScene extends ResizableScene implements CenterListener {
     }
 
     private doShareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) {
-        //delete previous group
-        this.doDeleteGroup(groupPositionMessage.groupId);
-
-        // TODO: circle radius should not be hard stored
-        //create new group
-        const sprite = new Sprite(
-            this,
-            Math.round(groupPositionMessage.position.x),
-            Math.round(groupPositionMessage.position.y),
-            groupPositionMessage.groupSize === 4 ? 'circleSprite-red' : 'circleSprite-white'
-        );
-        sprite.setDisplayOrigin(48, 48);
-        this.add.existing(sprite);
-        this.groups.set(groupPositionMessage.groupId, sprite);
-        return sprite;
+        let ellipse = this.groups.get(groupPositionMessage.groupId);
+        if(!ellipse) {
+            ellipse = new EllipseTexture(
+                this,
+                Math.round(groupPositionMessage.position.x),
+                Math.round(groupPositionMessage.position.y),
+                groupPositionMessage.groupSize
+            );
+        }else {
+            if (
+                (groupPositionMessage.groupSize > 3 && ellipse.groupSize > 3)
+                || (groupPositionMessage.groupSize < 4 && ellipse.groupSize < 4)
+            ) {
+                ellipse.update(
+                    Math.round(groupPositionMessage.position.x),
+                    Math.round(groupPositionMessage.position.y),
+                    groupPositionMessage.groupSize
+                );
+            } else {
+                //delete previous group
+                this.doDeleteGroup(groupPositionMessage.groupId);
+                ellipse = new EllipseTexture(
+                    this,
+                    Math.round(groupPositionMessage.position.x),
+                    Math.round(groupPositionMessage.position.y),
+                    groupPositionMessage.groupSize
+                );
+            }
+        }
+        this.groups.set(groupPositionMessage.groupId, ellipse);
+        return ellipse;
     }
 
     deleteGroup(groupId: number): void {