@netforge/template-tower 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 NetNet Capital Management
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/NOTICE

@@ -0,0 +1,28 @@
+@netforge/template-tower (COGSPIRE)
+Copyright (c) 2026 NetNet Capital Management
+
+An original game. No names, characters, maps, models, sounds or code from
+any other game or franchise.
+
+Art and sound
+- Models come from the per-style asset library
+  (@netforge/asset-library): CC0 1.0 models by Kenney and
+  Quaternius (Space Kit turrets, Nature Kit, monsters, robots), each pack listed with its
+  source URL and licence verification in that package's NOTICE and
+  manifest/packs.json. The files are fetched and built, never committed
+  here; the build copies only the models this game uses.
+- Fallback shapes (@netforge/tabletop stage.ts) are generated from three.js
+  primitives; all textures are drawn on a canvas at load; sounds are the
+  library's CC0 samples with WebAudio synth fallbacks.
+
+Dependencies (unmodified, via npm)
+- three.js 0.186.1 (https://github.com/mrdoob/three.js), MIT.
+- @netforge/engine and @netforge/engine-sim (this repository);
+  see their NOTICE files (bitECS MPL-2.0, Rapier Apache-2.0, Colyseus MIT,
+  zod MIT).
+
+Patterns (ideas only)
+- The tower defense genre's general mechanics (a fixed road, waves, towers
+  that target and upgrade, a bounty economy, lives). Mechanics, not
+  expression; no map, tower, creep, character or text was copied from any
+  game.

package/README.md

