feat: add vents and capybara (#9)

* feat: add vents and capybara

* feat: add speech bubbles

* chore: apply prettier

---------

Co-authored-by: jatoothless <hania.drozdowska@icloud.com>

Author: jmorawiecpwr

public/images/vent/vent-closed.png

@@ -56,7 +56,7 @@ export function useCables(room: Room | null) {
     if (!room) return;
     room.onMessage("mapInfo", applyMapInfo);
     room.onMessage("cablesUpdate", applyCablesUpdate);
-    room.onMessage("playerDamaged", (payload: any) => {
+    room.onMessage("playerDamaged", () => {
       // opcjonalnie: efekt kliencki (np. flash) - tutaj tylko log
       // console.log("playerDamaged", payload);
     });
@@ -68,8 +68,11 @@ export function useCables(room: Room | null) {
 
     return () => {
       try {
-        room?.offMessage("mapInfo", applyMapInfo);
-        room?.offMessage("cablesUpdate", applyCablesUpdate);
+        const maybeRoom = room as Room & {
+          offMessage?: (type: string, cb: (...args: any[]) => void) => void;
+        };
+        maybeRoom.offMessage?.("mapInfo", applyMapInfo);
+        maybeRoom.offMessage?.("cablesUpdate", applyCablesUpdate);
       } catch (e) {}
     };
   }, [room, applyMapInfo, applyCablesUpdate]);

public/images/vent/vent-open.png

@@ -0,0 +1,7 @@
+import { Entity } from "./entity";
+
+export class Capybara extends Entity {
+  constructor(scene: Phaser.Scene, x: number, y: number) {
+    super(scene, x, y, "capybara");
+  }
+}

src/game/hooks/useCables.ts

@@ -0,0 +1,28 @@
+import { Mechanic } from "./mechanic";
+
+export class Vent extends Mechanic {
+  public id: number;
+  private _isOpen: boolean;
+
+  constructor(
+    scene: Phaser.Scene,
+    x: number,
+    y: number,
+    id: number,
+    isOpen: boolean,
+  ) {
+    super(scene, x, y, isOpen ? "vent-open" : "vent-closed");
+    this.id = id;
+    this._isOpen = isOpen;
+  }
+  public set isOpen(value: boolean) {
+    this._isOpen = value;
+    this.changeTexture(value ? "vent-open" : "vent-closed");
+    this.id = this.id;
+    this._isOpen = this.isOpen;
+  }
+
+  public get isOpen(): boolean {
+    return this._isOpen;
+  }
+}

src/phaser/entities/capybara.ts

@@ -8,14 +8,15 @@ import type { Laser as LaserType } from "../../types/laser";
 import type {
   MessageCratesUpdate,
   MessageDoorsAndButtonsUpdate,
-  MessageLasersUpdate,
   MessageGenerateLines,
+  MessageLasersUpdate,
   MessageMapInfo,
   MessageOnAddPlayer,
   MessageOnRemovePlayer,
   MessagePositionUpdate,
 } from "../../types/messages";
 import type { Player as PlayerType } from "../../types/player";
+import { Capybara } from "../entities/capybara";
 import { Crate } from "../entities/crate";
 import { Player } from "../entities/player";
 import { TILE_SIZE } from "../lib/const";
@@ -30,16 +31,19 @@ import { Button } from "../mechanics/button";
 import { Cable } from "../mechanics/cable";
 import { Door } from "../mechanics/door";
 import { Laser } from "../mechanics/laser";
+import { Vent } from "../mechanics/vent";
 import { SpeechBubble } from "../speech-bubbles/display-speech-bubble";
 
 export class Main extends Phaser.Scene {
   private room!: Room;
+  private capybara: Capybara | null = null;
   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 lasers = new Map<string, Laser>();
   private cables = new Map<string, Cable>();
+  private vents = new Map<number, Vent>();
   private speechBubbles = new Map<string, SpeechBubble>();
   private bubbleTimer!: Phaser.Time.TimerEvent;
   private cursors!: Phaser.Types.Input.Keyboard.CursorKeys;
@@ -89,6 +93,13 @@ export class Main extends Phaser.Scene {
       "data/speech-bubble-data.json",
     );
 
+    // vents
+    this.load.image("vent-open", "images/vent/vent-open.png");
+    this.load.image("vent-closed", "images/vent/vent-closed.png");
+
+    // capybara
+    this.load.image("capybara", "images/capybara/back_1.png");
+
     // player textures
     for (const [index, textureKey] of PLAYER_TEXTURE_KEYS.entries()) {
       this.load.spritesheet(
@@ -160,6 +171,16 @@ export class Main extends Phaser.Scene {
           );
           this.cables.set(cable.cableId, c);
         }
+
+        if (message.vents) {
+          for (const vent of message.vents) {
+            this.addVent(vent);
+          }
+        }
+
+        if (message.capybara) {
+          this.addCapybara(message.capybara);
+        }
       });
 
       room.onMessage("onAddPlayer", (message: MessageOnAddPlayer) => {
@@ -230,6 +251,24 @@ export class Main extends Phaser.Scene {
           }
         },
       );
+      room.onMessage("line", (message: MessageGenerateLines) => {
+        const player = this.players.get(message.sessionId);
+        if (player !== undefined) {
+          this.displayBubble(message.text, player, message.sessionId);
+        }
+      });
+
+      room.onMessage(
+        "capybaraUpdate",
+        (message: { x: number; y: number; state: string }) => {
+          if (this.capybara) {
+            this.capybara.setPosition(
+              message.x * TILE_SIZE + TILE_SIZE / 2,
+              message.y * TILE_SIZE + TILE_SIZE / 2,
+            );
+          }
+        },
+      );
 
       room.onMessage("line", (message: MessageGenerateLines) => {
         const player = this.players.get(message.sessionId);
@@ -384,17 +423,30 @@ export class Main extends Phaser.Scene {
     this.doors.set(doorInfo.doorId, door);
   }
 
-  private addCable(cableInfo: CableType) {
-    const cable = new Cable(
+  private addVent(ventInfo: {
+    id: number;
+    x: number;
+    y: number;
+    open: boolean;
+  }) {
+    const vent = new Vent(
       this,
-      cableInfo.x,
-      cableInfo.y,
-      cableInfo.cableId,
-      cableInfo.color,
-      cableInfo.pressed,
+      ventInfo.x,
+      ventInfo.y,
+      ventInfo.id,
+      ventInfo.open,
     );
-    this.add.existing(cable);
-    this.cables.set(cableInfo.cableId, cable);
+    this.add.existing(vent);
+    this.vents.set(ventInfo.id, vent);
+  }
+
+  private addCapybara(capybaraInfo: { x: number; y: number }) {
+    if (this.capybara) {
+      this.capybara.destroy();
+    }
+
+    this.capybara = new Capybara(this, capybaraInfo.x, capybaraInfo.y);
+    this.add.existing(this.capybara);
   }
 
   createMap(grid: string[][], width: number, height: number) {

src/phaser/mechanics/vent.ts

@@ -0,0 +1,5 @@
+export interface Capybara {
+  x: number;
+  y: number;
+  state: string;
+}

src/phaser/scenes/main.ts

@@ -1,8 +1,10 @@
 import type { Button } from "../types/button";
+import type { Capybara } from "../types/capybara";
 import type { Crate } from "../types/crate";
 import type { Door } from "../types/door";
 import type { Laser } from "../types/laser";
 import type { Player } from "../types/player";
+import type { Vent } from "../types/vent";
 
 export interface MessageMapInfo {
   grid: string[][];
@@ -13,6 +15,15 @@ export interface MessageMapInfo {
   doors: Door[];
   buttons: Button[];
   lasers: Laser[];
+  vents?: Vent[];
+  capybara?: Capybara;
+  cables?: {
+    cableId: string;
+    x: number;
+    y: number;
+    damage?: boolean;
+    timer?: number;
+  }[];
 }
 
 export interface MessageCratesUpdate {

src/types/capybara.tsx

@@ -0,0 +1,6 @@
+export interface Vent {
+  id: number;
+  x: number;
+  y: number;
+  open: boolean;
+}