discoverable

public/assets/interactables.json

@@ -11,6 +11,6 @@
     "touch": "This is what it feels like",
     "smell": "I smell something",
 
-    "discovered": false
+    "discovered": 0
   }
 ]

src/scenes/game/index.ts

@@ -96,6 +96,21 @@ export class Game extends Scene {
     );
   }
 
+  getInfo(title: string) {
+    let result;
+
+    const interactables = this.registry.get(
+      "interactables"
+    ) as InteractableInfo[];
+    interactables.forEach((info) => {
+      if (info.title === title) {
+        result = info;
+      }
+    });
+
+    return result;
+  }
+
   update(_: number, delta: number): void {
     this.movingLeft = this.cursors?.left.isDown || this.aKey.isDown;
     this.movingRight = this.cursors?.right.isDown || this.dKey.isDown;

src/scenes/game/interactable.ts

@@ -14,7 +14,7 @@ export type InteractableInfo = {
   touch: string;
   smell: string;
 
-  discovered: boolean;
+  discovered: number;
 };
 
 export class Interactable {

src/scenes/game/interaction-listener.ts

@@ -1,5 +1,5 @@
 import { Scene } from "phaser";
-import { Interactable } from "./interactable";
+import { Interactable, InteractableInfo } from "./interactable";
 
 export class InteractionListener {
   maxDistance = 500; // px
@@ -16,6 +16,18 @@ export class InteractionListener {
 
         if (target !== "" && currentAction === "") {
           this.scene.registry.set("action", action);
+
+          const interactableInfo = (
+            scene.registry.get("interactables") as InteractableInfo[]
+          ).map((info) => {
+            if (info.title === target) {
+              return {
+                ...info,
+                discovered: Math.min(3, info.discovered + 1),
+              };
+            }
+          });
+          scene.registry.set("interactables", interactableInfo);
         }
       });
     };

src/scenes/ui/info-display.ts

@@ -29,15 +29,14 @@ export class InfoDisplay extends UIContainer {
 
     const target = this.scene.registry.get("target") as string;
     const action = this.scene.registry.get("action") as string;
-    (this.scene as MainGame).interactableInfo.forEach((info) => {
-      if (info.title === target) {
-        this.drawText(
-          InfoDisplay.WIDTH / 2,
-          lineY + 4,
-          info[action as never]
-        ).setOrigin(0.5, 0);
-      }
-    });
+
+    if (target !== "" && action !== "") {
+      this.drawText(
+        InfoDisplay.WIDTH / 2,
+        lineY + 4,
+        ((this.scene as MainGame).getInfo(target) as never)[action as never]
+      ).setOrigin(0.5, 0);
+    }
   }
 
   subscribeToEvents() {

src/scenes/ui/menu.ts

@@ -2,6 +2,8 @@ import { Scene } from "phaser";
 import { UIContainer } from "./ui-container";
 import { screenSize } from "../../constants";
 import { onChanges } from "../../util";
+import { Game as MainGame } from "../game/index";
+import { InteractableInfo } from "../game/interactable";
 
 export class Menu extends UIContainer {
   static readonly WIDTH = 200;
@@ -20,11 +22,25 @@ export class Menu extends UIContainer {
     this.clear();
     this.drawRoundRect(0, 0, Menu.WIDTH, 195);
     this.drawText(Menu.WIDTH / 2, 10, "Item:").setOrigin(0.5, 0);
-    this.drawText(Menu.WIDTH / 2, 26 + 4, "?????????", 24).setOrigin(0.5, 0);
-    this.drawText(Menu.WIDTH / 2, 26 + 4 + 24 + 4, "Discovered: 0%").setOrigin(
-      0.5,
-      0
-    );
+
+    const target = this.scene.registry.get("target");
+    if (target !== "") {
+      const info = (this.scene as MainGame).getInfo(
+        target as string
+      ) as unknown as InteractableInfo;
+      console.log(info);
+      this.drawText(
+        Menu.WIDTH / 2,
+        26 + 4,
+        info.discovered === 3 ? info.title : "?????????",
+        24
+      ).setOrigin(0.5, 0);
+      this.drawText(
+        Menu.WIDTH / 2,
+        26 + 4 + 24 + 4,
+        "Discovered: " + info.discovered / 3 + "%"
+      ).setOrigin(0.5, 0);
+    }
 
     this.lineY = 26 + 4 + 24 + 4 + 24 + 2;
     this.drawLine(16, this.lineY, Menu.WIDTH - 16, this.lineY);
@@ -39,11 +55,13 @@ export class Menu extends UIContainer {
       const action = this.scene.registry.get("action");
       const target = this.scene.registry.get("target");
 
+      this.draw();
       this.setVisible(target !== "" && action === "");
     };
 
     onChanges(this.scene, "action", updateVisibility);
     onChanges(this.scene, "target", updateVisibility);
+    onChanges(this.scene, "interactables", updateVisibility);
   }
 
   drawAction(title: string, n: number) {