outline color is decided from particular system level

front/src/Phaser/Entity/Character.ts

@@ -455,16 +455,16 @@ export abstract class Character extends Container implements OutlineableInterfac
         this.outlineColorStore.removeApiColor();
     }
 
-    public pointerOverOutline(): void {
+    public pointerOverOutline(color: number): void {
-        this.outlineColorStore.pointerOver();
+        this.outlineColorStore.pointerOver(color);
     }
 
     public pointerOutOutline(): void {
         this.outlineColorStore.pointerOut();
     }
 
-    public characterCloseByOutline(): void {
+    public characterCloseByOutline(color: number): void {
-        this.outlineColorStore.characterCloseBy();
+        this.outlineColorStore.characterCloseBy(color);
     }
 
     public characterFarAwayOutline(): void {

front/src/Phaser/Game/ActivatablesManager.ts

@@ -11,6 +11,8 @@ export class ActivatablesManager {
 
     private currentPlayer: Player;
 
+    private readonly outlineColor = 0xffff00;
+
     constructor(currentPlayer: Player) {
         this.currentPlayer = currentPlayer;
     }
@@ -27,7 +29,7 @@ export class ActivatablesManager {
         }
         this.selectedActivatableObjectByPointer = object;
         if (isOutlineable(this.selectedActivatableObjectByPointer)) {
-            this.selectedActivatableObjectByPointer?.pointerOverOutline();
+            this.selectedActivatableObjectByPointer?.pointerOverOutline(this.outlineColor);
         }
     }
 
@@ -37,7 +39,7 @@ export class ActivatablesManager {
         }
         this.selectedActivatableObjectByPointer = undefined;
         if (isOutlineable(this.selectedActivatableObjectByDistance)) {
-            this.selectedActivatableObjectByDistance?.characterCloseByOutline();
+            this.selectedActivatableObjectByDistance?.characterCloseByOutline(this.outlineColor);
         }
     }
 
@@ -60,7 +62,7 @@ export class ActivatablesManager {
         }
         this.selectedActivatableObjectByDistance = newNearestObject;
         if (isOutlineable(this.selectedActivatableObjectByDistance)) {
-            this.selectedActivatableObjectByDistance?.characterCloseByOutline();
+            this.selectedActivatableObjectByDistance?.characterCloseByOutline(this.outlineColor);
         }
     }
 

front/src/Phaser/Game/GameScene.ts

@@ -1737,6 +1737,12 @@ ${escapedMessage}
                     emoteMenuStore.openEmoteMenu();
                 }
             });
+            this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OVER, (pointer: Phaser.Input.Pointer) => {
+                this.CurrentPlayer.pointerOverOutline(0x00ffff);
+            });
+            this.CurrentPlayer.on(Phaser.Input.Events.POINTER_OUT, (pointer: Phaser.Input.Pointer) => {
+                this.CurrentPlayer.pointerOutOutline();
+            });
             this.CurrentPlayer.on(requestEmoteEventName, (emoteKey: string) => {
                 this.connection?.emitEmoteEvent(emoteKey);
                 analyticsClient.launchEmote(emoteKey);

front/src/Phaser/Game/OutlineableInterface.ts

@@ -3,8 +3,8 @@ export interface OutlineableInterface {
     removeFollowOutlineColor(): void;
     setApiOutlineColor(color: number): void;
     removeApiOutlineColor(): void;
-    pointerOverOutline(): void;
+    pointerOverOutline(color: number): void;
     pointerOutOutline(): void;
-    characterCloseByOutline(): void;
+    characterCloseByOutline(color: number): void;
     characterFarAwayOutline(): void;
 }

front/src/Stores/OutlineColorStore.ts

@@ -5,38 +5,36 @@ export function createColorStore() {
 
     let followColor: number | undefined = undefined;
     let apiColor: number | undefined = undefined;
+    let pointedByPointer: number | undefined = undefined;
+    let pointedByCharacter: number | undefined = undefined;
 
-    let pointedByPointer: boolean = false;
-    let pointedByCharacter: boolean = false;
 
     const updateColor = () => {
-        if (pointedByPointer || pointedByCharacter) {
+        console.log('update color');
-            set(0xffff00);
+        console.log(pointedByPointer, pointedByCharacter, followColor, apiColor);
-        } else {
+        set(pointedByPointer ?? pointedByCharacter ?? followColor ?? apiColor);
-            set(followColor ?? apiColor);
-        }
     };
 
     return {
         subscribe,
 
-        pointerOver() {
+        pointerOver(color: number) {
-            pointedByPointer = true;
+            pointedByPointer = color;
             updateColor();
         },
 
         pointerOut() {
-            pointedByPointer = false;
+            pointedByPointer = undefined;
             updateColor();
         },
 
-        characterCloseBy() {
+        characterCloseBy(color: number) {
-            pointedByCharacter = true;
+            pointedByCharacter = color;
             updateColor();
         },
 
         characterFarAway() {
-            pointedByCharacter = false;
+            pointedByCharacter = undefined;
             updateColor();
         },