Static site

index.html

@@ -8,7 +8,7 @@
   <meta name="theme-color" content="#10131b">
   <link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;800;900&family=Inter:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@700&display=swap" rel="stylesheet">
-  <link rel="stylesheet" href="/static/style.css?v=1792935806">
+  <link rel="stylesheet" href="/static/style.css?v=1793029420">
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Crect width=%2764%27 height=%2764%27 rx=%2714%27 fill=%27%23050506%27/%3E%3Ccircle cx=%2732%27 cy=%2732%27 r=%2716%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%275%27/%3E%3C/svg%3E">
   <script type="importmap">
     { "imports": {
@@ -114,6 +114,8 @@
   <div class="hud-top">
     <div class="g-race" id="gRace" hidden></div>
     <div class="g-job" id="gJob" hidden></div>
+    <div class="g-job g-con" id="gCon" hidden></div>
+    <div class="g-build" id="gBuild" hidden></div>
     <div class="g-gps" id="gGps"></div>
     <div class="g-hint" id="gHint"></div>
     <div class="g-target"><i id="gArrow">&#11014;</i><span id="gTgt"></span></div>
@@ -153,9 +155,13 @@
         <label class="set">Auto gas<span class="seg" data-set="autogas"><button data-v="off">Off</button><button data-v="on">On</button></span></label>
         <label class="set">Living city (day/night + weather change)<span class="seg" data-set="cycle"><button data-v="off">Off</button><button data-v="on">On</button></span></label>
         <label class="set">Touch steering<span class="seg" data-set="steer"><button data-v="stick">Joystick</button><button data-v="buttons">Buttons</button></span></label>
+        <div class="set save-row">Your progress<span><button class="pill" id="gSaveOut">Back up</button><button class="pill" id="gSaveIn">Restore</button></span></div>
+        <p class="small">Progress lives in this browser. Back up copies a code you can paste on another device or browser.</p>
       </section>
+      <section class="wide"><h4>Contracts</h4><div class="tiles con-tiles" id="gContracts"></div></section>
+      <section class="wide"><h4>Routes and ghosts</h4><div class="routes" id="gRoutes"></div></section>
       <section class="wide"><h4>Challenges</h4><div class="goals" id="gGoals"></div></section>
-      <section class="wide"><h4>Controls</h4><p class="small"><b>Drive:</b> W A S D or arrows · Space handbrake/drift · Shift nitro · F fly · L land · C camera · R reset · H horn · T time · M GPS · O autopilot · Enter starts a race at a 🏁 marker. <b>Look:</b> click the game, then move the mouse. <b>Phone:</b> joystick on the left, pedals on the right, drag anywhere to look. <b>Fuel:</b> about 10 min driving, 5 min flying; stop at ⛽ to fill up and repair, or drive through a green 🔧.</p></section>
+      <section class="wide"><h4>Controls</h4><p class="small"><b>Drive:</b> W A S D or arrows · Space handbrake/drift · Shift nitro · F fly · L land · C camera · R reset · H horn · T time · M GPS · O autopilot · Enter starts a race at a 🏁 marker · G drops a gate in the route builder. <b>Look:</b> click the game, then move the mouse. <b>Phone:</b> joystick on the left, pedals on the right, drag anywhere to look. <b>Fuel:</b> about 10 min driving, 5 min flying; stop at ⛽ to fill up and repair, or drive through a green 🔧.</p></section>
     </div>
     <div class="menu-foot"><button class="pill" id="gExit">Exit to home</button></div>
   </div>
@@ -202,6 +208,6 @@
 <div id="toast" role="status"></div>
 <noscript><p style="position:fixed;inset:auto 0 0;padding:16px;background:#111;color:#fff;text-align:center">VOID needs JavaScript for the 3D car.</p></noscript>
 <script src="/static/hub.js" data-app="void" defer></script>
-<script type="module" src="/static/main.js?v=1792935806"></script>
+<script type="module" src="/static/main.js?v=1793029420"></script>
 </body>
 </html>

static/contracts.js

@@ -0,0 +1,133 @@
+// Contracts: short jobs that mix driving, flying and chasing, each with a timer and bronze / silver / gold medals.
+//  Rooftop Express  drive to a pickup on the street, then fly the parcel to a rooftop helipad and land on it
+//  Takedown         a getaway car flees through the grid: ram it until it gives up
+//  Sky Chase        a camera drone weaves round the towers: stay close behind it in the air
+//  Hot Cargo        grab cargo at the docks (three stars at once), then deliver it to a rooftop while the police hunt you
+// Best medals are kept on this device; every medal pays cash for the garage.
+import * as THREE from "three";
+import { GRID } from "./city.js";
+import { makeDriver } from "./police.js";
+
+const store = { get(k) { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } }, set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch { } } };
+const fmt = t => `${Math.floor(t / 60)}:${String(Math.floor(t % 60)).padStart(2, "0")}`;
+const clamp = (v, a = 0, b = 1) => Math.max(a, Math.min(b, v));
+export const CONTRACTS = [
+  { id: "express", icon: "📦", name: "Rooftop Express", text: "Drive to the pickup, then fly the parcel to a rooftop helipad", limit: 180, medals: [70, 100, 140] },
+  { id: "takedown", icon: "💥", name: "Takedown", text: "Ram the getaway car 4 times before it escapes", limit: 120, medals: [35, 60, 90] },
+  { id: "skychase", icon: "🛸", name: "Sky Chase", text: "Stay within 45 m of the drone for 20 seconds", limit: 100, medals: [35, 55, 80] },
+  { id: "hot", icon: "🔥", name: "Hot Cargo", text: "Grab the cargo at the docks and land it on a rooftop while wanted", limit: 200, medals: [80, 120, 170] },
+];
+const PAY = [0, 1200, 2000, 3200];        // none, bronze, silver, gold
+const MEDAL = ["", "🥉", "🥈", "🥇"];
+
+export function createContracts(W, api, nav, sound, police) {
+  const { scene } = W, $ = id => document.getElementById(id), D = makeDriver(api);
+  const best = store.get("void.contracts") || {};
+  // a column of light over the objective
+  const beacon = new THREE.Mesh(new THREE.CylinderGeometry(5, 5, 400, 24, 1, true).translate(0, 200, 0), new THREE.MeshBasicMaterial({ color: new THREE.Color(0x3dfcff).multiplyScalar(1.5), transparent: true, opacity: .14, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, toneMapped: false }));
+  beacon.visible = false; scene.add(beacon);
+  // the getaway car: a low wedge in red with a flashing roof light
+  const thief = new THREE.Group();
+  { const m = new THREE.MeshStandardMaterial({ color: 0xb0101c, roughness: .3, metalness: .6 }), dark = new THREE.MeshStandardMaterial({ color: 0x111114, roughness: .4 });
+    const body = new THREE.Mesh(new THREE.BoxGeometry(4.4, .8, 2).translate(0, .75, 0), m), cab = new THREE.Mesh(new THREE.BoxGeometry(2, .6, 1.7).translate(-.3, 1.4, 0), dark);
+    thief.add(body, cab); for (const [x, z] of [[1.4, 1], [1.4, -1], [-1.4, 1], [-1.4, -1]]) { const w = new THREE.Mesh(new THREE.CylinderGeometry(.38, .38, .3, 12).rotateX(Math.PI / 2), dark); w.position.set(x, .38, z); thief.add(w); }
+    thief.flash = new THREE.Mesh(new THREE.BoxGeometry(.5, .2, .5), new THREE.MeshBasicMaterial({ color: new THREE.Color(3, .4, .2), toneMapped: false })); thief.flash.position.set(-.3, 1.8, 0); thief.add(thief.flash); }
+  thief.visible = false; scene.add(thief);
+  // the drone: a disc with four rotors and a light
+  const drone = new THREE.Group();
+  { const m = new THREE.MeshStandardMaterial({ color: 0x22262e, roughness: .35, metalness: .7 }), glow = new THREE.MeshBasicMaterial({ color: new THREE.Color(.4, 2.6, 3), toneMapped: false });
+    drone.add(new THREE.Mesh(new THREE.CylinderGeometry(1.6, 1.9, .6, 20), m)); const eye = new THREE.Mesh(new THREE.SphereGeometry(.5, 12, 8), glow); eye.position.y = -.4; drone.add(eye);
+    for (const [x, z] of [[2, 2], [2, -2], [-2, 2], [-2, -2]]) { const arm = new THREE.Mesh(new THREE.CylinderGeometry(1.1, 1.1, .08, 16), glow.clone()); arm.material.color.setRGB(.6, 1.2, 1.4); arm.position.set(x, .4, z); drone.add(arm); }
+    drone.scale.setScalar(1.4); }
+  drone.visible = false; scene.add(drone);
+
+  const streetPoint = (p, rmin, rmax) => {           // a crossing on the grid at a distance, not in the water or a building
+    for (let k = 0; k < 60; k++) {
+      const i = Math.floor(Math.random() * GRID.NX), j = Math.floor(Math.random() * GRID.NZ), x = GRID.ax(i), z = GRID.sz(j), d = Math.hypot(x - p.x, z - p.z);
+      if (d > rmin && d < rmax && !api.isWater(x, z) && !api.hitBox(x, z, .5, 3)) return { x, z };
+    }
+    return { x: GRID.ax(Math.floor(GRID.NX / 2)), z: GRID.sz(Math.floor(GRID.NZ / 2)) };
+  };
+  const padNear = (x, z, rmin, rmax) => { const pads = W.city.helipads.filter(h => { const d = Math.hypot(h.x - x, h.z - z); return d > rmin && d < rmax; }); return pads.length ? pads[Math.floor(Math.random() * pads.length)] : W.city.helipads[0]; };
+  const docks = () => { const p = api.state; const opts = [5, 10, 15].map((j, k) => ({ x: -1010, z: GRID.sz(Math.min(GRID.NZ - 1, j)), name: ["Hudson piers north", "Hudson piers", "Hudson piers south"][k] })); return opts.filter(o => !api.isWater(o.x, o.z) && !api.hitBox(o.x, o.z, .5, 3)).sort((a, b) => Math.hypot(a.x - p.x, a.z - p.z) - Math.hypot(b.x - p.x, b.z - p.z))[0] || streetPoint(p, 400, 900); };
+
+  let C = null;           // the contract in progress
+  function show(x, z, name, air, y) { beacon.position.set(x, air ? y : 0, z); beacon.visible = true; nav.setDest({ name, x, z, air: !!air, y: y || 0 }); }
+  function start(id) {
+    const p = api.state; if (!p || !p.started) return;
+    const def = CONTRACTS.find(c => c.id === id); if (C) end(false, "Contract cancelled");
+    C = { def, t: 0, stage: 0, msg: "" };
+    if (id === "express") { const a = streetPoint(p, 250, 650); C.a = a; C.pad = padNear(a.x, a.z, 400, 1100); show(a.x, a.z, "📦 Parcel pickup"); C.msg = "Drive to the 📦 pickup and stop there"; }
+    if (id === "takedown") {
+      const s = streetPoint(p, 90, 160); Object.assign(C, { car: { x: s.x, z: s.z, yaw: Math.atan2(s.z - p.z, s.x - p.x), v: 18, accel: 15 }, hits: 0, hitT: 0, goal: streetPoint(s, 400, 900) });
+      thief.visible = true; beacon.visible = false; nav.setDest(null); C.msg = "Ram the red getaway car";
+    }
+    if (id === "skychase") {
+      const c = { x: p.x + 60, z: p.z, y: Math.max(60, p.y + 40) }; Object.assign(C, { dr: c, a0: Math.random() * 6, close: 0, cx: p.x, cz: p.z });
+      drone.visible = true; C.msg = "Take off (F) and stay close to the drone";
+    }
+    if (id === "hot") { const d = docks(); C.a = d; C.pad = padNear(d.x, d.z, 300, 1000); show(d.x, d.z, "🔥 Cargo at " + (d.name || "the docks")); C.msg = "Drive to the docks for the cargo"; }
+    $("gCon").hidden = false; sound.win(); api.say(`${def.icon} ${def.name}: ${def.text}`, 4);
+  }
+  function end(ok, why) {
+    if (!C) return;
+    const def = C.def; let medal = 0;
+    if (ok) { medal = C.t <= def.medals[0] ? 3 : C.t <= def.medals[1] ? 2 : 1; api.addScore(PAY[medal], `${MEDAL[medal]} ${def.name} in ${fmt(C.t)}`); if (medal > (best[def.id] || 0)) { best[def.id] = medal; store.set("void.contracts", best); } }
+    else api.say(`${def.icon} ${why || "Contract failed"}`, 3);
+    beacon.visible = thief.visible = drone.visible = false; nav.setDest(null); $("gCon").hidden = true; C = null;
+    return medal;
+  }
+  const onPad = (p, pad) => pad && p.mode === "drive" && Math.hypot(p.x - pad.x, p.z - pad.z) < pad.r + 2 && Math.abs(p.y - pad.y) < 2.5;
+
+  return {
+    CONTRACTS, best, get active() { return C; }, start, cancel: () => end(false, "Contract cancelled"),
+    update(dt, time) {
+      if (!C) return;
+      const p = api.state; if (!p || !p.started) return;
+      if (p.wreck > 0) { end(false, "The car was wrecked. Contract failed"); return; }
+      C.t += dt; const def = C.def, left = def.limit - C.t;
+      if (left <= 0) { end(false, "Out of time. Contract failed"); return; }
+      beacon.material.opacity = .1 + .06 * Math.sin(time * 4);
+      const sp = Math.hypot(p.vel.x, p.vel.z);
+      if (def.id === "express" || def.id === "hot") {
+        if (C.stage === 0 && Math.hypot(p.x - C.a.x, p.z - C.a.z) < 14 && sp < 4 && p.mode === "drive") {
+          C.stage = 1; sound.pop(); show(C.pad.x, C.pad.z, "🛬 Rooftop drop", true, C.pad.y);
+          C.msg = "Fly to the rooftop helipad (beam) and land on it";
+          if (def.id === "hot") { police.wanted && police.wanted(3, "Hot cargo! The police are on to you"); C.msg = "Wanted! Fly the cargo to the rooftop helipad"; }
+          api.say(def.id === "hot" ? "🔥 Cargo loaded. ★★★ Get to the roof!" : "📦 Parcel loaded. Press F to fly to the roof", 3);
+        }
+        if (C.stage === 1 && onPad(p, C.pad) && sp < 3) { end(true); return; }
+      }
+      if (def.id === "takedown") {
+        const a = C.car;
+        // run from the player: pick a far crossing, steer there along the streets, pick a new one when close
+        if (Math.hypot(a.x - C.goal.x, a.z - C.goal.z) < 40) C.goal = streetPoint({ x: a.x * 2 - p.x, z: a.z * 2 - p.z }, 0, 700);
+        const wp = D.waypoint(a, C.goal.x, C.goal.z), dist = Math.hypot(p.x - a.x, p.z - a.z);
+        const flee = 30 + Math.min(14, Math.max(0, 80 - dist) * .25) - C.hits * 2.5;
+        D.step(a, wp[0], wp[1], flee, dt);
+        if (a.stuck > 1.5) { const s = streetPoint(a, 0, 120); a.x = s.x; a.z = s.z; a.stuck = 0; }
+        thief.position.set(a.x, 0, a.z); thief.rotation.y = -a.yaw; thief.flash.visible = Math.sin(time * 18) > 0;
+        C.hitT -= dt;
+        if (dist < 4.2 && p.y < 2 && C.hitT <= 0) {
+          const rel = Math.hypot(p.vel.x - Math.cos(a.yaw) * a.v, p.vel.z - Math.sin(a.yaw) * a.v);
+          if (rel > 5) { C.hits++; C.hitT = 1; a.v *= .4; a.yaw += (Math.random() - .5) * .8; sound.crash(); api.impact && api.impact(a.x, a.z, rel); p.shake = 1; api.say(C.hits >= 4 ? "Busted! The getaway car gives up" : `Hit ${C.hits}/4`, 1.6); if (C.hits >= 4) { end(true); return; } }
+          else { const dx = p.x - a.x, dz = p.z - a.z; p.x += dx / dist * (4.2 - dist); p.z += dz / dist * (4.2 - dist); }
+        }
+        if (dist > 650) { end(false, "The getaway car escaped"); return; }
+        C.msg = `Ram it: ${C.hits}/4 hits · ${Math.round(dist)} m away`;
+      }
+      if (def.id === "skychase") {
+        // a figure-eight round the towers that drifts slowly across the city
+        C.a0 += dt * .22; const r = 180, d = C.dr;
+        const tx = C.cx + Math.sin(C.a0) * r, tz = C.cz + Math.sin(C.a0 * 2) * r * .6, ty = 70 + Math.sin(C.a0 * 1.7) * 30;
+        d.x += (tx - d.x) * clamp(dt * 1.5); d.z += (tz - d.z) * clamp(dt * 1.5); d.y += (ty - d.y) * clamp(dt * 1.2);
+        drone.position.set(d.x, d.y, d.z); drone.rotation.y = -C.a0 * 3; drone.rotation.z = Math.sin(time * 2) * .1;
+        const dist = Math.hypot(p.x - d.x, p.y - d.y, p.z - d.z);
+        if (dist < 45 && p.mode === "air") { C.close += dt; if (Math.floor(C.close) !== Math.floor(C.close - dt)) sound.pop(); }
+        if (C.close >= 20) { end(true); return; }
+        C.msg = p.mode !== "air" ? "Take off (F) and chase the drone" : `${dist < 45 ? "Locked on" : "Get closer"} · ${C.close.toFixed(1)}/20 s · ${Math.round(dist)} m`;
+      }
+      $("gCon").textContent = `${def.icon} ${C.msg} · ${fmt(Math.max(0, left))}`;
+    },
+  };
+}

