06404d3505
Prototype: spring-mass sail, quadratic wind with gust telegraphs and a mid-storm wind change, per-corner hardware ratings with weakest-link cascade failures, garden coverage scoring, and a runnable repair loop. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
581 lines
22 KiB
JavaScript
581 lines
22 KiB
JavaScript
'use strict';
|
||
// SHADES prototype — one yard, one spring-mass sail, one storm.
|
||
// Thesis test: does watching a load meter climb on a corner you KNOW is
|
||
// under-shackled, while you sprint across the yard in the rain, feel great?
|
||
|
||
const cv = document.getElementById('cv');
|
||
const ctx = cv.getContext('2d');
|
||
const W = cv.width, H = cv.height;
|
||
const DEBUG = location.search.includes('debug');
|
||
const AUTO = location.search.includes('auto');
|
||
|
||
// ---------- world ----------
|
||
const HOUSE = { x: 0, y: 0, w: W, h: 64 };
|
||
const GARDEN = { x: 380, y: 290, w: 210, h: 130 };
|
||
const TREES = [
|
||
{ x: 130, y: 300, r: 42, phase: 0.7 },
|
||
{ x: 840, y: 240, r: 36, phase: 2.9 },
|
||
];
|
||
|
||
const ANCHORS = [
|
||
{ id: 'h1', x: 280, y: 72, type: 'house' },
|
||
{ id: 'h2', x: 480, y: 72, type: 'house' },
|
||
{ id: 'h3', x: 690, y: 72, type: 'house' },
|
||
{ id: 't1', x: TREES[0].x, y: TREES[0].y, type: 'tree', tree: TREES[0] },
|
||
{ id: 't2', x: TREES[1].x, y: TREES[1].y, type: 'tree', tree: TREES[1] },
|
||
{ id: 'p1', x: 240, y: 530, type: 'post' },
|
||
{ id: 'p2', x: 700, y: 545, type: 'post' },
|
||
];
|
||
|
||
const HARDWARE = [
|
||
{ name: 'carabiner', cost: 5, rating: 9, color: '#e2b04a' },
|
||
{ name: 'shackle', cost: 15, rating: 19, color: '#c8d2d8' },
|
||
{ name: 'rated shackle', cost: 30, rating: 40, color: '#7ee0ff' },
|
||
];
|
||
const START_BUDGET = 80;
|
||
const STORM_LEN = 90;
|
||
|
||
// ---------- state ----------
|
||
const state = {
|
||
phase: 'prep', // prep | storm | end
|
||
t: 0,
|
||
budget: START_BUDGET,
|
||
corners: [], // {anchor, hw, load, overload, broken}
|
||
tension: 1.0,
|
||
spare: 0,
|
||
gardenHP: 100,
|
||
events: [], // {t, text}
|
||
result: null,
|
||
repair: null, // {corner, progress}
|
||
};
|
||
|
||
// grass tufts for wind telegraph
|
||
const TUFTS = [];
|
||
for (let i = 0; i < 140; i++) {
|
||
const x = Math.random() * W, y = 80 + Math.random() * (H - 90);
|
||
TUFTS.push({ x, y, j: Math.random() * 6.28 });
|
||
}
|
||
|
||
// ---------- wind ----------
|
||
const wind = { speed: 0, dir: 0.9, gust: 0, nextGust: 3, gustT: -1, gustPow: 0, changed: false };
|
||
|
||
function windVec(t, dt) {
|
||
if (state.phase !== 'storm') { wind.speed = 4; return; }
|
||
const p = t / STORM_LEN;
|
||
let base = 8 + 26 * Math.min(1, p * 1.6);
|
||
// scheduled wind change ("southerly change") at 55s
|
||
if (t > 49 && !wind.changed) state.msg = 'WIND CHANGE INCOMING';
|
||
if (t > 55 && !wind.changed) { wind.changed = true; state.msg = ''; addEvent('the wind swings around'); }
|
||
const targetDir = wind.changed ? 2.6 : 0.9 + 0.25 * Math.sin(t * 0.13);
|
||
wind.dir += (targetDir - wind.dir) * Math.min(1, dt * 0.8);
|
||
// gust scheduler
|
||
if (t > wind.nextGust && wind.gustT < 0) {
|
||
wind.gustT = 0;
|
||
wind.gustPow = 12 + Math.random() * 16 + 10 * p;
|
||
wind.nextGust = t + 5 + Math.random() * 7;
|
||
}
|
||
let g = 0;
|
||
if (wind.gustT >= 0) {
|
||
wind.gustT += dt;
|
||
const gt = wind.gustT;
|
||
if (gt < 1.5) g = 0; // telegraph window
|
||
else if (gt < 2.3) g = wind.gustPow * (gt - 1.5) / 0.8; // ramp
|
||
else if (gt < 4.0) g = wind.gustPow; // hold
|
||
else if (gt < 5.0) g = wind.gustPow * (5.0 - gt); // fade
|
||
else wind.gustT = -1;
|
||
}
|
||
wind.gust = g;
|
||
wind.speed = base + g;
|
||
}
|
||
const windX = () => Math.cos(wind.dir) * wind.speed;
|
||
const windY = () => Math.sin(wind.dir) * wind.speed;
|
||
|
||
// ---------- sail (verlet spring-mass grid, nodes carry x,y,z) ----------
|
||
const N = 7;
|
||
let nodes = null, springs = null, cornerIdx = null;
|
||
|
||
function orderRing(anchors) {
|
||
const cx = anchors.reduce((s, a) => s + a.x, 0) / 4;
|
||
const cy = anchors.reduce((s, a) => s + a.y, 0) / 4;
|
||
return [...anchors].sort((a, b) => Math.atan2(a.y - cy, a.x - cx) - Math.atan2(b.y - cy, b.x - cx));
|
||
}
|
||
|
||
function buildSail() {
|
||
const ring = state.corners.map(c => c.anchor);
|
||
const [c0, c1, c2, c3] = ring;
|
||
nodes = [];
|
||
for (let v = 0; v < N; v++) {
|
||
for (let u = 0; u < N; u++) {
|
||
const fu = u / (N - 1), fv = v / (N - 1);
|
||
const x = (1 - fv) * ((1 - fu) * c0.x + fu * c1.x) + fv * ((1 - fu) * c3.x + fu * c2.x);
|
||
const y = (1 - fv) * ((1 - fu) * c0.y + fu * c1.y) + fv * ((1 - fu) * c3.y + fu * c2.y);
|
||
nodes.push({ x, y, z: 0, px: x, py: y, pz: 0 });
|
||
}
|
||
}
|
||
springs = [];
|
||
const restScale = 1 / state.tension;
|
||
const idx = (u, v) => v * N + u;
|
||
const link = (a, b) => {
|
||
const A = nodes[a], B = nodes[b];
|
||
springs.push({ a, b, rest: Math.hypot(A.x - B.x, A.y - B.y) * restScale });
|
||
};
|
||
for (let v = 0; v < N; v++) for (let u = 0; u < N; u++) {
|
||
if (u < N - 1) link(idx(u, v), idx(u + 1, v));
|
||
if (v < N - 1) link(idx(u, v), idx(u, v + 1));
|
||
if (u < N - 1 && v < N - 1) { link(idx(u, v), idx(u + 1, v + 1)); link(idx(u + 1, v), idx(u, v + 1)); }
|
||
}
|
||
cornerIdx = [idx(0, 0), idx(N - 1, 0), idx(N - 1, N - 1), idx(0, N - 1)];
|
||
// corner i of grid pins to ring[i]; rebind state.corners to ring order
|
||
state.corners = ring.map(a => state.corners.find(c => c.anchor === a));
|
||
}
|
||
|
||
function anchorPos(a, t) {
|
||
if (a.type === 'tree') {
|
||
const amp = Math.min(10, wind.speed * 0.18);
|
||
return { x: a.x + Math.sin(t * 1.9 + a.tree.phase) * amp, y: a.y + Math.cos(t * 1.3 + a.tree.phase) * amp * 0.5 };
|
||
}
|
||
return { x: a.x, y: a.y };
|
||
}
|
||
|
||
function stepSail(t, dt) {
|
||
if (!nodes) return;
|
||
const ws = wind.speed;
|
||
const dirx = Math.cos(wind.dir), diry = Math.sin(wind.dir);
|
||
const push = ws * ws * 0.55; // wind pressure goes with speed² — gusts have teeth
|
||
const damp = 0.985;
|
||
for (let i = 0; i < nodes.length; i++) {
|
||
const n = nodes[i];
|
||
const flut = 0.7 + 0.5 * Math.sin(t * 7 + i * 1.7) * Math.min(1, ws / 30);
|
||
const ax = dirx * push * flut, ay = diry * push * flut;
|
||
const az = ws * ws * 0.3 * flut - 120 - n.z * 8; // lift vs gravity vs restoring
|
||
const nx = n.x + (n.x - n.px) * damp + ax * dt * dt;
|
||
const ny = n.y + (n.y - n.py) * damp + ay * dt * dt;
|
||
const nz = n.z + (n.z - n.pz) * damp + az * dt * dt;
|
||
n.px = n.x; n.py = n.y; n.pz = n.z;
|
||
n.x = nx; n.y = ny; n.z = nz;
|
||
}
|
||
// corner load = total stretch in the springs meeting at that corner
|
||
for (let k = 0; k < 4; k++) {
|
||
const c = state.corners[k];
|
||
if (c.broken) continue;
|
||
const ci = cornerIdx[k];
|
||
let raw = 0;
|
||
for (const s of springs) {
|
||
if (s.a !== ci && s.b !== ci) continue;
|
||
const A = nodes[s.a], B = nodes[s.b];
|
||
const d = Math.hypot(B.x - A.x, B.y - A.y, B.z - A.z);
|
||
raw += Math.max(0, d - s.rest);
|
||
}
|
||
c.load = c.load * 0.85 + raw * 2.2 * 0.15;
|
||
}
|
||
for (let iter = 0; iter < 5; iter++) {
|
||
for (const s of springs) {
|
||
const A = nodes[s.a], B = nodes[s.b];
|
||
let dx = B.x - A.x, dy = B.y - A.y, dz = B.z - A.z;
|
||
const d = Math.hypot(dx, dy, dz) || 1e-6;
|
||
const f = (d - s.rest) / d * 0.5;
|
||
// fabric resists stretch strongly, compression barely (cloth, not rod)
|
||
const k = d > s.rest ? f : f * 0.08;
|
||
A.x += dx * k; A.y += dy * k; A.z += dz * k;
|
||
B.x -= dx * k; B.y -= dy * k; B.z -= dz * k;
|
||
}
|
||
for (let kk = 0; kk < 4; kk++) {
|
||
const c = state.corners[kk];
|
||
if (c.broken) continue;
|
||
const p = anchorPos(c.anchor, t);
|
||
const n = nodes[cornerIdx[kk]];
|
||
n.x = p.x; n.y = p.y; n.z = 0;
|
||
}
|
||
}
|
||
// failure check
|
||
if (state.phase === 'storm') {
|
||
for (const c of state.corners) {
|
||
if (c.broken) continue;
|
||
if (c.load > c.hw.rating) c.overload += dt; else c.overload = Math.max(0, c.overload - dt * 2);
|
||
if (c.overload > 0.4) {
|
||
c.broken = true; c.overload = 0;
|
||
addEvent(`${c.hw.name} BLOWS at ${c.anchor.id.toUpperCase()}!`);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
function sailOutline() {
|
||
if (!nodes) return null;
|
||
const pts = [];
|
||
const idx = (u, v) => v * N + u;
|
||
for (let u = 0; u < N; u++) pts.push(nodes[idx(u, 0)]);
|
||
for (let v = 1; v < N; v++) pts.push(nodes[idx(N - 1, v)]);
|
||
for (let u = N - 2; u >= 0; u--) pts.push(nodes[idx(u, N - 1)]);
|
||
for (let v = N - 2; v >= 1; v--) pts.push(nodes[idx(0, v)]);
|
||
return pts;
|
||
}
|
||
|
||
function pointInPoly(x, y, pts) {
|
||
let inside = false;
|
||
for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) {
|
||
if ((pts[i].y > y) !== (pts[j].y > y) &&
|
||
x < (pts[j].x - pts[i].x) * (y - pts[i].y) / (pts[j].y - pts[i].y) + pts[i].x) inside = !inside;
|
||
}
|
||
return inside;
|
||
}
|
||
|
||
function coveredFraction() {
|
||
const pts = sailOutline();
|
||
if (!pts) return 0;
|
||
let hit = 0, tot = 0;
|
||
for (let i = 0; i < 6; i++) for (let j = 0; j < 4; j++) {
|
||
const x = GARDEN.x + (i + 0.5) / 6 * GARDEN.w;
|
||
const y = GARDEN.y + (j + 0.5) / 4 * GARDEN.h;
|
||
tot++;
|
||
if (pointInPoly(x, y, pts)) hit++;
|
||
}
|
||
return hit / tot;
|
||
}
|
||
|
||
// ---------- player ----------
|
||
const player = { x: 480, y: 480, r: 9 };
|
||
const keys = {};
|
||
addEventListener('keydown', e => { keys[e.key.toLowerCase()] = true; if (['arrowup','arrowdown','arrowleft','arrowright',' '].includes(e.key.toLowerCase())) e.preventDefault(); });
|
||
addEventListener('keyup', e => { keys[e.key.toLowerCase()] = false; });
|
||
|
||
function stepPlayer(t, dt) {
|
||
if (state.phase !== 'storm') return;
|
||
let vx = 0, vy = 0;
|
||
if (keys['a'] || keys['arrowleft']) vx -= 1;
|
||
if (keys['d'] || keys['arrowright']) vx += 1;
|
||
if (keys['w'] || keys['arrowup']) vy -= 1;
|
||
if (keys['s'] || keys['arrowdown']) vy += 1;
|
||
const m = Math.hypot(vx, vy) || 1;
|
||
const slow = 1 - Math.min(0.35, wind.speed / 160); // rain + wind slow you
|
||
player.x += vx / m * 165 * slow * dt + windX() * 0.16 * dt * (wind.gust > 8 ? 1 : 0);
|
||
player.y += vy / m * 165 * slow * dt + windY() * 0.16 * dt * (wind.gust > 8 ? 1 : 0);
|
||
player.x = Math.max(10, Math.min(W - 10, player.x));
|
||
player.y = Math.max(HOUSE.h + 10, Math.min(H - 10, player.y));
|
||
|
||
// repair: hold E near a broken corner's anchor
|
||
let near = null;
|
||
for (const c of state.corners) {
|
||
if (c.broken && Math.hypot(player.x - c.anchor.x, player.y - c.anchor.y) < 30) near = c;
|
||
}
|
||
if (near && keys['e'] && state.spare > 0) {
|
||
if (!state.repair || state.repair.corner !== near) state.repair = { corner: near, progress: 0 };
|
||
state.repair.progress += dt / 2.5;
|
||
if (state.repair.progress >= 1) {
|
||
near.broken = false;
|
||
near.hw = HARDWARE[1];
|
||
near.load = 0; near.overload = 0;
|
||
state.spare--;
|
||
state.repair = null;
|
||
addEvent(`re-rigged ${near.anchor.id.toUpperCase()} with the spare shackle`);
|
||
}
|
||
} else state.repair = null;
|
||
}
|
||
|
||
// ---------- prep interactions ----------
|
||
const startBtn = document.getElementById('startBtn');
|
||
const tensionEl = document.getElementById('tension');
|
||
const spareEl = document.getElementById('spare');
|
||
|
||
cv.addEventListener('click', e => {
|
||
if (state.phase !== 'prep') return;
|
||
const r = cv.getBoundingClientRect();
|
||
const mx = (e.clientX - r.left) * (W / r.width), my = (e.clientY - r.top) * (H / r.height);
|
||
// cycle hardware on an already-rigged corner
|
||
for (const c of state.corners) {
|
||
if (Math.hypot(mx - c.anchor.x, my - c.anchor.y) < 16) {
|
||
const i = HARDWARE.indexOf(c.hw);
|
||
const next = HARDWARE[(i + 1) % HARDWARE.length];
|
||
const delta = next.cost - c.hw.cost;
|
||
if (spend(delta)) c.hw = next;
|
||
refreshPanel();
|
||
return;
|
||
}
|
||
}
|
||
// rig a new corner
|
||
for (const a of ANCHORS) {
|
||
if (Math.hypot(mx - a.x, my - a.y) < 16 && !state.corners.find(c => c.anchor === a)) {
|
||
if (state.corners.length >= 4) return;
|
||
if (!spend(HARDWARE[0].cost)) return;
|
||
state.corners.push({ anchor: a, hw: HARDWARE[0], load: 0, overload: 0, broken: false });
|
||
if (state.corners.length === 4) state.corners = orderRing(state.corners.map(c => c.anchor)).map(a2 => state.corners.find(c => c.anchor === a2));
|
||
refreshPanel();
|
||
return;
|
||
}
|
||
}
|
||
});
|
||
|
||
function spend(amount) {
|
||
if (state.budget - amount < 0) { flashMsg('not enough budget'); return false; }
|
||
state.budget -= amount;
|
||
return true;
|
||
}
|
||
let msgTimer = 0;
|
||
function flashMsg(s) { document.getElementById('msg').textContent = s; msgTimer = 2; }
|
||
function addEvent(text) { state.events.push({ t: state.t, text }); if (state.events.length > 4) state.events.shift(); }
|
||
|
||
spareEl.addEventListener('change', () => {
|
||
if (spareEl.checked) { if (spend(15)) state.spare = 1; else spareEl.checked = false; }
|
||
else { state.budget += 15; state.spare = 0; }
|
||
refreshPanel();
|
||
});
|
||
tensionEl.addEventListener('input', () => {
|
||
state.tension = parseFloat(tensionEl.value);
|
||
document.getElementById('tensionVal').textContent = state.tension.toFixed(2);
|
||
});
|
||
startBtn.addEventListener('click', () => {
|
||
if (state.corners.length !== 4) return;
|
||
buildSail();
|
||
state.phase = 'storm';
|
||
state.t = 0;
|
||
wind.nextGust = 3;
|
||
document.getElementById('phaseLabel').innerHTML = '<b>STORM</b>';
|
||
startBtn.disabled = true;
|
||
tensionEl.disabled = true;
|
||
spareEl.disabled = true;
|
||
});
|
||
|
||
function refreshPanel() {
|
||
document.getElementById('budget').textContent = `$${state.budget}`;
|
||
startBtn.disabled = !(state.phase === 'prep' && state.corners.length === 4);
|
||
}
|
||
|
||
// ---------- rendering ----------
|
||
const RAIN = [];
|
||
for (let i = 0; i < 130; i++) RAIN.push({ x: Math.random() * W, y: Math.random() * H });
|
||
|
||
function draw(t) {
|
||
ctx.clearRect(0, 0, W, H);
|
||
|
||
// lawn
|
||
ctx.fillStyle = '#4a7c3f';
|
||
ctx.fillRect(0, 0, W, H);
|
||
// grass tufts bend with wind
|
||
ctx.strokeStyle = 'rgba(30,70,25,.7)';
|
||
ctx.lineWidth = 1.5;
|
||
const bend = Math.min(14, wind.speed * 0.25);
|
||
for (const g of TUFTS) {
|
||
const b = bend * (0.7 + 0.3 * Math.sin(t * 3 + g.j));
|
||
ctx.beginPath();
|
||
ctx.moveTo(g.x, g.y);
|
||
ctx.lineTo(g.x + Math.cos(wind.dir) * b, g.y + Math.sin(wind.dir) * b - 3);
|
||
ctx.stroke();
|
||
}
|
||
|
||
// garden bed
|
||
ctx.fillStyle = '#6b4a2f';
|
||
ctx.fillRect(GARDEN.x, GARDEN.y, GARDEN.w, GARDEN.h);
|
||
ctx.fillStyle = '#7fce6a';
|
||
for (let i = 0; i < 6; i++) for (let j = 0; j < 4; j++) {
|
||
ctx.beginPath();
|
||
ctx.arc(GARDEN.x + (i + 0.5) / 6 * GARDEN.w, GARDEN.y + (j + 0.5) / 4 * GARDEN.h, 8, 0, 7);
|
||
ctx.fill();
|
||
}
|
||
// garden hp bar
|
||
ctx.fillStyle = '#00000066';
|
||
ctx.fillRect(GARDEN.x, GARDEN.y - 14, GARDEN.w, 8);
|
||
ctx.fillStyle = state.gardenHP > 40 ? '#5f5' : '#f55';
|
||
ctx.fillRect(GARDEN.x, GARDEN.y - 14, GARDEN.w * state.gardenHP / 100, 8);
|
||
|
||
// house
|
||
ctx.fillStyle = '#8a8f96';
|
||
ctx.fillRect(HOUSE.x, HOUSE.y, HOUSE.w, HOUSE.h);
|
||
ctx.fillStyle = '#6e737a';
|
||
ctx.fillRect(HOUSE.x, HOUSE.h - 10, HOUSE.w, 10);
|
||
ctx.fillStyle = '#dde5ea';
|
||
ctx.font = '12px ui-monospace';
|
||
ctx.fillText('HOUSE (fascia line — strong points marked)', 12, 24);
|
||
|
||
// trees (trunk marker; canopy after sail so it reads layered)
|
||
for (const tr of TREES) {
|
||
const sway = anchorPos(ANCHORS.find(a => a.tree === tr), t);
|
||
ctx.fillStyle = '#5a3d24';
|
||
ctx.beginPath(); ctx.arc(sway.x, sway.y, 7, 0, 7); ctx.fill();
|
||
tr._sway = sway;
|
||
}
|
||
|
||
// sail
|
||
if (nodes) {
|
||
const idx = (u, v) => v * N + u;
|
||
for (let v = 0; v < N - 1; v++) for (let u = 0; u < N - 1; u++) {
|
||
const a = nodes[idx(u, v)], b = nodes[idx(u + 1, v)], c = nodes[idx(u + 1, v + 1)], d = nodes[idx(u, v + 1)];
|
||
const z = (a.z + b.z + c.z + d.z) / 4;
|
||
const lite = Math.max(0, Math.min(60, z * 1.2 + 20));
|
||
ctx.fillStyle = `rgba(${200 + lite * 0.6},${170 + lite},${90 + lite},0.82)`;
|
||
ctx.beginPath();
|
||
ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.lineTo(c.x, c.y); ctx.lineTo(d.x, d.y);
|
||
ctx.closePath(); ctx.fill();
|
||
}
|
||
const out = sailOutline();
|
||
ctx.strokeStyle = '#a8843b'; ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
out.forEach((p, i) => i ? ctx.lineTo(p.x, p.y) : ctx.moveTo(p.x, p.y));
|
||
ctx.closePath(); ctx.stroke();
|
||
} else if (state.phase === 'prep' && state.corners.length >= 2) {
|
||
ctx.strokeStyle = 'rgba(255,220,120,.6)'; ctx.setLineDash([6, 5]); ctx.lineWidth = 2;
|
||
const ring = state.corners.length === 4 ? state.corners : state.corners;
|
||
ctx.beginPath();
|
||
ring.forEach((c, i) => i ? ctx.lineTo(c.anchor.x, c.anchor.y) : ctx.moveTo(c.anchor.x, c.anchor.y));
|
||
if (state.corners.length === 4) ctx.closePath();
|
||
ctx.stroke(); ctx.setLineDash([]);
|
||
}
|
||
|
||
// tree canopies
|
||
for (const tr of TREES) {
|
||
const s = tr._sway || tr;
|
||
ctx.fillStyle = 'rgba(40,95,35,.85)';
|
||
ctx.beginPath(); ctx.arc(s.x, s.y, tr.r, 0, 7); ctx.fill();
|
||
}
|
||
|
||
// anchors + corner hardware + load bars
|
||
for (const a of ANCHORS) {
|
||
const p = a.type === 'tree' ? (a.tree._sway || a) : a;
|
||
const c = state.corners.find(cc => cc.anchor === a);
|
||
ctx.beginPath();
|
||
ctx.arc(p.x, p.y, 6, 0, 7);
|
||
ctx.fillStyle = c ? c.hw.color : '#233';
|
||
ctx.fill();
|
||
ctx.strokeStyle = '#fff'; ctx.lineWidth = 1.5; ctx.stroke();
|
||
if (state.phase === 'prep') {
|
||
ctx.fillStyle = '#ffffffcc'; ctx.font = '10px ui-monospace';
|
||
ctx.fillText(a.id.toUpperCase() + (c ? ` ${c.hw.name} (${c.hw.rating})` : ''), p.x + 10, p.y - 6);
|
||
}
|
||
if (c && state.phase !== 'prep') {
|
||
// load bar
|
||
const frac = Math.min(1, c.load / c.hw.rating);
|
||
ctx.fillStyle = '#000a';
|
||
ctx.fillRect(p.x - 16, p.y + 10, 32, 6);
|
||
ctx.fillStyle = c.broken ? '#f33' : frac > 0.8 ? '#f66' : frac > 0.5 ? '#fc5' : '#6e6';
|
||
ctx.fillRect(p.x - 16, p.y + 10, 32 * (c.broken ? 1 : frac), 6);
|
||
if (c.broken) { ctx.fillStyle = '#f44'; ctx.font = 'bold 11px ui-monospace'; ctx.fillText('BLOWN! (E to re-rig)', p.x - 30, p.y + 30); }
|
||
if (DEBUG) { ctx.fillStyle = '#fff'; ctx.fillText(c.load.toFixed(0) + '/' + c.hw.rating, p.x - 14, p.y - 10); }
|
||
}
|
||
}
|
||
|
||
// player
|
||
if (state.phase !== 'prep') {
|
||
ctx.fillStyle = '#ffd27a';
|
||
ctx.beginPath(); ctx.arc(player.x, player.y, player.r, 0, 7); ctx.fill();
|
||
ctx.strokeStyle = '#5a3d24'; ctx.lineWidth = 2; ctx.stroke();
|
||
if (state.repair) {
|
||
ctx.strokeStyle = '#7ee0ff'; ctx.lineWidth = 4;
|
||
ctx.beginPath(); ctx.arc(player.x, player.y, 15, -1.57, -1.57 + state.repair.progress * 6.28); ctx.stroke();
|
||
}
|
||
}
|
||
|
||
// rain + gust telegraph
|
||
if (state.phase === 'storm') {
|
||
ctx.strokeStyle = 'rgba(180,210,255,.35)'; ctx.lineWidth = 1;
|
||
const rl = 6 + wind.speed * 0.15;
|
||
for (const r of RAIN) {
|
||
r.x += windX() * 0.08 + 0.5; r.y += 6 + wind.speed * 0.12;
|
||
if (r.y > H) { r.y = 0; r.x = Math.random() * W; }
|
||
if (r.x > W) r.x = 0;
|
||
ctx.beginPath(); ctx.moveTo(r.x, r.y);
|
||
ctx.lineTo(r.x + Math.cos(wind.dir) * rl * 0.4, r.y + rl); ctx.stroke();
|
||
}
|
||
// telegraph: pale band sweeps across during the 1.5s before a gust ramps
|
||
if (wind.gustT >= 0 && wind.gustT < 1.5) {
|
||
const f = wind.gustT / 1.5;
|
||
const cx2 = W / 2 - Math.cos(wind.dir) * W * (0.8 - f * 1.3);
|
||
const cy2 = H / 2 - Math.sin(wind.dir) * H * (0.8 - f * 1.3);
|
||
ctx.save();
|
||
ctx.translate(cx2, cy2); ctx.rotate(wind.dir + Math.PI / 2);
|
||
ctx.fillStyle = 'rgba(255,255,255,.10)';
|
||
ctx.fillRect(-W, -30, W * 2, 60);
|
||
ctx.restore();
|
||
}
|
||
}
|
||
|
||
// HUD
|
||
ctx.fillStyle = '#000a';
|
||
ctx.fillRect(W - 210, H - 92, 200, 82);
|
||
ctx.fillStyle = '#dde5ea'; ctx.font = '12px ui-monospace';
|
||
if (state.phase === 'storm') {
|
||
ctx.fillText(`storm ${Math.max(0, STORM_LEN - state.t).toFixed(0)}s`, W - 198, H - 72);
|
||
ctx.fillText(`wind ${wind.speed.toFixed(0)}${wind.gust > 5 ? ' GUST!' : ''}`, W - 198, H - 54);
|
||
ctx.fillText(`garden ${state.gardenHP.toFixed(0)}% spare×${state.spare}`, W - 198, H - 36);
|
||
} else if (state.phase === 'prep') {
|
||
ctx.fillText('rig 4 corners, set tension,', W - 198, H - 66);
|
||
ctx.fillText('then START STORM', W - 198, H - 50);
|
||
}
|
||
// wind arrow
|
||
ctx.save();
|
||
ctx.translate(W - 40, H - 40);
|
||
ctx.rotate(wind.dir);
|
||
ctx.strokeStyle = '#ffd27a'; ctx.lineWidth = 3;
|
||
const al = 6 + Math.min(18, wind.speed * 0.3);
|
||
ctx.beginPath(); ctx.moveTo(-al, 0); ctx.lineTo(al, 0); ctx.lineTo(al - 6, -5); ctx.moveTo(al, 0); ctx.lineTo(al - 6, 5); ctx.stroke();
|
||
ctx.restore();
|
||
|
||
// event ticker
|
||
ctx.font = '12px ui-monospace';
|
||
state.events.forEach((ev, i) => {
|
||
ctx.fillStyle = `rgba(255,210,122,${1 - (state.t - ev.t) / 8})`;
|
||
ctx.fillText(ev.text, 12, H - 16 - i * 16);
|
||
});
|
||
if (state.msg) {
|
||
ctx.fillStyle = '#ff8'; ctx.font = 'bold 16px ui-monospace';
|
||
ctx.fillText(state.msg, W / 2 - 90, 90);
|
||
}
|
||
|
||
// end screen
|
||
if (state.phase === 'end') {
|
||
ctx.fillStyle = '#000c'; ctx.fillRect(0, 0, W, H);
|
||
ctx.fillStyle = state.result.win ? '#7fce6a' : '#f66';
|
||
ctx.font = 'bold 34px ui-monospace';
|
||
ctx.fillText(state.result.win ? 'THE GARDEN MADE IT' : 'THE GARDEN IS GONE', W / 2 - 200, H / 2 - 40);
|
||
ctx.fillStyle = '#dde5ea'; ctx.font = '15px ui-monospace';
|
||
ctx.fillText(`garden health ${state.gardenHP.toFixed(0)}%`, W / 2 - 200, H / 2);
|
||
ctx.fillText(`corners intact ${state.corners.filter(c => !c.broken).length}/4`, W / 2 - 200, H / 2 + 22);
|
||
ctx.fillText(`budget left $${state.budget}`, W / 2 - 200, H / 2 + 44);
|
||
ctx.fillText('refresh to run it again', W / 2 - 200, H / 2 + 80);
|
||
}
|
||
}
|
||
|
||
// ---------- main loop ----------
|
||
let last = performance.now();
|
||
function frame(now) {
|
||
const dt = Math.min(0.033, (now - last) / 1000);
|
||
last = now;
|
||
state.t += dt;
|
||
if (msgTimer > 0) { msgTimer -= dt; if (msgTimer <= 0) document.getElementById('msg').textContent = ''; }
|
||
|
||
windVec(state.t, dt);
|
||
stepSail(state.t, dt);
|
||
stepPlayer(state.t, dt);
|
||
|
||
if (state.phase === 'storm') {
|
||
const cover = coveredFraction();
|
||
state.gardenHP -= (1 - cover) * 5.5 * dt;
|
||
if (state.gardenHP <= 0) { state.gardenHP = 0; endStorm(false); }
|
||
else if (state.t >= STORM_LEN) endStorm(true);
|
||
}
|
||
draw(state.t);
|
||
requestAnimationFrame(frame);
|
||
}
|
||
|
||
function endStorm(win) {
|
||
state.phase = 'end';
|
||
state.result = { win };
|
||
document.getElementById('phaseLabel').innerHTML = '<b>AFTERMATH</b>';
|
||
}
|
||
|
||
// auto mode for quick testing: rig h1,h3,p1,p2 with mixed hardware and start
|
||
if (AUTO) {
|
||
for (const [id, hwi] of [['h1', 2], ['h3', 1], ['p1', 1], ['p2', 0]]) {
|
||
const a = ANCHORS.find(x => x.id === id);
|
||
state.corners.push({ anchor: a, hw: HARDWARE[hwi], load: 0, overload: 0, broken: false });
|
||
state.budget -= HARDWARE[hwi].cost;
|
||
}
|
||
state.corners = orderRing(state.corners.map(c => c.anchor)).map(a2 => state.corners.find(c => c.anchor === a2));
|
||
state.spare = 1; state.budget -= 15;
|
||
buildSail();
|
||
state.phase = 'storm';
|
||
state.t = 0;
|
||
document.getElementById('phaseLabel').innerHTML = '<b>STORM</b>';
|
||
}
|
||
|
||
refreshPanel();
|
||
requestAnimationFrame(frame);
|