@netforge/template-dungeon 0.0.0-stage → 0.2.0

package/client/stake.ts

@@ -0,0 +1,101 @@
+/**
+ * The buy-in run in the store panel (earn.stake, the mandatory sink loop).
+ * The player picks an amount inside the game's terms and stakes it: the Kit
+ * spends it under the reason "stake" (earned coins first, then the wallet),
+ * then the room is told. The room fixes the stake from its own ledger when
+ * the next run starts (or this one, if it only just began) and says so.
+ */
+import type { StakeMessage, StakeTermsView } from "@netforge/engine/net";
+import type { KitStoreBridge } from "../src/store.js";
+
+export interface StakeConn {
+  readonly welcome: { readonly stake?: StakeTermsView };
+  stake(amount?: number): void;
+  onStake(cb: (m: StakeMessage) => void): void;
+}
+
+const fmt = (n: number) => (Math.round(n * 100) / 100).toLocaleString("en-US");
+
+/** Wires #stake-amount, #stake-go and #stake-line; hides #stake-row when the game takes no stakes. */
+export function wireStake(conn: StakeConn, kit: KitStoreBridge, toast: (t: string) => void): void {
+  const row = document.getElementById("stake-row");
+  const input = document.getElementById("stake-amount") as HTMLInputElement | null;
+  const go = document.getElementById("stake-go") as HTMLButtonElement | null;
+  const line = document.getElementById("stake-line");
+  const terms = conn.welcome.stake;
+  if (!row || !input || !go || !line) return;
+  if (!terms) {
+    row.style.display = "none";
+    return;
+  }
+  const sym = kit.coins.symbol();
+  input.min = String(terms.min);
+  input.max = String(terms.max);
+  input.step = "any";
+  input.value = String(terms.min);
+  const idle = () => {
+    const a = Number(input.value) || terms.min;
+    line.textContent = `Up to ${fmt(a * terms.multiple)} ${sym} back`;
+  };
+  idle();
+  input.addEventListener("input", idle);
+  go.addEventListener("click", async () => {
+    const a = Number(input.value);
+    if (!(a >= terms.min && a <= terms.max)) return toast(`Stake ${fmt(terms.min)} to ${fmt(terms.max)} ${sym}`);
+    go.disabled = true;
+    try {
+      await kit.coins.spend(a, "stake");
+      conn.stake(a);
+    } catch {
+      toast(`Not enough ${sym}`);
+    } finally {
+      go.disabled = false;
+    }
+  });
+  conn.onStake((m) => {
+    if (m.state === "live") line.textContent = `Staked ${fmt(m.stake)}, up to ${fmt(m.ceiling ?? 0)} ${sym} this run`;
+    else if (m.state === "waiting") line.textContent = m.stake > 0 ? `Next run: ${fmt(m.stake)} ${sym}` : "Stake waits for tomorrow's cap";
+    else if (m.state === "closed") {
+      toast(`Stake ${fmt(m.stake)} ${sym}  ${fmt(m.paid ?? 0)} back${m.lost && m.lost.length > 0 ? `  ·  gear lost` : ""}`);
+      idle();
+    } else toast(m.reason === "sign in to stake" ? "Sign in to stake" : "Stake not taken");
+  });
+}
+
+/** One losable gear SKU (store.sku grants { gear, loseBelow }): a buy button and its loss line. Hides #gear-row without one. */
+export function wireGear(gear: { id: string; name: string; coins: number; loseBelow: number } | null, kit: KitStoreBridge, toast: (t: string) => void): void {
+  const row = document.getElementById("gear-row");
+  const name = document.getElementById("gear-name");
+  const line = document.getElementById("gear-line");
+  const buy = document.getElementById("gear-buy") as HTMLButtonElement | null;
+  if (!row || !name || !line || !buy) return;
+  if (!gear) {
+    row.style.display = "none";
+    return;
+  }
+  const sym = kit.coins.symbol();
+  name.textContent = gear.name;
+  line.textContent = `Staked runs only. Lost under ${Math.round(gear.loseBelow * 100)}% of a run's earn`;
+  const show = () => {
+    buy.textContent = kit.store.owns(gear.id) ? "Owned" : `${gear.coins} ${sym}`;
+    buy.disabled = kit.store.owns(gear.id);
+  };
+  show();
+  buy.addEventListener("click", async () => {
+    try {
+      await kit.store.buy(gear.id, { pay: "coins" });
+    } catch {
+      toast(`Not enough ${sym}`);
+    }
+    show();
+  });
+}
+
+/** The game's first gear SKU from its manifest, with its label. */
+export function gearOf(skus: ReadonlyMap<string, { coins?: number; grants?: unknown }>, names: Readonly<Record<string, string>>): { id: string; name: string; coins: number; loseBelow: number } | null {
+  for (const [id, s] of skus) {
+    const g = s.grants as { gear?: string; loseBelow?: number } | undefined;
+    if (g?.gear && typeof g.loseBelow === "number" && s.coins !== undefined) return { id, name: names[id] ?? id, coins: s.coins, loseBelow: g.loseBelow };
+  }
+  return null;
+}

