4 files changed, 76 insertions, 19 deletions
diff --git a/src/engine/entities/EntityNames.ts b/src/engine/entities/EntityNames.ts
index 1a4c1ed..ffcc937 100644
--- a/src/engine/entities/EntityNames.ts
+++ b/src/engine/entities/EntityNames.ts
@@ -1,4 +1,5 @@
 export namespace EntityNames {
   export const Player = "Player";
   export const FunctionBox = "FunctionBox";
+  export const Wall = "Wall";
 }
diff --git a/src/engine/entities/FunctionBox.ts b/src/engine/entities/FunctionBox.ts
index 57eeedb..e5d031a 100644
--- a/src/engine/entities/FunctionBox.ts
+++ b/src/engine/entities/FunctionBox.ts
@@ -4,7 +4,9 @@ import {
   BoundingBox,
   ComponentNames,
   Grid,
+  Highlight,
   Interactable,
+  Pushable,
   Sprite,
 } from "../components";
 import { Coord2D } from "../interfaces";
@@ -36,7 +38,9 @@ export class FunctionBox extends Entity {
       ),
     );
 
-    this.addComponent(new Grid(true, gridPosition));
+    this.addComponent(new Pushable());
+
+    this.addComponent(new Grid(gridPosition));
 
     this.addComponent(
       new Sprite(
@@ -51,25 +55,31 @@ export class FunctionBox extends Entity {
       ),
     );
 
-    this.hooks.set(ComponentNames.Highlight, {
-      add: () => {
-        let modalOpen = false;
-        const interaction = () => {
-          if (modalOpen) {
-            modalOpen = false;
-            closeModal();
-            return;
-          }
-          modalOpen = true;
-          openModal(this.code);
-        };
+    this.addComponent(
+      new Highlight(
+        () => this.onHighlight(),
+        () => this.onUnhighlight(),
+      ),
+    );
+  }
+
+  private onUnhighlight() {
+    closeModal();
+    this.removeComponent(ComponentNames.Interactable);
+  }
 
-        this.addComponent(new Interactable(interaction));
-      },
-      remove: () => {
+  private onHighlight() {
+    let modalOpen = false;
+    const interaction = () => {
+      if (modalOpen) {
+        modalOpen = false;
         closeModal();
-        this.removeComponent(ComponentNames.Interactable);
-      },
-    });
+        return;
+      }
+      modalOpen = true;
+      openModal(this.code);
+    };
+
+    this.addComponent(new Interactable(interaction));
   }
 }
diff --git a/src/engine/entities/Wall.ts b/src/engine/entities/Wall.ts
new file mode 100644
index 0000000..621a569
--- /dev/null
+++ b/src/engine/entities/Wall.ts
@@ -0,0 +1,45 @@
+import { Entity, EntityNames } from ".";
+import { BoundingBox, Colliding, Grid, Sprite } from "../components";
+import { IMAGES, SPRITE_SPECS, SpriteSpec, Sprites } from "../config";
+import { Coord2D } from "../interfaces";
+
+export class Wall extends Entity {
+  private static spriteSpec: SpriteSpec = SPRITE_SPECS.get(
+    Sprites.WALL,
+  ) as SpriteSpec;
+
+  constructor(gridPosition: Coord2D) {
+    super(EntityNames.Wall);
+
+    this.addComponent(new Grid(gridPosition));
+
+    this.addComponent(new Colliding());
+
+    this.addComponent(
+      new BoundingBox(
+        {
+          x: 0,
+          y: 0,
+        },
+        {
+          width: Wall.spriteSpec.width,
+          height: Wall.spriteSpec.height,
+        },
+        0,
+      ),
+    );
+
+    this.addComponent(
+      new Sprite(
+        IMAGES.get(Wall.spriteSpec.sheet)!,
+        { x: 0, y: 0 },
+        {
+          width: Wall.spriteSpec.width,
+          height: Wall.spriteSpec.height,
+        },
+        Wall.spriteSpec.msPerFrame,
+        Wall.spriteSpec.frames,
+      ),
+    );
+  }
+}
diff --git a/src/engine/entities/index.ts b/src/engine/entities/index.ts
index d6a8aed..e63b272 100644
--- a/src/engine/entities/index.ts
+++ b/src/engine/entities/index.ts
@@ -2,3 +2,4 @@ export * from "./Entity";
 export * from "./EntityNames";
 export * from "./Player";
 export * from "./FunctionBox";
+export * from "./Wall";