From dc0f3feabfc12fb1e7c046c19070917be71bb289 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 22 Jun 2021 17:15:18 +0200
Subject: [PATCH] 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 | 21 +++++++++++++++++++++
 front/src/Phaser/Game/DirtyScene.ts  |  5 +++++
 2 files changed, 26 insertions(+)

diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts
index 2ff66178..8a82afc3 100644
--- a/front/src/Phaser/Entity/Character.ts
+++ b/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);
diff --git a/front/src/Phaser/Game/DirtyScene.ts b/front/src/Phaser/Game/DirtyScene.ts
index 3e1f3cdf..70cbb127 100644
--- a/front/src/Phaser/Game/DirtyScene.ts
+++ b/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;
     }