@signe/room 2.10.0 → 3.0.0

package/examples/node-game/room.ts

@@ -0,0 +1,145 @@
+import { Action, Request, Room, Server } from "@signe/room";
+import { signal } from "@signe/reactive";
+import { connected, sync, users } from "@signe/sync";
+import { z } from "zod";
+
+const ARENA_WIDTH = 900;
+const ARENA_HEIGHT = 560;
+const PLAYER_RADIUS = 16;
+const STAR_RADIUS = 13;
+const COLLECT_DISTANCE = PLAYER_RADIUS + STAR_RADIUS + 8;
+
+type Point = {
+  x: number;
+  y: number;
+};
+
+class Player {
+  @sync() name = signal("Anonymous");
+  @connected() connected = signal(false);
+  @sync() x = signal(-1);
+  @sync() y = signal(-1);
+  @sync() color = signal("#2563eb");
+  @sync() score = signal(0);
+}
+
+@Room({ path: "{roomId}", sessionExpiryTime: 2000, throttleStorage: 2500 })
+class GameRoom {
+  @sync() star = signal<Point>(randomPoint());
+  @users(Player) players = signal<Record<string, Player>>({});
+
+  onJoin(player: Player, _conn: unknown, ctx: { request?: Request }) {
+    const url = new URL(ctx.request?.url ?? "http://localhost");
+    const name = url.searchParams.get("name")?.trim();
+
+    if (name) {
+      player.name.set(name.slice(0, 40));
+    }
+
+    if (player.x() < 0 || player.y() < 0) {
+      const point = randomPoint();
+      player.x.set(point.x);
+      player.y.set(point.y);
+      player.color.set(colorFromName(player.name()));
+    }
+  }
+
+  @Action("move", z.object({ x: z.number(), y: z.number() }))
+  move(player: Player, value: Point) {
+    player.x.set(clamp(value.x, PLAYER_RADIUS, ARENA_WIDTH - PLAYER_RADIUS));
+    player.y.set(clamp(value.y, PLAYER_RADIUS, ARENA_HEIGHT - PLAYER_RADIUS));
+  }
+
+  @Action("collect", z.object({}))
+  collect(player: Player) {
+    const distance = getDistance(player.x(), player.y(), this.star().x, this.star().y);
+
+    if (distance > COLLECT_DISTANCE) {
+      return;
+    }
+
+    player.score.update((score) => score + 1);
+    this.star.set(randomPoint());
+  }
+
+  @Request({ path: "/state" })
+  getState() {
+    return this.snapshot();
+  }
+
+  @Request({ path: "/reset", method: "POST" })
+  reset() {
+    for (const player of Object.values(this.players())) {
+      player.score.set(0);
+    }
+
+    this.star.set(randomPoint());
+    return this.snapshot();
+  }
+
+  private snapshot() {
+    return {
+      arena: {
+        width: ARENA_WIDTH,
+        height: ARENA_HEIGHT,
+      },
+      star: this.star(),
+      players: Object.fromEntries(
+        Object.entries(this.players()).map(([id, player]) => [
+          id,
+          {
+            name: player.name(),
+            connected: player.connected(),
+            x: player.x(),
+            y: player.y(),
+            color: player.color(),
+            score: player.score(),
+          },
+        ])
+      ),
+    };
+  }
+}
+
+export class GameServer extends Server {
+  rooms = [GameRoom];
+}
+
+function randomPoint(): Point {
+  return {
+    x: randomInt(PLAYER_RADIUS + 20, ARENA_WIDTH - PLAYER_RADIUS - 20),
+    y: randomInt(PLAYER_RADIUS + 20, ARENA_HEIGHT - PLAYER_RADIUS - 20),
+  };
+}
+
+function randomInt(min: number, max: number) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+function getDistance(ax: number, ay: number, bx: number, by: number) {
+  return Math.hypot(ax - bx, ay - by);
+}
+
+function colorFromName(name: string) {
+  const colors = [
+    "#2563eb",
+    "#dc2626",
+    "#16a34a",
+    "#9333ea",
+    "#ea580c",
+    "#0891b2",
+    "#be123c",
+    "#4f46e5",
+  ];
+  let hash = 0;
+
+  for (let index = 0; index < name.length; index += 1) {
+    hash = (hash * 31 + name.charCodeAt(index)) >>> 0;
+  }
+
+  return colors[hash % colors.length];
+}

package/examples/node-game/server.sqlite.ts

@@ -0,0 +1,54 @@
+import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { WebSocketServer } from "ws";
+import { createNodeRoomTransport, createSqliteNodeRoomStorage } from "@signe/room/node";
+import { GameServer } from "./room";
+
+const root = fileURLToPath(new URL(".", import.meta.url));
+const port = Number(process.env.PORT ?? 3000);
+
+const transport = createNodeRoomTransport(GameServer, {
+  partiesPath: "/parties/main",
+  storage: createSqliteNodeRoomStorage({
+    databasePath: join(root, "rooms.sqlite"),
+  }),
+});
+
+const server = createServer(async (req, res) => {
+  if (req.url?.startsWith("/parties/main/")) {
+    await transport.handleNodeRequest(req, res);
+    return;
+  }
+
+  if (req.url === "/" || req.url === "/index.html" || req.url?.startsWith("/rooms/")) {
+    const html = await readFile(join(root, "public/index.html"), "utf8");
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(html);
+    return;
+  }
+
+  res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+  res.end("Not Found");
+});
+
+const wsServer = new WebSocketServer({ noServer: true });
+
+server.on("upgrade", (request, socket, head) => {
+  if (request.url?.startsWith("/parties/main/")) {
+    transport.handleUpgrade(wsServer, request, socket, head);
+    return;
+  }
+
+  socket.destroy();
+});
+
+server.listen(port, () => {
+  console.log(`Signe Node room game SQLite example: http://localhost:${port}`);
+  console.log("SQLite file: packages/room/examples/node-game/rooms.sqlite");
+  console.log(`Game URL: http://localhost:${port}/rooms/demo`);
+  console.log(`HTTP state: http://localhost:${port}/parties/main/demo/state`);
+  console.log(`HTTP reset: POST http://localhost:${port}/parties/main/demo/reset`);
+  console.log(`WebSocket: ws://localhost:${port}/parties/main/demo?name=Sam`);
+});