@@ -1,3 +1,54 @@
-# Temporary Holding Version
+# COGSPIRE (tower defense template)
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A brass clockwork spire stands at the end of an old rail road across the
+moor. Rust swarms crawl the road toward it in waves. Up to four tinkers
+share the board: each builds and upgrades brass towers with their own
+gold, every kill pays its builder and a share to the rest, and the team
+shares the spire's bells. Hold twenty waves to keep the spire.
+
+A board genre (`packages/engine/src/rules`): the rules run on the room
+server at 30 Hz behind the same SimAdapter seam as the action templates,
+so the netcode, the referee, run verification, the store and the stake
+are the ones every template uses. The client kit is `@netforge/tabletop`.
+
+| Path | What |
+|---|---|
+| `src/game.ts` | The game, as the model writes it (declarations only). |
+| `src/manifest.ts` | Loads it; `towerAdapter()` for the room server and client. Room template `tower`. |
+| `src/store.ts` | Coin prices the client is wired to, the template's own coin (COG). |
+| `client/` | The browser client: the board, towers, creeps, tracers, the build bar and tower panel. |
+| `test/` | Playtest bots through `engine.test.run`, and the store. |
+| `llms.txt` | How to change the game (for agents). |
+
+## How it plays on the server
+
+- Server-authoritative at 30 Hz. Your tinker (the cursor) is predicted, so
+  pointing never waits for the server; builds, upgrades, sells and the
+  ready vote are actions the room validates (gold, tile, ownership).
+- Towers aim at the creep furthest along the road in range. Splash hits a
+  radius, frost slows, chain jumps. Kills pay the builder a bounty and the
+  rest of the team a share; a cleared wave pays everyone.
+- Shared bells: a leak costs the creep's damage; zero bells loses the run.
+  The end screen shows what the run paid, then a fresh run starts.
+- Earn (the room is the referee): three waves, ten waves, the first boss,
+  sixty kills. A player who joins mid-run is not paid for waves cleared
+  before their run started.
+
+## Run it
+
+This template runs on your own computer with play money through
+`kit play` (`@netforge/kit-play`). From the repository root:
+
+```sh
+pnpm install --frozen-lockfile && pnpm build
+mkdir -p play-tower/src && cp packages/template-tower/src/game.ts play-tower/src/
+echo '{"template":"tower-defense"}' > play-tower/netnet.json
+node packages/kit-play/dist/cli.js play-tower       # opens http://127.0.0.1:4663
+```
+
+Edit `play-tower/src/game.ts` and run it again to try a change. Real-token
+earning, stakes and claims run only on the hosted Net Forge server.
+
+Click a tile to build the tower picked in the bar (1-4), click a tower to
+upgrade or sell it, Space calls the next wave. Touch: tap a tile to aim,
+tap again to build. ` shows stats.

package/client/decor.ts

@@ -0,0 +1,11 @@
+/**
+ * Library models the scene draws on its own (not named in game.ts): the
+ * spire, the gate, the moor's trees and rocks. The build copies these into
+ * ./library next to the page, in every art style (?style= may draw any).
+ */
+export const SPIRE_MODEL = "style.lowpoly.obelisk";
+export const GATE_MODEL = "style.lowpoly.column_broken";
+export const ROCK_MODEL = "style.lowpoly.rock_large";
+export const TREE_MODELS = ["style.lowpoly.tree_pine", "style.lowpoly.tree_autumn", "style.lowpoly.tree_fat", "style.lowpoly.bush"] as const;
+export const SMALL_DECOR = ["style.lowpoly.rock_small", "style.lowpoly.mushroom_red", "style.lowpoly.stump", "style.lowpoly.flower_red"] as const;
+export const SCENE_MODELS: readonly string[] = [SPIRE_MODEL, GATE_MODEL, ROCK_MODEL, ...TREE_MODELS, ...SMALL_DECOR];

package/client/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
+    <title>Cogspire</title>
+  </head>
+  <body>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/client/main.ts

@@ -0,0 +1,746 @@
+/**
+ * COGSPIRE client: join a board by link, point to move your tinker, click
+ * a tile to build the tower picked in the bar, click a tower to upgrade or
+ * sell it, and call the next wave early when everyone is ready. The room
+ * decides every shot, kill, bounty and leak; your tinker is predicted, so
+ * the cursor never waits for the server.
+ *
+ * URL parameters: see @netforge/tabletop boot.ts (?room, ?server,
+ * ?style, ?autopilot, ?preview, ?stats, ?shapes, ?webgl, Net Forge flags).
+ */
+import {
+  AdditiveBlending,
+  BoxGeometry,
+  CanvasTexture,
+  Color,
+  CylinderGeometry,
+  DoubleSide,
+  Group,
+  InstancedMesh,
+  Matrix4,
+  Mesh,
+  MeshBasicMaterial,
+  MeshStandardMaterial,
+  NearestFilter,
+  PlaneGeometry,
+  Quaternion,
+  RingGeometry,
+  SRGBColorSpace,
+  Vector3,
+} from "three/webgpu";
+import type { InterpolatedEntity } from "@netforge/engine/net";
+import { bestTowerTile, CreepFlag, ENTITY_BASE, RF, RulesKind, TILE_M, tileAt, tileCenter, tileKey, TowerAct, UNITS } from "@netforge/engine/rules";
+import type { RulesInput } from "@netforge/engine/rules";
+import { $, bootBoard, cssColor, type BoardView, type Placed } from "@netforge/tabletop";
+import { COSMETICS, GAME_VERSION, PLACE, TEMPLATE, towerAdapter, towerGame, towerManifest } from "../src/manifest.js";
+import { COGSPIRE_COIN } from "../src/store.js";
+import { GATE_MODEL, ROCK_MODEL, SMALL_DECOR, SPIRE_MODEL, TREE_MODELS } from "./decor.js";
+import { ENEMY_NAMES, KEEPER_COLORS, RULE_NAMES, SKU_NAMES, TITLE, UPGRADE_NAMES, WEAPON_NAMES } from "./names.js";
+
+interface TowerView extends BoardView {
+  readonly wave: number;
+  readonly waves: number;
+  readonly stage: "build" | "wave";
+  readonly countdown: number;
+  readonly lives: number;
+  readonly livesMax: number;
+  readonly left: number;
+  readonly next: readonly { type: number; count: number }[];
+  readonly boss: { type: number; hp: number; maxHp: number } | null;
+  readonly players: readonly { id: number; gold: number; kills: number; ready: boolean; built: number }[];
+  readonly gold?: number;
+  readonly ready?: boolean;
+}
+
+const genre = towerGame();
+const g = genre.game;
+const b = g.board;
+const manifest = towerManifest();
+const W = b.w * TILE_M;
+const H = b.h * TILE_M;
+const FINISH = [0xc9a15a, 0x5fbfa0, 0xffd76a];
+const CREEP_COLOR = [0xd9643a, 0x8fa3b8, 0xff9a3c, 0x9a7b5a, 0xb0a0ff, 0x77d06a];
+
+/** The browser's autopilot (?autopilot=1): build the cheapest-first rotation on the best free tile, upgrade, ready up. */
+let lastView: TowerView | null = null;
+let towerTiles = new Set<number>();
+let myTowers: { tx: number; ty: number; type: number; level: number }[] = [];
+let selfId = 0;
+const autopilot = (tick: number): RulesInput | null => {
+  const v = lastView;
+  if (!v || tick % 15 !== 0) return null;
+  const gold = v.gold ?? 0;
+  const order = g.towers.map((_, i) => i).sort((x, y) => (g.towers[x]?.def.cost ?? 0) - (g.towers[y]?.def.cost ?? 0));
+  const want = order[(myTowers.length + selfId) % order.length] ?? 0;
+  const type = (g.towers[want]?.def.cost ?? Infinity) <= gold ? want : (order.find((i) => (g.towers[i]?.def.cost ?? Infinity) <= gold) ?? want);
+  const tt = g.towers[type];
+  const at = (tx: number, ty: number, act: number, a = 0): RulesInput => {
+    const c = tileCenter(b, tx, ty);
+    return { mx: 0, mz: 0, cx: Math.round(c.x * 16), cz: Math.round(c.z * 16), act, a, b: tx, c: ty };
+  };
+  if (tt && gold >= tt.def.cost && myTowers.length < 7) {
+    const tile = bestTowerTile(g, towerTiles, type, selfId, 0);
+    if (tile) return at(tile.tx, tile.ty, TowerAct.Build, type);
+  }
+  const up = myTowers.filter((t) => (g.towers[t.type]?.upgradeCost[t.level] ?? Infinity) <= gold).sort((x, y) => x.level - y.level)[0];
+  if (up) return at(up.tx, up.ty, TowerAct.Upgrade);
+  if (v.stage === "build" && !v.ready) return { mx: 0, mz: 0, cx: 0, cz: 0, act: TowerAct.Ready, a: 1, b: 0, c: 0 };
+  return null;
+};
+
+async function main(): Promise<void> {
+  const app = await bootBoard({
+    adapter: towerAdapter(),
+    manifest,
+    template: TEMPLATE,
+    place: PLACE,
+    version: GAME_VERSION,
+    labels: {
+      title: TITLE,
+      rules: RULE_NAMES,
+      skus: SKU_NAMES,
+      upgrades: UPGRADE_NAMES,
+      loading: "Winding the spire",
+      help: "Click a tile to build · click a tower to upgrade · 1-4 pick a tower · Space call the wave · ` stats",
+    },
+    theme: {
+      accent: "#f2b84b",
+      gold: "#ffd76a",
+      ink: "#f6ecd9",
+      dim: "#b4a68c",
+      panel: "rgba(34, 24, 14, 0.86)",
+      bg: "#1d1710",
+      font: '"Trebuchet MS", "Gill Sans", system-ui, sans-serif',
+      display: 'Georgia, "Palatino Linotype", serif',
+      radius: 4,
+    },
+    coin: COGSPIRE_COIN,
+    cosmetics: COSMETICS,
+    swatch: (c) => `linear-gradient(135deg, ${cssColor(FINISH[c] ?? 0xc9a15a)}, #3a2a14)`,
+    ground: { w: W + 7, h: H + 2 },
+    preset: "day",
+    theme3d: "meadow",
+    groundColor: 0x4a5a32,
+    pitch: 1.0,
+    autopilot,
+    soundKey: "cogspire:sound",
+  });
+  selfId = app.self;
+  const { stage, hud, clock, sfx } = app;
+  sfx.define("shoot", { wave: "square", f0: 900, f1: 400, ms: 40, gain: 0.18 }, { minGapMs: 45, voices: 3 });
+  sfx.define("thud", { wave: "noise", f0: 400, f1: 80, ms: 160, gain: 0.5 }, { minGapMs: 90, voices: 2 });
+  sfx.define("bell", { wave: "triangle", f0: 880, f1: 660, ms: 380, gain: 0.6 }, { minGapMs: 200, voices: 1, pitchVar: 0 });
+
+  // ---- The board: one textured plate (tiles, road, rocks), rails along the road, the spire and the gate.
+  const plate = boardTexture();
+  const board = new Mesh(new PlaneGeometry(W, H, b.w * 2, b.h * 2), new MeshStandardMaterial({ map: plate, roughness: 0.95, metalness: 0 }));
+  board.rotation.x = -Math.PI / 2;
+  board.position.y = stage.groundAt(0, 0) + 0.03;
+  board.receiveShadow = true;
+  stage.add(board);
+  const railMat = new MeshStandardMaterial({ color: 0x8a7a66, roughness: 0.4, metalness: 0.8 });
+  for (let i = 1; i < b.path.length; i++) {
+    const a = b.path[i - 1] as readonly [number, number];
+    const c = b.path[i] as readonly [number, number];
+    const pa = tileCenter(b, a[0], a[1]);
+    const pc = tileCenter(b, c[0], c[1]);
+    const len = Math.hypot(pc.x - pa.x, pc.z - pa.z) + 0.3;
+    for (const off of [-0.45, 0.45]) {
+      const rail = new Mesh(new BoxGeometry(0.09, 0.08, len), railMat);
+      const horiz = a[1] === c[1];
+      rail.position.set((pa.x + pc.x) / 2 + (horiz ? 0 : off), board.position.y + 0.05, (pa.z + pc.z) / 2 + (horiz ? off : 0));
+      if (horiz) rail.rotation.y = Math.PI / 2;
+      stage.add(rail);
+    }
+  }
+  const last = b.path[b.path.length - 1] as readonly [number, number];
+  const prev = b.path[b.path.length - 2] ?? last;
+  const first = b.path[0] as readonly [number, number];
+  const endC = tileCenter(b, last[0], last[1]);
+  const dirX = Math.sign(last[0] - prev[0]);
+  const dirZ = Math.sign(last[1] - prev[1]);
+  const spireAt = { x: endC.x + dirX * TILE_M * 1.2, z: endC.z + dirZ * TILE_M * 1.2 };
+  const spire = stage.model(SPIRE_MODEL, 6, 0xc9a15a);
+  spire.root.position.set(spireAt.x, stage.groundAt(spireAt.x, spireAt.z), spireAt.z);
+  stage.add(spire.root);
+  const bellGlow = new Mesh(new CylinderGeometry(0.6, 0.6, 0.05, 24), new MeshBasicMaterial({ color: 0xffd76a, transparent: true, opacity: 0.55, blending: AdditiveBlending, depthWrite: false }));
+  bellGlow.position.set(spireAt.x, 0.08, spireAt.z);
+  bellGlow.scale.setScalar(2.4);
+  stage.add(bellGlow);
+  const startC = tileCenter(b, first[0], first[1]);
+  // Frame the board with the spire and the gate in view.
+  const minX = Math.min(-W / 2, spireAt.x - 3, startC.x - 3);
+  const maxX = Math.max(W / 2, spireAt.x + 3, startC.x + 3);
+  const minZ = Math.min(-H / 2, spireAt.z - 3);
+  const maxZ = Math.max(H / 2, spireAt.z + 3);
+  stage.frameRect((minX + maxX) / 2, (minZ + maxZ) / 2, maxX - minX, maxZ - minZ);
+  for (const side of [-1, 1]) {
+    const gate = stage.model(GATE_MODEL, 2.2, 0x8f8676);
+    const horiz = first[0] === 0 || first[0] === b.w - 1;
+    gate.root.position.set(startC.x + (horiz ? -TILE_M * 0.9 : side * 1.4), 0, startC.z + (horiz ? side * 1.4 : -TILE_M * 0.9));
+    stage.add(gate.root);
+  }
+  for (const k of b.blocked) {
+    const c = tileCenter(b, k % 64, Math.floor(k / 64));
+    const rock = stage.model(ROCK_MODEL, 1.1, 0x7c7468, TILE_M * 0.95);
+    rock.root.position.set(c.x, stage.groundAt(c.x, c.z), c.z);
+    rock.root.rotation.y = (k * 1.7) % (Math.PI * 2);
+    stage.add(rock.root);
+  }
+  // The moor past the board: trees and small things, scattered by a fixed hash, drawn as crowds (one draw a model).
+  const scatter: { crowd: ReturnType<typeof stage.crowd>; at: { x: number; z: number; yaw: number; s: number }[] }[] = [];
+  let seed = 11;
+  const rnd = () => ((seed = (seed * 16807) % 2147483647) / 2147483647);
+  for (const [list, n, h, ring] of [
+    [TREE_MODELS, 60, 3.2, 9],
+    [SMALL_DECOR, 50, 0.6, 5],
+  ] as const) {
+    for (const id of list) {
+      const at: { x: number; z: number; yaw: number; s: number }[] = [];
+      for (let i = 0; i < Math.floor(n / list.length); i++) {
+        const side = rnd() * 4;
+        const t = rnd() * 2 - 1;
+        const out = 1.5 + rnd() * ring;
+        const x = side < 1 ? -W / 2 - out : side < 2 ? W / 2 + out : t * (W / 2 + ring);
+        const z = side < 1 || side < 2 ? t * (H / 2 + ring) : side < 3 ? -H / 2 - out : H / 2 + out;
+        if (Math.abs(x - spireAt.x) < 3 && Math.abs(z - spireAt.z) < 3) continue;
+        at.push({ x, z, yaw: rnd() * 6.28, s: 0.75 + rnd() * 0.5 });
+      }
+      scatter.push({ crowd: stage.crowd(id, h, at.length, 0x557a3a), at });
+    }
+  }
+
+  // ---- Pieces that move: towers (one model each), creeps (a crowd per kind), health bars, tracers, tinkers.
+  const towers = new Map<number, { root: Group; model: Placed; type: number; level: number; shots: number; pips: Mesh[]; aim: number }>();
+  const creepCrowds = g.creeps.map((c, i) => stage.crowd(c.model, c.boss ? 2.8 : 1.2, 240, CREEP_COLOR[i % CREEP_COLOR.length]));
+  const BAR_CAP = 260;
+  const barBack = new InstancedMesh(new BoxGeometry(1, 0.06, 0.12), new MeshBasicMaterial({ color: 0x1a120a }), BAR_CAP);
+  const barFill = new InstancedMesh(new BoxGeometry(1, 0.07, 0.13), new MeshBasicMaterial({ color: 0x9dff7a }), BAR_CAP);
+  barBack.frustumCulled = barFill.frustumCulled = false;
+  stage.add(barBack, barFill);
+  const tracers: { mesh: Mesh; life: number }[] = [];
+  const tracerGeo = new CylinderGeometry(0.05, 0.05, 1, 5);
+  tracerGeo.rotateX(Math.PI / 2);
+  tracerGeo.translate(0, 0, 0.5);
+  for (let i = 0; i < 48; i++) {
+    const m = new Mesh(tracerGeo, new MeshBasicMaterial({ color: 0xffe0a0, transparent: true, blending: AdditiveBlending, depthWrite: false }));
+    m.visible = false;
+    stage.add(m);
+    tracers.push({ mesh: m, life: 0 });
+  }
+  const tinkers = new Map<number, { root: Group; ring: Mesh }>();
+  const tinkerFor = (owner: number): { root: Group; ring: Mesh } => {
+    let t = tinkers.get(owner);
+    if (t) return t;
+    const root = new Group();
+    const m = stage.model(manifest.game.players.prefab, 2.1, KEEPER_COLORS[(owner - 1) % KEEPER_COLORS.length]);
+    root.add(m.root);
+    const ring = new Mesh(new RingGeometry(0.45, 0.6, 24), new MeshBasicMaterial({ color: KEEPER_COLORS[(owner - 1) % KEEPER_COLORS.length] ?? 0xffffff, side: DoubleSide, transparent: true, opacity: 0.85 }));
+    ring.rotation.x = -Math.PI / 2;
+    ring.position.y = 0.06;
+    root.add(ring);
+    stage.add(root);
+    t = { root, ring };
+    tinkers.set(owner, t);
+    return t;
+  };
+
+  // ---- The cursor: a ghost of the picked tower with its range, green where it can go.
+  let picked = 0;
+  const ghost = new Group();
+  const ghostBody = new Mesh(new CylinderGeometry(0.5, 0.65, 1.4, 10), new MeshStandardMaterial({ color: 0x9dff7a, transparent: true, opacity: 0.45, emissive: new Color(0x2a5a1a) }));
+  ghostBody.position.y = 0.7;
+  const rangeRing = new Mesh(new RingGeometry(0.96, 1, 64), new MeshBasicMaterial({ color: 0x9dff7a, side: DoubleSide, transparent: true, opacity: 0.7 }));
+  rangeRing.rotation.x = -Math.PI / 2;
+  rangeRing.position.y = 0.09;
+  const tileMark = new Mesh(new PlaneGeometry(TILE_M * 0.94, TILE_M * 0.94), new MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.22, depthWrite: false }));
+  tileMark.rotation.x = -Math.PI / 2;
+  tileMark.position.y = 0.07;
+  ghost.add(ghostBody, rangeRing, tileMark);
+  ghost.visible = false;
+  stage.add(ghost);
+  let hover: { tx: number; ty: number } | null = null;
+  const towerAt = (tx: number, ty: number) => [...towerEnts.values()].find((e) => e.tx === tx && e.ty === ty);
+  let towerEnts = new Map<number, { tx: number; ty: number; type: number; level: number; owner: number }>();
+
+  // ---- The bar: tower cards, the wave button; the tower panel.
+  const bar = document.createElement("div");
+  bar.id = "bar";
+  bar.className = "hud";
+  document.body.append(bar);
+  const style = document.createElement("style");
+  style.textContent = `
+#bar { left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 6px; align-items: stretch; }
+#bar .card { pointer-events: auto; width: min(118px, 19vw); padding: 7px 8px; text-align: left; display: grid; gap: 1px; border: 1px solid rgba(242,184,75,0.25); background: var(--panel); border-radius: var(--r); cursor: pointer; }
+#bar .card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px rgba(0,0,0,0.4); transform: translateY(-3px); }
+#bar .card.poor { opacity: 0.55; }
+#bar .card kbd { font: 700 10px ui-monospace, monospace; color: var(--accent); }
+#bar .card b { font-size: 13px; }
+#bar .card span { font-size: 11px; color: var(--dim); }
+#bar .card i { font-style: normal; color: var(--gold); font-weight: 800; font-size: 12px; }
+#wavebtn { pointer-events: auto; min-width: 104px; font-weight: 800; letter-spacing: 0.06em; }
+#wavebtn.ready { background: #3f6b2a; border-color: #9dff7a; }
+#panel { display: none; pointer-events: auto; position: fixed; z-index: 7; transform: translate(-50%, calc(-100% - 18px)); background: var(--panel); border: 1px solid var(--accent); border-radius: var(--r); padding: 8px 10px; min-width: 150px; font-size: 13px; }
+#panel.show { display: block; }
+#panel .row { display: flex; gap: 6px; margin-top: 6px; }
+#panel small { color: var(--dim); }
+#bossbar { top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(360px, 44vw); text-align: center; font: 800 11px var(--display, inherit); letter-spacing: 0.2em; color: #ffb0a0; display: none; }
+#bossbar.show { display: block; }
+#bossbar > div { height: 9px; margin-top: 4px; background: rgba(0,0,0,0.5); border-radius: 3px; overflow: hidden; }
+#bossbar > div > i { display: block; height: 100%; background: linear-gradient(90deg, #ff5a3c, #ffb347); transform-origin: left; }
+#wavebanner { left: 50%; top: 32%; transform: translate(-50%, -50%); font: 900 42px Georgia, serif; letter-spacing: 0.22em; color: var(--accent); text-shadow: 0 2px 0 #000, 0 0 24px rgba(242,184,75,0.6); opacity: 0; transition: opacity 300ms; }
+#wavebanner.show { opacity: 1; }
+#next { left: 12px; bottom: max(84px, calc(env(safe-area-inset-bottom) + 74px)); font-size: 11px; color: var(--dim); background: var(--panel); padding: 5px 8px; border-radius: var(--r); }
+@media (max-width: 560px) { #bar .card span { display: none; } #bar .card { width: 21vw; padding: 5px 6px; } #next { display: none; } }
+@media (max-height: 500px) { #bar .card span { display: none; } #bar .card { width: 92px; padding: 4px 6px; font-size: 11px; } #bar .card b { font-size: 11px; } #wavebtn { min-width: 80px; padding: 4px 8px; } #next { display: none; } }
+`;
+  document.head.append(style);
+  const cards: HTMLButtonElement[] = [];
+  g.towers.forEach((t, i) => {
+    const c = document.createElement("button");
+    c.className = "card";
+    c.innerHTML = `<kbd>${i + 1}</kbd><b></b><span></span><i></i>`;
+    (c.querySelector("b") as HTMLElement).textContent = WEAPON_NAMES[t.id]?.name ?? t.id;
+    (c.querySelector("span") as HTMLElement).textContent = WEAPON_NAMES[t.id]?.line ?? t.def.kind;
+    (c.querySelector("i") as HTMLElement).textContent = `${t.def.cost} gold`;
+    c.addEventListener("click", (e) => {
+      e.stopPropagation();
+      pick(i);
+    });
+    bar.append(c);
+    cards.push(c);
+  });
+  const waveBtn = document.createElement("button");
+  waveBtn.id = "wavebtn";
+  waveBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    callWave();
+  });
+  bar.append(waveBtn);
+  const panel = document.createElement("div");
+  panel.id = "panel";
+  document.body.append(panel);
+  const bossbar = document.createElement("div");
+  bossbar.id = "bossbar";
+  bossbar.className = "hud";
+  bossbar.innerHTML = `<span></span><div><i></i></div>`;
+  document.body.append(bossbar);
+  const waveBanner = document.createElement("div");
+  waveBanner.id = "wavebanner";
+  waveBanner.className = "hud";
+  document.body.append(waveBanner);
+  const nextEl = document.createElement("div");
+  nextEl.id = "next";
+  nextEl.className = "hud";
+  document.body.append(nextEl);
+
+  const pick = (i: number) => {
+    picked = i;
+    cards.forEach((c, j) => c.classList.toggle("on", j === i));
+    sfx.play("pick");
+  };
+  pick(0);
+  const callWave = () => {
+    const v = lastView;
+    if (!v || v.stage !== "build") return;
+    clock.act(TowerAct.Ready, v.ready ? 0 : 1);
+    sfx.play("pick");
+  };
+  addEventListener("keydown", (e) => {
+    const n = Number(e.key);
+    if (n >= 1 && n <= g.towers.length) pick(n - 1);
+    if (e.code === "Space") {
+      e.preventDefault();
+      callWave();
+    }
+    if (e.code === "Escape") panelFor = null;
+  });
+
+  // ---- Pointer: move the tinker, build, open a tower's panel. Touch: first tap aims, second builds.
+  let panelFor: { tx: number; ty: number } | null = null;
+  let armed: number | null = null;
+  const toTile = (e: PointerEvent) => {
+    const p = stage.pick(e.clientX, e.clientY, app.canvas.getBoundingClientRect());
+    if (!p) return null;
+    clock.cursor(p.x, p.z);
+    return tileAt(b, p.x, p.z);
+  };
+  app.canvas.addEventListener("pointermove", (e) => {
+    hover = toTile(e);
+  });
+  app.canvas.addEventListener("pointerdown", (e) => {
+    sfx.unlock();
+    const t = toTile(e);
+    hover = t;
+    if (!t) {
+      panelFor = null;
+      return;
+    }
+    const tw = towerAt(t.tx, t.ty);
+    if (tw) {
+      panelFor = { tx: t.tx, ty: t.ty };
+      armed = null;
+      return;
+    }
+    panelFor = null;
+    const k = tileKey(t.tx, t.ty);
+    if (e.pointerType === "touch" && armed !== k) {
+      armed = k;
+      return;
+    }
+    armed = null;
+    if (!canBuild(t.tx, t.ty)) {
+      sfx.play("thud");
+      return;
+    }
+    const cost = g.towers[picked]?.def.cost ?? 0;
+    if ((lastView?.gold ?? 0) < cost) {
+      hud.toast("Not enough gold");
+      return;
+    }
+    clock.act(TowerAct.Build, picked, t.tx, t.ty);
+    sfx.play("land");
+  });
+  const canBuild = (tx: number, ty: number) => {
+    const k = tileKey(tx, ty);
+    return !b.road.has(k) && !b.blocked.has(k) && !towerTiles.has(k);
+  };
+
+  // ---- Every frame.
+  const creeps = new Map<number, { flags: number; hp: number; x: number; z: number; type: number; hit: number; by: number }>();
+  const tmp = new Matrix4();
+  const q = new Quaternion();
+  let knownWave = 0;
+  let knownLives = -1;
+  let bannerTimer = 0;
+  const m = (e: InterpolatedEntity, f: number) => (e.values[f] ?? 0) / UNITS;
+  app.loop((dt, now) => {
+    const conn = app.conn();
+    const v = app.view<TowerView>();
+    lastView = v;
+    const view = conn.net.render(now);
+    const t = now / 1000;
+
+    // Towers.
+    const seenT = new Set<number>();
+    const nextEnts = new Map<number, { tx: number; ty: number; type: number; level: number; owner: number }>();
+    const nextTiles = new Set<number>();
+    const mine: { tx: number; ty: number; type: number; level: number }[] = [];
+    const creepNow = new Map<number, InterpolatedEntity>();
+    for (const e of view.others) {
+      if (e.kind === RulesKind.Structure) {
+        seenT.add(e.id);
+        const x = m(e, RF.x);
+        const z = m(e, RF.z);
+        const tile = tileAt(b, x, z);
+        const type = Math.round(e.values[RF.type] ?? 0);
+        const level = Math.round(e.values[RF.value] ?? 0);
+        const shots = Math.round(e.values[RF.aux] ?? 0);
+        if (tile) {
+          nextEnts.set(e.id, { ...tile, type, level, owner: e.owner });
+          nextTiles.add(tileKey(tile.tx, tile.ty));
+          if (e.owner === app.self) mine.push({ ...tile, type, level });
+        }
+        let tw = towers.get(e.id);
+        if (!tw) {
+          const root = new Group();
+          const model = stage.model(g.towers[type]?.def.model ?? "style.lowpoly.turret", 1.7, 0xc9a15a);
+          root.add(model.root);
+          const base = new Mesh(new CylinderGeometry(0.85, 0.95, 0.16, 16), new MeshStandardMaterial({ color: KEEPER_COLORS[(e.owner - 1) % KEEPER_COLORS.length] ?? 0x888888, roughness: 0.6, metalness: 0.3 }));
+          base.position.y = 0.08;
+          root.add(base);
+          root.position.set(x, stage.groundAt(x, z) + 0.03, z);
+          stage.add(root);
+          tw = { root, model, type, level: -1, shots, pips: [], aim: e.values[RF.yaw] ?? 0 };
+          towers.set(e.id, tw);
+          stage.burst("dust", x, 0.3, z, 0xd8c8a0, 14);
+          if (e.owner === app.self) sfx.play("land");
+        }
+        if (tw.level !== level) {
+          if (tw.level >= 0 && level > tw.level) {
+            stage.burst("magic", x, 1.6, z, 0xffd76a, 18);
+            sfx.play("levelUp");
+          }
+          tw.level = level;
+          for (const p of tw.pips) tw.root.remove(p);
+          tw.pips = [];
+          for (let i = 0; i < level; i++) {
+            const pip = new Mesh(new BoxGeometry(0.18, 0.18, 0.18), new MeshStandardMaterial({ color: 0xffd76a, emissive: new Color(0x7a5a10) }));
+            pip.position.set(-0.45 + i * 0.3, 0.22, 0.75);
+            tw.root.add(pip);
+            tw.pips.push(pip);
+          }
+          tw.model.root.scale.setScalar(1 + level * 0.12);
+        }
+        // Face the target, turning smoothly.
+        const want = e.values[RF.yaw] ?? 0;
+        let d = want - tw.aim;
+        d = Math.atan2(Math.sin(d), Math.cos(d));
+        tw.aim += d * Math.min(1, dt * 14);
+        tw.model.root.rotation.y = tw.aim;
+        if (shots !== tw.shots) {
+          tw.shots = shots;
+          const target = view.others.find((o) => o.id === ENTITY_BASE + Math.round(e.values[RF.hp] ?? 0));
+          if (target) fireFx(type, x, z, m(target, RF.x), m(target, RF.z), e.owner === app.self);
+        }
+      } else if (e.kind === RulesKind.Unit) creepNow.set(e.id, e);
+    }
+    for (const [id, tw] of towers) {
+      if (seenT.has(id)) continue;
+      stage.burst("dust", tw.root.position.x, 0.4, tw.root.position.z, 0x9a8a6a, 18);
+      stage.scene.remove(tw.root);
+      towers.delete(id);
+    }
+    towerEnts = nextEnts;
+    towerTiles = nextTiles;
+    myTowers = mine;
+
+    // Creeps: crowds, bars, deaths and leaks.
+    for (const c of creepCrowds) c.begin();
+    let bars = 0;
+    for (const [id, e] of creepNow) {
+      const x = m(e, RF.x);
+      const z = m(e, RF.z);
+      const type = Math.round(e.values[RF.type] ?? 0);
+      const flags = Math.round(e.values[RF.flags] ?? 0);
+      const hp = e.values[RF.hp] ?? 0;
+      const known = creeps.get(id);
+      let hit = known ? Math.max(0, known.hit - dt * 5) : 0;
+      if (known && hp < known.hp) hit = 1;
+      if ((flags & CreepFlag.Dead) !== 0 && (!known || (known.flags & CreepFlag.Dead) === 0)) {
+        const boss = (flags & CreepFlag.Boss) !== 0;
+        stage.burst(boss ? "bigKill" : "kill", x, 0.6, z, CREEP_COLOR[type % CREEP_COLOR.length], boss ? 60 : 16);
+        if (boss) {
+          stage.kick(0.7);
+          sfx.play("bigKill");
+        } else sfx.play("kill", { gain: e.owner === app.self ? 1 : 0.35 });
+      }
+      if ((flags & CreepFlag.Leaked) !== 0 && (!known || (known.flags & CreepFlag.Leaked) === 0)) {
+        stage.ring(spireAt.x, spireAt.z, 4, 0xff5a3c);
+        stage.burst("sparks", spireAt.x, 3, spireAt.z, 0xff8a5c, 24);
+        stage.kick(0.5);
+        sfx.play("bell");
+      }
+      creeps.set(id, { flags, hp, x, z, type, hit, by: e.owner });
+      if ((flags & (CreepFlag.Dead | CreepFlag.Leaked)) !== 0) continue;
+      const slowed = (flags & CreepFlag.Slowed) !== 0;
+      const speed = (g.creeps[type]?.speed ?? 1) * (slowed ? 0.5 : 1);
+      creepCrowds[type]?.push(x, stage.groundAt(x, z) + 0.05, z, e.values[RF.yaw] ?? 0, ((id * 0.618) % 1 + 1) % 1, speed, hit, hit * 0.8 + (slowed ? 0.25 : 0), 1);
+      // A health bar over every hurt creep.
+      const frac = (e.values[RF.value] ?? 1000) / 1000;
+      if (frac < 0.999 && bars < BAR_CAP) {
+        const h = (g.creeps[type]?.boss ? 3.1 : 1.35) + stage.groundAt(x, z);
+        const wbar = g.creeps[type]?.boss ? 2.4 : 0.9;
+        tmp.compose(new Vector3(x, h, z), q.identity(), new Vector3(wbar, 1, 1));
+        barBack.setMatrixAt(bars, tmp);
+        tmp.compose(new Vector3(x - (wbar * (1 - frac)) / 2, h + 0.005, z), q.identity(), new Vector3(Math.max(0.001, wbar * frac), 1, 1));
+        barFill.setMatrixAt(bars, tmp);
+        bars++;
+      }
+    }
+    for (const id of [...creeps.keys()]) if (!creepNow.has(id)) creeps.delete(id);
+    barBack.count = barFill.count = bars;
+    barBack.instanceMatrix.needsUpdate = barFill.instanceMatrix.needsUpdate = true;
+    for (const c of creepCrowds) c.end(t);
+    for (const s of scatter) {
+      s.crowd.begin();
+      for (const p of s.at) s.crowd.push(p.x, stage.groundAt(p.x, p.z), p.z, p.yaw, (p.x * 0.13) % 1, 0, 0, 0, p.s);
+      s.crowd.end(t);
+    }
+
+    // Tracers fade.
+    for (const tr of tracers) {
+      if (tr.life <= 0) continue;
+      tr.life -= dt;
+      tr.mesh.visible = tr.life > 0;
+      (tr.mesh.material as MeshBasicMaterial).opacity = Math.max(0, tr.life / 0.14);
+    }
+
+    // Tinkers: ours predicted, the others interpolated.
+    const seenP = new Set<number>();
+    const placeTinker = (e: InterpolatedEntity | undefined, owner: number) => {
+      if (!e) return;
+      seenP.add(owner);
+      const tk = tinkerFor(owner);
+      const x = m(e, RF.x);
+      const z = m(e, RF.z);
+      tk.root.position.set(x, stage.groundAt(x, z) + 0.05 + Math.sin(t * 3 + owner) * 0.04, z);
+      tk.root.rotation.y = e.values[RF.yaw] ?? 0;
+      tk.ring.scale.setScalar((Math.round(e.values[RF.flags] ?? 0) & 1) !== 0 ? 1.4 + Math.sin(t * 6) * 0.1 : 1);
+    };
+    placeTinker(view.self, app.self);
+    for (const e of view.others) if (e.kind === RulesKind.Avatar) placeTinker(e, e.owner);
+    for (const [owner, tk] of tinkers) {
+      if (seenP.has(owner)) continue;
+      stage.scene.remove(tk.root);
+      tinkers.delete(owner);
+    }
+
+    // The ghost: where a click builds, with the picked tower's reach.
+    const show = hover && !app.preview && !towerAt(hover.tx, hover.ty) && v?.phase !== "ended";
+    ghost.visible = !!show;
+    if (show && hover) {
+      const c = tileCenter(b, hover.tx, hover.ty);
+      ghost.position.set(c.x, stage.groundAt(c.x, c.z) + 0.03, c.z);
+      const ok = canBuild(hover.tx, hover.ty) && (v?.gold ?? 0) >= (g.towers[picked]?.def.cost ?? 0);
+      const col = ok ? 0x9dff7a : 0xff6a4a;
+      (ghostBody.material as MeshStandardMaterial).color.setHex(col);
+      (rangeRing.material as MeshBasicMaterial).color.setHex(col);
+      const r = (g.towers[picked]?.levels[0]?.range ?? 3) * TILE_M;
+      rangeRing.scale.setScalar(r);
+      ghostBody.visible = canBuild(hover.tx, hover.ty);
+    }
+    bellGlow.scale.setScalar(2.4 + Math.sin(t * 2) * 0.15);
+
+    // HUD.
+    if (v) {
+      const me = v.players.find((p) => p.id === app.self);
+      hud.status([
+        ["WAVE", `${Math.max(1, v.wave)} / ${v.waves}`],
+        ["BELLS", `${v.lives}`],
+        ["GOLD", `${v.gold ?? me?.gold ?? 0}`],
+        v.stage === "build" ? ["NEXT WAVE", `${v.countdown}s`] : ["CREEPS", `${v.left}`],
+      ]);
+      cards.forEach((c, i) => c.classList.toggle("poor", (v.gold ?? 0) < (g.towers[i]?.def.cost ?? 0)));
+      const readyN = v.players.filter((p) => p.ready).length;
+      waveBtn.disabled = v.stage !== "build";
+      waveBtn.classList.toggle("ready", v.ready === true);
+      waveBtn.textContent = v.stage === "build" ? (v.ready ? `Ready ${readyN}/${v.players.length}` : `Call wave ${v.countdown}s`) : `Wave ${v.wave}`;
+      nextEl.textContent = v.next.length ? `Next: ${v.next.map((n) => `${n.count} ${ENEMY_NAMES[g.creeps[n.type]?.id ?? ""] ?? g.creeps[n.type]?.id ?? ""}`).join(" · ")}` : "";
+      if (v.boss) {
+        bossbar.classList.add("show");
+        (bossbar.firstChild as HTMLElement).textContent = (ENEMY_NAMES[g.creeps[v.boss.type]?.id ?? ""] ?? "BOSS").toUpperCase();
+        ((bossbar.lastChild as HTMLElement).firstChild as HTMLElement).style.transform = `scaleX(${Math.max(0, v.boss.hp / v.boss.maxHp)})`;
+      } else bossbar.classList.remove("show");
+      if (v.wave !== knownWave && v.stage === "wave") {
+        knownWave = v.wave;
+        waveBanner.textContent = g.creeps.some((c, i) => c.boss && v.next.some((n) => n.type === i)) ? `WAVE ${v.wave} · BOSS` : `WAVE ${v.wave}`;
+        waveBanner.classList.add("show");
+        clearTimeout(bannerTimer);
+        bannerTimer = window.setTimeout(() => waveBanner.classList.remove("show"), 1600);
+        sfx.play("levelUp");
+      }
+      if (knownLives >= 0 && v.lives < knownLives) hud.toast(`${knownLives - v.lives} bell${knownLives - v.lives > 1 ? "s" : ""} lost`);
+      knownLives = v.lives;
+      hud.end(v.phase === "ended", v.outcome === "won" ? "SPIRE HELD" : "SPIRE FELL", v.outcome === "won" ? `All ${v.waves} waves held` : `Fell at wave ${v.wave}`, v.endsIn ?? null);
+      // The tower panel.
+      const tw = panelFor ? towerAt(panelFor.tx, panelFor.ty) : undefined;
+      if (tw && panelFor) {
+        const c = tileCenter(b, panelFor.tx, panelFor.ty);
+        const p = stage.project(c.x, 2.2, c.z, app.canvas.clientWidth, app.canvas.clientHeight);
+        panel.style.left = `${p.x}px`;
+        panel.style.top = `${p.y}px`;
+        const def = g.towers[tw.type];
+        const cost = def?.upgradeCost[tw.level];
+        const spent = (def?.def.cost ?? 0) + (def?.upgradeCost.slice(0, tw.level).reduce((a, x) => a + x, 0) ?? 0);
+        const key = `${panelFor.tx},${panelFor.ty},${tw.level},${v.gold},${tw.owner}`;
+        if (panel.dataset.k !== key) {
+          panel.dataset.k = key;
+          panel.innerHTML = `<b></b> <small></small><div class="row"></div>`;
+          (panel.querySelector("b") as HTMLElement).textContent = WEAPON_NAMES[def?.id ?? ""]?.name ?? def?.id ?? "";
+          (panel.querySelector("small") as HTMLElement).textContent = `L${tw.level + 1}${tw.owner === app.self ? "" : ` · P${tw.owner}`}`;
+          const row = panel.querySelector(".row") as HTMLElement;
+          const upBtn = document.createElement("button");
+          upBtn.className = "go";
+          upBtn.textContent = cost === undefined ? "Max" : `Upgrade ${cost}`;
+          upBtn.disabled = cost === undefined || (v.gold ?? 0) < cost;
+          const at = panelFor;
+          upBtn.addEventListener("click", () => clock.act(TowerAct.Upgrade, 0, at.tx, at.ty));
+          row.append(upBtn);
+          if (tw.owner === app.self) {
+            const sell = document.createElement("button");
+            sell.textContent = `Sell +${Math.floor(spent * (g.refund ?? 0.6))}`;
+            sell.addEventListener("click", () => {
+              clock.act(TowerAct.Sell, 0, at.tx, at.ty);
+              panelFor = null;
+            });
+            row.append(sell);
+          }
+        }
+        panel.classList.add("show");
+      } else panel.classList.remove("show");
+    }
+  });
+  app.extraStats(() => ({ towers: towers.size, creeps: creeps.size, wave: lastView?.wave ?? 0, lives: lastView?.lives ?? 0, gold: lastView?.gold ?? 0 }));
+
+  function fireFx(type: number, x: number, z: number, tx: number, tz: number, mine: boolean): void {
+    const kind = g.towers[type]?.def.kind ?? "bolt";
+    const color = kind === "frost" ? 0x9fe8ff : kind === "chain" ? 0xb9a0ff : kind === "splash" ? 0xffa040 : 0xffe0a0;
+    const tr = tracers.find((t) => t.life <= 0);
+    if (tr) {
+      const from = new Vector3(x, 1.5, z);
+      const to = new Vector3(tx, 0.6, tz);
+      const len = from.distanceTo(to);
+      tr.mesh.position.copy(from);
+      tr.mesh.lookAt(to);
+      tr.mesh.scale.set(kind === "splash" ? 3 : 1, kind === "splash" ? 3 : 1, len);
+      (tr.mesh.material as MeshBasicMaterial).color.setHex(color);
+      tr.life = 0.14;
+      tr.mesh.visible = true;
+    }
+    if (kind === "splash") {
+      stage.ring(tx, tz, (g.towers[type]?.def.radius ?? 1) * TILE_M, 0xffa040);
+      stage.burst("burst", tx, 0.5, tz, 0xffa040, 10);
+    } else if (kind === "frost") stage.burst("magic", tx, 0.6, tz, 0x9fe8ff, 6);
+    else if (kind === "chain") stage.burst("sparks", tx, 0.7, tz, 0xb9a0ff, 8);
+    else stage.burst("hitSpark", tx, 0.6, tz, 0xffe0a0, 4);
+    if (mine || Math.random() < 0.3) sfx.play("shoot", { gain: mine ? 0.7 : 0.25 });
+  }
+
+  /** The board plate: tiles, the road and its sleepers, drawn once on a canvas. */
+  function boardTexture(): CanvasTexture {
+    const px = 32;
+    const c = document.createElement("canvas");
+    c.width = b.w * px;
+    c.height = b.h * px;
+    const ctx = c.getContext("2d");
+    if (!ctx) throw new Error("no 2d canvas");
+    let s = 3;
+    const r = () => ((s = (s * 16807) % 2147483647) / 2147483647);
+    for (let y = 0; y < b.h; y++)
+      for (let x = 0; x < b.w; x++) {
+        const k = tileKey(x, y);
+        const road = b.road.has(k);
+        ctx.fillStyle = road ? "#a88a5c" : (x + y) % 2 === 0 ? "#5f7a3e" : "#587238";
+        ctx.fillRect(x * px, y * px, px, px);
+        if (road) {
+          for (let i = 0; i < 6; i++) {
+            ctx.fillStyle = `rgba(70, 50, 30, ${0.2 + r() * 0.2})`;
+            ctx.fillRect(x * px + r() * px, y * px + r() * px, 3, 3);
+          }
+        } else {
+          ctx.strokeStyle = "rgba(20, 30, 10, 0.25)";
+          ctx.strokeRect(x * px + 0.5, y * px + 0.5, px - 1, px - 1);
+          for (let i = 0; i < 5; i++) {
+            ctx.fillStyle = `rgba(150, 190, 90, ${0.15 + r() * 0.2})`;
+            ctx.fillRect(x * px + r() * px, y * px + r() * px, 2, 3);
+          }
+        }
+      }
+    // Sleepers across the road.
+    ctx.fillStyle = "rgba(60, 40, 22, 0.75)";
+    for (let i = 1; i < b.path.length; i++) {
+      const a = b.path[i - 1] as readonly [number, number];
+      const d = b.path[i] as readonly [number, number];
+      const n = Math.abs(d[0] - a[0]) + Math.abs(d[1] - a[1]);
+      const sx = Math.sign(d[0] - a[0]);
+      const sy = Math.sign(d[1] - a[1]);
+      for (let j = 0; j <= n * 2; j++) {
+        const cx = (a[0] + 0.5 + (sx * j) / 2) * px;
+        const cy = (a[1] + 0.5 + (sy * j) / 2) * px;
+        if (sx !== 0) ctx.fillRect(cx - 2, cy - px * 0.42, 4, px * 0.84);
+        else ctx.fillRect(cx - px * 0.42, cy - 2, px * 0.84, 4);
+      }
+    }
+    const t = new CanvasTexture(c);
+    t.colorSpace = SRGBColorSpace;
+    t.magFilter = NearestFilter;
+    return t;
+  }
+}
+
+main().catch((e: unknown) => {
+  const t = document.getElementById("banner-text");
+  if (t) t.textContent = `Could not start: ${e instanceof Error ? e.message : String(e)}`;
+  console.error(e);
+});

