tickcli-js 0.0.0-stage → 0.1.1

package/examples/games/tag.html

@@ -0,0 +1,51 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Tag</title></head><body>
+<script src="lib:room"></script>
+<script src="lib:game"></script>
+<script>
+// Tag for 2 to 8 players. Whoever is "it" chases the others; staying free earns points. The host decides who is it and keeps the score.
+const W = 800, H = 600, SPEED = 230, ROUND = 60;
+let x, y, flash = null;
+Game({
+  title: "Tag", help: "Arrow keys, WASD or the pad to run. Red ring = it: touch someone to pass it on. Free players score every second.", aspect: W / H,
+  multiplayer: { max: 8, player: { x: [0, W], y: [0, H] } },
+  setup(g) { x = 60 + Math.random() * (W - 120); y = 60 + Math.random() * (H - 120); g.me.set({ x, y }); },
+  update(g, dt) {
+    const a = g.axis();
+    x = Math.max(12, Math.min(W - 12, x + a.x * SPEED * dt));
+    y = Math.max(12, Math.min(H - 12, y + a.y * SPEED * dt));
+    g.me.set({ x, y });
+  },
+  host(g, dt) {
+    const s = g.shared, live = g.players.filter((p) => p.online && typeof p.state.x === "number");
+    if (s.endsAt == null) return g.shared.set({ endsAt: g.now + ROUND, it: live.length ? live[Math.floor(Math.random() * live.length)].id : null, score: {}, safeUntil: 0 });
+    if (g.now >= s.endsAt) return g.gameOver();
+    let it = live.find((p) => p.id === s.it);
+    if (!it && live.length) return g.shared.set({ it: live[0].id, safeUntil: g.now + 1.5 });
+    const score = {};
+    for (const p of live) if (p.id !== s.it) score[p.id] = ((s.score && s.score[p.id]) || 0) + dt;
+    g.shared.set({ score });
+    if (!it || g.now < (s.safeUntil || 0)) return;
+    for (const p of live) if (p.id !== it.id && Math.hypot(p.state.x - it.state.x, p.state.y - it.state.y) < 28) { g.shared.set({ it: p.id, safeUntil: g.now + 1.5 }); g.fx("tag", { x: p.state.x, y: p.state.y }); break; }
+  },
+  onFx(g, from, name, d) { if (name === "tag") flash = { x: d.x, y: d.y, until: performance.now() + 400 }; },
+  draw(g, ctx, w, h) {
+    const k = w / W;
+    ctx.fillStyle = "#0f172a"; ctx.fillRect(0, 0, w, h);
+    const s = g.shared || {};
+    for (const p of g.players) {
+      if (typeof p.state.x !== "number") continue;
+      ctx.globalAlpha = p.online ? 1 : 0.4;
+      ctx.fillStyle = p.me ? "#60a5fa" : "#e2e8f0";
+      ctx.beginPath(); ctx.arc(p.state.x * k, p.state.y * k, 12 * k, 0, 7); ctx.fill();
+      if (p.id === s.it) { ctx.strokeStyle = "#ef4444"; ctx.lineWidth = 4 * k; ctx.beginPath(); ctx.arc(p.state.x * k, p.state.y * k, 18 * k, 0, 7); ctx.stroke(); }
+      ctx.fillStyle = "#cbd5e1"; ctx.font = `${12 * k}px system-ui`; ctx.textAlign = "center"; ctx.fillText(p.name, p.state.x * k, (p.state.y - 22) * k);
+    }
+    ctx.globalAlpha = 1;
+    if (flash && performance.now() < flash.until) { ctx.strokeStyle = "#fbbf24"; ctx.lineWidth = 3; ctx.beginPath(); ctx.arc(flash.x * k, flash.y * k, 30 * k, 0, 7); ctx.stroke(); }
+    ctx.fillStyle = "#f8fafc"; ctx.font = `${16 * k}px system-ui`; ctx.textAlign = "left";
+    if (s.endsAt != null) ctx.fillText(`Time ${Math.max(0, Math.ceil(s.endsAt - g.now))}`, 12 * k, 22 * k);
+    const mine = s.score && s.score[g.me.id];
+    ctx.textAlign = "right"; ctx.fillText(`You ${Math.floor(mine || 0)}`, w - 12 * k, 22 * k);
+  },
+});
+</script></body></html>

package/examples/games/tictactoe.html