package/examples/node-game/server.ts

@@ -0,0 +1,53 @@
+import { createServer } from "node:http";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { WebSocketServer } from "ws";
+import { createMemoryNodeRoomStorage, createNodeRoomTransport } from "@signe/room/node";
+import { GameServer } from "./room";
+
+const root = fileURLToPath(new URL(".", import.meta.url));
+const port = Number(process.env.PORT ?? 3000);
+
+const storage = createMemoryNodeRoomStorage();
+
+const transport = createNodeRoomTransport(GameServer, {
+  partiesPath: "/parties/main",
+  storage,
+});
+
+const server = createServer(async (req, res) => {
+  if (req.url?.startsWith("/parties/main/")) {
+    await transport.handleNodeRequest(req, res);
+    return;
+  }
+
+  if (req.url === "/" || req.url === "/index.html" || req.url?.startsWith("/rooms/")) {
+    const html = await readFile(join(root, "public/index.html"), "utf8");
+    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+    res.end(html);
+    return;
+  }
+
+  res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+  res.end("Not Found");
+});
+
+const wsServer = new WebSocketServer({ noServer: true });
+
+server.on("upgrade", (request, socket, head) => {
+  if (request.url?.startsWith("/parties/main/")) {
+    transport.handleUpgrade(wsServer, request, socket, head);
+    return;
+  }
+
+  socket.destroy();
+});
+
+server.listen(port, () => {
+  console.log(`Signe Node room game example: http://localhost:${port}`);
+  console.log(`Game URL: http://localhost:${port}/rooms/demo`);
+  console.log(`HTTP state: http://localhost:${port}/parties/main/demo/state`);
+  console.log(`HTTP reset: POST http://localhost:${port}/parties/main/demo/reset`);
+  console.log(`WebSocket: ws://localhost:${port}/parties/main/demo?name=Sam`);
+});

package/examples/node-game/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  },
+  "include": ["room.ts", "server.ts", "server.sqlite.ts"],
+  "exclude": []
+}

package/examples/node-shard/README.md

@@ -0,0 +1,32 @@
+# Signe Node Shard Example
+
+This example runs two local Node processes with three Party-style namespaces:
+
+- World process on `http://localhost:3002`: the world registry, shard balancer, and dashboard.
+- Room process on `http://localhost:3003`: the authoritative `main` room server and `shard` proxies.
+
+The browser UI lets you inspect one world, create or scale room shards, change shard status, and then enter the room through the selected world.
+
+## Run
+
+```bash
+pnpm install
+pnpm --dir packages/room/examples/node-shard dev
+```
+
+Open:
+
+```txt
+http://localhost:3002
+```
+
+## Useful URLs
+
+```txt
+World dashboard: http://localhost:3002
+World connect:   POST http://localhost:3002/api/world/world-default/connect
+Main HTTP:       http://localhost:3003/parties/main/demo/state
+Shard WS:        ws://localhost:3003/parties/shard/{shardId}
+```
+
+This is a local development dashboard. Management requests are proxied by the world process so the browser does not need to know `SHARD_SECRET`.

package/examples/node-shard/dev.ts

@@ -0,0 +1,39 @@
+import { spawn } from "node:child_process";
+
+const commands = [
+  ["world", ["tsx", "world-server.ts"]],
+  ["room", ["tsx", "room-server.ts"]],
+] as const;
+
+const children = commands.map(([name, args]) => {
+  const child = spawn("pnpm", ["exec", ...args], {
+    stdio: ["ignore", "pipe", "pipe"],
+    env: process.env,
+  });
+
+  child.stdout.on("data", (chunk) => {
+    process.stdout.write(`[${name}] ${chunk}`);
+  });
+  child.stderr.on("data", (chunk) => {
+    process.stderr.write(`[${name}] ${chunk}`);
+  });
+  child.on("exit", (code) => {
+    if (code && code !== 0) {
+      process.exitCode = code;
+      stop();
+    }
+  });
+
+  return child;
+});
+
+process.on("SIGINT", stop);
+process.on("SIGTERM", stop);
+
+function stop() {
+  for (const child of children) {
+    if (!child.killed) {
+      child.kill("SIGTERM");
+    }
+  }
+}

package/examples/node-shard/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@signe/room-node-shard-example",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm --filter @signe/room build && tsx dev.ts",
+    "dev:world": "tsx world-server.ts",
+    "dev:room": "tsx room-server.ts",
+    "build": "pnpm --filter @signe/room build && tsc --noEmit"
+  },
+  "dependencies": {
+    "@signe/reactive": "workspace:*",
+    "@signe/room": "workspace:*",
+    "@signe/sync": "workspace:*",
+    "ws": "^8.17.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.13.9",
+    "@types/ws": "^8.5.12",
+    "tsx": "^4.19.2",
+    "typescript": "^5.4.5"
+  }
+}