9e605e0f 2026-06-30 Pavel Safronov | 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | <title>basin</title> |
| 7 | </head> |
| 8 | <body> |
| 9 | <div id="app"> |
bfd86d6e 2026-07-01 Pavel Safronov | 10 | <aside class="panel"> |
| 11 | <header> |
| 12 | <img id="logo" class="logo" alt="basin logo" /> |
3465f976 2026-07-02 Pavel Safronov | 13 | <h1><a href="./">basin</a></h1> |
bfd86d6e 2026-07-01 Pavel Safronov | 14 | <button id="randomize">🎲 Random</button> |
| 15 | </header> |
| 16 | <section id="config" class="config"> |
| 17 | <label class="ctl"> |
b9acd697 2026-07-01 Pavel Safronov | 18 | <span class="ctl-head"> |
| 19 | <span>Size <span id="cfg-size-val" class="val"></span></span> |
| 20 | <button type="button" class="lock" data-lock="size" aria-pressed="false">🔓</button> |
| 21 | </span> |
bfd86d6e 2026-07-01 Pavel Safronov | 22 | <input type="range" id="cfg-size" min="5" max="20" step="1" /> |
| 23 | </label> |
| 24 | <label class="ctl"> |
b9acd697 2026-07-01 Pavel Safronov | 25 | <span class="ctl-head"> |
| 26 | <span>Springs</span> |
| 27 | <button type="button" class="lock" data-lock="springCount" aria-pressed="false">🔓</button> |
| 28 | </span> |
bfd86d6e 2026-07-01 Pavel Safronov | 29 | <input type="number" id="cfg-springs" min="1" max="6" step="1" /> |
| 30 | </label> |
| 31 | <fieldset class="ctl edges"> |
b9acd697 2026-07-01 Pavel Safronov | 32 | <legend> |
| 33 | <span>Walls</span> |
| 34 | <button type="button" class="lock" data-lock="edges" aria-pressed="false">🔓</button> |
| 35 | </legend> |
bfd86d6e 2026-07-01 Pavel Safronov | 36 | <label><input type="checkbox" id="cfg-wall-n" /> N</label> |
| 37 | <label><input type="checkbox" id="cfg-wall-e" /> E</label> |
| 38 | <label><input type="checkbox" id="cfg-wall-s" /> S</label> |
| 39 | <label><input type="checkbox" id="cfg-wall-w" /> W</label> |
| 40 | </fieldset> |
03c2cc12 2026-07-01 Pavel Safronov | 41 | <label class="ctl" title="Simulated erosion: how weathered the terrain is before you arrive. 0 is a pristine dome; higher values carve grooves and change the edge pattern."> |
b9acd697 2026-07-01 Pavel Safronov | 42 | <span class="ctl-head"> |
| 43 | <span>Aging <span id="cfg-erosion-val" class="val"></span></span> |
| 44 | <button type="button" class="lock" data-lock="erosion" aria-pressed="false">🔓</button> |
| 45 | </span> |
03c2cc12 2026-07-01 Pavel Safronov | 46 | <input type="range" id="cfg-erosion" min="0" max="15" step="1" /> |
| 47 | </label> |
36e6a8b9 2026-07-02 Pavel Safronov | 48 | <label class="ctl" title="How far from the shore springs are drawn from. Low favours land just above the waterline; high favours high ground near the peak."> |
| 49 | <span class="ctl-head"> |
| 50 | <span>Reach <span id="cfg-reach-val" class="val"></span></span> |
| 51 | <button type="button" class="lock" data-lock="reach" aria-pressed="false">🔓</button> |
| 52 | </span> |
| 53 | <input type="range" id="cfg-reach" min="0" max="15" step="1" /> |
| 54 | </label> |
bfd86d6e 2026-07-01 Pavel Safronov | 55 | <label class="ctl"> |
b9acd697 2026-07-01 Pavel Safronov | 56 | <span class="ctl-head"> |
| 57 | <span>Terrain</span> |
| 58 | <button type="button" class="lock" data-lock="terrainSeed" aria-pressed="false">🔓</button> |
| 59 | </span> |
bfd86d6e 2026-07-01 Pavel Safronov | 60 | <span class="seedrow"> |
| 61 | <input |
| 62 | type="text" |
| 63 | id="cfg-seed" |
| 64 | inputmode="numeric" |
| 65 | spellcheck="false" |
| 66 | autocomplete="off" |
| 67 | /> |
| 68 | <button id="cfg-seed-roll" title="Randomize terrain">🎲</button> |
| 69 | </span> |
| 70 | </label> |
| 71 | <label class="ctl code"> |
| 72 | Code |
| 73 | <input type="text" id="cfg-code" spellcheck="false" autocomplete="off" /> |
| 74 | </label> |
| 75 | </section> |
| 76 | <p id="status" class="status"></p> |
| 77 | <p class="hint"> |
| 78 | Find the hidden springs that make water exit exactly at the gold edges. |
| 79 | Water leaves only at ocean (blue) sides — mountain walls block it. Tap to |
| 80 | explore the terrain; land on a spring and it locks in. |
| 81 | </p> |
| 82 | <footer class="credit"> |
f8e9c765 2026-10-27 Pavel Safronov | 83 | <a href="https://code.fuzzyworld.net/basin/" target="_blank" rel="noopener">Source code</a> |
bfd86d6e 2026-07-01 Pavel Safronov | 84 | · Logo by |
| 85 | <a href="https://www.flaticon.com/authors/icongeek26" target="_blank" rel="noopener">icongeek26</a> |
| 86 | on Flaticon |
| 87 | </footer> |
| 88 | </aside> |
| 89 | <main class="board-area"> |
| 90 | <canvas id="board"></canvas> |
| 91 | </main> |
9e605e0f 2026-06-30 Pavel Safronov | 92 | </div> |
b9acd697 2026-07-01 Pavel Safronov | 93 | <div id="loading" class="loading" aria-live="polite" aria-label="Generating board…"> |
| 94 | <div class="loading-box"> |
| 95 | <p class="loading-label">Generating…</p> |
| 96 | <div class="progress-track"> |
| 97 | <div id="progress-bar" class="progress-bar"></div> |
| 98 | </div> |
| 99 | </div> |
| 100 | </div> |
9e605e0f 2026-06-30 Pavel Safronov | 101 | <script type="module" src="/src/main.ts"></script> |
| 102 | </body> |
| 103 | </html> |