package/client/names.ts

@@ -0,0 +1,50 @@
+/**
+ * Display names for the template's content ids. Labels only; the rules are
+ * in src/game.ts. A Net Forge game generated on this template ships its own
+ * table (the model writes src/names.json; the build turns it into this
+ * module), so the client imports only these names from here. Towers are
+ * the "weapons" table, creeps the "enemies" table.
+ */
+export const TITLE = "Cogspire";
+
+export const WEAPON_NAMES: Readonly<Record<string, { name: string; line: string }>> = {
+  bolt_post: { name: "Bolt Post", line: "Fast single shots" },
+  tar_mortar: { name: "Tar Mortar", line: "Slow, hits a crowd" },
+  frost_vane: { name: "Frost Vane", line: "Slows what it hits" },
+  arc_coil: { name: "Arc Coil", line: "Jumps between creeps" },
+};
+
+export const UPGRADE_NAMES: Readonly<Record<string, { name: string; line: string }>> = {
+  overclock: { name: "Overclock", line: "Your towers fire faster" },
+  tempered_brass: { name: "Tempered Brass", line: "Your towers hit harder" },
+  spyglass: { name: "Spyglass", line: "Your towers reach further" },
+  spare_bell: { name: "Spare Bell", line: "+5 bells for the team" },
+};
+
+export const ENEMY_NAMES: Readonly<Record<string, string>> = {
+  rustling: "Rustling",
+  gearbeetle: "Gearbeetle",
+  cinder_moth: "Cinder Moth",
+  boilerback: "Boilerback",
+};
+
+export const RULE_NAMES: Readonly<Record<string, string>> = {
+  first_gear: "First Gear",
+  long_shift: "Long Shift",
+  boiler_breaker: "Boiler Breaker",
+  scrap_heap: "Scrap Heap",
+};
+
+export const SKU_NAMES: Readonly<Record<string, string>> = {
+  overclock: "Overclock",
+  tempered_brass: "Tempered Brass",
+  spyglass: "Spyglass",
+  spare_bell: "Spare Bell",
+  skin_verdigris: "Verdigris finish",
+  skin_gilt: "Gilt finish",
+  brass_gear: "Brass gear",
+};
+
+/** Player colours by slot, and a highlight palette (the generated names module carries both). */
+export const KEEPER_COLORS = [0xffb347, 0x5ec8ff, 0x9dff7a, 0xff7ab8, 0xc9a7ff, 0xffe066, 0x7affd4, 0xff9a5c];
+export const AURORA = { body: 0x3cf2c4, glow: 0xa77bff };

