player movement

src/App.tsx

@@ -1,7 +1,5 @@
 import { GameCanvas } from "./components/GameCanvas";
-
+import { Miscellaneous } from "./engine/config";
-const WIDTH = 800;
-const HEIGHT = 800;
 
 export const App = () => {
   return (
@@ -12,7 +10,7 @@ export const App = () => {
         </div>
       </div>
       <div className="content">
-        <GameCanvas width={WIDTH} height={HEIGHT} />
+        <GameCanvas width={Miscellaneous.WIDTH} height={Miscellaneous.HEIGHT} />
       </div>
       <div className="footer">
         <span>

src/engine/TheAbstractionEngine.ts

@@ -1,7 +1,8 @@
 import { Game } from ".";
-import { loadAssets } from "./config";
+import { Miscellaneous, loadAssets } from "./config";
 import { Player } from "./entities";
 import { FacingDirection, Input, Render } from "./systems";
+import { Grid } from "./systems/Grid";
 
 export class TheAbstractionEngine {
   private game: Game;
@@ -22,9 +23,18 @@ export class TheAbstractionEngine {
 
     const facingDirectionSystem = new FacingDirection(inputSystem);
 
-    [new Render(this.ctx), inputSystem, facingDirectionSystem].forEach(
+    [
-      (system) => this.game.addSystem(system),
+      new Render(this.ctx),
-    );
+      inputSystem,
+      facingDirectionSystem,
+      new Grid(
+        { width: Miscellaneous.GRID_COLUMNS, height: Miscellaneous.GRID_ROWS },
+        {
+          width: Miscellaneous.GRID_CELL_WIDTH,
+          height: Miscellaneous.GRID_CELL_HEIGHT,
+        },
+      ),
+    ].forEach((system) => this.game.addSystem(system));
 
     const player = new Player();
     this.game.addEntity(player);

src/engine/components/ComponentNames.ts

@@ -1,7 +1,7 @@
 export namespace ComponentNames {
   export const Sprite = "Sprite";
   export const FacingDirection = "FacingDirection";
-  export const GridPosition = "GridPosition";
+  export const Grid = "Grid";
   export const BoundingBox = "BoundingBox";
   export const Control = "Control";
 }

src/engine/components/Grid.ts

@@ -0,0 +1,20 @@
+import { Component, ComponentNames } from ".";
+import { Coord2D, Direction } from "../interfaces";
+
+export class Grid extends Component {
+  public initialized: boolean;
+
+  public gridPosition: Coord2D;
+  public movingDirection: Direction;
+  public pushable: boolean = false;
+
+  constructor(pushable: boolean = false, position: Coord2D = { x: 0, y: 0 }) {
+    super(ComponentNames.Grid);
+
+    this.initialized = false;
+
+    this.gridPosition = position;
+    this.movingDirection = Direction.NONE;
+    this.pushable = pushable;
+  }
+}

src/engine/components/GridPosition.ts

@@ -1,13 +0,0 @@
-import { Component, ComponentNames } from ".";
-
-export class GridPosition extends Component {
-  public x: number;
-  public y: number;
-
-  constructor(x: number, y: number) {
-    super(ComponentNames.GridPosition);
-
-    this.x = x;
-    this.y = y;
-  }
-}

src/engine/components/index.ts

@@ -2,6 +2,6 @@ export * from "./Component";
 export * from "./ComponentNames";
 export * from "./Sprite";
 export * from "./FacingDirection";
-export * from "./GridPosition";
+export * from "./Grid";
 export * from "./BoundingBox";
 export * from "./Control";

src/engine/config/constants.ts

@@ -41,10 +41,17 @@ export namespace KeyConstants {
   }, new Map());
 }
 
+export namespace PhysicsConstants {
+  export const GRID_MOVEMENT_VELOCITY = 2;
+}
+
 export namespace Miscellaneous {
   export const WIDTH = 800;
   export const HEIGHT = 800;
 
-  export const DEFAULT_GRID_WIDTH = 30;
+  export const GRID_ROWS = 15;
-  export const DEFAULT_GRID_HEIGHT = 30;
+  export const GRID_COLUMNS = 15;
+
+  export const GRID_CELL_WIDTH = Math.floor(WIDTH / GRID_COLUMNS);
+  export const GRID_CELL_HEIGHT = Math.floor(HEIGHT / GRID_ROWS);
 }

src/engine/entities/Player.ts

@@ -3,7 +3,7 @@ import { IMAGES, SPRITE_SPECS, Sprites, type SpriteSpec } from "../config";
 import {
   FacingDirection,
   Sprite,
-  GridPosition,
+  Grid,
   BoundingBox,
   Control,
 } from "../components";
@@ -20,8 +20,8 @@ export class Player extends Entity {
     this.addComponent(
       new BoundingBox(
         {
-          x: 200,
+          x: 0,
-          y: 200,
+          y: 0,
         },
         { width: Player.spriteSpec.width, height: Player.spriteSpec.height },
         0,
@@ -30,7 +30,7 @@ export class Player extends Entity {
 
     this.addComponent(new Control());
 
-    this.addComponent(new GridPosition(0, 0));
+    this.addComponent(new Grid());
     this.addFacingDirectionComponents();
   }
 

src/engine/systems/Grid.ts

@@ -0,0 +1,199 @@
+import { System, SystemNames } from ".";
+import { Game } from "..";
+import { PhysicsConstants } from "../config";
+import {
+  BoundingBox,
+  ComponentNames,
+  Grid as GridComponent,
+} from "../components";
+import { Coord2D, Direction, Dimension2D } from "../interfaces";
+import { clamp } from "../utils";
+
+export class Grid extends System {
+  private dimension: Dimension2D;
+  private grid: Set<string>[][] = [];
+
+  constructor(
+    { width: columns, height: rows }: Dimension2D,
+    dimension: Dimension2D,
+  ) {
+    super(SystemNames.Grid);
+
+    this.dimension = dimension;
+    this.grid = new Array(rows)
+      .fill(null)
+      .map(() => new Array(columns).fill(null).map(() => new Set()));
+  }
+
+  public update(dt: number, game: Game): void {
+    this.putUninitializedEntitiesInGrid(game);
+    this.rebuildGrid(game);
+    this.updateMovingEntities(dt, game);
+  }
+
+  private putUninitializedEntitiesInGrid(game: Game) {
+    game.forEachEntityWithComponent(ComponentNames.Grid, (entity) => {
+      const grid = entity.getComponent<GridComponent>(ComponentNames.Grid)!;
+
+      if (grid.initialized) {
+        return;
+      }
+
+      const hasBoundingBox = entity.hasComponent(ComponentNames.BoundingBox);
+      if (!hasBoundingBox) {
+        return;
+      }
+
+      const boundingBox = entity.getComponent<BoundingBox>(
+        ComponentNames.BoundingBox,
+      )!;
+      boundingBox.center = this.gridToScreenPosition(grid.gridPosition);
+      entity.addComponent(boundingBox);
+
+      grid.initialized = true;
+      entity.addComponent(grid);
+    });
+  }
+
+  private updateMovingEntities(
+    dt: number,
+    game: Game,
+    velocity = PhysicsConstants.GRID_MOVEMENT_VELOCITY,
+  ) {
+    game.forEachEntityWithComponent(ComponentNames.Grid, (entity) => {
+      const grid = entity.getComponent<GridComponent>(ComponentNames.Grid)!;
+      if (grid.movingDirection === Direction.NONE) {
+        return;
+      }
+
+      const boundingBox = entity.getComponent<BoundingBox>(
+        ComponentNames.BoundingBox,
+      )!;
+
+      let { x: newX, y: newY } = grid.gridPosition;
+      switch (grid.movingDirection) {
+        case Direction.LEFT:
+          newX -= 1;
+          break;
+        case Direction.UP:
+          newY -= 1;
+          break;
+        case Direction.DOWN:
+          newY += 1;
+          break;
+        case Direction.RIGHT:
+          newX += 1;
+          break;
+      }
+
+      const newGridPosition = { x: newX, y: newY };
+      if (this.isOutOfBounds(newGridPosition)) {
+        grid.movingDirection = Direction.NONE;
+        entity.addComponent(grid);
+        return;
+      }
+
+      let { dx, dy } = { dx: 0, dy: 0 };
+      switch (grid.movingDirection) {
+        case Direction.LEFT:
+          dx = -velocity * dt;
+          break;
+        case Direction.RIGHT:
+          dx = velocity * dt;
+          break;
+        case Direction.UP:
+          dy = -velocity * dt;
+          break;
+        case Direction.DOWN:
+          dy = velocity * dt;
+          break;
+      }
+
+      const { x, y } = boundingBox.center;
+      const nextPosition = { x: x + dx, y: y + dy };
+      const passedCenter = this.isEntityPastCenterWhenMoving(
+        grid.movingDirection,
+        newGridPosition,
+        nextPosition,
+      );
+
+      if (passedCenter) {
+        // re-align the entity to its new grid position
+        this.grid[grid.gridPosition.y][grid.gridPosition.x].delete(entity.id);
+
+        grid.gridPosition = newGridPosition;
+        grid.movingDirection = Direction.NONE;
+        this.grid[grid.gridPosition.y][grid.gridPosition.x].add(entity.id);
+        entity.addComponent(grid);
+
+        boundingBox.center = this.gridToScreenPosition(grid.gridPosition);
+        entity.addComponent(boundingBox);
+        return;
+      }
+
+      boundingBox.center = nextPosition;
+      entity.addComponent(boundingBox);
+    });
+  }
+
+  private isEntityPastCenterWhenMoving(
+    direction: Direction,
+    gridPosition: Coord2D,
+    entityPosition: Coord2D,
+  ) {
+    const { x, y } = this.gridToScreenPosition(gridPosition);
+    switch (direction) {
+      case Direction.LEFT:
+        return entityPosition.x <= x;
+      case Direction.RIGHT:
+        return entityPosition.x >= x;
+      case Direction.UP:
+        return entityPosition.y <= y;
+      case Direction.DOWN:
+        return entityPosition.y >= y;
+    }
+    return false;
+  }
+
+  private gridToScreenPosition(gridPosition: Coord2D) {
+    const { width, height } = this.dimension;
+    return {
+      x: gridPosition.x * width + width / 2,
+      y: gridPosition.y * height + height / 2,
+    };
+  }
+
+  private isOutOfBounds(position: Coord2D) {
+    const isOutOfBoundsX =
+      clamp(position.x, 0, this.grid[0].length - 1) !== position.x;
+    const isOutOfBoundsY =
+      clamp(position.y, 0, this.grid.length - 1) !== position.y;
+    return isOutOfBoundsX || isOutOfBoundsY;
+  }
+
+  private rebuildGrid(game: Game) {
+    const movedEntities = new Set<string>();
+    game.forEachEntityWithComponent(ComponentNames.Grid, (entity) => {
+      const grid = entity.getComponent<GridComponent>(ComponentNames.Grid)!;
+      const { x, y } = grid.gridPosition;
+      if (!this.grid[y][x].has(entity.id)) {
+        movedEntities.add(entity.id);
+        this.grid[y][x].add(entity.id);
+      }
+    });
+    this.grid.forEach((row) =>
+      row.forEach((cell) => {
+        for (const id of cell) {
+          if (!movedEntities.has(id)) {
+            cell.delete(id);
+          }
+        }
+      }),
+    );
+    movedEntities.forEach((id) => {
+      const entity = game.getEntity(id)!;
+      const grid = entity.getComponent<GridComponent>(ComponentNames.Grid)!;
+      this.grid[grid.gridPosition.y][grid.gridPosition.x].add(id);
+    });
+  }
+}

src/engine/systems/Input.ts

@@ -4,7 +4,7 @@ import { ComponentNames } from "../components";
 import { Control } from "../components/Control";
 import { Action, KeyConstants } from "../config";
 import { Entity } from "../entities";
-import { Coord2D } from "../interfaces";
+import { Coord2D, Direction } from "../interfaces";
 
 export class Input extends System {
   private keys: Set<string>;
@@ -41,8 +41,44 @@ export class Input extends System {
     );
     if (!controlComponent.isControllable) return;
 
-    if (this.hasSomeKey(KeyConstants.ActionKeys.get(Action.INTERACT))) {
+    const hasGrid = entity.hasComponent(ComponentNames.Grid);
-      console.log("interact");
+
+    // TODO: check grid via controlComponent to notify entity of interaction
+    const [moveUp, moveLeft, moveRight, moveDown] = [
+      Action.MOVE_UP,
+      Action.MOVE_LEFT,
+      Action.MOVE_RIGHT,
+      Action.MOVE_DOWN,
+    ].map((action) => this.hasSomeKey(KeyConstants.ActionKeys.get(action)));
+    if (hasGrid) {
+      const gridComponent = entity.getComponent(ComponentNames.Grid);
+      if (gridComponent.movingDirection !== Direction.NONE) {
+        return;
+      }
+
+      if (moveUp) {
+        gridComponent.movingDirection = Direction.UP;
+        KeyConstants.ActionKeys.get(Action.MOVE_UP)!.forEach((key) =>
+          this.keyReleased(key),
+        );
+      } else if (moveLeft) {
+        gridComponent.movingDirection = Direction.LEFT;
+        KeyConstants.ActionKeys.get(Action.MOVE_LEFT)!.forEach((key) =>
+          this.keyReleased(key),
+        );
+      } else if (moveRight) {
+        gridComponent.movingDirection = Direction.RIGHT;
+        KeyConstants.ActionKeys.get(Action.MOVE_RIGHT)!.forEach((key) =>
+          this.keyReleased(key),
+        );
+      } else if (moveDown) {
+        gridComponent.movingDirection = Direction.DOWN;
+        KeyConstants.ActionKeys.get(Action.MOVE_DOWN)!.forEach((key) =>
+          this.keyReleased(key),
+        );
+      }
+
+      entity.addComponent(gridComponent);
     }
   }
 

src/engine/systems/SystemNames.ts

@@ -1,8 +1,6 @@
 export namespace SystemNames {
   export const Render = "Render";
-  export const Physics = "Physics";
   export const Input = "Input";
-  export const Collision = "Collision";
-  export const WallBounds = "WallBounds";
   export const FacingDirection = "FacingDirection";
+  export const Grid = "Grid";
 }