@@ -0,0 +1,53 @@
+<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Tic-tac-toe</title></head><body>
+<script src="lib:room"></script>
+<script src="lib:game"></script>
+<script>
+// Turn game for 2 players. Players ask the host to place a mark; the host checks whose turn it is and who won.
+const LINES = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];
+let cursor = 4, size = 300, wired = false;
+Game({
+  title: "Tic-tac-toe", help: "Tap a square, or move with the arrows and press Space. Three in a row wins.", aspect: 1,
+  multiplayer: { max: 2, player: {} },
+  setup(g) {
+    cursor = 4;
+    if (!wired) { wired = true; g.canvas.addEventListener("pointerup", (e) => { const r = g.canvas.getBoundingClientRect(); const c = Math.floor((e.clientX - r.left) / r.width * 3), w = Math.floor((e.clientY - r.top) / r.height / 0.9 * 3); if (c >= 0 && c < 3 && w >= 0 && w < 3) { cursor = w * 3 + c; place(g); } }); }
+  },
+  update() {},
+  host(g) {
+    const s = g.shared, ids = g.players.map((p) => p.id);
+    if (!s.board) return g.shared.set({ board: Array(9).fill(""), marks: { [ids[0]]: "X", ...(ids[1] ? { [ids[1]]: "O" } : {}) }, turn: ids[0], winner: null });
+    // a second player joined after the start: give them O
+    for (const id of ids) if (!s.marks[id] && Object.keys(s.marks).length < 2) g.shared.set({ marks: { [id]: "O" } });
+  },
+  onAction(g, from, name, d) {
+    const s = g.shared;
+    if (name !== "place" || s.winner || from !== s.turn || !s.board || s.board[d.i] !== "" || !s.marks[from]) return false;
+    const board = s.board.slice(); board[d.i] = s.marks[from];
+    const other = Object.keys(s.marks).find((id) => id !== from) || from;
+    const won = LINES.some((l) => l.every((i) => board[i] === s.marks[from]));
+    const full = board.every((c) => c);
+    g.shared.set({ board, turn: other, winner: won ? from : full ? "draw" : null, score: won ? { [from]: 1 } : {} });
+    if (won || full) g.gameOver();
+  },
+  onInput(g, a) {
+    if (a === "left") cursor = cursor % 3 ? cursor - 1 : cursor;
+    if (a === "right") cursor = cursor % 3 < 2 ? cursor + 1 : cursor;
+    if (a === "up") cursor = cursor >= 3 ? cursor - 3 : cursor;
+    if (a === "down") cursor = cursor < 6 ? cursor + 3 : cursor;
+    if (a === "action") place(g);
+  },
+  draw(g, ctx, w, h) {
+    const s = g.shared || {}, c = w / 3, bh = h * 0.9, ch = bh / 3;
+    ctx.fillStyle = "#0f172a"; ctx.fillRect(0, 0, w, h);
+    ctx.strokeStyle = "#475569"; ctx.lineWidth = 3;
+    for (let i = 1; i < 3; i++) { ctx.beginPath(); ctx.moveTo(i * c, 8); ctx.lineTo(i * c, bh - 8); ctx.moveTo(8, i * ch); ctx.lineTo(w - 8, i * ch); ctx.stroke(); }
+    ctx.strokeStyle = "#60a5fa"; ctx.strokeRect((cursor % 3) * c + 4, Math.floor(cursor / 3) * ch + 4, c - 8, ch - 8);
+    ctx.font = `${Math.min(c, ch) * 0.6}px system-ui`; ctx.textAlign = "center"; ctx.textBaseline = "middle";
+    (s.board || []).forEach((m, i) => { if (m) { ctx.fillStyle = m === "X" ? "#f87171" : "#34d399"; ctx.fillText(m, (i % 3) * c + c / 2, Math.floor(i / 3) * ch + ch / 2); } });
+    ctx.font = `${w * 0.045}px system-ui`; ctx.fillStyle = "#f8fafc";
+    const me = s.marks && s.marks[g.me.id];
+    ctx.fillText(s.winner ? (s.winner === "draw" ? "Draw" : s.winner === g.me.id ? "You win" : "You lose") : s.turn === g.me.id ? `Your turn (${me})` : "Their turn", w / 2, h - 16);
+  },
+});
+function place(g) { if (g.state === "playing") g.act("place", { i: cursor }); }
+</script></body></html>

package/package.json