package/llms.txt

@@ -0,0 +1,129 @@
+# COGSPIRE: the tower defense template (NetNet game runtime, board genre)
+
+> A co-op tower defense for up to 4 players on one shared board. Creeps
+> walk a fixed road in waves toward the spire; players build and upgrade
+> towers beside the road with their own gold. Every kill pays its tower's
+> builder a bounty and the rest of the team a share; the team shares the
+> spire's bells (lives). Clear every wave to win the run.
+> You change the game by editing src/game.ts only. The template already has
+> the board, the road, waves, targeting, splash, slow and chain shots,
+> gold, upgrades, selling, calling a wave early, co-op, netcode, rendering,
+> touch controls, earn and the store. Do not write renderers, netcode or
+> bot AI.
+
+## Files
+
+- src/game.ts: THE GAME. Declarations against @netforge/engine:
+  game(), towerBoard(), tower(), prefab() (the creeps), waves(), upgrade(),
+  earn.rule(), earn.stake(), store.sku().
+- src/names.json: the title and every label players read. Towers go in
+  "weapons" ({ name, line }), creeps in "enemies", plus upgrades, earn
+  rules and store items.
+- Everything else is template machinery.
+
+## Rules the build enforces
+
+- game({ template: "tower-defense", style, places, players: { prefab, max } }).
+  players.max is at most 4 (one board, four builders).
+- Exactly one towerBoard(...) and one waves(...); 1 to 8 tower(...)s.
+- The road: towerBoard path is tile waypoints; each step changes x or y,
+  never both; it starts and ends on the board's edge. blocked tiles are
+  rocks nobody builds on.
+- Every waves group names a declared prefab (a creep, not a pickup).
+- Tower kinds are "bolt", "splash", "frost" or "chain".
+- Upgrades read four stats only: might (tower damage), haste (fire rate),
+  area (tower range) and maxHealth (bells for the team).
+- No weapon(...): a tower defense game declares tower(...).
+- Asset ids look like "style.lowpoly.turret", never URLs or paths, and must
+  be in the asset library. game({ style }) is the art style the creator
+  picked (lowpoly, toon, ps1, pixel, voxel or handdrawn); keep it.
+- 4 playtest players must kill creeps, clear wave 3 and fire an earn rule
+  in 4 minutes, and must not lose the spire before wave 4.
+
+## Units
+
+A tile is 2 m. Board size, road, range and radius are in tiles; creep
+speed is metres a second; rate is shots a second; gold is the run's own
+money (never coins). Tick rate 30 Hz.
+
+## The loop
+
+Before wave 1 everyone gets towerBoard.prep seconds to build. A wave
+spawns its groups along the road; it is cleared when the last creep dies
+or leaks. Then there is a breather of towerBoard.breather seconds, which
+everyone pressing Ready (Space) skips for a little gold. A leak costs the
+creep's damage in bells; at zero bells the run is lost. Clearing the last
+wave wins. Towers aim at the creep furthest along the road in range.
+More builders make tougher creeps (+30% health a player past the first).
+
+## Common changes
+
+### A different road
+towerBoard({ size: [20, 12], path: [[0, 5], [6, 5], [6, 1], [13, 1], [13, 10], [19, 10]], lives: 20, gold: 100 });
+Longer roads with more turns give towers more time; a straight road is hard.
+
+### Tune a tower
+tower("bolt_post", { model: "style.lowpoly.turret", kind: "bolt", cost: 40, damage: 8, rate: 1.5, range: 3,
+  levels: [{ cost: 45, damage: 14 }, { cost: 80, damage: 24, range: 3.5 }] });
+Each level is one upgrade: its gold cost and the stats it changes.
+
+### Add a tower
+tower("sky_harpoon", { model: "style.lowpoly.rocket", kind: "bolt", cost: 120, damage: 60, rate: 0.4, range: 6 });
+splash: radius (tiles) around the target; frost: slow (0..0.9) for
+slowSeconds; chain: chains (jumps), 30% weaker each jump.
+Add its label to names.json weapons. The bar shows towers in order (keys 1-8).
+
+### Add a creep
+prefab("ironclad", { model: "style.lowpoly.robot_walker", health: 160, speed: 0.9, value: 14, damage: 3 });
+value is the gold bounty, damage the bells a leak costs. Then bring it in:
+waves({ ..., groups: [..., { prefab: "ironclad", from: 8, count: 2, grow: 0.5, gap: 2 }] });
+
+### A boss
+prefab("boilerback", { model: "style.lowpoly.robot_large", health: 1800, speed: 0.7, value: 80, damage: 5, boss: true });
+{ prefab: "boilerback", from: 10, every: 10, count: 1, delay: 8 } (a boss every tenth wave).
+Bosses get a health bar at the top of the screen.
+
+### Harder or easier
+Raise waves health (growth a wave), counts and grow, or lower gold and
+lives. "More waves": waves total. "Faster": shorter prep and breather.
+
+### Add an earn rule
+earn.rule("clean_sweep", { when: "wave.cleared", n: 15, pay: 30, oncePer: "run" });
+Events: enemy.killed (credits the tower's builder), boss.killed and
+wave.cleared and run.won (everyone on the board), tower.built and
+tower.upgraded (credits the builder). Each rule pays once per run per
+player, in coins; the room server is the referee. A player who joins a run
+in progress is never paid for waves cleared before they joined.
+
+### The buy-in run (required)
+earn.stake({ min: 20, max: 200, multiple: 2 });
+One top-level line; a game without it does not build. A staked run pays
+its normal earn plus a share of stake x multiple, by how much of the run's
+most earn the player made. "stake" is reserved.
+
+### Coins: earn and the store
+Every game has coins: 1 coin = 1 of the game's own token, shown under the
+token's own name, symbol and logo.
+store.sku("overclock", { coins: 40 });                               // one level of the "overclock" upgrade for the run
+store.sku("skin_gilt", { coins: 500, grants: { cosmetic: 2 } });     // a finish for your tinker, owned for good
+store.sku("brass_gear", { coins: 150, grants: { gear: "tempered_brass", loseBelow: 0.25 } }); // losable gear
+A store item named after a declared upgrade is a run upgrade on the
+buyer's own towers. Keep the SKUs the client is wired to (overclock,
+tempered_brass, spyglass, spare_bell, skin_verdigris, skin_gilt,
+brass_gear) at their prices. Gear brings one level of its upgrade into
+every staked run and is lost when that run makes less than loseBelow of
+its most earn. Price against what a run pays (the four rules here pay up
+to 80).
+
+### Change the look
+players.prefab is your tinker (a real CC0 character). Tower and creep
+models are library ids: turret, turret_double, satellite_dish, generator,
+rocket, crystal_rock for towers; slime_*, crab, bee, frog, bat,
+robot_walker, robot_large, skeleton_grunt for creeps.
+
+## Test
+
+engine.test.run({ ticks: 30 * 240, bots: 4 }) plays the board with 4
+builders and reports kills, wave reached, runs won and lost, leaks (as
+deaths), earned by rule, softlock, ms per tick, and the genre's own
+checks under rules.checks.

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@netforge/template-tower",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "COGSPIRE: the tower defense template of the NetNet game runtime, a co-op board for up to four with waves, build and upgrade, shared lives. The game module, its browser client and its playtest bots.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": "./src/manifest.ts",
+    "./store": "./src/store.ts"
+  },
+  "files": [
+    "src",
+    "client",
+    "!client/vite.config.ts",
+    "llms.txt",
+    "README.md",
+    "NOTICE",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/netnetdev/net-forge.git",
+    "directory": "packages/template-tower"
+  },
+  "homepage": "https://github.com/netnetdev/net-forge/tree/main/packages/template-tower#readme",
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "three": "0.186.1",
+    "@netforge/asset-library": "0.1.0",
+    "@netforge/engine-sim": "0.1.0",
+    "@netforge/engine": "0.1.0",
+    "@netforge/tabletop": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "22.20.1",
+    "@types/three": "0.186.0",
+    "tsx": "4.23.0",
+    "typescript": "5.8.3",
+    "vite": "6.4.3",
+    "vitest": "3.2.7"
+  },
+  "bugs": {
+    "url": "https://github.com/netnetdev/net-forge/issues"
+  },
+  "scripts": {
+    "build": "node ../engine/scripts/fresh-dist.mjs && vite build --config client/vite.config.ts",
+    "typecheck": "tsc -p tsconfig.json",
+    "test": "vitest run",
+    "dev": "vite --config client/vite.config.ts",
+    "preview": "vite preview --config client/vite.config.ts"
+  }
 }

