Merge pull request #1827 from thecodingmachine/activatable-fixes

Activatable fixes

front/src/Interfaces/UserInputHandlerInterface.ts

@@ -9,4 +9,7 @@ export interface UserInputHandlerInterface {
     handlePointerUpEvent: (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]) => void;
     handlePointerDownEvent: (pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]) => void;
     handleSpaceKeyUpEvent: (event: Event) => Event;
+
+    addSpaceEventListener: (callback: Function) => void;
+    removeSpaceEventListner: (callback: Function) => void;
 }

front/src/Phaser/Entity/Character.ts

@@ -159,6 +159,27 @@ export abstract class Character extends Container implements OutlineableInterfac
         return { x: this.x, y: this.y };
     }
 
+    /**
+     * Returns position based on where player is currently facing
+     * @param shift How far from player should the point of interest be.
+     */
+    public getDirectionalActivationPosition(shift: number): { x: number; y: number } {
+        switch (this.lastDirection) {
+            case PlayerAnimationDirections.Down: {
+                return { x: this.x, y: this.y + shift };
+            }
+            case PlayerAnimationDirections.Left: {
+                return { x: this.x - shift, y: this.y };
+            }
+            case PlayerAnimationDirections.Right: {
+                return { x: this.x + shift, y: this.y };
+            }
+            case PlayerAnimationDirections.Up: {
+                return { x: this.x, y: this.y - shift };
+            }
+        }
+    }
+
     public getObjectToOutline(): Phaser.GameObjects.GameObject {
         return this.playerNameText;
     }
@@ -455,16 +476,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,11 @@ export class ActivatablesManager {
 
     private currentPlayer: Player;
 
+    private canSelectByDistance: boolean = true;
+
+    private readonly outlineColor = 0xffff00;
+    private readonly directionalActivationPositionShift = 50;
+
     constructor(currentPlayer: Player) {
         this.currentPlayer = currentPlayer;
     }
@@ -27,7 +32,7 @@ export class ActivatablesManager {
         }
         this.selectedActivatableObjectByPointer = object;
         if (isOutlineable(this.selectedActivatableObjectByPointer)) {
-            this.selectedActivatableObjectByPointer?.pointerOverOutline();
+            this.selectedActivatableObjectByPointer?.pointerOverOutline(this.outlineColor);
         }
     }
 
@@ -37,7 +42,7 @@ export class ActivatablesManager {
         }
         this.selectedActivatableObjectByPointer = undefined;
         if (isOutlineable(this.selectedActivatableObjectByDistance)) {
-            this.selectedActivatableObjectByDistance?.characterCloseByOutline();
+            this.selectedActivatableObjectByDistance?.characterCloseByOutline(this.outlineColor);
         }
     }
 
