09a64747 2026-09-07 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" /> |
| 6 | <title>Tower — Map</title> |
| 7 | <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><text y='14' font-size='14'>🛰</text></svg>" /> |
| 8 | </head> |
| 9 | <body> |
| 10 | <div id="app"> |
| 11 | <main> |
| 12 | <canvas id="map"></canvas> |
5f38efd0 2026-09-07 Pavel Safronov | 13 | <canvas id="exterior" class="hidden"></canvas> |
7cc177f6 2026-09-07 Pavel Safronov | 14 | <canvas id="interior" class="hidden"></canvas> |
5f38efd0 2026-09-07 Pavel Safronov | 15 | <div id="views" class="views"> |
| 16 | <button data-view="map" class="active">Map</button> |
| 17 | <button data-view="exterior">Exterior</button> |
7cc177f6 2026-09-07 Pavel Safronov | 18 | <button data-view="interior">Interior</button> |
5f38efd0 2026-09-07 Pavel Safronov | 19 | </div> |
8b6287ba 2026-09-07 Pavel Safronov | 20 | <div id="ext-labels" class="labels3d hidden"></div> |
7cc177f6 2026-09-07 Pavel Safronov | 21 | <div id="int-labels" class="labels3d hidden"></div> |
5f38efd0 2026-09-07 Pavel Safronov | 22 | <div id="spin" class="overlay hidden"></div> |
3e898b51 2026-09-28 Pavel Safronov | 23 | <div id="standing" class="overlay collapsible hidden"> |
| 24 | <button id="standing-toggle" class="overlay-head" type="button" aria-expanded="true" |
| 25 | aria-controls="standing-body">Where you stand</button> |
| 26 | <div id="standing-body"></div> |
| 27 | </div> |
| 28 | <div id="eye-gauge" class="gauge hidden"></div> |
09a64747 2026-09-07 Pavel Safronov | 29 | <div id="cursor" class="overlay hidden"></div> |
| 30 | <div id="sightline" class="overlay hidden"></div> |
376f2ce6 2026-09-16 Pavel Safronov | 31 | <div id="status" class="status" role="status" aria-live="polite" hidden> |
| 32 | <p class="status-title">Tower is making the world</p> |
| 33 | <p id="status-line" class="status-line"></p> |
| 34 | <div class="status-bar"><div id="status-fill"></div></div> |
| 35 | </div> |
09a64747 2026-09-07 Pavel Safronov | 36 | </main> |
fc11b064 2026-09-08 Pavel Safronov | 37 | <div id="scrim" class="scrim"></div> |
| 38 | <button id="panel-toggle" type="button" aria-controls="panel" aria-expanded="false">Panel</button> |
| 39 | <aside id="panel"> |
09a64747 2026-09-07 Pavel Safronov | 40 | <header> |
| 41 | <h1>Tower</h1> |
b4b8e46c 2026-09-28 Pavel Safronov | 42 | <select id="branch" title="Which branch of Tower you are looking at" aria-label="Branch" hidden></select> |
fc11b064 2026-09-08 Pavel Safronov | 43 | <button id="panel-close" type="button">Close</button> |
09a64747 2026-09-07 Pavel Safronov | 44 | </header> |
| 45 | |
0e0c2dba 2026-09-07 Pavel Safronov | 46 | <details class="sec" id="view-section" open> |
| 47 | <summary>View</summary> |
7cc177f6 2026-09-07 Pavel Safronov | 48 | <label class="row" id="terrain-row"><input id="f-terrain" type="checkbox" checked /> Show terrain</label> |
1c0284d0 2026-09-27 Pavel Safronov | 49 | <label class="row"><input id="f-labels" type="checkbox" checked /> Show labels <span class="dim">— L</span></label> |
3cc2b5bd 2026-10-04 Pavel Safronov | 50 | <div id="photo-row" hidden> |
| 51 | <button id="f-photo" type="button">Save this shot — P</button> |
| 52 | <label>Saved shots |
| 53 | <select id="f-photos"><option value="">Go to a saved shot…</option></select></label> |
| 54 | <p class="hint" id="photo-status">Saves the framing, the time and the Light to |
| 55 | <code>content/photos.json</code>; <code>npm run photos</code> renders them.</p> |
| 56 | </div> |
0e0c2dba 2026-09-07 Pavel Safronov | 57 | <div id="map-options"> |
376f2ce6 2026-09-16 Pavel Safronov | 58 | <p class="hint">Generated live from the world's features, in your browser. |
| 59 | On the exterior it is wrapped onto the hull — an x-ray of the inner |
| 60 | surface, not what Tower looks like from outside.</p> |
9d5a061c 2026-09-27 Pavel Safronov | 61 | <p class="hint">Click a place to select it. <b>Shift-click two points</b> to |
1c0284d0 2026-09-27 Pavel Safronov | 62 | measure a sightline between them; Esc clears it. <b>F</b> fits the map, |
| 63 | and <b>L</b> shows or hides the labels in any view.</p> |
0e0c2dba 2026-09-07 Pavel Safronov | 64 | </div> |
| 65 | <div id="exterior-options" class="hidden"> |
a3f01bd7 2026-09-08 Pavel Safronov | 66 | <label>Hull |
| 67 | <select id="f-ext-view"> |
aa201500 2026-09-14 Pavel Safronov | 68 | <option value="true" selected>True — what Tower looks like</option> |
908833aa 2026-09-28 Pavel Safronov | 69 | <option value="rock">Rock — an asteroid shell (experiment)</option> |
6368edcf 2026-09-28 Pavel Safronov | 70 | <option value="pipes">Piping — plating, pipes and vents (experiment)</option> |
ab6ae94f 2026-09-28 Pavel Safronov | 71 | <option value="rockpipes">Rock and piping — plant under shielding (experiment)</option> |
aa201500 2026-09-14 Pavel Safronov | 72 | <option value="xray">X-ray — the inner surface projected out</option> |
a3f01bd7 2026-09-08 Pavel Safronov | 73 | </select></label> |
6bb061a6 2026-09-14 Pavel Safronov | 74 | <p class="hint">True shows the outer skin: bare hull, and a window at each |
| 75 | cap — look in through either and the land is really there, hazed as it is |
| 76 | from inside, 540 km deep. X-ray wraps the terrain onto the outside instead, |
6368edcf 2026-09-28 Pavel Safronov | 77 | which is a diagram of what is inside rather than a view of it. Rock and Piping |
| 78 | are trial outsides, not canon: the hull dressed as an asteroid, or as industrial |
ab6ae94f 2026-09-28 Pavel Safronov | 79 | plant — plating, pipe runs, venting exhausts and thrusters that fire now and then — |
| 80 | or both at once, the plant half buried under rock heaped on as shielding.</p> |
0e0c2dba 2026-09-07 Pavel Safronov | 81 | <label class="row"><input id="f-spin" type="checkbox" checked /> Spin</label> |
| 82 | <label>Speed <span id="speed-value" class="dim"></span> |
| 83 | <input id="f-speed" type="range" min="0" max="4" step="1" value="2" /></label> |
| 84 | <p class="hint">Tower turns once every 7 min 29 s. Drag to orbit, scroll to |
| 85 | zoom, click the hull to drop a point.</p> |
99a2821b 2026-09-29 Pavel Safronov | 86 | <button id="f-ext-tour" type="button">Scenic tour</button> |
| 87 | <p class="hint">Spacecraft, a new one every twelve to eighteen seconds: skimming the |
| 88 | hull, docking on it, looking in through the far cap, over the collector's rim, and |
| 89 | Tower, the collector and the sun in one frame. Every flight keeps out of the beam. |
ec1a6075 2026-09-30 Pavel Safronov | 90 | The caption's border fills in as each one runs. <b>N</b> skips ahead; <b>Esc</b> or a drag stops it.</p> |
0e0c2dba 2026-09-07 Pavel Safronov | 91 | </div> |
7cc177f6 2026-09-07 Pavel Safronov | 92 | <div id="interior-options" class="hidden"> |
3e898b51 2026-09-28 Pavel Safronov | 93 | <p class="hint">Eye height is the gauge up the right-hand side of the view: drag it, |
| 94 | or click it and use the arrow keys. The marks are things of known height.</p> |
a088e5d5 2026-09-17 Pavel Safronov | 95 | <button id="f-tour" type="button">Scenic tour</button> |
99a2821b 2026-09-29 Pavel Safronov | 96 | <p class="hint">A new flyer every twelve to eighteen seconds, dealt at random: |
| 97 | paragliders on the ridges, gliders in thermals, light aircraft and seaplanes, an |
| 98 | airliner round the Girdle, airships — and the giants that fly near the axis, round |
| 99 | the sun — trains on the two railways, and ships in weather. The camera turns to |
ec1a6075 2026-09-30 Pavel Safronov | 100 | whatever can be seen from there. The caption's border fills in as each one runs. |
| 101 | <b>N</b> skips ahead; <b>Esc</b>, a drag or a |
99a2821b 2026-09-29 Pavel Safronov | 102 | flight key stops it where it is.</p> |
8cb6755f 2026-09-09 Pavel Safronov | 103 | <p class="hint"><b>One finger looks. Two fingers move</b> — drag with two |
3e898b51 2026-09-28 Pavel Safronov | 104 | and the ground follows them. On a trackpad, a two-finger swipe moves you the |
| 105 | same way; so does a mouse wheel. With a mouse: drag to look, shift-drag or |
| 106 | scroll to move. |
376f2ce6 2026-09-16 Pavel Safronov | 107 | <b>Fly with the keyboard:</b> W A S D or the arrows to move, E to climb, |
| 108 | Q to descend, shift to go five times faster. Speed follows your height, |
| 109 | so the ground passes at the same apparent pace from a metre up or ten |
| 110 | kilometres. Selecting a place walks you there. Nothing inside here rotates: you, the |
769726ea 2026-09-08 Pavel Safronov | 111 | ground and the air all turn together. The far cap is a window, so at |
| 112 | night the sky through it wheels once every 7 min 29 s about a single |
| 113 | motionless star — the only place the spin is obvious.</p> |
7cc177f6 2026-09-07 Pavel Safronov | 114 | </div> |
0e0c2dba 2026-09-07 Pavel Safronov | 115 | </details> |
| 116 | |
59c12827 2026-09-28 Pavel Safronov | 117 | <details class="sec" id="time-section" open> |
| 118 | <summary>Time <span id="time-now" class="dim"></span></summary> |
| 119 | <p class="hint" id="sun-now"></p> |
| 120 | <label>Day <span id="day-value" class="dim"></span> |
| 121 | <input id="f-day" type="number" min="0" step="1" value="0" /></label> |
| 122 | <label>Time <span id="time-value" class="dim"></span> |
| 123 | <input id="f-time" type="range" min="0" max="1439" step="1" value="720" /></label> |
| 124 | <label class="row"><input id="f-cycle" type="checkbox" /> Run the clock</label> |
| 125 | <label>Rate <span id="cycle-value" class="dim"></span> |
| 126 | <input id="f-cycle-rate" type="range" min="0" max="4" step="1" value="2" /></label> |
| 127 | <label>Light <span class="dim">— how bright Tower runs its day</span> |
| 128 | <select id="f-light"> |
| 129 | <option value="dark">Dark — beam shut down</option> |
| 130 | <option value="twilight">Twilight — 30 W/m²</option> |
| 131 | <option value="temperate" selected>Temperate — 200 W/m²</option> |
| 132 | <option value="full">Full — 319 W/m²</option> |
| 133 | </select></label> |
| 134 | <p class="hint" id="time-hint"></p> |
| 135 | </details> |
| 136 | |
a088e5d5 2026-09-17 Pavel Safronov | 137 | <details class="sec" id="weather-section"> |
| 138 | <summary>Weather <span id="weather-now" class="dim"></span></summary> |
| 139 | <p class="hint">Tower publishes its weather plans so people can plan around |
| 140 | them, and changes them when it sees fit. Times are world time, counted from |
59c12827 2026-09-28 Pavel Safronov | 141 | day 0; run the clock under Time to move through them.</p> |
a088e5d5 2026-09-17 Pavel Safronov | 142 | <ul id="weather-board" class="board"></ul> |
0e0c2dba 2026-09-07 Pavel Safronov | 143 | </details> |
09a64747 2026-09-07 Pavel Safronov | 144 | |
5e405272 2026-09-07 Pavel Safronov | 145 | <details class="sec" id="world-section" open> |
0e0c2dba 2026-09-07 Pavel Safronov | 146 | <summary>World <span id="counts" class="dim"></span></summary> |
09a64747 2026-09-07 Pavel Safronov | 147 | <ul id="list" class="list"></ul> |
0e0c2dba 2026-09-07 Pavel Safronov | 148 | </details> |
09a64747 2026-09-07 Pavel Safronov | 149 | |
5e405272 2026-09-07 Pavel Safronov | 150 | <details class="sec" id="detail" hidden open> |
0e0c2dba 2026-09-07 Pavel Safronov | 151 | <summary>Selected</summary> |
09a64747 2026-09-07 Pavel Safronov | 152 | <p id="d-name"></p> |
| 153 | <p id="d-blurb" class="dim"></p> |
| 154 | <p id="d-where" class="dim"></p> |
9d5a061c 2026-09-27 Pavel Safronov | 155 | <p id="d-state" class="hint" hidden></p> |
0e0c2dba 2026-09-07 Pavel Safronov | 156 | </details> |
| 157 | |
| 158 | <details class="sec" id="about-section"> |
| 159 | <summary>About</summary> |
| 160 | <p class="hint">Tower is the setting of a novel. This map is its companion piece.</p> |
| 161 | <p class="links"> |
5e8a8703 2026-10-27 Pavel Safronov | 162 | <a href="https://code.fuzzyworld.net/tower/" target="_blank" rel="noopener">Source code</a> |
0e0c2dba 2026-09-07 Pavel Safronov | 163 | </p> |
| 164 | </details> |
09a64747 2026-09-07 Pavel Safronov | 165 | </aside> |
| 166 | </div> |
| 167 | <script type="module" src="/src/main.ts"></script> |
| 168 | </body> |
| 169 | </html> |