package/src/game.ts

@@ -0,0 +1,148 @@
+/**
+ * COGSPIRE: the tower defense template (play style: tower defense).
+ *
+ * A brass clockwork spire stands at the end of an old rail road across the
+ * moor. Rust swarms crawl the road toward it in waves. Up to four tinkers
+ * share the board: each builds and upgrades brass towers with their own
+ * gold, every kill pays its builder and a share to the rest, and the team
+ * shares the spire's bells (lives). Hold twenty waves to keep the spire.
+ *
+ * This file is the whole game as the model writes it: declarations only,
+ * against the typed API in @netforge/engine. The board, the waves,
+ * targeting, co-op, netcode, renderer and referee are the template's
+ * machinery.
+ */
+import { earn, game, prefab, store, tower, towerBoard, upgrade, waves } from "@netforge/engine";
+
+export default game({
+  template: "tower-defense",
+  style: "lowpoly",
+  places: { moor: { chunks: "places/moor", spawn: [0, 0, 0] } },
+  players: { prefab: "style.lowpoly.worker", max: 4 },
+});
+
+// The board: 18 x 12 tiles of 2 m. The road enters at the west edge and winds to the spire on the east edge.
+towerBoard({
+  size: [18, 12],
+  path: [
+    [0, 2],
+    [5, 2],
+    [5, 8],
+    [10, 8],
+    [10, 3],
+    [15, 3],
+    [15, 9],
+    [17, 9],
+  ],
+  blocked: [
+    [2, 6],
+    [3, 9],
+    [8, 1],
+    [12, 10],
+    [13, 6],
+  ],
+  lives: 20,
+  gold: 100,
+  prep: 15,
+  breather: 10,
+  share: 0.25,
+});
+
+// Creeps. Health in hit points, speed in metres a second (a tile is 2 m), value is the gold bounty, damage the bells a leak costs.
+prefab("rustling", { model: "style.lowpoly.slime_green", health: 26, speed: 1.6, value: 4 });
+prefab("gearbeetle", { model: "style.lowpoly.crab", health: 90, speed: 1, value: 9, damage: 2 });
+prefab("cinder_moth", { model: "style.lowpoly.bee", health: 20, speed: 3, value: 4 });
+prefab("boilerback", { model: "style.lowpoly.robot_large", health: 1800, speed: 0.7, value: 80, damage: 5, boss: true });
+
+// Towers. Damage a hit, rate in shots a second, range and radius in tiles. Each level is an upgrade: its cost and what it changes.
+tower("bolt_post", {
+  model: "style.lowpoly.turret",
+  kind: "bolt",
+  cost: 40,
+  damage: 8,
+  rate: 1.5,
+  range: 3,
+  levels: [
+    { cost: 45, damage: 14 },
+    { cost: 80, damage: 24, range: 3.5 },
+    { cost: 140, damage: 40, rate: 2 },
+  ],
+});
+tower("tar_mortar", {
+  model: "style.lowpoly.turret_double",
+  kind: "splash",
+  cost: 70,
+  damage: 12,
+  rate: 0.6,
+  range: 3.5,
+  radius: 1.1,
+  levels: [
+    { cost: 70, damage: 20 },
+    { cost: 120, damage: 34, radius: 1.4 },
+  ],
+});
+tower("frost_vane", {
+  model: "style.lowpoly.satellite_dish",
+  kind: "frost",
+  cost: 55,
+  damage: 3,
+  rate: 1,
+  range: 2.6,
+  slow: 0.45,
+  slowSeconds: 1.6,
+  levels: [
+    { cost: 60, slow: 0.55, range: 3 },
+    { cost: 100, damage: 8, slow: 0.65 },
+  ],
+});
+tower("arc_coil", {
+  model: "style.lowpoly.generator",
+  kind: "chain",
+  cost: 90,
+  damage: 14,
+  rate: 0.8,
+  range: 3,
+  chains: 3,
+  levels: [
+    { cost: 90, damage: 22, chains: 4 },
+    { cost: 150, damage: 36, chains: 5 },
+  ],
+});
+
+// Twenty waves. Each group joins at wave `from`, starts with `count` and adds `grow` a wave; a boss every tenth wave.
+waves({
+  total: 20,
+  health: 0.3,
+  groups: [
+    { prefab: "rustling", count: 6, grow: 1.6, gap: 0.8 },
+    { prefab: "gearbeetle", from: 3, count: 2, grow: 0.8, gap: 1.4, delay: 3 },
+    { prefab: "cinder_moth", from: 5, count: 4, grow: 1.2, gap: 0.45, delay: 6 },
+    { prefab: "boilerback", from: 10, every: 10, count: 1, delay: 8 },
+  ],
+});
+
+// Store upgrades: one level each, for the rest of the run, on the buyer's own towers (spare_bell adds bells for the team).
+upgrade("overclock", { stat: "haste", step: 0.15, maxLevel: 1 });
+upgrade("tempered_brass", { stat: "might", step: 0.15, maxLevel: 1 });
+upgrade("spyglass", { stat: "area", step: 0.12, maxLevel: 1 });
+upgrade("spare_bell", { stat: "maxHealth", step: 5, maxLevel: 1 });
+
+// Earn (mandatory). Pays the game's coins (1 coin = 1 token), once per run each. Values are PLACEHOLDER.
+earn.rule("first_gear", { when: "wave.cleared", n: 3, pay: 5, oncePer: "run" });
+earn.rule("long_shift", { when: "wave.cleared", n: 10, pay: 20, oncePer: "run" });
+earn.rule("boiler_breaker", { when: "boss.killed", n: 1, pay: 50, oncePer: "run" });
+earn.rule("scrap_heap", { when: "enemy.killed", n: 60, pay: 5, oncePer: "run" });
+// Buy-in run (the mandatory sink loop): stake coins at run start to earn above free play.
+// A staked run also pays up to stake x multiple, by the share of this run's earn the player makes. Values are PLACEHOLDER.
+earn.stake({ min: 20, max: 200, multiple: 2 });
+
+// Store (the Kit), priced in coins: four run upgrades and two cosmetic finishes owned for good (kept in the profile).
+store.sku("overclock", { coins: 40 });
+store.sku("tempered_brass", { coins: 40 });
+store.sku("spyglass", { coins: 60 });
+store.sku("spare_bell", { coins: 50 });
+store.sku("skin_verdigris", { coins: 300, grants: { cosmetic: 1 } });
+store.sku("skin_gilt", { coins: 500, grants: { cosmetic: 2 } });
+// Losable gear: owned for good until lost. It brings one level of its upgrade into every staked run,
+// and is lost when that run makes less than loseBelow of its most earn. Values are PLACEHOLDER.
+store.sku("brass_gear", { coins: 150, grants: { gear: "tempered_brass", loseBelow: 0.25 } });

