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>
37 lines
1.7 KiB
HTML
37 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>SHADES — sail storm prototype</title>
|
|
<style>
|
|
html, body { margin: 0; background: #1a2229; color: #dde5ea; font-family: ui-monospace, Menlo, monospace; }
|
|
#wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px; }
|
|
canvas { background: #4a7c3f; border-radius: 6px; box-shadow: 0 4px 24px rgba(0,0,0,.5); }
|
|
#panel { width: 960px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font-size: 13px; }
|
|
#panel button { font: inherit; padding: 6px 14px; border-radius: 4px; border: 1px solid #5a6; background: #2c4; color: #062; font-weight: bold; cursor: pointer; }
|
|
#panel button:disabled { background: #444; color: #888; border-color: #555; cursor: default; }
|
|
#msg { color: #ffd27a; min-height: 1.2em; }
|
|
label { display: flex; gap: 6px; align-items: center; }
|
|
.dim { color: #8fa3ad; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="wrap">
|
|
<div id="panel">
|
|
<span id="phaseLabel"><b>PREP</b></span>
|
|
<span id="budget"></span>
|
|
<label>tension <input type="range" id="tension" min="0.6" max="1.4" step="0.05" value="1.0"><span id="tensionVal">1.00</span></label>
|
|
<label><input type="checkbox" id="spare"> spare shackle ($15)</label>
|
|
<button id="startBtn" disabled>START STORM</button>
|
|
<span id="msg"></span>
|
|
</div>
|
|
<canvas id="cv" width="960" height="640"></canvas>
|
|
<div id="panel" class="dim">
|
|
PREP: click 4 anchor points to rig the sail · click a rigged corner to cycle its hardware ·
|
|
STORM: WASD/arrows move · hold E at a blown corner to re-rig (needs spare) · protect the garden bed
|
|
</div>
|
|
</div>
|
|
<script src="game.js"></script>
|
|
</body>
|
|
</html>
|