6 files changed, 60 insertions, 7 deletions
diff --git a/src/engine/TheAbstractionEngine.ts b/src/engine/TheAbstractionEngine.ts
index 78d4f88..15ef011 100644
--- a/src/engine/TheAbstractionEngine.ts
+++ b/src/engine/TheAbstractionEngine.ts
@@ -39,9 +39,9 @@ export class TheAbstractionEngine {
     const player = new Player();
     this.game.addEntity(player);
 
-    const box = new FunctionBox({ x: 3, y: 1 });
+    const box = new FunctionBox({ x: 3, y: 1 }, "λ x . (x)");
     this.game.addEntity(box);
-    const box2 = new FunctionBox({ x: 4, y: 1 });
+    const box2 = new FunctionBox({ x: 4, y: 1 }, "λ x . (x)");
     this.game.addEntity(box2);
   }
 
diff --git a/src/engine/config/constants.ts b/src/engine/config/constants.ts
index 5dcd60c..288513a 100644
--- a/src/engine/config/constants.ts
+++ b/src/engine/config/constants.ts
@@ -54,4 +54,6 @@ export namespace Miscellaneous {
 
   export const GRID_CELL_WIDTH = Math.floor(WIDTH / GRID_COLUMNS);
   export const GRID_CELL_HEIGHT = Math.floor(HEIGHT / GRID_ROWS);
+
+  export const MODAL_ID = "modal";
 }
diff --git a/src/engine/entities/FunctionBox.ts b/src/engine/entities/FunctionBox.ts
index 393514e..57eeedb 100644
--- a/src/engine/entities/FunctionBox.ts
+++ b/src/engine/entities/FunctionBox.ts
@@ -8,6 +8,7 @@ import {
   Sprite,
 } from "../components";
 import { Coord2D } from "../interfaces";
+import { openModal, closeModal } from "../utils";
 
 export class FunctionBox extends Entity {
   private static spriteSpec: SpriteSpec = SPRITE_SPECS.get(
@@ -52,15 +53,23 @@ export class FunctionBox extends Entity {
 
     this.hooks.set(ComponentNames.Highlight, {
       add: () => {
-        this.addComponent(new Interactable(() => this.viewInsides()));
+        let modalOpen = false;
+        const interaction = () => {
+          if (modalOpen) {
+            modalOpen = false;
+            closeModal();
+            return;
+          }
+          modalOpen = true;
+          openModal(this.code);
+        };
+
+        this.addComponent(new Interactable(interaction));
       },
       remove: () => {
+        closeModal();
         this.removeComponent(ComponentNames.Interactable);
       },
     });
   }
-
-  public viewInsides() {
-    console.log("I am a function box!");
-  }
 }
diff --git a/src/engine/systems/Input.ts b/src/engine/systems/Input.ts
index df4d651..3da018d 100644
--- a/src/engine/systems/Input.ts
+++ b/src/engine/systems/Input.ts
@@ -52,6 +52,9 @@ export class Input extends System {
     }
 
     interactable.interact();
+    KeyConstants.ActionKeys.get(Action.INTERACT)!.forEach((key) =>
+      this.keyReleased(key),
+    );
   }
 
   public handleMovement(entity: Entity) {
diff --git a/src/engine/utils/index.ts b/src/engine/utils/index.ts
index 439e664..78b600e 100644
--- a/src/engine/utils/index.ts
+++ b/src/engine/utils/index.ts
@@ -1,3 +1,4 @@
 export * from "./clamp";
 export * from "./dotProduct";
 export * from "./rotateVector";
+export * from "./modal";
diff --git a/src/engine/utils/modal.ts b/src/engine/utils/modal.ts
new file mode 100644
index 0000000..e7b36b1
--- /dev/null
+++ b/src/engine/utils/modal.ts
@@ -0,0 +1,38 @@
+import { Miscellaneous } from "../config";
+
+let modalOpen = false;
+
+export const openModal = (content: string, id = Miscellaneous.MODAL_ID) => {
+  const modal = document.getElementById(id);
+  if (modal && !modalOpen) {
+    modal.style.display = "flex";
+    modal.style.animation = "fadeIn 0.25s";
+
+    modal.innerHTML = `<div class="modal-content">${content}</div>`;
+    const modalContent = document.querySelector<HTMLElement>(".modal-content");
+    if (modalContent) {
+      modalContent.style.animation = "scaleUp 0.25s";
+    }
+
+    modalOpen = true;
+  }
+};
+
+export const closeModal = (id = Miscellaneous.MODAL_ID) => {
+  const modal = document.getElementById(id);
+  if (modal && modalOpen) {
+    modal.style.animation = "fadeOut 0.25s";
+
+    const modalContent = document.querySelector<HTMLElement>(".modal-content");
+    if (modalContent) {
+      modalContent.style.animation = "scaleDown 0.25s";
+    }
+
+    setTimeout(() => {
+      modal.innerHTML = "";
+      modal.style.display = "none";
+
+      modalOpen = false;
+    }, 250);
+  }
+};