@netforge/template-racer 0.0.0-stage → 0.2.0

package/client/index.html

@@ -0,0 +1,189 @@
+<!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>Torquebay</title>
+    <link rel="icon" href="data:," />
+    <style>
+      :root {
+        color-scheme: dark;
+        --ink: #fff8ec;
+        --dim: #c9bfae;
+        --sun: #ff8a3d;
+        --leaf: #7ee08a;
+        --sky: #8fd3ff;
+        --coral: #ff7a59;
+        --panel: rgba(28, 22, 40, 0.8);
+        --line: rgba(255, 210, 63, 0.28);
+        font-family: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
+      }
+      html, body { margin: 0; height: 100%; background: #1d3a52; color: var(--ink); overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; }
+      #game { position: fixed; inset: 0; }
+      #game canvas { display: block; width: 100%; height: 100%; }
+      .hud { position: fixed; z-index: 5; pointer-events: none; font-variant-numeric: tabular-nums; }
+      .hud button { pointer-events: auto; }
+      button { font: inherit; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px; cursor: pointer; }
+      button:disabled { opacity: 0.45; cursor: default; }
+      button:active { transform: scale(0.97); }
+
+      #top-left { top: max(12px, env(safe-area-inset-top)); left: 12px; width: min(320px, 44vw); }
+      #title { font-weight: 900; letter-spacing: 0.22em; font-size: 13px; color: var(--sun); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
+      #course { margin-top: 2px; font-size: 12px; color: var(--dim); letter-spacing: 0.06em; }
+      #lap { margin-top: 6px; font-size: 22px; font-weight: 900; letter-spacing: 0.06em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
+      #map { position: fixed; z-index: 5; right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); width: 170px; height: 170px; border-radius: 14px; background: rgba(28, 22, 40, 0.55); pointer-events: none; }
+      #speed { right: 196px; bottom: max(18px, env(safe-area-inset-bottom)); font-size: 34px; font-weight: 900; text-align: right; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4); }
+      #speed small { display: block; font-size: 10px; letter-spacing: 0.2em; color: var(--dim); }
+      #drift { left: 50%; bottom: 90px; transform: translateX(-50%); width: 160px; height: 8px; border-radius: 5px; background: rgba(0, 0, 0, 0.35); overflow: hidden; display: none; }
+      #drift.on { display: block; }
+      #drift > i { display: block; height: 100%; width: 0; background: var(--c, #5fc8ff); }
+      #coins { margin-top: 8px; display: flex; gap: 8px; align-items: center; font-weight: 800; font-size: 15px; }
+      #coins .dot { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff4b0, #ffd23f 55%, #c98a10); box-shadow: 0 0 6px rgba(255, 210, 63, 0.7); }
+      #coins small { color: var(--dim); font-weight: 600; }
+      #buffs { margin-top: 4px; font-size: 10px; letter-spacing: 0.16em; color: var(--leaf); text-transform: uppercase; min-height: 12px; }
+
+      #top-center { top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); text-align: center; }
+      #timer { font-size: 30px; font-weight: 900; letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
+      #timer.low { color: var(--coral); }
+      #place { font-size: 28px; letter-spacing: 0.06em; color: var(--ink); font-weight: 900; }
+
+      #top-right { top: max(10px, env(safe-area-inset-top)); right: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; width: min(240px, 46vw); }
+      #top-right .row { display: flex; gap: 6px; }
+      #coin-box { display: flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 10px; background: rgba(28, 22, 40, 0.9); border: 1px solid var(--line); font-weight: 700; white-space: nowrap; }
+      #coin-box.guest #coin-balance { color: var(--dim); font-weight: 600; }
+      #coin-box.play { display: block; text-align: right; }
+      #coin-box.play #coin-logo { vertical-align: middle; margin-right: 6px; }
+      #coin-box.play::after { content: "play money"; display: block; margin-top: 1px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
+      #coin-logo { border-radius: 50%; }
+      #board { list-style: none; padding: 6px 8px; margin: 0; min-width: 150px; box-sizing: border-box; background: var(--panel); border-radius: 10px; font-size: 12px; }
+      #board:empty { display: none; }
+      #board li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
+      #board li.me { color: var(--sun); font-weight: 800; }
+      #board em { font-style: normal; color: var(--dim); width: 14px; }
+      #board .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c, transparent); }
+      #board b { margin-left: auto; min-width: 22px; text-align: right; }
+
+      #count { inset: 0; display: none; place-items: center; }
+      #count.show { display: grid; }
+      #count b { font-size: 120px; font-weight: 900; color: var(--sun); text-shadow: 0 6px 0 rgba(0, 0, 0, 0.3); }
+      #count small { display: block; text-align: center; font-size: 14px; letter-spacing: 0.24em; color: var(--ink); }
+
+      #end { inset: 0; display: none; place-items: center; background: rgba(20, 14, 30, 0.6); }
+      #end.show { display: grid; }
+      #end .box { width: min(440px, 90vw); padding: 22px; border-radius: 16px; background: rgba(32, 24, 48, 0.97); border: 1px solid var(--line); text-align: center; }
+      #end-title { font-size: 24px; font-weight: 900; letter-spacing: 0.12em; color: var(--sun); }
+      #end-board { list-style: none; padding: 0; margin: 14px 0; text-align: left; font-size: 14px; }
+      #end-board li { display: flex; gap: 8px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
+      #end-board li.me { color: var(--sun); font-weight: 800; }
+      #end-board em { font-style: normal; color: var(--dim); width: 18px; }
+      #end-board b { margin-left: auto; }
+      #end-earned { list-style: none; padding: 0; margin: 0 0 12px; text-align: left; font-size: 14px; }
+      #end-earned li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
+      #end-earned li.guest { color: var(--dim); }
+      #end-earned b { color: var(--sun); }
+      #end-next { color: var(--dim); font-size: 12px; letter-spacing: 0.12em; }
+      #ready { pointer-events: auto; margin-top: 10px; }
+
+      #store { top: 0; right: 0; bottom: 0; width: min(330px, 88vw); background: rgba(28, 22, 40, 0.98); border-left: 1px solid var(--line); padding: 18px; box-sizing: border-box; transform: translateX(100%); transition: transform 220ms ease; pointer-events: auto; overflow-y: auto; z-index: 8; }
+      #store.show { transform: none; }
+      #store h2 { margin: 0 0 2px; font-size: 15px; letter-spacing: 0.2em; }
+      #store h3 { margin: 16px 0 0; font-size: 10px; letter-spacing: 0.24em; color: var(--dim); font-weight: 600; }
+      #store .item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
+      #store .item > div { display: flex; align-items: center; gap: 10px; }
+      #store .swatch { width: 26px; height: 26px; border-radius: 7px; flex: none; }
+      #store small { color: var(--dim); }
+      #store button { min-width: 88px; }
+      #store-close { margin-top: 16px; }
+
+      #toast { left: 50%; top: 84px; transform: translate(-50%, -10px); padding: 8px 14px; border-radius: 999px; background: rgba(28, 22, 40, 0.94); border: 1px solid var(--sun); font-weight: 700; opacity: 0; transition: opacity 200ms, transform 200ms; white-space: nowrap; }
+      #toast.show { opacity: 1; transform: translate(-50%, 0); }
+      #flash { inset: 0; background: radial-gradient(circle, transparent 45%, rgba(255, 90, 60, 0.45)); opacity: 0; }
+      #stats { left: 12px; bottom: 90px; font: 11px/1.4 ui-monospace, monospace; color: var(--dim); white-space: pre; display: none; }
+      #stats.show { display: block; }
+      #help { left: 12px; bottom: max(14px, env(safe-area-inset-bottom)); font-size: 10px; letter-spacing: 0.08em; color: var(--dim); text-shadow: 0 1px 2px #000; }
+      #banner { left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 14px; color: var(--dim); letter-spacing: 0.12em; }
+      #banner b { display: block; font-size: 44px; letter-spacing: 0.28em; color: var(--sun); margin-bottom: 8px; }
+
+      .touch { position: fixed; z-index: 6; bottom: max(18px, env(safe-area-inset-bottom)); width: 74px; height: 74px; border-radius: 50%; font-weight: 900; font-size: 13px; letter-spacing: 0.06em; display: none; touch-action: none; }
+      .touch.left { left: 18px; }
+      .touch.right { left: 104px; }
+      .touch.jump { right: 18px; width: 92px; height: 92px; border: 2px solid var(--sun); background: rgba(255, 210, 63, 0.16); }
+      .touch.dash { right: 122px; border: 2px solid var(--sky); background: rgba(143, 211, 255, 0.14); }
+      html[data-host="netnet"] #invite { display: none; }
+      @media (pointer: coarse) {
+        .touch { display: block; }
+        #help { display: none; }
+        #map { bottom: 120px; width: 120px; height: 120px; }
+        #speed { display: none; }
+      }
+      @media (max-width: 560px) {
+        #board li:nth-child(n + 5) { display: none; }
+        #timer { font-size: 22px; }
+        #top-left { width: 40vw; }
+        #top-right { top: max(52px, calc(env(safe-area-inset-top) + 42px)); width: 56vw; }
+        #top-right button { padding: 5px 8px; font-size: 12px; white-space: nowrap; }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="game"></div>
+    <div id="flash" class="hud"></div>
+
+    <div id="top-left" class="hud">
+      <div id="title">TORQUEBAY</div>
+      <div id="course"></div>
+      <div id="lap">LAP 1/3</div>
+      <div id="coins"><span class="dot"></span><span id="coin-count">0</span><small id="coin-total"></small></div>
+      <div id="buffs"></div>
+    </div>
+    <div id="top-center" class="hud">
+      <div id="timer">3:00</div>
+      <div id="place"></div>
+    </div>
+    <div id="top-right" class="hud">
+      <div id="coin-box"><img id="coin-logo" alt="" width="18" height="18" hidden /><span id="coin-balance"></span></div>
+      <div class="row"><button id="invite">Invite</button><button id="store-btn">Store</button><button id="sound">Sound off</button></div>
+      <ul id="board"></ul>
+    </div>
+
+    <canvas id="map" width="340" height="340"></canvas>
+    <div id="speed" class="hud"><span id="kmh">0</span><small>KM/H</small></div>
+    <div id="drift" class="hud"><i></i></div>
+    <div id="count" class="hud"><div><b id="count-n">3</b><small id="count-sub"></small></div></div>
+
+    <div id="end" class="hud">
+      <div class="box">
+        <div id="end-title"></div>
+        <ul id="end-board"></ul>
+        <ul id="end-earned"></ul>
+        <div id="end-next"></div>
+        <button id="ready">Next race</button>
+      </div>
+    </div>
+
+    <aside id="store" class="hud">
+      <h2>STORE</h2>
+      <small id="coin-name"></small>
+      <h3>THIS ROUND</h3>
+      <div id="store-upgrades"></div>
+      <h3>PAINT</h3>
+      <div id="store-finishes"></div>
+      <div class="item" id="gear-row"><div style="display: block"><span id="gear-name"></span><br /><small id="gear-line"></small></div><button id="gear-buy" style="white-space: nowrap"></button></div>
+      <div class="item" id="pot-row" hidden><div style="display: block">Round pot<br /><small id="pot-line"></small></div><button id="pot-go" style="white-space: nowrap"></button></div>
+      <div class="item" id="stake-row"><div style="display: block">Stake a run<br /><small id="stake-line"></small></div><span style="white-space: nowrap"><input id="stake-amount" type="number" aria-label="Stake" style="width: 56px" /> <button id="stake-go" style="min-width: 0">Stake</button></span></div>
+      <small id="store-note"></small>
+      <br /><button id="store-close">Close</button>
+    </aside>
+
+    <button class="touch left" id="t-left" aria-label="Left">&#9664;</button>
+    <button class="touch right" id="t-right" aria-label="Right">&#9654;</button>
+    <button class="touch dash" id="t-brake">BRAKE</button>
+    <button class="touch jump" id="t-drift">DRIFT</button>
+
+    <div id="toast" class="hud"></div>
+    <div id="stats" class="hud"></div>
+    <div id="help" class="hud">W or Up accelerate &middot; S or Down brake &middot; A D or arrows steer &middot; hold Space or Shift through a bend to drift, release for a boost</div>
+    <div id="banner" class="hud"><b>TORQUEBAY</b><span id="banner-text">Warming up the tyres</span></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/client/input.ts

@@ -0,0 +1,105 @@
+/**
+ * TORQUEBAY input: throttle, brake, steer, drift.
+ *
+ *  - Keyboard: W or Up accelerates, S or Down brakes and reverses, A/D or
+ *    Left/Right steer, Space or Shift drifts (hold through a bend, release
+ *    for the mini-turbo); R or Enter readies the next race.
+ *  - Gamepad: left stick steers, RT (or A) accelerates, LT (or B) brakes,
+ *    RB or X drifts.
+ *  - Touch: the kart accelerates by itself; left and right buttons steer,
+ *    DRIFT and BRAKE buttons.
+ */
+import { Button } from "@netforge/engine-sim";
+import type { InputCommand } from "@netforge/engine-sim";
+
+export class KartInput {
+  private readonly keys = new Set<string>();
+  private readonly touchHeld = new Set<string>();
+  private readyLatch = 0;
+  private driftLatch = 0;
+  readonly touch: boolean;
+  private pad: Gamepad | null = null;
+
+  constructor(root: HTMLElement) {
+    this.touch = globalThis.matchMedia?.("(pointer: coarse)").matches || "ontouchstart" in globalThis;
+    addEventListener("keydown", (e) => {
+      if (e.code === "Space" || e.code.startsWith("Arrow")) e.preventDefault();
+      if (e.repeat) return;
+      this.keys.add(e.code);
+      if (e.code === "Space" || e.code.startsWith("Shift")) this.driftLatch = 2;
+      if (e.code === "KeyR" || e.code === "Enter") this.readyLatch = 6;
+    });
+    addEventListener("keyup", (e) => this.keys.delete(e.code));
+    addEventListener("blur", () => {
+      this.keys.clear();
+      this.touchHeld.clear();
+    });
+    const bind = (id: string, name: string) => {
+      const el = root.ownerDocument.getElementById(id);
+      if (!el) return;
+      el.addEventListener("pointerdown", (e) => {
+        e.preventDefault();
+        this.touchHeld.add(name);
+        if (name === "drift") this.driftLatch = 2;
+        el.setPointerCapture?.(e.pointerId);
+      });
+      const off = () => this.touchHeld.delete(name);
+      el.addEventListener("pointerup", off);
+      el.addEventListener("pointercancel", off);
+      el.addEventListener("lostpointercapture", off);
+    };
+    bind("t-left", "left");
+    bind("t-right", "right");
+    bind("t-drift", "drift");
+    bind("t-brake", "brake");
+  }
+
+  ready(): void {
+    this.readyLatch = 6;
+  }
+
+  private has(...codes: string[]): boolean {
+    return codes.some((c) => this.keys.has(c));
+  }
+
+  sample(tick: number): InputCommand {
+    this.pad = (globalThis.navigator?.getGamepads?.() ?? []).find((p) => p) ?? null;
+    let steer = 0;
+    let throttle = 0;
+    let drift = false;
+    if (this.has("KeyA", "ArrowLeft") || this.touchHeld.has("left")) steer -= 1;
+    if (this.has("KeyD", "ArrowRight") || this.touchHeld.has("right")) steer += 1;
+    if (this.has("KeyW", "ArrowUp")) throttle = 1;
+    if (this.has("KeyS", "ArrowDown") || this.touchHeld.has("brake")) throttle = -1;
+    // Touch drives itself: the kart accelerates unless the brake is held.
+    if (this.touch && this.touchHeld.size > 0 && !this.touchHeld.has("brake")) throttle = 1;
+    if (this.touch && this.touchHeld.size === 0 && this.keys.size === 0) throttle = 1;
+    if (this.has("Space", "ShiftLeft", "ShiftRight") || this.touchHeld.has("drift")) drift = true;
+    const pad = this.pad;
+    if (pad) {
+      const ax = pad.axes[0] ?? 0;
+      if (Math.abs(ax) > 0.15) steer = Math.max(-1, Math.min(1, ax));
+      const rt = pad.buttons[7]?.value ?? 0;
+      const lt = pad.buttons[6]?.value ?? 0;
+      if (rt > 0.1 || pad.buttons[0]?.pressed) throttle = Math.max(throttle, rt > 0.1 ? rt : 1);
+      if (lt > 0.1 || pad.buttons[1]?.pressed) throttle = -Math.max(lt, 0.8);
+      if (pad.buttons[5]?.pressed || pad.buttons[2]?.pressed) drift = true;
+      if (pad.buttons[9]?.pressed) this.readyLatch = 6;
+    }
+    if (this.driftLatch > 0) {
+      drift = true;
+      this.driftLatch--;
+    }
+    let buttons = drift ? Button.Sprint : 0;
+    if (this.readyLatch > 0) {
+      buttons |= Button.Ready;
+      this.readyLatch--;
+    }
+    return { seq: 0, tick, moveX: steer, moveZ: throttle, yaw: 0, buttons };
+  }
+
+  rumble(strength: number, ms: number): void {
+    const act = (this.pad as (Gamepad & { vibrationActuator?: { playEffect?: (t: string, o: object) => Promise<unknown> } }) | null)?.vibrationActuator;
+    void act?.playEffect?.("dual-rumble", { duration: ms, strongMagnitude: strength, weakMagnitude: strength * 0.6 }).catch(() => undefined);
+  }
+}