@@ -46,6 +51,9 @@ export class ActivatablesManager {
     }
 
     public deduceSelectedActivatableObjectByDistance(): void {
+        if (!this.canSelectByDistance) {
+            return;
+        }
         const newNearestObject = this.findNearestActivatableObject();
         if (this.selectedActivatableObjectByDistance === newNearestObject) {
             return;
@@ -60,10 +68,42 @@ export class ActivatablesManager {
         }
         this.selectedActivatableObjectByDistance = newNearestObject;
         if (isOutlineable(this.selectedActivatableObjectByDistance)) {
-            this.selectedActivatableObjectByDistance?.characterCloseByOutline();
+            this.selectedActivatableObjectByDistance?.characterCloseByOutline(this.outlineColor);
         }
     }
 
+    public updateActivatableObjectsDistances(objects: ActivatableInterface[]): void {
+        const currentPlayerPos = this.currentPlayer.getDirectionalActivationPosition(
+            this.directionalActivationPositionShift
+        );
+        for (const object of objects) {
+            const distance = MathUtils.distanceBetween(currentPlayerPos, object.getPosition());
+            this.activatableObjectsDistances.set(object, distance);
+        }
+    }
+
+    public updateDistanceForSingleActivatableObject(object: ActivatableInterface): void {
+        this.activatableObjectsDistances.set(
+            object,
+            MathUtils.distanceBetween(
+                this.currentPlayer.getDirectionalActivationPosition(this.directionalActivationPositionShift),
+                object.getPosition()
+            )
+        );
+    }
+
+    public disableSelectingByDistance(): void {
+        this.canSelectByDistance = false;
+        if (isOutlineable(this.selectedActivatableObjectByDistance)) {
+            this.selectedActivatableObjectByDistance?.characterFarAwayOutline();
+        }
+        this.selectedActivatableObjectByDistance = undefined;
+    }
+
+    public enableSelectingByDistance(): void {
+        this.canSelectByDistance = true;
+    }
+
     private findNearestActivatableObject(): ActivatableInterface | undefined {
         let shortestDistance: number = Infinity;
         let closestObject: ActivatableInterface | undefined = undefined;
@@ -76,18 +116,8 @@ export class ActivatablesManager {
         }
         return closestObject;
     }
-    public updateActivatableObjectsDistances(objects: ActivatableInterface[]): void {
-        const currentPlayerPos = this.currentPlayer.getPosition();
-        for (const object of objects) {
-            const distance = MathUtils.distanceBetween(currentPlayerPos, object.getPosition());
-            this.activatableObjectsDistances.set(object, distance);
-        }
-    }
 
-    public updateDistanceForSingleActivatableObject(object: ActivatableInterface): void {
+    public isSelectingByDistanceEnabled(): boolean {
-        this.activatableObjectsDistances.set(
+        return this.canSelectByDistance;
-            object,
-            MathUtils.distanceBetween(this.currentPlayer.getPosition(), object.getPosition())
-        );
     }
 }

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/Phaser/UserInput/GameSceneUserInputHandler.ts

@@ -53,10 +53,20 @@ export class GameSceneUserInputHandler implements UserInputHandlerInterface {
     public handlePointerDownEvent(pointer: Phaser.Input.Pointer, gameObjects: Phaser.GameObjects.GameObject[]): void {}
 
     public handleSpaceKeyUpEvent(event: Event): Event {
-        const activatable = this.gameScene.getActivatablesManager().getSelectedActivatableObject();
+        const activatableManager = this.gameScene.getActivatablesManager();
-        if (activatable && activatable.isActivatable()) {
+        const activatable = activatableManager.getSelectedActivatableObject();
+        if (activatable && activatable.isActivatable() && activatableManager.isSelectingByDistanceEnabled()) {
             activatable.activate();
         }
         return event;
     }
+
+    public addSpaceEventListener(callback: Function): void {
+        this.gameScene.input.keyboard.addListener("keyup-SPACE", callback);
+        this.gameScene.getActivatablesManager().disableSelectingByDistance();
+    }
+    public removeSpaceEventListner(callback: Function): void {
+        this.gameScene.input.keyboard.removeListener("keyup-SPACE", callback);
+        this.gameScene.getActivatablesManager().enableSelectingByDistance();
+    }
 }

front/src/Phaser/UserInput/UserInputManager.ts

@@ -223,10 +223,10 @@ export class UserInputManager {
     }
 
     addSpaceEventListner(callback: Function) {
-        this.scene.input.keyboard.addListener("keyup-SPACE", callback);
+        this.userInputHandler.addSpaceEventListener(callback);
     }
     removeSpaceEventListner(callback: Function) {
-        this.scene.input.keyboard.removeListener("keyup-SPACE", callback);
+        this.userInputHandler.removeSpaceEventListner(callback);
     }
 
     destroy(): void {

front/src/Stores/LayoutManagerStore.ts

@@ -1,4 +1,5 @@
 import { derived, writable } from "svelte/store";
+import type { ActivatablesManager } from "../Phaser/Game/ActivatablesManager";
 import type { UserInputManager } from "../Phaser/UserInput/UserInputManager";
 
 export interface LayoutManagerAction {

front/src/Stores/OutlineColorStore.ts

@@ -5,38 +5,33 @@ export function createColorStore() {
 
     let followColor: number | undefined = undefined;
     let apiColor: number | undefined = undefined;
-
+    let pointedByPointer: number | undefined = undefined;
-    let pointedByPointer: boolean = false;
+    let pointedByCharacter: number | undefined = undefined;
-    let pointedByCharacter: boolean = false;
 
     const updateColor = () => {
-        if (pointedByPointer || pointedByCharacter) {
+        set(pointedByPointer ?? pointedByCharacter ?? followColor ?? apiColor);
-            set(0xffff00);
-        } else {
-            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();
         },
 

yarn.lock

@@ -2,6 +2,7 @@
 # yarn lockfile v1
 
 
-"husky@^6.0.0":
+husky@^7.0.1:
-  "resolved" "https://registry.npmjs.org/husky/-/husky-6.0.0.tgz"
+  version "7.0.4"
-  "version" "6.0.0"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
+  integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==