interactables are now researchable

src/scenes/game/interactables/interaction-listener.ts

@@ -17,6 +17,16 @@ export class InteractionListener {
         const currentAction = this.scene.registry.get("action");
 
         if (target !== "" && currentAction === "") {
+          // if researching, ensure the interactable is discovered
+          if (action === "research") {
+            if (store.getDiscovered(target) !== 100) {
+              notification.displayNotification(
+                "You must discover ?????? before you can research it!"
+              );
+              return;
+            }
+          }
+
           this.scene.registry.set("action", action);
 
           const wasDiscovered = store.getDiscovered(target);

src/scenes/ui/menu.ts

@@ -52,7 +52,11 @@ export class Menu extends UIContainer {
     this.drawAction("[E] Observe", 0);
     this.drawAction("[F] Touch", 1);
     this.drawAction("[Q] Smell", 2);
-    this.drawAction("[R] Research " + (discovered === 100 ? "🔓" : "🔒"), 3);
+    this.drawAction(
+      "[R] Research " + (discovered === 100 ? "" : "🔒"),
+      3,
+      discovered !== 100
+    );
   }
 
   subscribeToEvents() {
@@ -69,11 +73,14 @@ export class Menu extends UIContainer {
     this.store.changed("interactables", updateVisibility);
   }
 
-  drawAction(title: string, n: number) {
-    this.drawText(Menu.WIDTH / 2, this.lineY + 8 + n * 30, title, 22).setOrigin(
-      0.5,
-      0
-    );
+  drawAction(title: string, n: number, disabled: boolean = false) {
+    this.drawText(
+      Menu.WIDTH / 2,
+      this.lineY + 8 + n * 30,
+      title,
+      22,
+      disabled ? "gray" : "black"
+    ).setOrigin(0.5, 0);
   }
 
   update() {

src/scenes/ui/notification.ts

@@ -5,24 +5,44 @@ import { screenSize } from "../../constants";
 export class Notification extends UIContainer {
   static readonly WIDTH = 400;
   static readonly HEIGHT = 50;
+  static readonly PADDING = 16;
 
   private messageIndex = 0;
 
   constructor(scene: MainGame) {
-    const padding = 16;
-    super(scene, screenSize.x - Notification.WIDTH - padding, padding);
+    super(scene, screenSize.x, Notification.PADDING);
   }
 
   draw(message: string = "") {
     this.clear();
 
-    this.drawRoundRect(0, 0, Notification.WIDTH, Notification.HEIGHT);
-
-    this.drawText(
-      Notification.WIDTH / 2,
-      Notification.HEIGHT / 2,
-      message
-    ).setOrigin(0.5, 0.5);
+    const textObj = new Phaser.GameObjects.Text(
+      this.scene,
+      this.offsetX - 48,
+      Notification.HEIGHT / 2 + Notification.PADDING,
+      message,
+      {
+        fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif',
+        fontSize: "20px",
+      }
+    )
+      .setOrigin(1, 0.5)
+      .setColor("black");
+    this.children.push(textObj);
+    this.layer.add(textObj);
+
+    this.drawRoundRect(
+      -textObj.width - 64,
+      0,
+      textObj.width + 32,
+      Notification.HEIGHT
+    );
+
+    // this.drawText(
+    //   Notification.WIDTH / 2,
+    //   Notification.HEIGHT / 2,
+    //   message
+    // ).setOrigin(0.5, 0.5);
   }
 
   displayNotification(message: string) {