package/src/manifest.ts

@@ -0,0 +1,44 @@
+/**
+ * Loads the game module once per process and compiles it. The room server,
+ * the client, the bots and the tests all start here.
+ */
+import { collectManifest } from "@netforge/engine/game";
+import type { GameManifest } from "@netforge/engine";
+import { rulesAdapter, towerGenre } from "@netforge/engine/rules";
+import type { RulesInput, RulesWorld, TowerState } from "@netforge/engine/rules";
+import type { SimAdapter } from "@netforge/engine/net";
+import "./game.js";
+
+/** Content version: bump with any change to game.ts (hot swap compares it). */
+export const GAME_VERSION = "cogspire-0.1.0";
+export const GAME_NAME = "cogspire";
+/** Room template (as the Net Forge room server names it) and place used by the client and the bots. */
+export const TEMPLATE = "tower";
+export const PLACE = "moor";
+
+/**
+ * Collected as soon as the module is imported: one process may load more
+ * than one game module (the room server hosts every template), and each
+ * manifest takes its own game before the next module declares.
+ */
+const MANIFEST = collectManifest();
+let genre: ReturnType<typeof towerGenre> | null = null;
+
+/** The game's manifest (every declaration). */
+export function towerManifest(): GameManifest {
+  return MANIFEST;
+}
+
+/** The compiled tower defense genre (board, towers, waves). */
+export function towerGame(): ReturnType<typeof towerGenre> {
+  genre ??= towerGenre(MANIFEST);
+  return genre;
+}
+
+/** The SimAdapter the room server and the client both run. */
+export function towerAdapter(): SimAdapter<RulesWorld<TowerState>, RulesInput> {
+  return rulesAdapter(towerGame(), MANIFEST, { name: GAME_NAME, version: GAME_VERSION });
+}
+
+/** Cosmetic ids for store SKUs (0 is the default finish). */
+export const COSMETICS: Readonly<Record<string, number>> = { skin_verdigris: 1, skin_gilt: 2 };

