diff --git a/front/src/Interfaces/UserInputHandlerInterface.ts b/front/src/Interfaces/UserInputHandlerInterface.ts index cf7b2f1c..2a8c6b3e 100644 --- a/front/src/Interfaces/UserInputHandlerInterface.ts +++ b/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; } diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index 5ec031bd..b411eee7 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/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 { - this.outlineColorStore.pointerOver(); + public pointerOverOutline(color: number): void { + this.outlineColorStore.pointerOver(color); } public pointerOutOutline(): void { this.outlineColorStore.pointerOut(); } - public characterCloseByOutline(): void { - this.outlineColorStore.characterCloseBy(); + public characterCloseByOutline(color: number): void { + this.outlineColorStore.characterCloseBy(color); } public characterFarAwayOutline(): void { diff --git a/front/src/Phaser/Game/ActivatablesManager.ts b/front/src/Phaser/Game/ActivatablesManager.ts index 60e967d9..74c637d7 100644 --- a/front/src/Phaser/Game/ActivatablesManager.ts +++ b/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 { - this.activatableObjectsDistances.set( - object, - MathUtils.distanceBetween(this.currentPlayer.getPosition(), object.getPosition()) - ); + public isSelectingByDistanceEnabled(): boolean { + return this.canSelectByDistance; } } diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 242d97c8..e7242f90 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/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); diff --git a/front/src/Phaser/Game/OutlineableInterface.ts b/front/src/Phaser/Game/OutlineableInterface.ts index bee560cc..7112fe84 100644 --- a/front/src/Phaser/Game/OutlineableInterface.ts +++ b/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; } diff --git a/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts b/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts index 4d9ac8a9..fc9e83cf 100644 --- a/front/src/Phaser/UserInput/GameSceneUserInputHandler.ts +++ b/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(); - if (activatable && activatable.isActivatable()) { + const activatableManager = this.gameScene.getActivatablesManager(); + 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(); + } } diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index 112ab0e5..e7f814b9 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/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 { diff --git a/front/src/Stores/LayoutManagerStore.ts b/front/src/Stores/LayoutManagerStore.ts index b6f428aa..e0f8d955 100644 --- a/front/src/Stores/LayoutManagerStore.ts +++ b/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 { diff --git a/front/src/Stores/OutlineColorStore.ts b/front/src/Stores/OutlineColorStore.ts index a35cc9c9..8ecd7293 100644 --- a/front/src/Stores/OutlineColorStore.ts +++ b/front/src/Stores/OutlineColorStore.ts @@ -5,38 +5,33 @@ export function createColorStore() { let followColor: number | undefined = undefined; let apiColor: number | undefined = undefined; - - let pointedByPointer: boolean = false; - let pointedByCharacter: boolean = false; + let pointedByPointer: number | undefined = undefined; + let pointedByCharacter: number | undefined = undefined; const updateColor = () => { - if (pointedByPointer || pointedByCharacter) { - set(0xffff00); - } else { - set(followColor ?? apiColor); - } + set(pointedByPointer ?? pointedByCharacter ?? followColor ?? apiColor); }; return { subscribe, - pointerOver() { - pointedByPointer = true; + pointerOver(color: number) { + pointedByPointer = color; updateColor(); }, pointerOut() { - pointedByPointer = false; + pointedByPointer = undefined; updateColor(); }, - characterCloseBy() { - pointedByCharacter = true; + characterCloseBy(color: number) { + pointedByCharacter = color; updateColor(); }, characterFarAway() { - pointedByCharacter = false; + pointedByCharacter = undefined; updateColor(); }, diff --git a/yarn.lock b/yarn.lock index b9698f61..adbed748 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,7 @@ # yarn lockfile v1 -"husky@^6.0.0": - "resolved" "https://registry.npmjs.org/husky/-/husky-6.0.0.tgz" - "version" "6.0.0" +husky@^7.0.1: + version "7.0.4" + resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535" + integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==