interactions possible!

src/scenes/game/interaction-listener.ts

@@ -7,7 +7,19 @@ export class InteractionListener {
   constructor(
     private scene: Scene,
     private interactables: Interactable[]
-  ) {}
+  ) {
+    // Listen to key presses
+    if (scene.input.keyboard) {
+      scene.input.keyboard.on("keydown-E", () => {
+        const target = this.scene.registry.get("target");
+        const currentAction = this.scene.registry.get("action");
+
+        if (target && currentAction === "") {
+          this.scene.registry.set("action", "observe");
+        }
+      });
+    }
+  }
 
   update() {
     let closest: Interactable | undefined = undefined,

src/scenes/ui/info-display.ts

@@ -1,26 +1,39 @@
 import { Scene } from "phaser";
 import { UIContainer } from "./ui-container";
 import { screenSize } from "../../constants";
+import { onChanges } from "../../util";
 
 export class InfoDisplay extends UIContainer {
   static readonly WIDTH = 200;
 
   constructor(scene: Scene) {
     super(scene, screenSize.x / 2 - InfoDisplay.WIDTH / 2, 40);
+
+    this.draw();
+    this.setVisible(false);
+
+    this.subscribeToEvents();
   }
 
   draw() {
     this.clear();
     this.drawRoundRect(0, 0, InfoDisplay.WIDTH, 195);
-    this.drawText(InfoDisplay.WIDTH / 2, 10, "Info:").setOrigin(0.5, 0);
-    this.drawText(InfoDisplay.WIDTH / 2, 26 + 4, "?????????", 24).setOrigin(
-      0.5,
-      0
-    );
     this.drawText(
       InfoDisplay.WIDTH / 2,
-      26 + 4 + 24 + 4,
-      "Discovered: 0%"
+      10,
+      "You observe the item..."
     ).setOrigin(0.5, 0);
   }
+
+  subscribeToEvents() {
+    const updateVisibility = () => {
+      const action = this.scene.registry.get("action");
+      const target = this.scene.registry.get("target");
+
+      this.setVisible(target !== "" && action !== "");
+    };
+
+    onChanges(this.scene, "action", updateVisibility);
+    onChanges(this.scene, "target", updateVisibility);
+  }
 }

src/scenes/ui/menu.ts

@@ -35,9 +35,15 @@ export class Menu extends UIContainer {
   }
 
   subscribeToEvents() {
-    onChanges(this.scene, "target", (_: any, key: string, value: string) => {
-      this.setVisible(value !== "");
-    });
+    const updateVisibility = () => {
+      const action = this.scene.registry.get("action");
+      const target = this.scene.registry.get("target");
+
+      this.setVisible(target !== "" && action === "");
+    };
+
+    onChanges(this.scene, "action", updateVisibility);
+    onChanges(this.scene, "target", updateVisibility);
   }
 
   drawAction(title: string, n: number) {