Game: Highlight objects on Hover during Explore mode (#3089)

* game ui update so that objects in explore mode are highlighted

* formatting code

Author: yk-tuturu

.tool-versions

@@ -0,0 +1 @@
+nodejs v20.18.1

src/features/game/effects/GlowingObject.ts

@@ -88,6 +88,14 @@ export default class GlowingImage {
     this.blinkClearer?.();
   }
 
+  public hoverGlowStart() {
+    this.imageGlow.setAlpha(0.5);
+  }
+
+  public hoverGlowEnd() {
+    this.imageGlow.setAlpha(0);
+  }
+
   public getContainer() {
     return this.container;
   }

src/features/game/mode/explore/GameModeExplore.ts

@@ -103,7 +103,10 @@ class GameModeExplore implements IGameUI {
         if (!activatable.actionIds || !activatable.actionIds.length) {
           return;
         }
-        activatable.clickArea.on('pointerout', () => this.explorePointerOut());
+
+        activatable.clickArea.on('pointerout', () =>
+          this.explorePointerOut(activatable.interactionId)
+        );
         activatable.clickArea.on('pointerover', () =>
           this.explorePointerOver(activatable.interactionId)
         );
@@ -138,6 +141,8 @@ class GameModeExplore implements IGameUI {
    */
   private explorePointerOver(id: ItemId) {
     const hasTriggered = GameGlobalAPI.getInstance().hasTriggeredInteraction(id);
+    GameGlobalAPI.getInstance().objectHoverGlow(id, true);
+
     if (hasTriggered) {
       GameGlobalAPI.getInstance().setDefaultCursor(ExploreModeConstants.checked);
     } else {
@@ -149,8 +154,9 @@ class GameModeExplore implements IGameUI {
    * Function to be executed when user off hover upon interactable object/bbox.
    * It sets the cursor back to 'Explore' mode cursor.
    */
-  private explorePointerOut() {
+  private explorePointerOut(id: ItemId) {
     GameGlobalAPI.getInstance().setDefaultCursor(ExploreModeConstants.normal);
+    GameGlobalAPI.getInstance().objectHoverGlow(id, false);
   }
 
   /**
@@ -163,6 +169,7 @@ class GameModeExplore implements IGameUI {
    */
   private explorePointerUp(id: string) {
     GameGlobalAPI.getInstance().setDefaultCursor(Constants.defaultCursor);
+    GameGlobalAPI.getInstance().objectHoverGlow(id, false);
     GameGlobalAPI.getInstance().triggerInteraction(id);
     GameGlobalAPI.getInstance().setDefaultCursor(ExploreModeConstants.normal);
   }

src/features/game/objects/GameObjectManager.ts

@@ -79,6 +79,23 @@ class GameObjectManager implements StateObserver {
     }
   }
 
+  /**
+   * Apply glow effect on the object, for when it's hovered on
+   *
+   * @param objectId id of the object
+   */
+  public objectHoverGlow(objectId: ItemId, turnOn: boolean) {
+    const object = this.objects.get(objectId);
+    if (!object) {
+      return;
+    }
+    if (turnOn) {
+      (object.sprite as GlowingImage).hoverGlowStart();
+    } else {
+      (object.sprite as GlowingImage).hoverGlowEnd();
+    }
+  }
+
   /**
    * Create the object from the given object property.
    * Because we want this sprite to be activatable

src/features/game/scenes/gameManager/GameGlobalAPI.ts

@@ -135,6 +135,10 @@ class GameGlobalAPI {
     this.getGameManager().getObjectManager().makeObjectBlink(objectId, turnOn);
   }
 
+  public objectHoverGlow(objectId: ItemId, turnOn: boolean) {
+    this.getGameManager().getObjectManager().objectHoverGlow(objectId, turnOn);
+  }
+
   public setObjProperty(id: ItemId, newObjProp: ObjectProperty) {
     this.getGameManager().getStateManager().setObjProperty(id, newObjProp);
   }