Feat/add box door mechanics phaser

src/phaser/entities/crate.ts

@@ -0,0 +1,22 @@
+import type { SpriteAnimator } from "../lib/sprite-animator";
+import { Entity } from "./entity";
+
+export class Crate extends Entity {
+  public readonly crateId: number;
+
+  constructor(
+    scene: Phaser.Scene,
+    x: number,
+    y: number,
+    crateId: number,
+    textureKey = "crate",
+    animator: SpriteAnimator | null = null,
+  ) {
+    super(scene, x, y, textureKey, animator);
+    this.crateId = crateId;
+  }
+
+  public get id(): number {
+    return this.crateId;
+  }
+}

src/phaser/mechanics/button.ts

@@ -0,0 +1,43 @@
+import { Mechanic } from "./mechanic";
+
+export class Button extends Mechanic {
+  public readonly buttonId: string;
+  public readonly color: string;
+  private pressed: boolean;
+  private pressedTextureKey: string;
+  private releasedTextureKey: string;
+
+  constructor(
+    scene: Phaser.Scene,
+    x: number,
+    y: number,
+    buttonId: string,
+    color: string,
+    pressed = false,
+    pressedTextureKey = "button-pressed",
+    releasedTextureKey = "button-released",
+  ) {
+    super(scene, x, y, pressed ? pressedTextureKey : releasedTextureKey);
+    this.buttonId = buttonId;
+    this.color = color;
+    this.pressed = pressed;
+    this.pressedTextureKey = pressedTextureKey;
+    this.releasedTextureKey = releasedTextureKey;
+  }
+
+  public get id(): string {
+    return this.buttonId;
+  }
+
+  public get isPressed(): boolean {
+    return this.pressed;
+  }
+
+  public set isPressed(value: boolean) {
+    this.pressed = value;
+    const textureKey = this.pressed
+      ? this.pressedTextureKey
+      : this.releasedTextureKey;
+    this.changeTexture(textureKey);
+  }
+}

src/phaser/mechanics/door.ts

@@ -0,0 +1,41 @@
+import { Mechanic } from "./mechanic";
+
+export class Door extends Mechanic {
+  public readonly doorId: string;
+  public readonly color: string;
+  private openTextureKey: string;
+  private closedTextureKey: string;
+  private open: boolean;
+
+  constructor(
+    scene: Phaser.Scene,
+    x: number,
+    y: number,
+    doorId: string,
+    color: string,
+    open = false,
+    openTextureKey = "door-open",
+    closedTextureKey = "door-closed",
+  ) {
+    super(scene, x, y, open ? openTextureKey : closedTextureKey);
+    this.doorId = doorId;
+    this.color = color;
+    this.open = open;
+    this.openTextureKey = openTextureKey;
+    this.closedTextureKey = closedTextureKey;
+  }
+
+  public get id(): string {
+    return this.doorId;
+  }
+
+  public get isOpen(): boolean {
+    return this.open;
+  }
+
+  public set isOpen(value: boolean) {
+    this.open = value;
+    const textureKey = this.open ? this.openTextureKey : this.closedTextureKey;
+    this.changeTexture(textureKey);
+  }
+}

src/phaser/mechanics/mechanic.ts

@@ -0,0 +1,31 @@
+import { TILE_SIZE } from "../lib/const";
+
+export class Mechanic extends Phaser.GameObjects.Container {
+  protected sprite: Phaser.GameObjects.Sprite;
+  protected gridX: number;
+  protected gridY: number;
+
+  constructor(
+    scene: Phaser.Scene,
+    gridX: number,
+    gridY: number,
+    textureKey = "door",
+  ) {
+    super(scene);
+
+    this.gridX = gridX;
+    this.gridY = gridY;
+
+    this.sprite = this.scene.add.sprite(0, 0, textureKey);
+    this.add(this.sprite);
+
+    this.setPosition(
+      this.gridX * TILE_SIZE + TILE_SIZE / 2,
+      this.gridY * TILE_SIZE + TILE_SIZE / 2,
+    );
+  }
+
+  public changeTexture(textureKey: string) {
+    this.sprite.setTexture(textureKey);
+  }
+}

src/phaser/scenes/main.ts

@@ -1,13 +1,19 @@
 import type { Room } from "colyseus.js";
 import * as Phaser from "phaser";
 
+import type { Button as ButtonType } from "../../types/button";
+import type { Crate as CrateType } from "../../types/crate";
+import type { Door as DoorType } from "../../types/door";
 import type {
+  MessageCratesUpdate,
+  MessageDoorsAndButtonsUpdate,
   MessageMapInfo,
   MessageOnAddPlayer,
   MessageOnRemovePlayer,
   MessagePositionUpdate,
 } from "../../types/messages";
 import type { Player as PlayerType } from "../../types/player";