@@ -1,6 +1,103 @@
 {
   "name": "tickcli-js",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Live rooms for browser games: one player's browser runs the rules, a small Node hub keeps the shared state, membership and order. No game code on the server.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tickclidev/tickcli.git"
+  },
+  "homepage": "https://tickcli.com/docs/",
+  "bugs": {
+    "url": "https://github.com/tickclidev/tickcli/issues"
+  },
+  "keywords": [
+    "multiplayer",
+    "websocket",
+    "browser-games",
+    "game-server",
+    "rooms",
+    "realtime",
+    "html5-games"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/hub.d.ts",
+      "default": "./dist/hub.js"
+    },
+    "./node": {
+      "types": "./dist/node.d.ts",
+      "default": "./dist/node.js"
+    },
+    "./serve": {
+      "types": "./dist/serve.d.ts",
+      "default": "./dist/serve.js"
+    },
+    "./remote": {
+      "types": "./dist/remote.d.ts",
+      "default": "./dist/remote.js"
+    },
+    "./client/*": "./client/*",
+    "./package.json": "./package.json"
+  },
+  "bin": {
+    "tickcli": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "src",
+    "client",
+    "examples/games",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "sideEffects": [
+    "./client/*.js"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "node --test test/*.test.ts test/engine/*.test.ts",
+    "test:critical": "node --test test/*.test.ts",
+    "demo": "node src/cli.ts examples/games",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build",
+    "e2e": "node e2e/quick.ts --all",
+    "e2e:quick": "node e2e/quick.ts",
+    "e2e:serial": "node e2e/quickstart.ts && node e2e/demo.ts && node e2e/saves.ts && node e2e/rooms.ts && node e2e/remote.ts && node e2e/three.ts && node e2e/demos.ts && node e2e/tutorials.ts"
+  },
+  "peerDependencies": {
+    "three": ">=0.171.0",
+    "ws": "^8.18.0",
+    "phaser": ">=4.0.0",
+    "pixi.js": ">=8.0.0"
+  },
+  "peerDependenciesMeta": {
+    "ws": {
+      "optional": true
+    },
+    "three": {
+      "optional": true
+    },
+    "phaser": {
+      "optional": true
+    },
+    "pixi.js": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/node": "^22.18.0",
+    "@types/ws": "8.18.1",
+    "phaser": "4.2.1",
+    "pixi.js": "8.22.0",
+    "playwright": "1.64.0",
+    "three": "0.186.1",
+    "typescript": "5.9.3",
+    "ws": "8.22.0"
+  }
+}

package/src/cli.ts

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+// npx tickcli-js [folder] [--port 8080] [--host 0.0.0.0] [--saves folder] [--title "My games"]
+// Serves every .html game in the folder with live rooms. TICKCLI_SECRET (any long random text) keeps players' seats across restarts.
+import { realpathSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { createGameServer } from "./serve.ts";
+
+const HELP = `tickcli: live rooms for the .html games in a folder
+
+  npx tickcli-js [folder] [options]
+
+  folder            games to serve, one .html file each (default: this folder)
+  --port <n>        port to listen on (default 8080, or $PORT)
+  --host <addr>     address to listen on (default: all)
+  --saves <folder>  keep saved profiles and worlds there (default: none)
+  --title <text>    heading of the game list
+  --behind-proxy    an https proxy on this machine or network (Caddy, nginx) is in front: count players by the address it saw, and
+                    mark the pass cookie Secure
+  -h, --help        this text
+
+  TICKCLI_SECRET  set it to keep players' seats and saves across restarts
+`;
+
+/** The command line as options; throws a message for anything it does not understand. */
+export function parseArgs(argv: string[], env: Record<string, string | undefined> = {}) {
+  const o: { games: string; port: number; host?: string; saves?: string; title?: string; proxy?: boolean; help: boolean } = { games: ".", port: Number(env.PORT) || 8080, help: false };
+  let folder = false;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    const val = () => { const v = argv[++i]; if (v === undefined || v.startsWith("--")) throw new Error(`${a} needs a value`); return v; };
+    if (a === "-h" || a === "--help") o.help = true;
+    else if (a === "--port") { o.port = Number(val()); if (!Number.isInteger(o.port) || o.port < 0 || o.port > 65535) throw new Error("--port is a number from 0 to 65535"); }
+    else if (a === "--host") o.host = val();
+    else if (a === "--saves") o.saves = val();
+    else if (a === "--title") o.title = val();
+    else if (a === "--behind-proxy") o.proxy = true;
+    else if (a.startsWith("-")) throw new Error(`unknown option ${a}`);
+    else if (!folder) { o.games = a; folder = true; }
+    else throw new Error(`one folder only (got ${o.games} and ${a})`);
+  }
+  return o;
+}
+
+async function main() {
+  let o;
+  try { o = parseArgs(process.argv.slice(2), process.env); } catch (e) { console.error(`tickcli: ${(e as Error).message}\n\n${HELP}`); process.exit(2); }
+  if (o.help) { console.log(HELP); return; }
+  const app = createGameServer({ games: o.games, saves: o.saves, title: o.title, secret: process.env.TICKCLI_SECRET || undefined, trustProxy: !!o.proxy, secure: !!o.proxy });
+  const url = await app.listen(o.port, o.host);
+  console.log(`tickcli: serving ${o.games} on ${url}`);
+  if (!process.env.TICKCLI_SECRET) console.log("tickcli: no TICKCLI_SECRET set, so players get new seats after a restart");
+  const stop = () => { void app.close().then(() => process.exit(0)); };
+  process.once("SIGINT", stop);
+  process.once("SIGTERM", stop);
+}
+
+// run when started as a program (node src/cli.ts, the npx bin), not when imported by a test
+const self = fileURLToPath(import.meta.url);
+if (process.argv[1] && realpathSync(process.argv[1]) === realpathSync(self)) void main().catch((e) => { console.error(`tickcli: ${(e as Error).message}`); process.exit(1); });