static/game.js

@@ -140,7 +140,7 @@ export function createGame(W, car, sound, life, opts = {}) {
   }
   function toggleFly() {
     if (!g || g.wreck > 0 || !g.started) return;
-    if (g.mode === "drive") { g.mode = "air"; g.hover = true; g.landing = false; g.vel.y = Math.max(g.vel.y, 3); g.y += .3; say("Thrusters on. Space/E climb · Q/Ctrl dive · A/D bank · W thrust · Shift nitro · F land"); }
+    if (g.mode === "drive") { g.mode = "air"; g.hover = true; g.landing = false; g.vel.y = Math.max(g.vel.y, 4.5); g.y += .3; sound.whoosh(); say("Thrusters on. Space/E climb · Q/Ctrl dive · A/D bank · W thrust · Shift nitro · F land"); }
     else if (g.mode === "air" && g.jump) { g.jump = false; g.hover = true; g.landing = false; say("Thrusters on"); }
     else if (g.mode === "air") { g.landing = !g.landing; if (!g.landing) g.hover = true; say(g.landing ? "Coming down gently" : "Flying"); }
   }
@@ -291,6 +291,7 @@ export function createGame(W, car, sound, life, opts = {}) {
       g.vel.set(fx * u + sx * w, 0, fz * u + sz * w);
       // drift scoring
       const slip = Math.atan2(Math.abs(w), Math.max(1, Math.abs(u)));
+      g.slip = Math.abs(u) > 6 ? clamp((slip - .12) * 3) + (brake && Math.abs(u) > 20 ? .35 : 0) : 0; if (g.thudT > 0) g.thudT -= dt;
       if (slip > .22 && Math.abs(u) > 12) { g.drift += slip * Math.abs(u) * dt * 6; g.driftT = .7; }
       else if (g.driftT > 0) { g.driftT -= dt; if (g.driftT <= 0 && g.drift > 30) { addScore(Math.round(g.drift), "Drift"); g.drift = 0; } else if (g.driftT <= 0) g.drift = 0; }
       // move, with ramps, rooftops, buildings, water and traffic
@@ -298,9 +299,14 @@ export function createGame(W, car, sound, life, opts = {}) {
       const hit = hitBox(nx, nz, g.y + .5, 1.15);
       if (hit) {
         const vn = g.vel.x * hit.nx + g.vel.z * hit.nz;
-        if (vn < 0) { g.vel.x -= 1.3 * vn * hit.nx; g.vel.z -= 1.3 * vn * hit.nz; g.vel.multiplyScalar(.75); }
+        // a glancing hit scrapes along the wall and keeps most of its speed; a head-on one stops you with a small bounce
+        const sp = Math.hypot(g.vel.x, g.vel.z) || 1, head = vn < 0 ? -vn / sp : 0;
+        if (vn < 0) { g.vel.x -= 1.25 * vn * hit.nx; g.vel.z -= 1.25 * vn * hit.nz; g.vel.multiplyScalar(1 - .5 * head); if (head < .5 && sp > 8) g.sparks = Math.max(g.sparks || 0, .8);
+          // and the car swings round to run along the wall instead of nosing into it again next frame
+          if (head < .75 && sp > 3) { let dv = Math.atan2(g.vel.z, g.vel.x) - g.yaw; while (dv > Math.PI) dv -= 2 * Math.PI; while (dv < -Math.PI) dv += 2 * Math.PI; if (Math.abs(dv) < 1.6) g.yaw += dv * .6; } }
         g.x = nx + hit.nx * hit.d; g.z = nz + hit.nz * hit.d;
-        const imp = -vn; impact(g.x - hit.nx * 1.3, .6, g.z - hit.nz * 1.3, imp * 1.5); if (imp > 9) { hurt((imp - 9) * 1.8, "Hit a building"); sound.crash(); g.sparks = 1; } else if (imp > 2) sound.pop();
+        const imp = -vn; impact(g.x - hit.nx * 1.3, .6, g.z - hit.nz * 1.3, imp * 1.5); if (imp > 3) g.shake = Math.min(1, (g.shake || 0) + imp / 30);
+        if (imp > 9) { hurt((imp - 9) * 1.8, "Hit a building"); sound.crash(); g.sparks = 1; } else if (imp > 2 && !(g.thudT > 0)) { sound.thud && sound.thud(imp / 9); g.thudT = .25; }
       } else { g.x = nx; g.z = nz; }
       const gr = groundAt(g.x, g.z, g.y), prevY = g.y;
       if (gr.water) { splash(); return; }
@@ -433,7 +439,8 @@ export function createGame(W, car, sound, life, opts = {}) {
       const keep = Math.min(112, Math.sqrt(vh2 * vh2 + .6 * down2 * down2));
       if (vh2 > 2) g.yaw = Math.atan2(g.vel.z, g.vel.x);
       g.vel.set(Math.cos(g.yaw) * keep, 0, Math.sin(g.yaw) * keep);
-      g.mode = "drive"; g.wings = 0; g.hover = false; g.landing = false; g.pitch = 0; g.roll = 0; g.jump = false;
+      g.mode = "drive"; g.wings = 0; g.hover = false; g.landing = false; g.pitch = -clamp(down2 * .006, 0, .07); g.roll = 0; g.jump = false;
+      if (down2 > 2) { sound.thud && sound.thud(down2 / 14); g.shake = Math.min(1, (g.shake || 0) + down2 / 40); }
       if (keep > 25) say(`Touchdown at ${Math.round(keep * 3.6)} km/h. Rolling on`, 2);
     }
   }
@@ -534,16 +541,17 @@ export function createGame(W, car, sound, life, opts = {}) {
           else if (!air && fwd > 8) { let dv = Math.atan2(g.vel.z, g.vel.x) - g.yaw; while (dv > Math.PI) dv -= 2 * Math.PI; while (dv < -Math.PI) dv += 2 * Math.PI; base = g.yaw + clamp(dv, -.6, .6) * .5; }
           if (rig.yaw == null) rig.yaw = base;
           let dy = base - rig.yaw; while (dy > Math.PI) dy -= 2 * Math.PI; while (dy < -Math.PI) dy += 2 * Math.PI;
-          rig.yaw += dy * clamp(dt * (air ? 3 : 5));
-          const yawC = rig.yaw + orbit.yaw, pitC = clamp((air ? .2 : .24) + orbit.pitch - (air ? g.vel.y * .004 : 0), -.12, 1.25);
-          const want = (air ? 12 + speed * .01 : 6.6 + speed * .012) + (orbit.dist || 0) + (g.veh === "plane" || g.veh === "heli" ? 6 : g.veh === "boat" ? 2 : 0);
-          const pivot = fr.p.clone().add(new THREE.Vector3(0, air ? 1.4 : 1.3, 0)), dir = new THREE.Vector3(-Math.cos(yawC) * Math.cos(pitC), Math.sin(pitC), -Math.sin(yawC) * Math.cos(pitC));
+          rig.air = lerp(rig.air ?? (air ? 1 : 0), air ? 1 : 0, clamp(dt * 1.8)); const A = rig.air;
+          rig.yaw += dy * clamp(dt * lerp(5, 3, A));
+          const yawC = rig.yaw + orbit.yaw, pitC = clamp(lerp(.24, .2, A) + orbit.pitch - (air ? g.vel.y * .004 * A : 0), -.12, 1.25);
+          const want = lerp(6.6 + speed * .012, 12 + speed * .01, A) + (orbit.dist || 0) + (g.veh === "plane" || g.veh === "heli" ? 6 : g.veh === "boat" ? 2 : 0);
+          const pivot = fr.p.clone().add(new THREE.Vector3(0, 1.3 + .1 * A, 0)), dir = new THREE.Vector3(-Math.cos(yawC) * Math.cos(pitC), Math.sin(pitC), -Math.sin(yawC) * Math.cos(pitC));
           // walls: pull in at once, ease back out
           let room = want; for (let t = .8; t <= want; t += .5) { const q2 = pivot.clone().addScaledVector(dir, t); if (q2.y < .3 || hitBox(q2.x, q2.z, q2.y, .35)) { room = Math.max(1.6, t - .6); break; } }
           rig.dist = room < rig.dist ? room : lerp(rig.dist, room, clamp(dt * 2.5));
           camPos.copy(pivot).addScaledVector(dir, rig.dist);
-          camLook.copy(pivot).add(new THREE.Vector3(fx, 0, fz).multiplyScalar(air ? 3 : 1.5));
-          if (air) up.lerp(fr.u, .15).normalize();
+          camLook.copy(pivot).add(new THREE.Vector3(fx, 0, fz).multiplyScalar(1.5 + 1.5 * A));
+          if (A > .01) up.lerp(fr.u, .15 * A).normalize();
           if (camPos.y < .4) camPos.y = .4;
         }
         cam = { pos: camPos.clone(), look: camLook.clone(), up, fov: lerp(56, 68, clamp(speed / 330)) + nitroFov };

static/net.js

@@ -1,128 +1,136 @@
-// Online play with real people, no server of our own: WebRTC peer-to-peer through the free PeerJS broker.
-// A room is a well-known peer id; the first player to claim it is the host and relays everyone's car to everyone.
-// If the host leaves, the others race to claim it again. Voice chat is a mesh of audio calls, off until you
-// switch your mic on, and you hear people louder the closer their car is. Chat is quick emotes only (strangers
-// can join the public city), and names are short and filtered.
-const PREFIX = "voidcity-awsaa-v1-";
-const ICE = { iceServers: [{ urls: "stun:stun.l.google.com:19302" }, { urls: "stun:stun1.l.google.com:19302" }, { urls: "stun:global.stun.twilio.com:3478" }] };
-const BAD = /(fuck|shit|bitch|nigg|cunt|dick|pussy|sex|porn|kill|nazi|hitler|rape|fag)/i;
-export const cleanName = s => { s = String(s || "").replace(/[^\p{L}\p{N} _-]/gu, "").trim().slice(0, 14); return !s || BAD.test(s) ? "Driver" : s; };
-export const EMOTES = ["👋 Hi!", "🏁 Race?", "😂", "🔥 Nice!", "GG", "🚓 Cops!", "Follow me", "Wait up"];
-
-export function createNet() {
-  let Peer = null, peer = null, host = false, me = null, room = null, name = "Driver", hostConn = null, sendT = 0, lastState = null, closing = false;
-  const conns = new Map();                 // host: everyone's connection
-  const players = new Map();               // id -> { id, name, s: [samples], model, paint, race, rp, rf, vc, emote, emoteT }
-  const handlers = {};
-  const emit = (k, ...a) => (handlers[k] || []).forEach(f => f(...a));
-  const status = t => emit("status", t);
-  let stream = null, micOn = false, calls = new Map(), audios = new Map();
-
-  async function lib() { if (!Peer) ({ Peer } = await import("https://cdn.jsdelivr.net/npm/peerjs@1.5.4/+esm")); return Peer; }
-  async function join(r, nm) {
-    await leave(); closing = false; room = String(r).toLowerCase().replace(/[^a-z0-9-]/g, "").slice(0, 24) || "public-1"; name = cleanName(nm);
-    status("Connecting…"); await lib(); claim();
-  }
-  function claim() {
-    if (closing) return;
-    const p = new Peer(PREFIX + room, { config: ICE, debug: 0 }); peer = p;
-    p.on("open", id => { host = true; me = id; status(`Online · room ${room} · you are hosting`); emit("change"); });
-    p.on("connection", c => {
-      c.on("data", d => onData(c, d));
-      c.on("open", () => { if (conns.size >= 11) { c.send({ t: "full" }); setTimeout(() => c.close(), 300); return; } conns.set(c.peer, c); emit("change"); });
-      c.on("close", () => { conns.delete(c.peer); players.delete(c.peer); dropAudio(c.peer); emit("change"); broadcast({ t: "gone", id: c.peer }); });
-    });
-    p.on("call", answer);
-    p.on("error", e => {
-      if (e.type === "unavailable-id") { p.destroy(); client(); }
-      else if (e.type === "peer-unavailable") { status("Room not found, retrying…"); setTimeout(() => rejoin(), 800 + Math.random() * 1500); }
-      else status("Network: " + e.type);
-    });
-  }
-  function client() {
-    if (closing) return;
-    const p = new Peer({ config: ICE, debug: 0 }); peer = p; host = false;
-    p.on("open", id => {
-      me = id; const c = p.connect(PREFIX + room, { serialization: "json", reliable: false }); hostConn = c;
-      c.on("open", () => { status(`Online · room ${room}`); c.send({ t: "hello", name }); emit("change"); });
-      c.on("data", d => onData(c, d));
-      c.on("close", () => { if (!closing) { status("Host left, reconnecting…"); players.clear(); emit("change"); setTimeout(rejoin, Math.random() * 1500); } });
-    });
-    p.on("call", answer);
-    p.on("error", e => { if (e.type === "peer-unavailable") setTimeout(rejoin, 400 + Math.random() * 1200); else status("Network: " + e.type); });
-  }
-  function rejoin() { if (closing) return; try { peer && peer.destroy(); } catch { } hostConn = null; conns.clear(); claim(); }
-  async function leave() {
-    closing = true; try { peer && peer.destroy(); } catch { } peer = null; hostConn = null; host = false; conns.clear(); players.clear();
-    for (const id of [...audios.keys()]) dropAudio(id); setMic(false); room = null; emit("change"); status("Offline");
-  }
-  function broadcast(m, except) { for (const [id, c] of conns) if (id !== except && c.open) try { c.send(m); } catch { } }
-  function upsert(id, st) {
-    let p = players.get(id), fresh = !p; if (!p) { p = { id, name: "Driver", s: [] }; players.set(id, p); }
-    if (st.n && cleanName(st.n) !== p.name) { p.name = cleanName(st.n); fresh = true; }
-    Object.assign(p, { model: st.m, paint: st.c, race: st.r, rp: st.rp, rf: st.rf, vc: st.vc, wanted: st.w });
-    p.s.push({ t: performance.now(), x: st.p[0], y: st.p[1], z: st.p[2], yaw: st.p[3], pitch: st.p[4], roll: st.p[5], v: st.v, air: st.a });
-    if (p.s.length > 12) p.s.shift();
-    if (fresh) emit("change");
-  }
-  function onData(c, d) {
-    if (!d || typeof d !== "object") return;
-    if (host) {
-      if (d.t === "hello") { const p = players.get(c.peer) || { id: c.peer, s: [] }; p.name = cleanName(d.name); players.set(c.peer, p); emit("change"); return; }
-      if (d.t === "s") { upsert(c.peer, d); return; }
-      if (d.t === "ev") { broadcast({ ...d, from: c.peer }, c.peer); emit(d.k, d, c.peer); return; }
-    } else {
-      if (d.t === "w") { for (const st of d.all) if (st.id !== me) upsert(st.id, st); return; }
-      if (d.t === "gone") { players.delete(d.id); dropAudio(d.id); emit("change"); return; }
-      if (d.t === "full") { status("Room full, trying the next one"); room = room.replace(/(\d+)$/, n => +n + 1); rejoin(); return; }
-      if (d.t === "ev") { emit(d.k, d, d.from); return; }
-    }
-  }
-  // voice: everyone with their mic on calls everyone; people without a mic still hear
-  function answer(call) { call.answer(stream || undefined); hook(call); }
-  function hook(call) {
-    calls.set(call.peer, call);
-    call.on("stream", s => { let a = audios.get(call.peer); if (!a) { a = new Audio(); a.autoplay = true; audios.set(call.peer, a); } a.srcObject = s; a.play().catch(() => { }); });
-    call.on("close", () => { calls.delete(call.peer); });
-  }
-  function dropAudio(id) { const a = audios.get(id); if (a) { a.srcObject = null; audios.delete(id); } const c = calls.get(id); if (c) { try { c.close(); } catch { } calls.delete(id); } }
-  async function setMic(on) {
-    if (on && !stream) { try { stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } }); } catch { status("Microphone blocked"); emit("mic", false); return false; } }
-    micOn = on;
-    if (stream) for (const t of stream.getAudioTracks()) t.enabled = on;
-    if (on && peer) for (const p of players.values()) if (!calls.has(p.id)) { try { hook(peer.call(p.id, stream)); } catch { } }
-    if (!on && !stream) { }
-    emit("mic", on); return on;
-  }
-
-  return {
-    join, leave, setMic, EMOTES,
-    on(k, f) { (handlers[k] = handlers[k] || []).push(f); },
-    online: () => !!(peer && me && (host || (hostConn && hostConn.open))),
-    get host() { return host; }, get room() { return room; }, get me() { return me; }, get mic() { return micOn; }, get name() { return name; },
-    players: () => [...players.values()],
-    nameOf: id => (players.get(id) || {}).name || "Someone",
-    send(m) {                                                    // a one-off event for everyone (race start, emote)
-      const ev = { ...m, t: "ev", k: m.t };
-      if (host) broadcast({ ...ev, from: me }); else if (hostConn && hostConn.open) hostConn.send(ev);
-    },
-    // ~12 times a second: my car to the host; the host sends everyone to everyone
-    tick(dt, mine) {
-      if (!peer || !me) return;
-      lastState = mine; sendT += dt; if (sendT < 1 / 12) return; sendT = 0;
-      const st = mine && { t: "s", n: name, ...mine, vc: micOn };
-      if (host) { const all = [...(st ? [{ id: me, ...st }] : []), ...[...players.values()].filter(p => p.s.length).map(p => { const q = p.s[p.s.length - 1]; return { id: p.id, n: p.name, p: [q.x, q.y, q.z, q.yaw, q.pitch, q.roll], m: p.model, c: p.paint, r: p.race, rp: p.rp, rf: p.rf, vc: p.vc, v: q.v, a: q.air, w: p.wanted }; })]; broadcast({ t: "w", all }); }
-      else if (st && hostConn && hostConn.open) try { hostConn.send(st); } catch { }
-    },
-    // where a player's car should be drawn now: 120 ms behind, between two samples
-    sample(p) {
-      const t = performance.now() - 120, s = p.s; if (!s.length) return null;
-      let a = s[0], b = s[s.length - 1];
-      for (let k = 0; k < s.length - 1; k++) if (s[k].t <= t && s[k + 1].t >= t) { a = s[k]; b = s[k + 1]; break; }
-      const u = b.t > a.t ? Math.max(0, Math.min(1.5, (t - a.t) / (b.t - a.t))) : 1, L = (x, y) => x + (y - x) * u;
-      const ay = (x, y) => { let d = y - x; while (d > Math.PI) d -= 2 * Math.PI; while (d < -Math.PI) d += 2 * Math.PI; return x + d * u; };
-      return { x: L(a.x, b.x), y: L(a.y, b.y), z: L(a.z, b.z), yaw: ay(a.yaw, b.yaw), pitch: L(a.pitch, b.pitch), roll: L(a.roll, b.roll), v: b.v, air: b.air, stale: performance.now() - s[s.length - 1].t > 4000 };
-    },
-    setVolume(id, v) { const a = audios.get(id); if (a) a.volume = Math.max(0, Math.min(1, v)); },
-  };
-}
+// Online play with real people, no server of our own: WebRTC peer-to-peer through the free PeerJS broker.
+// A room is a well-known peer id; the first player to claim it is the host and relays everyone's car to everyone.
+// If the host leaves, the others race to claim it again. Voice chat is a mesh of audio calls, off until you
+// switch your mic on, and you hear people louder the closer their car is. Chat is quick emotes only (strangers
+// can join the public city), and names are short and filtered.
+const PREFIX = "voidcity-awsaa-v1-";
+const ICE = { iceServers: [{ urls: "stun:stun.l.google.com:19302" }, { urls: "stun:stun1.l.google.com:19302" }, { urls: "stun:global.stun.twilio.com:3478" }] };
+const BAD = /(fuck|shit|bitch|nigg|cunt|dick|pussy|sex|porn|kill|nazi|hitler|rape|fag)/i;
+export const cleanName = s => { s = String(s || "").replace(/[^\p{L}\p{N} _-]/gu, "").trim().slice(0, 14); return !s || BAD.test(s) ? "Driver" : s; };
+// what strangers may send: only these events, only sane numbers, and not too often
+const EVENTS = new Set(["race", "emote"]);
+const num = (v, lim) => Number.isFinite(v) && Math.abs(v) <= lim;
+const okState = st => st && Array.isArray(st.p) && st.p.length === 6 && num(st.p[0], 8000) && num(st.p[1], 4000) && num(st.p[2], 8000) && st.p.slice(3).every(v => num(v, 50));
+const flood = c => { const now = performance.now(); if (now - (c._t || 0) > 1000) { c._t = now; c._n = 0; } return ++c._n > 60; };
+export const EMOTES = ["👋 Hi!", "🏁 Race?", "😂", "🔥 Nice!", "GG", "🚓 Cops!", "Follow me", "Wait up"];
+
+export function createNet() {
+  let Peer = null, peer = null, host = false, me = null, room = null, name = "Driver", hostConn = null, sendT = 0, lastState = null, closing = false;
+  const conns = new Map();                 // host: everyone's connection
+  const players = new Map();               // id -> { id, name, s: [samples], model, paint, race, rp, rf, vc, emote, emoteT }
+  const handlers = {};
+  const emit = (k, ...a) => (handlers[k] || []).forEach(f => f(...a));
+  const status = t => emit("status", t);
+  let stream = null, micOn = false, calls = new Map(), audios = new Map();
+
+  async function lib() { if (!Peer) ({ Peer } = await import("https://cdn.jsdelivr.net/npm/peerjs@1.5.4/+esm")); return Peer; }
+  async function join(r, nm) {
+    await leave(); closing = false; room = String(r).toLowerCase().replace(/[^a-z0-9-]/g, "").slice(0, 24) || "public-1"; name = cleanName(nm);
+    status("Connecting…"); await lib(); claim();
+  }
+  function claim() {
+    if (closing) return;
+    const p = new Peer(PREFIX + room, { config: ICE, debug: 0 }); peer = p;
+    p.on("open", id => { host = true; me = id; status(`Online · room ${room} · you are hosting`); emit("change"); });
+    p.on("connection", c => {
+      c.on("data", d => onData(c, d));
+      c.on("open", () => { if (conns.size >= 11) { c.send({ t: "full" }); setTimeout(() => c.close(), 300); return; } conns.set(c.peer, c); emit("change"); });
+      c.on("close", () => { conns.delete(c.peer); players.delete(c.peer); dropAudio(c.peer); emit("change"); broadcast({ t: "gone", id: c.peer }); });
+    });
+    p.on("call", answer);
+    p.on("error", e => {
+      if (e.type === "unavailable-id") { p.destroy(); client(); }
+      else if (e.type === "peer-unavailable") { status("Room not found, retrying…"); setTimeout(() => rejoin(), 800 + Math.random() * 1500); }
+      else status("Network: " + e.type);
+    });
+  }
+  function client() {
+    if (closing) return;
+    const p = new Peer({ config: ICE, debug: 0 }); peer = p; host = false;
+    p.on("open", id => {
+      me = id; const c = p.connect(PREFIX + room, { serialization: "json", reliable: false }); hostConn = c;
+      c.on("open", () => { status(`Online · room ${room}`); c.send({ t: "hello", name }); emit("change"); });
+      c.on("data", d => onData(c, d));
+      c.on("close", () => { if (!closing) { status("Host left, reconnecting…"); players.clear(); emit("change"); setTimeout(rejoin, Math.random() * 1500); } });
+    });
+    p.on("call", answer);
+    p.on("error", e => { if (e.type === "peer-unavailable") setTimeout(rejoin, 400 + Math.random() * 1200); else status("Network: " + e.type); });
+  }
+  function rejoin() { if (closing) return; try { peer && peer.destroy(); } catch { } hostConn = null; conns.clear(); claim(); }
+  async function leave() {
+    closing = true; try { peer && peer.destroy(); } catch { } peer = null; hostConn = null; host = false; conns.clear(); players.clear();
+    for (const id of [...audios.keys()]) dropAudio(id); setMic(false); room = null; emit("change"); status("Offline");
+  }
+  function broadcast(m, except) { for (const [id, c] of conns) if (id !== except && c.open) try { c.send(m); } catch { } }
+  function upsert(id, st) {
+    let p = players.get(id), fresh = !p; if (!p) { p = { id, name: "Driver", s: [] }; players.set(id, p); }
+    if (st.n && cleanName(st.n) !== p.name) { p.name = cleanName(st.n); fresh = true; }
+    Object.assign(p, { model: Number.isInteger(st.m) && st.m >= 0 && st.m < 20 ? st.m : 0, paint: /^#[0-9a-f]{6}$/i.test(st.c) ? st.c : "#888888", race: typeof st.r === "string" ? st.r.slice(0, 20) : 0, rp: num(st.rp, 1e7) ? st.rp : 0, rf: num(st.rf, 1e7) ? st.rf : 0, vc: !!st.vc, wanted: num(st.w, 5) ? st.w | 0 : 0 });
+    p.s.push({ t: performance.now(), x: st.p[0], y: st.p[1], z: st.p[2], yaw: st.p[3], pitch: st.p[4], roll: st.p[5], v: num(st.v, 2000) ? st.v : 0, air: !!st.a });
+    if (p.s.length > 12) p.s.shift();
+    if (fresh) emit("change");
+  }
+  function onData(c, d) {
+    if (!d || typeof d !== "object" || flood(c)) return;
+    if (d.t === "ev" && !EVENTS.has(d.k)) return;
+    if (host) {
+      if (d.t === "hello") { const p = players.get(c.peer) || { id: c.peer, s: [] }; p.name = cleanName(d.name); players.set(c.peer, p); emit("change"); return; }
+      if (d.t === "s") { if (okState(d)) upsert(c.peer, d); return; }
+      if (d.t === "ev") { broadcast({ ...d, from: c.peer }, c.peer); emit(d.k, d, c.peer); return; }
+    } else {
+      if (d.t === "w") { if (Array.isArray(d.all)) for (const st of d.all.slice(0, 16)) if (st && typeof st.id === "string" && st.id !== me && okState(st)) upsert(st.id, st); return; }
+      if (d.t === "gone") { players.delete(d.id); dropAudio(d.id); emit("change"); return; }
+      if (d.t === "full") { status("Room full, trying the next one"); room = room.replace(/(\d+)$/, n => +n + 1); rejoin(); return; }
+      if (d.t === "ev") { emit(d.k, d, d.from); return; }
+    }
+  }
+  // voice: everyone with their mic on calls everyone; people without a mic still hear
+  function answer(call) { call.answer(stream || undefined); hook(call); }
+  function hook(call) {
+    calls.set(call.peer, call);
+    call.on("stream", s => { let a = audios.get(call.peer); if (!a) { a = new Audio(); a.autoplay = true; audios.set(call.peer, a); } a.srcObject = s; a.play().catch(() => { }); });
+    call.on("close", () => { calls.delete(call.peer); });
+  }
+  function dropAudio(id) { const a = audios.get(id); if (a) { a.srcObject = null; audios.delete(id); } const c = calls.get(id); if (c) { try { c.close(); } catch { } calls.delete(id); } }
+  async function setMic(on) {
+    if (on && !stream) { try { stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } }); } catch { status("Microphone blocked"); emit("mic", false); return false; } }
+    micOn = on;
+    if (stream) for (const t of stream.getAudioTracks()) t.enabled = on;
+    if (on && peer) for (const p of players.values()) if (!calls.has(p.id)) { try { hook(peer.call(p.id, stream)); } catch { } }
+    if (!on && !stream) { }
+    emit("mic", on); return on;
+  }
+
+  // players who went quiet (closed the tab, lost signal) are dropped after 15 s instead of standing still forever
+  setInterval(() => { const now = performance.now(); let gone = false; for (const p of [...players.values()]) { const last = p.s.length ? p.s[p.s.length - 1].t : p.seen || (p.seen = now); if (now - last > 15000) { players.delete(p.id); dropAudio(p.id); gone = true; } } if (gone) emit("change"); }, 3000);
+  return {
+    join, leave, setMic, EMOTES,
+    on(k, f) { (handlers[k] = handlers[k] || []).push(f); },
+    online: () => !!(peer && me && (host || (hostConn && hostConn.open))),
+    get host() { return host; }, get room() { return room; }, get me() { return me; }, get mic() { return micOn; }, get name() { return name; },
+    players: () => [...players.values()],
+    nameOf: id => (players.get(id) || {}).name || "Someone",
+    send(m) {                                                    // a one-off event for everyone (race start, emote)
+      const ev = { ...m, t: "ev", k: m.t };
+      if (host) broadcast({ ...ev, from: me }); else if (hostConn && hostConn.open) hostConn.send(ev);
+    },
+    // ~12 times a second: my car to the host; the host sends everyone to everyone
+    tick(dt, mine) {
+      if (!peer || !me) return;
+      lastState = mine; sendT += dt; if (sendT < 1 / 12) return; sendT = 0;
+      const st = mine && { t: "s", n: name, ...mine, vc: micOn };
+      if (host) { const all = [...(st ? [{ id: me, ...st }] : []), ...[...players.values()].filter(p => p.s.length).map(p => { const q = p.s[p.s.length - 1]; return { id: p.id, n: p.name, p: [q.x, q.y, q.z, q.yaw, q.pitch, q.roll], m: p.model, c: p.paint, r: p.race, rp: p.rp, rf: p.rf, vc: p.vc, v: q.v, a: q.air, w: p.wanted }; })]; broadcast({ t: "w", all }); }
+      else if (st && hostConn && hostConn.open) try { hostConn.send(st); } catch { }
+    },
+    // where a player's car should be drawn now: 120 ms behind, between two samples
+    sample(p) {
+      const t = performance.now() - 120, s = p.s; if (!s.length) return null;
+      let a = s[0], b = s[s.length - 1];
+      for (let k = 0; k < s.length - 1; k++) if (s[k].t <= t && s[k + 1].t >= t) { a = s[k]; b = s[k + 1]; break; }
+      const u = b.t > a.t ? Math.max(0, Math.min(1.5, (t - a.t) / (b.t - a.t))) : 1, L = (x, y) => x + (y - x) * u;
+      const ay = (x, y) => { let d = y - x; while (d > Math.PI) d -= 2 * Math.PI; while (d < -Math.PI) d += 2 * Math.PI; return x + d * u; };
+      return { x: L(a.x, b.x), y: L(a.y, b.y), z: L(a.z, b.z), yaw: ay(a.yaw, b.yaw), pitch: L(a.pitch, b.pitch), roll: L(a.roll, b.roll), v: b.v, air: b.air, stale: performance.now() - s[s.length - 1].t > 4000 };
+    },
+    setVolume(id, v) { const a = audios.get(id); if (a) a.volume = Math.max(0, Math.min(1, v)); },
+  };
+}

