add function box entity

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;

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() {

src/engine/config/assets.ts

@@ -1,5 +1,4 @@
-import type { SpriteSpec } from "./sprites";
+import { type SpriteSpec, SPRITE_SPECS } from ".";
-import { SPRITE_SPECS } from "./sprites";
 
 export const IMAGES = new Map<string, HTMLImageElement>();
 

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);

src/engine/entities/EntityNames.ts

@@ -1,3 +1,4 @@
 export namespace EntityNames {
   export const Player = "Player";
+  export const FunctionBox = "FunctionBox";
 }

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,
+      ),
+    );
+  }
+}

src/engine/entities/index.ts

@@ -1,3 +1,4 @@
 export * from "./Entity";
 export * from "./EntityNames";
 export * from "./Player";
+export * from "./FunctionBox";

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;