1 files changed, 40 insertions, 59 deletions

diff --git a/src/engine/entities/FunctionBox.ts b/src/engine/entities/FunctionBox.ts
index 4878c98..9cba029 100644
--- a/src/engine/entities/FunctionBox.ts
+++ b/src/engine/entities/FunctionBox.ts
@@ -1,13 +1,4 @@
-import {
-  IMAGES,
-  Miscellaneous,
-  ModalClose,
-  ModalOpen,
-  SOUNDS,
-  SPRITE_SPECS,
-  SpriteSpec,
-  Sprites,
-} from "../config";
+import { IMAGES, SPRITE_SPECS, SpriteSpec, Sprites } from "../config";
 import { Entity, EntityNames } from ".";
 import {
   BoundingBox,
@@ -16,18 +7,21 @@ import {
   Highlight,
   Interactable,
   LambdaTerm,
+  Modal,
   Pushable,
   Sprite,
 } from "../components";
 import { Coord2D } from "../interfaces";
-import { openModal, closeModal } from "../utils";
 
 export class FunctionBox extends Entity {
   private static spriteSpec: SpriteSpec = SPRITE_SPECS.get(
-    Sprites.FUNCTION_BOX,
+    Sprites.FUNCTION_BOX
   ) as SpriteSpec;
 
-  constructor(gridPosition: Coord2D, code: string) {
+  constructor(
+    gridPosition: Coord2D,
+    private readonly code: string
+  ) {
     super(EntityNames.FunctionBox);
 
     this.addComponent(
@@ -40,8 +34,8 @@ export class FunctionBox extends Entity {
           width: FunctionBox.spriteSpec.width,
           height: FunctionBox.spriteSpec.height,
         },
-        0,
-      ),
+        0
+      )
     );
 
     this.addComponent(new Pushable());
@@ -57,56 +51,43 @@ export class FunctionBox extends Entity {
           height: FunctionBox.spriteSpec.height,
         },
         FunctionBox.spriteSpec.msPerFrame,
-        FunctionBox.spriteSpec.frames,
-      ),
+        FunctionBox.spriteSpec.frames
+      )
     );
 
     this.addComponent(new LambdaTerm(code));
 
-    this.addComponent(makeLambdaTermHighlightComponent(this));
+    this.addComponent(
+      new Highlight(this.onHighlight.bind(this), this.onUnhighlight.bind(this))
+    );
   }
-}
-
-export const makeLambdaTermHighlightComponent = (
-  entity: Entity,
-  text?: string,
-) => {
-  const onUnhighlight = () => {
-    closeModal();
-    entity.removeComponent(ComponentNames.Interactable);
-  };
-
-  const onHighlight = () => {
-    let modalOpen = false;
-    const doModalClose = () => {
-      SOUNDS.get(ModalClose.name)!.play();
-      modalOpen = false;
-      closeModal();
-    };
-
-    const interaction = () => {
-      if (modalOpen) {
-        doModalClose();
-        return;
-      }
 
-      const code =
-        text ??
-        entity.getComponent<LambdaTerm>(ComponentNames.LambdaTerm)!.code;
-      openModal(
-        `<div style="text-align:center"><p>${code}</p> <br> <button id="close">Close</button></div>`,
-      );
-      modalOpen = true;
-      SOUNDS.get(ModalOpen.name)!.play();
-
-      document.getElementById("close")!.addEventListener("click", () => {
-        doModalClose();
-        document.getElementById(Miscellaneous.CANVAS_ID)!.focus();
-      });
+  private interaction() {
+    const codeConsumer = (_code: string) => {
+      this.removeComponent(ComponentNames.Modal);
+      return { consumed: true };
     };
+    const { last } = this.getComponent<LambdaTerm>(ComponentNames.LambdaTerm);
+    this.addComponent(
+      new Modal({
+        type: "CODE_EDITOR",
+        codeInit: {
+          code: this.code,
+          codeConsumer,
+          readonly: true,
+          result: {
+            error: last?.error && `Error: ${last.error.message}`,
+          },
+        },
+      })
+    );
+  }
 
-    entity.addComponent(new Interactable(interaction));
-  };
+  public onHighlight() {
+    this.addComponent(new Interactable(this.interaction.bind(this)));
+  }
 
-  return new Highlight(onHighlight, onUnhighlight);
-};
+  public onUnhighlight() {
+    this.removeComponent(ComponentNames.Interactable);
+  }
+}