+import { Crate } from "../entities/crate";
 import { Player } from "../entities/player";
 import { TILE_SIZE } from "../lib/const";
 import {
@@ -18,10 +24,15 @@ import {
 } from "../lib/player-animators";
 import type { SpriteAnimator } from "../lib/sprite-animator";
 import { getTileName } from "../lib/utils";
+import { Button } from "../mechanics/button";
+import { Door } from "../mechanics/door";
 
 export class Main extends Phaser.Scene {
   private room!: Room;
   private players = new Map<string, Player>();
+  private crates = new Map<number, Crate>();
+  private buttons = new Map<string, Button>();
+  private doors = new Map<string, Door>();
   private cursors!: Phaser.Types.Input.Keyboard.CursorKeys;
   private wasd!: {
     W: Phaser.Input.Keyboard.Key;
@@ -49,6 +60,10 @@ export class Main extends Phaser.Scene {
     this.load.image("wall", "images/wall.png");
     this.load.image("crate", "images/crate.png");
     this.load.image("ground", "images/ground.png");
+    this.load.image("button-released", "images/buttons/button-green.png");
+    this.load.image("button-pressed", "images/buttons/button-red.png");
+    this.load.image("door-open", "images/doors/door-green-open.png");
+    this.load.image("door-closed", "images/doors/door-green-closed.png");
 
     for (const [index, textureKey] of PLAYER_TEXTURE_KEYS.entries()) {
       this.load.spritesheet(
@@ -89,6 +104,18 @@ export class Main extends Phaser.Scene {
         for (const player of message.players) {
           this.addPlayer(player);
         }
+
+        for (const crate of message.crates) {
+          this.addCrate(crate);
+        }
+
+        for (const button of message.buttons) {
+          this.addButton(button);
+        }
+
+        for (const door of message.doors) {
+          this.addDoor(door);
+        }
       });
 
       room.onMessage("onAddPlayer", (message: MessageOnAddPlayer) => {
@@ -117,6 +144,33 @@ export class Main extends Phaser.Scene {
         }
       });
 
+      room.onMessage("cratesUpdate", (message: MessageCratesUpdate) => {
+        for (const crateUpdate of message.crates) {
+          const crate = this.crates.get(crateUpdate.crateId);
+          if (crate !== undefined) {
+            crate.move(crateUpdate.direction);
+          }
+        }
+      });
+
+      room.onMessage(
+        "doorsAndButtonsUpdate",
+        (message: MessageDoorsAndButtonsUpdate) => {
+          for (const element of message.doorsAndButtons) {
+            const door = this.doors.get(element.doorId);
+            const button = this.buttons.get(element.buttonId);
+
+            if (door !== undefined) {
+              door.isOpen = element.open;
+            }
+
+            if (button !== undefined) {
+              button.isPressed = element.open;
+            }
+          }
+        },
+      );
+
       this.room.send("getMapInfo");
     } catch (error) {
       console.error("Error setting up Colyseus message handlers:", error);
@@ -152,6 +206,38 @@ export class Main extends Phaser.Scene {
     this.add.existing(player);
   }
 
+  private addCrate(crateInfo: CrateType) {
+    const crate = new Crate(this, crateInfo.x, crateInfo.y, crateInfo.crateId);
+    this.add.existing(crate);
+    this.crates.set(crateInfo.crateId, crate);
+  }
+
+  private addButton(buttonInfo: ButtonType) {
+    const button = new Button(
+      this,
+      buttonInfo.x,
+      buttonInfo.y,
+      buttonInfo.buttonId,
+      buttonInfo.color,
+      buttonInfo.pressed,
+    );
+    this.add.existing(button);
+    this.buttons.set(buttonInfo.buttonId, button);
+  }
+
+  private addDoor(doorInfo: DoorType) {
+    const door = new Door(
+      this,
+      doorInfo.x,
+      doorInfo.y,
+      doorInfo.doorId,
+      doorInfo.color,
+      doorInfo.open,
+    );
+    this.add.existing(door);
+    this.doors.set(doorInfo.doorId, door);
+  }
+
   createMap(grid: number[][], width: number, height: number) {
     for (let y = 0; y < height; y++) {
       for (let x = 0; x < width; x++) {

src/types/button.tsx

@@ -0,0 +1,7 @@
+export interface Button {
+  x: number;
+  y: number;
+  buttonId: string;
+  color: string;
+  pressed: boolean;
+}

src/types/crate.tsx

@@ -0,0 +1,5 @@
+export interface Crate {
+  x: number;
+  y: number;
+  crateId: number;
+}

src/types/door.tsx

@@ -0,0 +1,7 @@
+export interface Door {
+  doorId: string;
+  color: string;
+  x: number;
+  y: number;
+  open: boolean;
+}

src/types/messages.tsx

@@ -1,10 +1,24 @@
+import type { Button } from "../types/button";
+import type { Crate } from "../types/crate";
+import type { Door } from "../types/door";
 import type { Player } from "../types/player";
 
 export interface MessageMapInfo {
   grid: number[][];
   width: number;
   height: number;
   players: Player[];
+  crates: Crate[];
+  doors: Door[];
+  buttons: Button[];
+}
+
+export interface MessageCratesUpdate {
+  crates: { crateId: number; direction: "left" | "right" | "up" | "down" }[];
+}
+
+export interface MessageDoorsAndButtonsUpdate {
+  doorsAndButtons: { doorId: string; buttonId: string; open: boolean }[];
 }
 
 export interface MessagePositionUpdate {