Putting an outline on the character name

In the future, we might want to put an outline on the whole character body but this is harder as the body is actually a container and so we would need to turn this container into a sprite first.

front/src/Phaser/Entity/Character.ts

@@ -8,6 +8,8 @@ import {Companion} from "../Companion/Companion";
 import type {GameScene} from "../Game/GameScene";
 import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
 import {waScaleManager} from "../Services/WaScaleManager";
+import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
+import * as Phaser from "phaser";
 
 const playerNameY = - 25;
 
@@ -32,6 +34,7 @@ export abstract class Character extends Container {
     public companion?: Companion;
     private emote: Phaser.GameObjects.Sprite | null = null;
     private emoteTween: Phaser.Tweens.Tween|null = null;
+    scene: GameScene;
 
     constructor(scene: GameScene,
                 x: number,
@@ -46,6 +49,7 @@ export abstract class Character extends Container {
                 companionTexturePromise?: Promise<string>
     ) {
         super(scene, x, y/*, texture, frame*/);
+        this.scene = scene;
         this.PlayerValue = name;
         this.invisible = true
 
@@ -67,6 +71,19 @@ export abstract class Character extends Container {
                 hitAreaCallback: Phaser.Geom.Circle.Contains, //eslint-disable-line @typescript-eslint/unbound-method
                 useHandCursor: true,
             });
+
+            this.on('pointerover',() => {
+                this.getOutlinePlugin()?.add(this.playerName, {
+                    thickness: 2,
+                    outlineColor: 0xffff00
+                });
+                this.scene.markDirty();
+            });
+            this.on('pointerout',() => {
+                this.getOutlinePlugin()?.remove(this.playerName);
+                this.scene.markDirty();
+            })
+
         }
 
         scene.add.existing(this);
@@ -86,6 +103,10 @@ export abstract class Character extends Container {
         }
     }
 
+    private getOutlinePlugin(): OutlinePipelinePlugin|undefined {
+        return this.scene.plugins.get('rexOutlinePipeline') as unknown as OutlinePipelinePlugin|undefined;
+    }
+
     public addCompanion(name: string, texturePromise?: Promise<string>): void {
         if (typeof texturePromise !== 'undefined') {
             this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);

front/src/Phaser/Game/DirtyScene.ts

@@ -4,6 +4,7 @@ import Events = Phaser.Scenes.Events;
 import AnimationEvents = Phaser.Animations.Events;
 import StructEvents = Phaser.Structs.Events;
 import {SKIP_RENDER_OPTIMIZATIONS} from "../../Enum/EnvironmentVariable";
+import Phaser from "phaser";
 
 /**
  * A scene that can track its dirty/pristine state.
@@ -69,6 +70,10 @@ export abstract class DirtyScene extends ResizableScene {
         return this.dirty || this.objectListChanged;
     }
 
+    public markDirty(): void {
+        this.events.once(Phaser.Scenes.Events.POST_UPDATE, () => this.dirty = true);
+    }
+
     public onResize(): void {
         this.objectListChanged = true;
     }