package/src/store.ts

@@ -0,0 +1,25 @@
+/**
+ * Store hooks (the Coins model): every
+ * game has coins, 1 coin = 1 game token, shown under the token's own name,
+ * symbol and logo. COGSPIRE sells four run upgrades (a store command named
+ * after the upgrade grants one level for the rest of the run), two finishes
+ * (permanent) and one piece of losable gear, all priced in coins. The Kit
+ * bridge and its in-memory stand-in live in @netforge/tabletop.
+ */
+export { mockKit } from "@netforge/tabletop";
+export type { KitStoreBridge, MockKit, SkuPrice } from "@netforge/tabletop";
+
+/** Coin prices the client is wired to (they match store.sku(...) in game.ts; the generator's gate keeps them). */
+export const COIN_PRICES = { overclock: 40, tempered_brass: 40, spyglass: 60, spare_bell: 50, skin_verdigris: 300, skin_gilt: 500, brass_gear: 150 } as const;
+export type SkuId = keyof typeof COIN_PRICES;
+/** Run upgrades: spent, applied by the room for the rest of the run. */
+export const UPGRADE_SKUS = ["overclock", "tempered_brass", "spyglass", "spare_bell"] as const;
+/** Cosmetic finishes: bought once, owned for good. */
+export const COSMETIC_SKUS = ["skin_verdigris", "skin_gilt"] as const;
+
+/** The template's own coin, as its token metadata names it until a creator renames it. */
+export const COGSPIRE_COIN = {
+  name: "Cog",
+  symbol: "COG",
+  logo: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%23f2b84b'/%3E%3Cpath d='M16 7l2 3 3-1 1 3 3 1-1 3 3 2-3 2 1 3-3 1-1 3-3-1-2 3-2-3-3 1-1-3-3-1 1-3-3-2 3-2-1-3 3-1 1-3 3 1z' fill='%233a2a14'/%3E%3Ccircle cx='16' cy='16' r='3.5' fill='%23f2b84b'/%3E%3C/svg%3E",
+} as const;