static/npc.js

@@ -99,7 +99,7 @@ export function createLife(scene, roads, walkways, COARSE) {
   const cross = (axis, k) => axis === 0 ? ax(k) : sz(k);               // the coordinate of the k-th crossing road along this axis
   const crossW = (axis, k) => axis === 0 ? avW(k) : stW(k);
   const roadC = (axis, road) => axis === 0 ? sz(road) : ax(road);
-  const N = COARSE ? 500 : 1100, NP = COARSE ? 900 : 2000;
+  const LOWMEM = (navigator.deviceMemory || 8) <= 4, N = COARSE ? (LOWMEM ? 320 : 500) : 1100, NP = COARSE ? (LOWMEM ? 500 : 900) : 2000;
 
   // ---- vehicles ----
   const carMat = new THREE.MeshStandardMaterial({ vertexColors: true, roughness: .32, metalness: .55, envMapIntensity: 1.1 });

static/police.js

@@ -91,6 +91,7 @@ export function createPolice(scene, api, sound, life) {
   }
   return {
     get stars() { return stars; }, get bust() { return bust; }, cops, clear,
+    wanted(n, why) { if (stars < n) { heat = Math.max(heat, HEAT[n]); addHeat(0, why); } },
     event(kind, extra) {                                   // things the game tells us about
       if (kind === "smash") addHeat(extra === "police" ? 3 : 1, extra === "police" ? "You smashed a police car!" : "Wanted for smashing cars");
       if (kind === "cop") addHeat(3, "Police officer down");

static/race.js

@@ -1,177 +1,253 @@
-// Street races round VOID City: drive into a start marker and press Enter (or tap Race). Gates on the real streets,
-// three AI rivals in sports cars (solo), or everybody in your online room. A countdown, a timer, live positions,
-// best times kept on this device. The Sky Rings race is a flying time trial through gates in the air.
-import * as THREE from "three";
-import { GRID } from "./city.js";
-import { KINDS, vehicle } from "./npc.js";
-import { makeDriver } from "./police.js";
-
-const G = (i, j) => [GRID.ax(i), 0, GRID.sz(j)];
-export const ROUTES = [
-  { id: "midtown", name: "Midtown Sprint", pts: [G(7, 8), G(7, 4), G(9, 4), G(9, 1), G(5, 1), G(5, 6), G(8, 6)] },
-  { id: "park", name: "Park Loop ×2", pts: [G(2, 12), G(5, 12), G(5, 18), G(2, 18), G(2, 12), G(5, 12), G(5, 18), G(2, 18), G(2, 13)] },
-  { id: "bridge", name: "Bridge Run", pts: [G(7, 10), G(12, 10), [1400, 0, 0], [1690, 0, 0]] },
-  { id: "downtown", name: "Downtown Dash", pts: [G(8, 13), G(12, 13), G(12, 19), G(9, 19), G(9, 15), G(11, 15)] },
-  { id: "drag", name: "Runway Drag", pts: [[-2600, 0, 0], [-2350, 0, 0], [-2100, 0, 0], [-1960, 0, 0]] },
-  { id: "sky", name: "Sky Rings", air: true, pts: [[420, 0, -40], [420, 90, -160], [520, 120, -300], [430, 150, -450], [250, 170, -520], [60, 150, -460], [-60, 120, -330], [-120, 90, -180], [-260, 70, 60], [-400, 60, 250]] },
-];
-const RIVALS = [["VIPER", 0xd21f2b], ["BLAZE", 0xff6a00], ["NOVA", 0x1f6fe0]];
-const fmt = t => `${Math.floor(t / 60)}:${(t % 60).toFixed(1).padStart(4, "0")}`;
-const store = { get(k) { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } }, set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch { } } };
-
-export function createRaces(scene, api, sound, canvasTex, net) {
-  const $ = id => document.getElementById(id);
-  const D = makeDriver(api);
-  const label = (text, col) => { const t = canvasTex(512, 128, (g, w, h) => { g.fillStyle = "rgba(0,0,0,.6)"; g.fillRect(0, 0, w, h); g.strokeStyle = col; g.lineWidth = 6; g.strokeRect(4, 4, w - 8, h - 8); g.fillStyle = col; g.font = "900 54px Unbounded, Impact, sans-serif"; g.textAlign = "center"; g.fillText(text, w / 2, 84); }); return new THREE.Sprite(new THREE.SpriteMaterial({ map: t, toneMapped: false, depthTest: true })); };
-  // start markers: a column of light and a floating name
-  const starts = ROUTES.map(r => {
-    const [x, , z] = r.pts[0], [nx, , nz] = r.pts[1], back = Math.atan2(nz - z, nx - x);
-    const sx = x - Math.cos(back) * 35, sz = z - Math.sin(back) * 35;
-    const col = r.air ? "#3dfcff" : "#ffd23d";
-    const pillar = new THREE.Mesh(new THREE.CylinderGeometry(6, 6, 60, 32, 1, true).translate(0, 30, 0), new THREE.MeshBasicMaterial({ color: new THREE.Color(col).multiplyScalar(1.6), transparent: true, opacity: .12, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, toneMapped: false }));
-    pillar.position.set(sx, 0, sz); scene.add(pillar);
-    const ring = new THREE.Mesh(new THREE.RingGeometry(5.4, 6, 48).rotateX(-Math.PI / 2), new THREE.MeshBasicMaterial({ color: new THREE.Color(col).multiplyScalar(2), toneMapped: false })); ring.position.set(sx, .15, sz); scene.add(ring);
-    const s = label("🏁 " + r.name.toUpperCase(), col); s.scale.set(16, 4, 1); s.position.set(sx, 9, sz); scene.add(s);
-    return { r, x: sx, z: sz, yaw: back, pillar, ring, s };
-  });
-  // gates: two posts and a banner across the road
-  const gateMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(0xffd23d).multiplyScalar(2), toneMapped: false }), dimMat = new THREE.MeshBasicMaterial({ color: 0x555555 });
-  const checker = canvasTex(256, 32, (g, w, h) => { for (let x = 0; x < w; x += 16) for (let y = 0; y < h; y += 16) { g.fillStyle = ((x + y) / 16) % 2 ? "#111" : "#fff"; g.fillRect(x, y, 16, 16); } });
-  const gates = [];
-  function buildGates(r) {
-    clearGates();
-    r.pts.forEach((p, k) => {
-      const q = r.pts[Math.max(0, k - 1)], o = r.pts[Math.min(r.pts.length - 1, k + 1)], dir = k ? Math.atan2(p[2] - q[2], p[0] - q[0]) : Math.atan2(o[2] - p[2], o[0] - p[0]);
-      const g = new THREE.Group(); g.position.set(p[0], p[1], p[2]); g.rotation.y = -dir;
-      const fin = k === r.pts.length - 1;
-      if (r.air) { const ring = new THREE.Mesh(new THREE.TorusGeometry(10, .7, 10, 40), gateMat.clone()); ring.rotation.y = Math.PI / 2; g.add(ring); g.userData.parts = [ring]; }
-      else {
-        const W = 11, parts = [];
-        for (const s of [-1, 1]) { const post = new THREE.Mesh(new THREE.BoxGeometry(.6, 7, .6).translate(0, 3.5, 0), gateMat.clone()); post.position.z = s * W; g.add(post); parts.push(post); }
-        const banner = new THREE.Mesh(new THREE.BoxGeometry(.3, 1.4, W * 2 + .6), fin ? new THREE.MeshBasicMaterial({ map: checker, toneMapped: false }) : gateMat.clone()); banner.position.y = 7; g.add(banner); if (!fin) parts.push(banner);
-        g.userData.parts = parts;
-      }
-      scene.add(g); gates.push(g);
-    });
-  }
-  function clearGates() { for (const g of gates) scene.remove(g); gates.length = 0; }
-  // rivals: sports cars with their own colours
-  const sport = KINDS.find(k => k.id === "sports"), sg = vehicle(sport);
-  const rivals = RIVALS.map(([name, col]) => {
-    const g = new THREE.Group(); g.add(new THREE.Mesh(sg.body, new THREE.MeshStandardMaterial({ vertexColors: true, color: col, roughness: .25, metalness: .6 })), new THREE.Mesh(sg.lights, new THREE.MeshBasicMaterial({ vertexColors: true, toneMapped: false, color: new THREE.Color(2, 2, 2) })));
-    const tag = label(name, "#" + col.toString(16).padStart(6, "0")); tag.scale.set(5, 1.25, 1); tag.position.y = 3.4; g.add(tag);
-    g.visible = false; scene.add(g); return { name, g, x: 0, z: 0, yaw: 0, v: 0, cp: 1, done: 0, skill: 1 };
-  });
-
-  let R = null;                 // the race in progress
-  function begin(route, opts = {}) {
-    const p = api.state; if (!p) return;
-    api.policeClear && api.policeClear();
-    const st = starts.find(s => s.r === route);
-    buildGates(route);
-    const slot = opts.slot ?? 0, side = [0, 1, -1, 2, -2, 3, -3][slot % 7] * 4.2, row = Math.floor(slot / 7) * 8;
-    const fx = Math.cos(st.yaw), fz = Math.sin(st.yaw);
-    api.teleport(st.x + fx * (20 - row) - fz * side, st.z + fz * (20 - row) + fx * side, st.yaw);
-    api.freeze(opts.wait ?? 3.2);
-    // bots: in an online race every player runs the same bots from the same seed on a fixed clock, so they match
-    let sd = (opts.seed || Math.floor(Math.random() * 1e9)) % 2147483647 || 7; const rng = () => (sd = (sd * 16807) % 2147483647) / 2147483647;
-    R = { route, t: -(opts.wait ?? 3.2), cp: 1, done: 0, online: !!opts.online, results: [], lastBeep: 4, rng, acc: 0, bt: 0 };
-    rivals.forEach((r, k) => {
-      r.g.visible = !route.air && (!R.online || opts.bots !== false);
-      const sd = [-1, 1, 2][k] * 4.2, rw = k === 2 ? 8 : 0;
-      Object.assign(r, { x: st.x + fx * (20 - rw) - fz * sd, z: st.z + fz * (20 - rw) + fx * sd, yaw: st.yaw, v: 0, cp: 1, done: 0, skill: .9 + rng() * .16, accel: 13, stuck: 0 });
-    });
-    $("gRace").hidden = false; $("gRaceRes").hidden = true;
-  }
-  function finish(msg) {
-    const p = api.state, best = store.get("void.race." + R.route.id);
-    const me = R.done, rank = standings().findIndex(s => s.me) + 1;
-    if (me && (!best || me < best)) store.set("void.race." + R.route.id, me);
-    const reward = me ? [0, 1500, 800, 400, 200][Math.min(4, rank)] || 100 : 0;
-    if (reward) api.addScore(reward, `${R.route.name}: ${["", "1st", "2nd", "3rd"][rank] || rank + "th"}`);
-    $("gRaceRes").innerHTML = `<h3>${R.route.name}</h3><p>${msg || (me ? `You finished ${["", "1st", "2nd", "3rd"][rank] || rank + "th"} in ${fmt(me)}` : "Race over")}</p><p class="small">${best ? `Best: ${fmt(Math.min(best, me || 1e9))}` : me ? "New best time!" : ""}</p><ol>${standings().map(s => `<li${s.me ? ' class="me"' : ""}>${s.name}<span>${s.done ? fmt(s.done) : "DNF"}</span></li>`).join("")}</ol><button class="pill solid" id="gRaceOk">OK</button>`;
-    $("gRaceRes").hidden = false; $("gRaceOk").onclick = () => { $("gRaceRes").hidden = true; };
-    $("gRace").hidden = true; clearGates(); rivals.forEach(r => r.g.visible = false); R = null; void p;
-  }
-  // everyone's progress: checkpoints passed plus how far along to the next
-  const progOf = (x, y, z, cp, route) => { const a = route.pts[cp - 1], b = route.pts[Math.min(route.pts.length - 1, cp)]; const L = Math.hypot(b[0] - a[0], b[2] - a[2]) || 1, d = Math.hypot(b[0] - x, b[2] - z); return cp + Math.max(0, 1 - d / L); };
-  function standings() {
-    if (!R) return [];
-    const p = api.state, out = [{ name: "YOU", me: true, prog: R.done ? 1e6 - R.done : progOf(p.x, p.y, p.z, R.cp, R.route), done: R.done }];
-    for (const r of rivals) if (r.g.visible) out.push({ name: r.name, prog: r.done ? 1e6 - r.done : progOf(r.x, 0, r.z, r.cp, R.route), done: r.done });
-    if (R.online && net) for (const q of net.players()) if (q.race === R.route.id) out.push({ name: q.name, prog: q.rf ? 1e6 - q.rf : q.rp || 0, done: q.rf || 0 });
-    return out.sort((a, b) => b.prog - a.prog);
-  }
-  function nearStart() { const p = api.state; if (!p || R) return null; return starts.find(s => Math.hypot(p.x - s.x, p.z - s.z) < 14) || null; }
-  addEventListener("keydown", e => { if (e.code === "Enter" && api.active()) { const s = nearStart(); if (s) start(s.r); } });
-  $("gRaceGo").onclick = () => { const s = nearStart(); if (s) start(s.r); };
-  function start(route) {
-    if (net && net.online()) { const seed = Math.floor(Math.random() * 1e9); net.send({ t: "race", id: route.id, wait: 6, seed }); begin(route, { online: true, wait: 6, slot: 0, seed }); }
-    else begin(route);
-  }
-  if (net) net.on("race", (m, from) => { const r = ROUTES.find(x => x.id === m.id); if (r && !R) { begin(r, { online: true, wait: m.wait - .3, seed: m.seed, slot: 1 + (net.players().findIndex(q => q.id === from) + 1) % 6 }); api.say(`${net.nameOf(from)} started ${r.name}. Get ready!`, 3); } });
-
-  return {
-    get race() { return R; }, rivals,
-    progress() { return R ? { race: R.route.id, rp: R.done ? 0 : progOf(api.state.x, api.state.y, api.state.z, R.cp, R.route), rf: R.done } : null; },
-    starts,
-    update(dt, time) {
-      const p = api.state;
-      for (const s of starts) { s.pillar.material.opacity = .1 + .05 * Math.sin(time * 3); s.s.visible = s.ring.visible = s.pillar.visible = !R; }
-      const ns = nearStart(); $("gRaceGo").hidden = !ns; if (ns) $("gRaceGo").textContent = `Start ${ns.r.name} (Enter)`;
-      if (!R || !p) return;
-      R.t += dt;
-      // countdown
-      if (R.t < 0) { const n = Math.min(3, Math.ceil(-R.t)); $("gCount").textContent = n; $("gCount").hidden = false; if (n < R.lastBeep) { R.lastBeep = n; sound.pop(); } }
-      else if (R.t < .8) { $("gCount").textContent = "GO!"; $("gCount").hidden = false; if (R.lastBeep > 0) { R.lastBeep = 0; sound.win(); } }
-      else $("gCount").hidden = true;
-      const route = R.route, N = route.pts.length;
-      // gates: the next one bright, the one after dim, the rest hidden
-      gates.forEach((g, k) => { g.visible = k >= R.cp && k <= R.cp + 1; for (const m of g.userData.parts || []) m.material.color.set(k === R.cp ? 0xffd23d : 0x666666).multiplyScalar(k === R.cp ? 2 : 1); });
-      if (R.t > 0 && !R.done) {
-        const c = route.pts[R.cp], d = route.air ? Math.hypot(p.x - c[0], p.y - c[1], p.z - c[2]) : Math.hypot(p.x - c[0], p.z - c[2]);
-        if (d < (route.air ? 11 : 13)) { R.cp++; sound.pop(); if (R.cp >= N) { R.done = R.t; sound.win(); api.say(`Finished in ${fmt(R.t)}!`, 3); R.endAt = R.t + (R.online ? 15 : 25); } }
-      }
-      // rivals: stepped on a fixed 1/60 s clock from the green light (the same on every player's screen when online)
-      if (!route.air && R.t > 0) {
-        R.acc += dt;
-        while (R.acc >= 1 / 60 && R.bt < R.t) {
-          R.acc -= 1 / 60; R.bt += 1 / 60;
-          for (const r of rivals) {
-            if (!r.g.visible || r.done) continue;
-            const c = route.pts[Math.min(N - 1, r.cp)];
-            let band = 1;
-            if (!R.online) { const mine = progOf(p.x, 0, p.z, R.cp, route), theirs = progOf(r.x, 0, r.z, r.cp, route); band = mine - theirs > .8 ? 1.12 : theirs - mine > .8 ? .9 : 1; }
-            // brake for the corner at the next gate, and get back on the road if it ever ends up stuck
-            const prev = route.pts[Math.max(0, r.cp - 1)], nxt = route.pts[Math.min(N - 1, r.cp + 1)];
-            const a1 = Math.atan2(c[2] - prev[2], c[0] - prev[0]), a2 = Math.atan2(nxt[2] - c[2], nxt[0] - c[0]);
-            let turnA = Math.abs(a2 - a1); if (turnA > Math.PI) turnA = 2 * Math.PI - turnA;
-            const dc = Math.hypot(c[0] - r.x, c[2] - r.z), top = 62 * r.skill * band;
-            const want = turnA > .5 && r.cp < N - 1 ? Math.min(top, 13 + Math.max(0, dc - 8) * .9) : top;
-            D.step(r, c[0], c[2], want, 1 / 60, R.rng);
-            if (r.stuck > 1.2) {
-              const dx = c[0] - prev[0], dz = c[2] - prev[2], L2 = dx * dx + dz * dz || 1, t = Math.max(0, Math.min(1, ((r.x - prev[0]) * dx + (r.z - prev[2]) * dz) / L2));
-              r.x = prev[0] + dx * t; r.z = prev[2] + dz * t; r.yaw = Math.atan2(c[2] - r.z, c[0] - r.x); r.v = 6; r.stuck = 0;
-            }
-            if (Math.hypot(r.x - c[0], r.z - c[2]) < 12) { r.cp++; if (r.cp >= N) r.done = R.bt; }
-          }
-        }
-      }
-      for (const r of rivals) {
-        if (!r.g.visible) continue;
-        r.g.position.set(r.x, 0, r.z); r.g.rotation.y = -r.yaw;
-        // they can't drive through you (you get pushed; they keep their line so every screen agrees)
-        const dx = p.x - r.x, dz = p.z - r.z, dd = Math.hypot(dx, dz);
-        if (dd < 3.4 && dd > .01 && p.y < 2) { p.x += dx / dd * (3.4 - dd); p.z += dz / dd * (3.4 - dd); if (!R.online) r.v *= .9; }
-      }
-      const st = standings(), pos = st.findIndex(s => s.me) + 1;
-      // (the banner is built once per race and only its text changes, so the Quit button stays clickable)
-      if (!$("gRaceT")) { $("gRace").innerHTML = `<b id="gRaceN"></b><span id="gRaceT"></span><span id="gRaceG"></span><span id="gRaceP"></span><button class="pill" id="gRaceQuit2">Quit</button>`; $("gRaceQuit2").onclick = () => R && finish("You left the race"); }
-      $("gRaceN").textContent = route.name; $("gRaceT").textContent = R.t < 0 ? "Get ready" : fmt(Math.max(0, R.done || R.t)); $("gRaceG").textContent = `Gate ${Math.min(R.cp, N - 1)}/${N - 1}`; $("gRaceP").textContent = `${pos}/${st.length}`;
-      const next = route.pts[Math.min(N - 1, R.cp)]; R.next = next;
-      if (R.done && (R.t > R.endAt || (!R.online && rivals.every(r => r.done || !r.g.visible)))) { finish(); return; }
-      if (R && R.t > 600) finish("Out of time");
-    },
-    cancel() { if (R) finish("Race cancelled"); },
-  };
-}
+// Street races round VOID City: drive into a start marker and press Enter (or tap Race). Gates on the real streets,
+// three AI rivals in sports cars (solo), or everybody in your online room. A countdown, a timer, live positions,
+// best times kept on this device. The Sky Rings race is a flying time trial through gates in the air.
+// Ghosts: your best run on every route is recorded and races beside you next time, with a split at every gate.
+// Your own routes: drop gates while you drive or fly, save them, race them against your ghost, share them as a link.
+import * as THREE from "three";
+import { GRID } from "./city.js";
+import { KINDS, vehicle } from "./npc.js";
+import { makeDriver } from "./police.js";
+
+const G = (i, j) => [GRID.ax(i), 0, GRID.sz(j)];
+export const ROUTES = [
+  { id: "midtown", name: "Midtown Sprint", pts: [G(7, 8), G(7, 4), G(9, 4), G(9, 1), G(5, 1), G(5, 6), G(8, 6)] },
+  { id: "park", name: "Park Loop ×2", pts: [G(2, 12), G(5, 12), G(5, 18), G(2, 18), G(2, 12), G(5, 12), G(5, 18), G(2, 18), G(2, 13)] },
+  { id: "bridge", name: "Bridge Run", pts: [G(7, 10), G(12, 10), [1400, 0, 0], [1690, 0, 0]] },
+  { id: "downtown", name: "Downtown Dash", pts: [G(8, 13), G(12, 13), G(12, 19), G(9, 19), G(9, 15), G(11, 15)] },
+  { id: "drag", name: "Runway Drag", pts: [[-2600, 0, 0], [-2350, 0, 0], [-2100, 0, 0], [-1960, 0, 0]] },
+  { id: "sky", name: "Sky Rings", air: true, pts: [[420, 0, -40], [420, 90, -160], [520, 120, -300], [430, 150, -450], [250, 170, -520], [60, 150, -460], [-60, 120, -330], [-120, 90, -180], [-260, 70, 60], [-400, 60, 250]] },
+];
+const RIVALS = [["VIPER", 0xd21f2b], ["BLAZE", 0xff6a00], ["NOVA", 0x1f6fe0]];
+const fmt = t => `${Math.floor(t / 60)}:${(t % 60).toFixed(1).padStart(4, "0")}`;
+const store = { get(k) { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } }, set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch { } } };
+
+export function createRaces(scene, api, sound, canvasTex, net) {
+  const $ = id => document.getElementById(id);
+  const D = makeDriver(api);
+  const label = (text, col) => { const t = canvasTex(512, 128, (g, w, h) => { g.fillStyle = "rgba(0,0,0,.6)"; g.fillRect(0, 0, w, h); g.strokeStyle = col; g.lineWidth = 6; g.strokeRect(4, 4, w - 8, h - 8); g.fillStyle = col; g.font = "900 54px Unbounded, Impact, sans-serif"; g.textAlign = "center"; g.fillText(text, w / 2, 84); }); return new THREE.Sprite(new THREE.SpriteMaterial({ map: t, toneMapped: false, depthTest: true })); };
+  // start markers: a column of light and a floating name
+  const custom = (store.get("void.routes") || []).filter(r => r && Array.isArray(r.pts) && r.pts.length >= 3);
+  const routes = [...ROUTES, ...custom];
+  const makeStart = r => {
+    const [x, , z] = r.pts[0], [nx, , nz] = r.pts[1], back = Math.atan2(nz - z, nx - x);
+    const sx = x - Math.cos(back) * 35, sz = z - Math.sin(back) * 35;
+    const col = r.custom ? "#c07dff" : r.air ? "#3dfcff" : "#ffd23d";
+    const pillar = new THREE.Mesh(new THREE.CylinderGeometry(6, 6, 60, 32, 1, true).translate(0, 30, 0), new THREE.MeshBasicMaterial({ color: new THREE.Color(col).multiplyScalar(1.6), transparent: true, opacity: .12, blending: THREE.AdditiveBlending, depthWrite: false, side: THREE.DoubleSide, toneMapped: false }));
+    pillar.position.set(sx, 0, sz); scene.add(pillar);
+    const ring = new THREE.Mesh(new THREE.RingGeometry(5.4, 6, 48).rotateX(-Math.PI / 2), new THREE.MeshBasicMaterial({ color: new THREE.Color(col).multiplyScalar(2), toneMapped: false })); ring.position.set(sx, .15, sz); scene.add(ring);
+    const s = label("🏁 " + r.name.toUpperCase(), col); s.scale.set(16, 4, 1); s.position.set(sx, 9, sz); scene.add(s);
+    return { r, x: sx, z: sz, yaw: back, pillar, ring, s };
+  };
+  const starts = routes.map(makeStart);
+  // gates: two posts and a banner across the road
+  const gateMat = new THREE.MeshBasicMaterial({ color: new THREE.Color(0xffd23d).multiplyScalar(2), toneMapped: false }), dimMat = new THREE.MeshBasicMaterial({ color: 0x555555 });
+  const checker = canvasTex(256, 32, (g, w, h) => { for (let x = 0; x < w; x += 16) for (let y = 0; y < h; y += 16) { g.fillStyle = ((x + y) / 16) % 2 ? "#111" : "#fff"; g.fillRect(x, y, 16, 16); } });
+  const gates = [];
+  function buildGates(r) {
+    clearGates();
+    r.pts.forEach((p, k) => {
+      const q = r.pts[Math.max(0, k - 1)], o = r.pts[Math.min(r.pts.length - 1, k + 1)], dir = k ? Math.atan2(p[2] - q[2], p[0] - q[0]) : Math.atan2(o[2] - p[2], o[0] - p[0]);
+      const g = new THREE.Group(); g.position.set(p[0], p[1], p[2]); g.rotation.y = -dir;
+      const fin = k === r.pts.length - 1;
+      if (r.air) { const ring = new THREE.Mesh(new THREE.TorusGeometry(10, .7, 10, 40), gateMat.clone()); ring.rotation.y = Math.PI / 2; g.add(ring); g.userData.parts = [ring]; }
+      else {
+        const W = 11, parts = [];
+        for (const s of [-1, 1]) { const post = new THREE.Mesh(new THREE.BoxGeometry(.6, 7, .6).translate(0, 3.5, 0), gateMat.clone()); post.position.z = s * W; g.add(post); parts.push(post); }
+        const banner = new THREE.Mesh(new THREE.BoxGeometry(.3, 1.4, W * 2 + .6), fin ? new THREE.MeshBasicMaterial({ map: checker, toneMapped: false }) : gateMat.clone()); banner.position.y = 7; g.add(banner); if (!fin) parts.push(banner);
+        g.userData.parts = parts;
+      }
+      scene.add(g); gates.push(g);
+    });
+  }
+  function clearGates() { for (const g of gates) scene.remove(g); gates.length = 0; }
+  // rivals: sports cars with their own colours
+  const sport = KINDS.find(k => k.id === "sports"), sg = vehicle(sport);
+  const rivals = RIVALS.map(([name, col]) => {
+    const g = new THREE.Group(); g.add(new THREE.Mesh(sg.body, new THREE.MeshStandardMaterial({ vertexColors: true, color: col, roughness: .25, metalness: .6 })), new THREE.Mesh(sg.lights, new THREE.MeshBasicMaterial({ vertexColors: true, toneMapped: false, color: new THREE.Color(2, 2, 2) })));
+    const tag = label(name, "#" + col.toString(16).padStart(6, "0")); tag.scale.set(5, 1.25, 1); tag.position.y = 3.4; g.add(tag);
+    g.visible = false; scene.add(g); return { name, g, x: 0, z: 0, yaw: 0, v: 0, cp: 1, done: 0, skill: 1 };
+  });
+
+  // the ghost: a see-through copy of your best run on this route
+  const ghost = new THREE.Group(); ghost.add(new THREE.Mesh(sg.body, new THREE.MeshBasicMaterial({ color: new THREE.Color(.3, 1.6, 2), transparent: true, opacity: .28, depthWrite: false, toneMapped: false })));
+  { const gt = label("GHOST", "#3dfcff"); gt.scale.set(5, 1.25, 1); gt.position.y = 3.4; ghost.add(gt); } ghost.visible = false; scene.add(ghost);
+  const ghostOf = id => { const gh = store.get("void.ghost." + id); return gh && Array.isArray(gh.p) && gh.p.length >= 8 ? gh : null; };
+  let R = null;                 // the race in progress
+  function begin(route, opts = {}) {
+    const p = api.state; if (!p) return;
+    api.policeClear && api.policeClear();
+    const st = starts.find(s => s.r === route);
+    buildGates(route);
+    const slot = opts.slot ?? 0, side = [0, 1, -1, 2, -2, 3, -3][slot % 7] * 4.2, row = Math.floor(slot / 7) * 8;
+    const fx = Math.cos(st.yaw), fz = Math.sin(st.yaw);
+    api.teleport(st.x + fx * (20 - row) - fz * side, st.z + fz * (20 - row) + fx * side, st.yaw);
+    api.freeze(opts.wait ?? 3.2);
+    // bots: in an online race every player runs the same bots from the same seed on a fixed clock, so they match
+    let sd = (opts.seed || Math.floor(Math.random() * 1e9)) % 2147483647 || 7; const rng = () => (sd = (sd * 16807) % 2147483647) / 2147483647;
+    R = { route, t: -(opts.wait ?? 3.2), cp: 1, done: 0, online: !!opts.online, results: [], lastBeep: 4, rng, acc: 0, bt: 0, rec: [], recT: 0, splits: [], ghost: ghostOf(route.id) };
+    ghost.visible = !!R.ghost;
+    rivals.forEach((r, k) => {
+      r.g.visible = !route.air && !route.custom && (!R.online || opts.bots !== false);
+      const sd = [-1, 1, 2][k] * 4.2, rw = k === 2 ? 8 : 0;
+      Object.assign(r, { x: st.x + fx * (20 - rw) - fz * sd, z: st.z + fz * (20 - rw) + fx * sd, yaw: st.yaw, v: 0, cp: 1, done: 0, skill: .9 + rng() * .16, accel: 13, stuck: 0 });
+    });
+    $("gRace").hidden = false; $("gRaceRes").hidden = true;
+  }
+  function finish(msg) {
+    const p = api.state, best = store.get("void.race." + R.route.id);
+    const me = R.done, rank = standings().findIndex(s => s.me) + 1;
+    if (me && (!best || me < best)) { store.set("void.race." + R.route.id, me); if (R.rec.length >= 8) store.set("void.ghost." + R.route.id, { t: me, s: R.splits, p: R.rec.slice(0, 12000) }); }
+    const gdiff = me && R.ghost ? me - R.ghost.t : null;
+    const reward = me ? [0, 1500, 800, 400, 200][Math.min(4, rank)] || 100 : 0;
+    if (reward) api.addScore(reward, `${R.route.name}: ${["", "1st", "2nd", "3rd"][rank] || rank + "th"}`);
+    $("gRaceRes").innerHTML = `<h3>${R.route.name}</h3><p>${msg || (me ? `You finished ${["", "1st", "2nd", "3rd"][rank] || rank + "th"} in ${fmt(me)}` : "Race over")}</p><p class="small">${best ? `Best: ${fmt(Math.min(best, me || 1e9))}` : me ? "New best time!" : ""}${gdiff != null ? ` · vs ghost ${gdiff <= 0 ? "−" : "+"}${Math.abs(gdiff).toFixed(2)} s${gdiff < 0 ? " (new ghost saved)" : ""}` : me && !R.ghost ? " · ghost saved" : ""}</p><ol>${standings().map(s => `<li${s.me ? ' class="me"' : ""}>${s.name}<span>${s.done ? fmt(s.done) : "DNF"}</span></li>`).join("")}</ol><button class="pill solid" id="gRaceOk">OK</button>`;
+    $("gRaceRes").hidden = false; $("gRaceOk").onclick = () => { $("gRaceRes").hidden = true; };
+    $("gRace").hidden = true; clearGates(); rivals.forEach(r => r.g.visible = false); ghost.visible = false; R = null; void p;
+  }
+  // everyone's progress: checkpoints passed plus how far along to the next
+  const progOf = (x, y, z, cp, route) => { const a = route.pts[cp - 1], b = route.pts[Math.min(route.pts.length - 1, cp)]; const L = Math.hypot(b[0] - a[0], b[2] - a[2]) || 1, d = Math.hypot(b[0] - x, b[2] - z); return cp + Math.max(0, 1 - d / L); };
+  function standings() {
+    if (!R) return [];
+    const p = api.state, out = [{ name: "YOU", me: true, prog: R.done ? 1e6 - R.done : progOf(p.x, p.y, p.z, R.cp, R.route), done: R.done }];
+    for (const r of rivals) if (r.g.visible) out.push({ name: r.name, prog: r.done ? 1e6 - r.done : progOf(r.x, 0, r.z, r.cp, R.route), done: r.done });
+    if (R.online && net) for (const q of net.players()) if (q.race === R.route.id) out.push({ name: q.name, prog: q.rf ? 1e6 - q.rf : q.rp || 0, done: q.rf || 0 });
+    return out.sort((a, b) => b.prog - a.prog);
+  }
+  function nearStart() { const p = api.state; if (!p || R || B) return null; return starts.find(s => Math.hypot(p.x - s.x, p.z - s.z) < 14) || null; }
+  addEventListener("keydown", e => { if (e.code === "Enter" && api.active()) { const s = nearStart(); if (s) start(s.r); } });
+  $("gRaceGo").onclick = () => { const s = nearStart(); if (s) start(s.r); };
+  function start(route) {
+    if (net && net.online() && !route.custom) { const seed = Math.floor(Math.random() * 1e9); net.send({ t: "race", id: route.id, wait: 6, seed }); begin(route, { online: true, wait: 6, slot: 0, seed }); }
+    else begin(route);
+  }
+  // ---- the route builder ----
+  let B = null;
+  const saveCustom = () => store.set("void.routes", custom.map(({ id, name, air, pts }) => ({ id, name, air, pts, custom: true })));
+  function addRoute(r) { r.custom = true; custom.push(r); routes.push(r); starts.push(makeStart(r)); while (custom.length > 12) removeRoute(custom[0].id); saveCustom(); return r; }
+  function removeRoute(id) {
+    const k = custom.findIndex(r => r.id === id); if (k < 0) return; const r = custom[k]; custom.splice(k, 1); routes.splice(routes.indexOf(r), 1);
+    const s = starts.findIndex(st => st.r === r); if (s >= 0) { const st = starts[s]; scene.remove(st.pillar, st.ring, st.s); starts.splice(s, 1); }
+    try { localStorage.removeItem("void.ghost." + id); localStorage.removeItem("void.race." + id); } catch { } saveCustom();
+  }
+  const buildMarks = [];
+  function builder(on) {
+    if (on && R) return api.say("Finish the race first", 2);
+    for (const m of buildMarks) scene.remove(m); buildMarks.length = 0;
+    B = on ? { pts: [] } : null; $("gBuild").hidden = !on; if (on) { dropGate(); api.say("Route builder: drive or fly your route, press G (or the button) to drop each gate", 4); }
+    renderBuild();
+  }
+  function dropGate() {
+    const p = api.state; if (!B || !p) return;
+    const pt = [Math.round(p.x), p.mode === "air" && p.y > 6 ? Math.round(p.y) : 0, Math.round(p.z)], last = B.pts[B.pts.length - 1];
+    if (last && Math.hypot(pt[0] - last[0], pt[1] - last[1], pt[2] - last[2]) < 30) return api.say("Too close to the last gate (30 m)", 1.5);
+    B.pts.push(pt); sound.pop();
+    const m = new THREE.Mesh(new THREE.TorusGeometry(pt[1] ? 10 : 6, .5, 8, 32), new THREE.MeshBasicMaterial({ color: new THREE.Color(0xc07dff).multiplyScalar(2), toneMapped: false })); m.position.set(pt[0], pt[1] || 6, pt[2]); m.rotation.y = -p.yaw + Math.PI / 2; scene.add(m); buildMarks.push(m);
+    renderBuild();
+  }
+  function saveBuild() {
+    if (!B || B.pts.length < 3) return api.say("A route needs a start and at least 2 more gates", 2);
+    const r = addRoute({ id: "c" + Date.now().toString(36), name: "My route " + (custom.length + 1), air: B.pts.some(q => q[1] > 0), pts: B.pts });
+    builder(false); api.say(`Saved "${r.name}" and copied its link. The purple marker is its start`, 3.5); renderList(); share(r, true);
+  }
+  function renderBuild() { if (!B) return; $("gBuild").innerHTML = `<b>🛠 Route builder</b><span>${B.pts.length === 1 ? "Start set" : `${B.pts.length - 1} gate${B.pts.length > 2 ? "s" : ""}`}</span><button class="pill" id="gBDrop">Drop gate (G)</button><button class="pill solid" id="gBSave">Save</button><button class="pill" id="gBCancel">Cancel</button>`; $("gBDrop").onclick = dropGate; $("gBSave").onclick = saveBuild; $("gBCancel").onclick = () => builder(false); }
+  addEventListener("keydown", e => { if (e.code === "KeyG" && B && api.active() && !e.repeat) dropGate(); });
+  // share a route as a link: everything is in the address, nothing is uploaded
+  const b64 = o => btoa(unescape(encodeURIComponent(JSON.stringify(o)))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+  async function share(r, quiet) {
+    const url = location.origin + location.pathname + "#r=" + b64({ n: r.name, p: r.pts });
+    try { await navigator.clipboard.writeText(url); if (!quiet) api.say("Route link copied: send it to a friend", 2.5); } catch { if (!quiet) prompt("Copy this route link", url); }
+  }
+  try {
+    const h = new URLSearchParams(location.hash.slice(1)).get("r");
+    if (h) {
+      const o = JSON.parse(decodeURIComponent(escape(atob(h.replace(/-/g, "+").replace(/_/g, "/")))));
+      const pts = (o.p || []).slice(0, 40).map(q => [+q[0] || 0, Math.max(0, Math.min(400, +q[1] || 0)), +q[2] || 0]).filter(q => q.every(Number.isFinite) && Math.abs(q[0]) < 4000 && Math.abs(q[2]) < 4000);
+      if (pts.length >= 3 && !custom.some(r => JSON.stringify(r.pts) === JSON.stringify(pts))) addRoute({ id: "c" + Date.now().toString(36), name: String(o.n || "Shared route").replace(/[<>&"]/g, "").slice(0, 28), air: pts.some(q => q[1] > 0), pts });
+      history.replaceState(null, "", location.pathname + location.search);
+    }
+  } catch { }
+  // the Routes list in the Menu: best time, ghost, go there, share, delete
+  function renderList() {
+    const el = $("gRoutes"); if (!el) return;
+    el.innerHTML = routes.map(r => { const b = store.get("void.race." + r.id), gh = !!ghostOf(r.id); return `<div class="route${r.custom ? " mine" : ""}"><div><span>${r.air ? "✈️" : "🏁"} ${r.name}</span><small>${b ? `Best ${fmt(b)}` : "No time yet"}${gh ? " · 👻 ghost" : ""}${r.custom ? " · yours" : ""}</small></div><button class="pill" data-rgo="${r.id}">Go</button>${r.custom ? `<button class="pill" data-share="${r.id}">Share</button><button class="pill" data-del="${r.id}">✕</button>` : ""}</div>`; }).join("") + `<button class="tile wide-tile" id="gBuildBtn"><b>🛠</b>Make your own route</button>`;
+  }
+  document.addEventListener("click", e => {
+    const t = e.target.closest("[data-rgo],[data-share],[data-del],#gBuildBtn"); if (!t || !t.closest("#gRoutes")) return;
+    if (t.id === "gBuildBtn") return builder(true);
+    const r = routes.find(x => x.id === (t.dataset.rgo || t.dataset.share || t.dataset.del)); if (!r) return;
+    if (t.dataset.rgo) { const st = starts.find(s => s.r === r); if (st && !R) { api.teleport(st.x, st.z, st.yaw); api.say(`${r.name}: press Enter (or Start) at the marker`, 3); } }
+    if (t.dataset.share) share(r);
+    if (t.dataset.del && confirm(`Delete "${r.name}" and its ghost?`)) { removeRoute(r.id); renderList(); }
+  });
+  if (net) net.on("race", (m, from) => { const r = ROUTES.find(x => x.id === m.id); if (r && !R && !B) { begin(r, { online: true, wait: Math.max(2, Math.min(10, +m.wait || 6)) - .3, seed: Math.abs(m.seed | 0) || 7, slot: 1 + (net.players().findIndex(q => q.id === from) + 1) % 6 }); api.say(`${net.nameOf(from)} started ${r.name}. Get ready!`, 3); } });
+
+  return {
+    get race() { return R; }, rivals, renderList, get building() { return !!B; },
+    progress() { return R ? { race: R.route.id, rp: R.done ? 0 : progOf(api.state.x, api.state.y, api.state.z, R.cp, R.route), rf: R.done } : null; },
+    starts,
+    update(dt, time) {
+      const p = api.state;
+      for (const s of starts) { s.pillar.material.opacity = .1 + .05 * Math.sin(time * 3); s.s.visible = s.ring.visible = s.pillar.visible = !R; }
+      const ns = nearStart(); $("gRaceGo").hidden = !ns; if (ns) $("gRaceGo").textContent = `Start ${ns.r.name} (Enter)`;
+      if (!R || !p) return;
+      R.t += dt;
+      // countdown
+      if (R.t < 0) { const n = Math.min(3, Math.ceil(-R.t)); $("gCount").textContent = n; $("gCount").hidden = false; if (n < R.lastBeep) { R.lastBeep = n; sound.pop(); } }
+      else if (R.t < .8) { $("gCount").textContent = "GO!"; $("gCount").hidden = false; if (R.lastBeep > 0) { R.lastBeep = 0; sound.win(); } }
+      else $("gCount").hidden = true;
+      const route = R.route, N = route.pts.length;
+      // gates: the next one bright, the one after dim, the rest hidden
+      gates.forEach((g, k) => { g.visible = k >= R.cp && k <= R.cp + 1; for (const m of g.userData.parts || []) m.material.color.set(k === R.cp ? 0xffd23d : 0x666666).multiplyScalar(k === R.cp ? 2 : 1); });
+      if (R.t > 0 && !R.done) {
+        const c = route.pts[R.cp], d = route.air ? Math.hypot(p.x - c[0], p.y - c[1], p.z - c[2]) : Math.hypot(p.x - c[0], p.z - c[2]);
+        if (d < (route.air ? (route.custom ? 14 : 11) : 13)) { R.splits[R.cp] = +R.t.toFixed(2); const gs = R.ghost && R.ghost.s && R.ghost.s[R.cp]; if (gs && R.cp < N - 1) { const df = R.t - gs; api.say(`Gate ${R.cp}  ${df <= 0 ? "−" : "+"}${Math.abs(df).toFixed(2)} s vs ghost`, 1.6); } R.cp++; sound.pop(); if (R.cp >= N) { R.done = R.t; sound.win(); api.say(`Finished in ${fmt(R.t)}!`, 3); R.endAt = R.t + (R.online ? 15 : 25); } }
+      }
+      if (R.t > 0 && !R.done && (R.recT += dt) >= .1) { R.recT -= .1; R.rec.push(Math.round(p.x * 10) / 10, Math.round(p.y * 10) / 10, Math.round(p.z * 10) / 10, Math.round(p.yaw * 100) / 100); }
+      if (R.ghost) {
+        const gp = R.ghost.p, n = gp.length / 4, f = Math.max(0, R.t) * 10, i = Math.min(n - 2, Math.floor(f)), k = Math.min(1, f - i), a = i * 4, b = a + 4;
+        if (f >= n - 1) ghost.visible = false;
+        else { let dy = gp[b + 3] - gp[a + 3]; if (dy > Math.PI) dy -= 2 * Math.PI; if (dy < -Math.PI) dy += 2 * Math.PI; ghost.position.set(gp[a] + (gp[b] - gp[a]) * k, gp[a + 1] + (gp[b + 1] - gp[a + 1]) * k, gp[a + 2] + (gp[b + 2] - gp[a + 2]) * k); ghost.rotation.y = -(gp[a + 3] + dy * k); }
+      }
+      // rivals: stepped on a fixed 1/60 s clock from the green light (the same on every player's screen when online)
+      if (!route.air && !route.custom && R.t > 0) {
+        R.acc += dt;
+        while (R.acc >= 1 / 60 && R.bt < R.t) {
+          R.acc -= 1 / 60; R.bt += 1 / 60;
+          for (const r of rivals) {
+            if (!r.g.visible || r.done) continue;
+            const c = route.pts[Math.min(N - 1, r.cp)];
+            let band = 1;
+            if (!R.online) { const mine = progOf(p.x, 0, p.z, R.cp, route), theirs = progOf(r.x, 0, r.z, r.cp, route); band = mine - theirs > .8 ? 1.12 : theirs - mine > .8 ? .9 : 1; }
+            // brake for the corner at the next gate, and get back on the road if it ever ends up stuck
+            const prev = route.pts[Math.max(0, r.cp - 1)], nxt = route.pts[Math.min(N - 1, r.cp + 1)];
+            const a1 = Math.atan2(c[2] - prev[2], c[0] - prev[0]), a2 = Math.atan2(nxt[2] - c[2], nxt[0] - c[0]);
+            let turnA = Math.abs(a2 - a1); if (turnA > Math.PI) turnA = 2 * Math.PI - turnA;
+            const dc = Math.hypot(c[0] - r.x, c[2] - r.z), top = 62 * r.skill * band;
+            const want = turnA > .5 && r.cp < N - 1 ? Math.min(top, 13 + Math.max(0, dc - 8) * .9) : top;
+            D.step(r, c[0], c[2], want, 1 / 60, R.rng);
+            if (r.stuck > 1.2) {
+              const dx = c[0] - prev[0], dz = c[2] - prev[2], L2 = dx * dx + dz * dz || 1, t = Math.max(0, Math.min(1, ((r.x - prev[0]) * dx + (r.z - prev[2]) * dz) / L2));
+              r.x = prev[0] + dx * t; r.z = prev[2] + dz * t; r.yaw = Math.atan2(c[2] - r.z, c[0] - r.x); r.v = 6; r.stuck = 0;
+            }
+            if (Math.hypot(r.x - c[0], r.z - c[2]) < 12) { r.cp++; if (r.cp >= N) r.done = R.bt; }
+          }
+        }
+      }
+      for (const r of rivals) {
+        if (!r.g.visible) continue;
+        r.g.position.set(r.x, 0, r.z); r.g.rotation.y = -r.yaw;
+        // they can't drive through you (you get pushed; they keep their line so every screen agrees)
+        const dx = p.x - r.x, dz = p.z - r.z, dd = Math.hypot(dx, dz);
+        if (dd < 3.4 && dd > .01 && p.y < 2) { p.x += dx / dd * (3.4 - dd); p.z += dz / dd * (3.4 - dd); if (!R.online) r.v *= .9; }
+      }
+      const st = standings(), pos = st.findIndex(s => s.me) + 1;
+      // (the banner is built once per race and only its text changes, so the Quit button stays clickable)
+      if (!$("gRaceT")) { $("gRace").innerHTML = `<b id="gRaceN"></b><span id="gRaceT"></span><span id="gRaceG"></span><span id="gRaceP"></span><button class="pill" id="gRaceQuit2">Quit</button>`; $("gRaceQuit2").onclick = () => R && finish("You left the race"); }
+      $("gRaceN").textContent = route.name; $("gRaceT").textContent = R.t < 0 ? "Get ready" : fmt(Math.max(0, R.done || R.t)); $("gRaceG").textContent = `Gate ${Math.min(R.cp, N - 1)}/${N - 1}`; $("gRaceP").textContent = `${pos}/${st.length}`;
+      const next = route.pts[Math.min(N - 1, R.cp)]; R.next = next;
+      if (R.done && (R.t > R.endAt || (!R.online && rivals.every(r => r.done || !r.g.visible)))) { finish(); return; }
+      if (R && R.t > 600) finish("Out of time");
+    },
+    cancel() { if (R) finish("Race cancelled"); },
+  };
+}

static/sound.js

@@ -94,6 +94,9 @@ export class Sound {
     this.rumble = C.createOscillator(); this.rumble.frequency.value = 42; this.rumbleG = C.createGain(); this.rumbleG.gain.value = 0; this.rumble.connect(this.rumbleG).connect(this.sfx); this.rumble.start();
     this.windF = C.createBiquadFilter(); this.windF.type = "bandpass"; this.windF.frequency.value = 900; this.windF.Q.value = .6; this.windG = C.createGain(); this.windG.gain.value = 0;
     this.loopNoise().connect(this.windF).connect(this.windG).connect(this.sfx);
+    // tyres: a narrow band of noise that rises when the car slides
+    this.sqF = C.createBiquadFilter(); this.sqF.type = "bandpass"; this.sqF.frequency.value = 1500; this.sqF.Q.value = 9; this.sqG = C.createGain(); this.sqG.gain.value = 0;
+    this.loopNoise().connect(this.sqF).connect(this.sqG).connect(this.sfx);
 
     this.next = C.currentTime + .05;
     setInterval(() => this.schedule(), 25);
@@ -196,6 +199,8 @@ export class Sound {
     this.env(g, t, .004, 1.1, 1.6); o.connect(g).connect(this.musicIn); o.start(t); o.stop(t + 1.7);
     this.noiseHit(t, "lowpass", 6000, .5, .55, 1.5, this.musicIn);
   }
+  // a body thud scaled by how hard you hit (walls, landings)
+  thud(p = .5) { if (!this.on) return; const t = this.ctx.currentTime, k = Math.min(1, p); this.noiseHit(t, "lowpass", 400 + k * 1600, .7, .35 + k * .65, .15 + k * .4, this.sfx); if (k > .5) this.noiseHit(t + .01, "bandpass", 2600, 1.2, (k - .5) * .7, .25, this.sfx); }
   whoosh() { if (this.on) this.noiseHit(this.ctx.currentTime, "bandpass", 700, .8, .5, .9, this.sfx); }
   pop() { if (this.on) { const t = this.ctx.currentTime; this.noiseHit(t, "bandpass", 300, 1, .9, .07, this.sfx); this.noiseHit(t + .06, "bandpass", 260, 1, .6, .06, this.sfx); } }
   crash() { if (this.on) { const t = this.ctx.currentTime; this.noiseHit(t, "lowpass", 2500, .4, 1, 1.2, this.sfx); this.noiseHit(t, "bandpass", 180, 1, 1, .6, this.sfx); } }
@@ -233,6 +238,7 @@ export class Sound {
     this.thrG.gain.setTargetAtTime(s.thrust * .45, t, .08); this.thrF.frequency.setTargetAtTime(500 + s.thrust * 1500, t, .1);
     this.rumbleG.gain.setTargetAtTime(s.thrust * .3, t, .1);
     this.windG.gain.setTargetAtTime(Math.min(1, s.speed / 320) * .16, t, .2);
+    if (this.sqG) { const sl = Math.min(1, s.slip || 0); this.sqG.gain.setTargetAtTime(sl * .5, t, .05); this.sqF.frequency.setTargetAtTime(1300 + sl * 700, t, .1); }
     this.sfxLP.frequency.setTargetAtTime(s.inside ? 1100 : 16000, t, .3);
   }
 }

static/style.css

@@ -406,3 +406,19 @@ body[data-mode="play"] .hub-chip { display: none !important; }
 .up-row em { font: 800 11px var(--body); font-style: normal; color: #ffd23d; }
 #gCash { color: #9dffb0; }
 .up-note { margin: 10px 0 0; color: var(--mute); font-size: 11.5px; line-height: 1.4; }
+
+/* contracts, routes, the route builder, backups */
+.con-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
+.tile.con { justify-items: start; text-align: left; padding: 12px; gap: 3px; }
+.tile.con small { color: var(--mute); font-size: 11px; line-height: 1.3; font-weight: 500; }
+.tile.con i { font-style: normal; font-size: 11px; color: #ffd23d; margin-top: 3px; }
+.g-con { background: rgba(0,40,52,.82); border-color: rgba(61,252,255,.6); color: #aaf6ff; }
+.routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.route { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.08); }
+.route span { display: block; font: 700 13px var(--body); } .route small { color: var(--mute); font-size: 11px; }
+.route .pill { padding: 5px 10px; font-size: 11px; } .route.mine { border-color: rgba(192,125,255,.45); }
+.wide-tile { grid-column: 1 / -1; grid-auto-flow: column; justify-content: center; gap: 8px; }
+.g-build { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 14px; background: rgba(40,14,60,.85); border: 1px solid rgba(192,125,255,.6); color: #e6d2ff; font: 600 13px var(--body); pointer-events: auto; flex-wrap: wrap; }
+.g-build[hidden] { display: none; } .g-build .pill { padding: 6px 12px; font-size: 12px; }
+.save-row { display: flex; justify-content: space-between; align-items: center; } .save-row span { display: flex; gap: 6px; }
+@media (max-width: 820px) { .routes { grid-template-columns: minmax(0, 1fr); } }