visible indicator for hero. Using images in order to fix graphic circles glitching out during movement

front/src/Phaser/Components/PlayerStatusDot.ts

@@ -1,36 +1,46 @@
 import { Easing } from "../../types";
 
-export class PlayerStatusDot extends Phaser.GameObjects.Container {
-    private graphics: Phaser.GameObjects.Graphics;
+export enum PlayerStatus {
+    Online = "Online",
+    Silenced = "Silenced",
+    Away = "Away",
+}
 
-    private away: boolean;
+export class PlayerStatusDot extends Phaser.GameObjects.Container {
+    private statusImage: Phaser.GameObjects.Image;
+    private statusImageOutline: Phaser.GameObjects.Image;
+
+    private status: PlayerStatus;
 
     private readonly COLORS = {
-        // online: 0x00ff00,
-        // away: 0xffff00,
         online: 0x8cc43f,
         onlineOutline: 0x427a25,
         away: 0xf5931e,
         awayOutline: 0x875d13,
+        silenced: 0xe74c3c,
+        silencedOutline: 0xc0392b,
     };
 
     constructor(scene: Phaser.Scene, x: number, y: number) {
         super(scene, x, y);
 
-        this.away = false;
+        this.status = PlayerStatus.Online;
+
+        this.statusImage = this.scene.add.image(0, 0, "iconStatusIndicatorInside");
+        this.statusImageOutline = this.scene.add.image(0, 0, "iconStatusIndicatorOutline");
+
+        this.add([this.statusImage, this.statusImageOutline]);
 
-        this.graphics = this.scene.add.graphics();
-        this.add(this.graphics);
         this.redraw();
 
         this.scene.add.existing(this);
     }
 
-    public setAway(away: boolean = true, instant: boolean = false): void {
-        if (this.away === away) {
+    public setStatus(status: PlayerStatus, instant: boolean = false): void {
+        if (this.status === status) {
             return;
         }
-        this.away = away;
+        this.status = status;
         if (instant) {
             this.redraw();
         } else {
@@ -56,10 +66,19 @@ export class PlayerStatusDot extends Phaser.GameObjects.Container {
     }
 
     private redraw(): void {
-        this.graphics.clear();
-        this.graphics.fillStyle(this.away ? this.COLORS.away : this.COLORS.online);
-        this.graphics.lineStyle(1, this.away ? this.COLORS.awayOutline : this.COLORS.onlineOutline);
-        this.graphics.fillCircle(0, 0, 3);
-        this.graphics.strokeCircle(0, 0, 3);
+        const colors = this.getColors();
+        this.statusImage.setTintFill(colors.filling);
+        this.statusImageOutline.setTintFill(colors.outline);
+    }
+
+    private getColors(): { filling: number; outline: number } {
+        switch (this.status) {
+            case PlayerStatus.Online:
+                return { filling: this.COLORS.online, outline: this.COLORS.onlineOutline };
+            case PlayerStatus.Away:
+                return { filling: this.COLORS.away, outline: this.COLORS.awayOutline };
+            case PlayerStatus.Silenced:
+                return { filling: this.COLORS.silenced, outline: this.COLORS.silencedOutline };
+        }
     }
 }