package/client/threats.ts

@@ -0,0 +1,157 @@
+/**
+ * Telegraphs and hostile shots (GAME-DESIGN.md "telegraph every big hit").
+ * Every warning is a pooled ground decal that fills as the attack winds
+ * up: a ring outline plus a filling disc for circles, an outlined lane
+ * with a fill that grows along it for charges and aim lines, and a soft
+ * dashed pulse for support auras. Shapes and fill carry the meaning, not
+ * colour alone, so it reads for colour-blind players too. The data is the
+ * snapshot's telegraph word (engine/game/threats.ts), so nothing extra is
+ * sent.
+ */
+import {
+  NormalBlending,
+  CircleGeometry,
+  Color,
+  DoubleSide,
+  Group,
+  Mesh,
+  MeshBasicMaterial,
+  PlaneGeometry,
+  RingGeometry,
+  SphereGeometry,
+} from "three/webgpu";
+import type { Scene } from "three/webgpu";
+import type { ThreatShape } from "@netforge/engine/game";
+
+/** Danger reads warm and bright on the night palette; support reads cool. */
+const DANGER = new Color(0xff5a3c);
+const DANGER_EDGE = new Color(0xffe2b0);
+const SUPPORT = new Color(0x6fd3ff);
+/** A keeper's own meteor about to land. */
+const FRIENDLY = new Color(0xffd36b);
+const MAX_DECALS = 64;
+const MAX_SHOTS = 160;
+
+interface Decal {
+  group: Group;
+  fill: Mesh;
+  edge: Mesh;
+  laneFill: Mesh;
+  laneEdge: Mesh;
+}
+
+const basic = (color: Color, opacity: number) =>
+  // Normal blending: under the render stack's bloom, stacked additive warnings would wash the screen out.
+  new MeshBasicMaterial({ color, transparent: true, opacity, depthWrite: false, side: DoubleSide, blending: NormalBlending, fog: false });
+
+export class ThreatLayer {
+  private readonly decals: Decal[] = [];
+  private used = 0;
+  private readonly shots: Mesh[] = [];
+  private shotUsed = 0;
+  private time = 0;
+
+  constructor(scene: Scene) {
+    const disc = new CircleGeometry(1, 40);
+    disc.rotateX(-Math.PI / 2);
+    const ring = new RingGeometry(0.94, 1, 48);
+    ring.rotateX(-Math.PI / 2);
+    // Lanes are unit squares starting at the origin and running along +x.
+    const lane = new PlaneGeometry(1, 1);
+    lane.rotateX(-Math.PI / 2);
+    lane.translate(0.5, 0, 0);
+    for (let i = 0; i < MAX_DECALS; i++) {
+      const group = new Group();
+      const fill = new Mesh(disc, basic(DANGER, 0.35));
+      const edge = new Mesh(ring, basic(DANGER_EDGE, 0.9));
+      const laneFill = new Mesh(lane, basic(DANGER, 0.4));
+      const laneEdge = new Mesh(lane, basic(DANGER_EDGE, 0.16));
+      group.add(fill, edge, laneFill, laneEdge);
+      group.visible = false;
+      scene.add(group);
+      this.decals.push({ group, fill, edge, laneFill, laneEdge });
+    }
+    const orb = new SphereGeometry(0.28, 10, 8);
+    const orbMat = new MeshBasicMaterial({ color: 0xff7a4a });
+    for (let i = 0; i < MAX_SHOTS; i++) {
+      const m = new Mesh(orb, orbMat);
+      m.visible = false;
+      scene.add(m);
+      this.shots.push(m);
+    }
+  }
+
+  /** Call before drawing a frame's threats. */
+  begin(dt: number): void {
+    this.time += dt;
+    this.used = 0;
+    this.shotUsed = 0;
+  }
+
+  /** Draw one warning (from engine/game threatOf). `friendly`: a keeper's own meteor, drawn gold. */
+  draw(t: ThreatShape, friendly = false): void {
+    if (t.shot) {
+      const m = this.shots[this.shotUsed++];
+      if (!m) return;
+      m.position.set(t.x, 0.8, t.z);
+      m.visible = true;
+      return;
+    }
+    const d = this.decals[this.used++];
+    if (!d) return;
+    const g = d.group;
+    g.visible = true;
+    g.position.set(t.x, 0.07, t.z);
+    g.rotation.set(0, 0, 0);
+    const support = t.kind === "aura";
+    const fillMat = d.fill.material as MeshBasicMaterial;
+    const edgeMat = d.edge.material as MeshBasicMaterial;
+    fillMat.color.copy(friendly ? FRIENDLY : support ? SUPPORT : DANGER);
+    edgeMat.color.copy(friendly ? FRIENDLY : support ? SUPPORT : DANGER_EDGE);
+    if (t.kind === "lane") {
+      d.fill.visible = d.edge.visible = false;
+      d.laneFill.visible = d.laneEdge.visible = true;
+      const len = t.len ?? 6;
+      const w = t.r * 2;
+      g.rotation.y = -Math.atan2(t.dz ?? 0, t.dx ?? 1);
+      // The fill grows down the lane: when it reaches the end, the charge goes.
+      d.laneEdge.scale.set(len, 1, w);
+      d.laneFill.scale.set(Math.max(0.05, len * t.progress), 1, w * 0.9);
+      return;
+    }
+    d.laneFill.visible = d.laneEdge.visible = false;
+    d.fill.visible = d.edge.visible = true;
+    d.edge.scale.setScalar(t.r);
+    // The disc fills from the centre out; a support pulse is a faint breathing ring (it warns, it does not hurt).
+    const p = support ? 0.85 + 0.15 * Math.sin(this.time * 8) : t.progress;
+    d.fill.scale.setScalar(Math.max(0.05, t.r * p));
+    fillMat.opacity = support ? 0.05 : 0.18 + 0.22 * t.progress;
+    edgeMat.opacity = support ? 0.25 : 0.9;
+  }
+
+  /** A plain ring under an entity: gold for elites, blue for a shield. */
+  mark(x: number, z: number, r: number, color: number): void {
+    const d = this.decals[this.used++];
+    if (!d) return;
+    d.group.visible = true;
+    d.group.position.set(x, 0.06, z);
+    d.group.rotation.set(0, 0, 0);
+    d.laneFill.visible = d.laneEdge.visible = d.fill.visible = false;
+    d.edge.visible = true;
+    d.edge.scale.setScalar(r);
+    (d.edge.material as MeshBasicMaterial).color.setHex(color);
+    (d.edge.material as MeshBasicMaterial).opacity = 0.9;
+  }
+
+  /** Hide what this frame did not draw. */
+  end(): void {
+    for (let i = this.used; i < this.decals.length; i++) {
+      const d = this.decals[i];
+      if (d && d.group.visible) d.group.visible = false;
+    }
+    for (let i = this.shotUsed; i < this.shots.length; i++) {
+      const m = this.shots[i];
+      if (m && m.visible) m.visible = false;
+    }
+  }
+}