feat: pause game

client/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine as builder
+FROM node:20-alpine AS builder
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
@@ -12,4 +12,4 @@ RUN npm run build
 FROM nginx:alpine
 COPY --from=builder /app/dist /usr/share/nginx/html
 EXPOSE 80
-CMD ["nginx", "-g", "daemon off;"]
+CMD ["nginx", "-g", "daemon off;"]

client/nginx.conf

@@ -0,0 +1,11 @@
+server {
+    listen 80;
+    server_name _;
+
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

client/src/pages/game.tsx

@@ -8,6 +8,7 @@ import { PhaserGame } from "../phaser/game";
 export function Game() {
   const { room, isConnected, joinError } = useRoom();
   const [showTimeoutError, setShowTimeoutError] = useState(false);
+  const [isPaused, setIsPaused] = useState(false);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -27,6 +28,19 @@ export function Game() {
     };
   }, [room, isConnected, joinError]);
 
+  useEffect(() => {
+    const handlePauseToggled = (event: Event) => {
+      const pauseEvent = event as CustomEvent<{ isPaused: boolean }>;
+      setIsPaused(pauseEvent.detail.isPaused);
+    };
+
+    window.addEventListener("game:pauseToggled", handlePauseToggled);
+
+    return () => {
+      window.removeEventListener("game:pauseToggled", handlePauseToggled);
+    };
+  }, []);
+
   if (joinError || showTimeoutError) {
     return (
       <div className="flex flex-col items-center gap-4">
@@ -52,8 +66,19 @@ export function Game() {
   }
 
   return (
-    <div className="flex h-[560px] w-[800px] items-center justify-center overflow-hidden rounded-2xl bg-violet-950">
-      <PhaserGame room={room} />
-    </div>
+    <>
+      <div className="flex h-[560px] w-[800px] items-center justify-center overflow-hidden rounded-2xl bg-violet-950">
+        <PhaserGame room={room} />
+      </div>
+
+      {isPaused && (
+        <div className="fixed inset-0 z-50 flex flex-col items-center justify-center gap-4 bg-black/60">
+          <div className="arcade-font text-5xl text-white">PAUSED</div>
+          <div className="arcade-font text-xl text-white">
+            Press P to resume...
+          </div>
+        </div>
+      )}
+    </>
   );
 }

client/src/phaser/scenes/main.ts

@@ -62,8 +62,10 @@ export class Main extends Phaser.Scene {
   };
   private speakInput!: Phaser.Input.Keyboard.Key;
   private resetInput!: Phaser.Input.Keyboard.Key;
+  private pauseInput!: Phaser.Input.Keyboard.Key;
   private playerMoveDebounce = 0;
   private playerAnimators!: SpriteAnimator[];
+  private isPaused = false;
 
   constructor() {
     super({ key: "Main" });
@@ -142,6 +144,7 @@ export class Main extends Phaser.Scene {
       };
       this.speakInput = this.input.keyboard.addKey("L");
       this.resetInput = this.input.keyboard.addKey("R");
+      this.pauseInput = this.input.keyboard.addKey("P");
     }
 
     // Colyseus message handlers
@@ -294,6 +297,15 @@ export class Main extends Phaser.Scene {
         }
       });
 
+      room.onMessage("pauseToggled", (message: { isPaused: boolean }) => {
+        this.isPaused = message.isPaused;
+        window.dispatchEvent(
+          new CustomEvent("game:pauseToggled", {
+            detail: { isPaused: this.isPaused },
+          }),
+        );
+      });
+
       this.room.send("getMapInfo");
     } catch (error) {
       console.error("Error setting up Colyseus message handlers:", error);
@@ -322,6 +334,14 @@ export class Main extends Phaser.Scene {
   }
 
   update(time: number) {
+    if (Phaser.Input.Keyboard.JustDown(this.pauseInput)) {
+      this.room.send("togglePause");
+    }
+
+    if (this.isPaused) {
+      return;
+    }
+
     if (Phaser.Input.Keyboard.JustDown(this.resetInput)) {
       this.room.send("reset");
     }

docker-compose.yml

@@ -1,5 +1,3 @@
-version: "3.8"
-
 services:
   backend:
     build:

server/Dockerfile

@@ -1,12 +1,14 @@
-FROM node:20-alpine
+FROM node:22-alpine
 
 WORKDIR /app
 
 COPY package*.json ./
 
-RUN npm install && npm cache clean --force
+RUN apk add --no-cache git \
+    && npm install \
+    && npm cache clean --force
 
 COPY . .
 
 EXPOSE 2567
-CMD ["npm", "start"]
+CMD ["npm", "start"]

server/src/rooms/GameRoom.ts

@@ -21,6 +21,8 @@ export class GameRoom extends Room<{ state: RoomState }> {
     this.maxClients = this.roomData.maxClients ?? this.maxClients;
     this.state.loadRoomFromJson(this.roomData);
     this.onMessage("move", (client, message) => {
+      if (this.state.isPaused) return;
+
       const player = this.state.playerState.players.get(client.sessionId);
       if (!player) return;
 
@@ -70,6 +72,8 @@ export class GameRoom extends Room<{ state: RoomState }> {
     });
 
     this.setSimulationInterval((deltaTime) => {
+      if (this.state.isPaused) return;
+
       const result = this.state.updateLasers(deltaTime);
       if (result.length > 0) {
         this.broadcast("lasersUpdated", { lasers: result });
@@ -119,6 +123,14 @@ export class GameRoom extends Room<{ state: RoomState }> {
         mapInfo: this.state.getMapInfo(),
       });
     });
+
+    this.onMessage("togglePause", (client) => {
+      this.state.isPaused = !this.state.isPaused;
+
+      this.broadcast("pauseToggled", {
+        isPaused: this.state.isPaused,
+      });
+    });
   }
 
   onJoin(client: Client, options: any) {
@@ -131,6 +143,7 @@ export class GameRoom extends Room<{ state: RoomState }> {
       position: player.position,
       index: player.index,
     });
+
     console.log(client.sessionId, "joined!");
   }
 

server/src/rooms/schema/RoomState.ts

@@ -15,6 +15,7 @@ export class RoomState extends Schema {
   @type(["string"]) grid = new ArraySchema<string>();
   @type("number") width: number = 10;
   @type("number") height: number = 7;
+  @type("boolean") isPaused: boolean = false;
 
   @type([Position]) startingPositions = new ArraySchema<Position>();