1 files changed, 21 insertions, 19 deletions
diff --git a/src/engine/entities/FunctionBox.ts b/src/engine/entities/FunctionBox.ts
index e51eb2b..92f1908 100644
--- a/src/engine/entities/FunctionBox.ts
+++ b/src/engine/entities/FunctionBox.ts
@@ -12,6 +12,7 @@ import {
   Grid,
   Highlight,
   Interactable,
+  LambdaTerm,
   Pushable,
   Sprite,
 } from "../components";
@@ -23,13 +24,9 @@ export class FunctionBox extends Entity {
     Sprites.FUNCTION_BOX,
   ) as SpriteSpec;
 
-  private code: string;
-
   constructor(gridPosition: Coord2D, code: string) {
     super(EntityNames.FunctionBox);
 
-    this.code = code;
-
     this.addComponent(
       new BoundingBox(
         {
@@ -61,20 +58,19 @@ export class FunctionBox extends Entity {
       ),
     );
 
-    this.addComponent(
-      new Highlight(
-        (_direction) => this.onHighlight(),
-        () => this.onUnhighlight(),
-      ),
-    );
+    this.addComponent(new LambdaTerm(code));
+
+    this.addComponent(makeLambdaTermHighlightComponent(this));
   }
+}
 
-  private onUnhighlight() {
+export const makeLambdaTermHighlightComponent = (entity: Entity) => {
+  const onUnhighlight = () => {
     closeModal();
-    this.removeComponent(ComponentNames.Interactable);
-  }
+    entity.removeComponent(ComponentNames.Interactable);
+  };
 
-  private onHighlight() {
+  const onHighlight = () => {
     let modalOpen = false;
     const interaction = () => {
       if (modalOpen) {
@@ -82,10 +78,14 @@ export class FunctionBox extends Entity {
         closeModal();
         return;
       }
-      modalOpen = true;
+
+      const code = entity.getComponent<LambdaTerm>(
+        ComponentNames.LambdaTerm,
+      )!.code;
       openModal(
-        `<div style="text-align:center"><p>${this.code}</p> <br> <button id="close">Close</button></div>`,
+        `<div style="text-align:center"><p>${code}</p> <br> <button id="close">Close</button></div>`,
       );
+      modalOpen = true;
 
       document.getElementById("close")!.addEventListener("click", () => {
         closeModal();
@@ -93,6 +93,8 @@ export class FunctionBox extends Entity {
       });
     };
 
-    this.addComponent(new Interactable(interaction));
-  }
-}
+    entity.addComponent(new Interactable(interaction));
+  };
+
+  return new Highlight(onHighlight, onUnhighlight);
+};