add function box entity

8 files changed, 63 insertions, 6 deletions

diff --git a/src/css/style.css b/src/css/style.css
index cdfef76..8f72fce 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -78,7 +78,7 @@ a:visited {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: 1rem;
+  padding: 1rem;
   height: 100%;
   flex-direction: column;
   gap: 1rem;
diff --git a/src/engine/TheAbstractionEngine.ts b/src/engine/TheAbstractionEngine.ts
index 094555b..3859447 100644
--- a/src/engine/TheAbstractionEngine.ts
+++ b/src/engine/TheAbstractionEngine.ts
@@ -1,6 +1,6 @@
 import { Game } from ".";
 import { Miscellaneous, loadAssets } from "./config";
-import { Player } from "./entities";
+import { Player, FunctionBox } from "./entities";
 import { FacingDirection, Input, Render } from "./systems";
 import { Grid } from "./systems/Grid";
 
@@ -38,6 +38,9 @@ export class TheAbstractionEngine {
 
     const player = new Player();
     this.game.addEntity(player);
+
+    const box = new FunctionBox({ x: 5, y: 5 });
+    this.game.addEntity(box);
   }
 
   public play() {
diff --git a/src/engine/config/assets.ts b/src/engine/config/assets.ts
index 173bab3..bf41461 100644
--- a/src/engine/config/assets.ts
+++ b/src/engine/config/assets.ts
@@ -1,5 +1,4 @@
-import type { SpriteSpec } from "./sprites";
-import { SPRITE_SPECS } from "./sprites";
+import { type SpriteSpec, SPRITE_SPECS } from ".";
 
 export const IMAGES = new Map<string, HTMLImageElement>();
 
diff --git a/src/engine/config/sprites.ts b/src/engine/config/sprites.ts
index 37185fd..e62d714 100644
--- a/src/engine/config/sprites.ts
+++ b/src/engine/config/sprites.ts
@@ -2,6 +2,7 @@ import { Direction } from "../interfaces/Direction";
 
 export enum Sprites {
   PLAYER,
+  FUNCTION_BOX,
 }
 
 export interface SpriteSpec {
@@ -35,5 +36,13 @@ playerSpriteSpec.states.set(Direction.NONE, {
     });
   },
 );
-
 SPRITE_SPECS.set(Sprites.PLAYER, playerSpriteSpec);
+
+const functionBoxSpriteSpec = {
+  msPerFrame: 200,
+  width: 64,
+  height: 64,
+  frames: 3,
+  sheet: "/assets/border.png",
+};
+SPRITE_SPECS.set(Sprites.FUNCTION_BOX, functionBoxSpriteSpec);
diff --git a/src/engine/entities/EntityNames.ts b/src/engine/entities/EntityNames.ts
index e2f642a..1a4c1ed 100644
--- a/src/engine/entities/EntityNames.ts
+++ b/src/engine/entities/EntityNames.ts
@@ -1,3 +1,4 @@
 export namespace EntityNames {
   export const Player = "Player";
+  export const FunctionBox = "FunctionBox";
 }
diff --git a/src/engine/entities/FunctionBox.ts b/src/engine/entities/FunctionBox.ts
new file mode 100644
index 0000000..e6c41c2
--- /dev/null
+++ b/src/engine/entities/FunctionBox.ts
@@ -0,0 +1,43 @@
+import { IMAGES, SPRITE_SPECS, SpriteSpec, Sprites } from "../config";
+import { Entity, EntityNames } from ".";
+import { BoundingBox, Grid, Sprite } from "../components";
+import { Coord2D } from "../interfaces";
+
+export class FunctionBox extends Entity {
+  private static spriteSpec: SpriteSpec = SPRITE_SPECS.get(
+    Sprites.FUNCTION_BOX,
+  ) as SpriteSpec;
+
+  constructor(gridPosition: Coord2D) {
+    super(EntityNames.FunctionBox);
+
+    this.addComponent(
+      new BoundingBox(
+        {
+          x: 0,
+          y: 0,
+        },
+        {
+          width: FunctionBox.spriteSpec.width,
+          height: FunctionBox.spriteSpec.height,
+        },
+        0,
+      ),
+    );
+
+    this.addComponent(new Grid(true, gridPosition));
+
+    this.addComponent(
+      new Sprite(
+        IMAGES.get(FunctionBox.spriteSpec.sheet)!,
+        { x: 0, y: 0 },
+        {
+          width: FunctionBox.spriteSpec.width,
+          height: FunctionBox.spriteSpec.height,
+        },
+        FunctionBox.spriteSpec.msPerFrame,
+        FunctionBox.spriteSpec.frames,
+      ),
+    );
+  }
+}
diff --git a/src/engine/entities/index.ts b/src/engine/entities/index.ts
index 13dd57a..d6a8aed 100644
--- a/src/engine/entities/index.ts
+++ b/src/engine/entities/index.ts
@@ -1,3 +1,4 @@
 export * from "./Entity";
 export * from "./EntityNames";
 export * from "./Player";
+export * from "./FunctionBox";
diff --git a/src/engine/systems/Grid.ts b/src/engine/systems/Grid.ts
index e4e4bb8..0869fd6 100644
--- a/src/engine/systems/Grid.ts
+++ b/src/engine/systems/Grid.ts
@@ -25,7 +25,7 @@ export class Grid extends System {
       .map(() => new Array(columns).fill(null).map(() => new Set()));
   }
 
-  public update(dt: number, game: Game): void {
+  public update(dt: number, game: Game) {
     this.putUninitializedEntitiesInGrid(game);
     this.rebuildGrid(game);
     this.updateMovingEntities(dt, game);
@@ -48,6 +48,7 @@ export class Grid extends System {
         ComponentNames.BoundingBox,
       )!;
       boundingBox.center = this.gridToScreenPosition(grid.gridPosition);
+      boundingBox.dimension = this.dimension;
       entity.addComponent(boundingBox);
 
       grid.initialized = true;