| 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> |
| 13 | <canvas id="exterior" class="hidden"></canvas> |
| 14 | <canvas id="interior" class="hidden"></canvas> |
| 15 | <div id="views" class="views"> |
| 16 | <button data-view="map" class="active">Map</button> |
| 17 | <button data-view="exterior">Exterior</button> |
| 18 | <button data-view="interior">Interior</button> |
| 19 | </div> |
| 20 | <div id="ext-labels" class="labels3d hidden"></div> |
| 21 | <div id="int-labels" class="labels3d hidden"></div> |
| 22 | <div id="spin" class="overlay hidden"></div> |
| 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> |
| 29 | <div id="cursor" class="overlay hidden"></div> |
| 30 | <div id="sightline" class="overlay hidden"></div> |
| 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> |
| 36 | </main> |
| 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"> |
| 40 | <header> |
| 41 | <h1>Tower</h1> |
| 42 | <select id="branch" title="Which branch of Tower you are looking at" aria-label="Branch" hidden></select> |
| 43 | <button id="panel-close" type="button">Close</button> |
| 44 | </header> |
| 45 | |
| 46 | <details class="sec" id="view-section" open> |
| 47 | <summary>View</summary> |
| 48 | <label class="row" id="terrain-row"><input id="f-terrain" type="checkbox" checked /> Show terrain</label> |
| 49 | <label class="row"><input id="f-labels" type="checkbox" checked /> Show labels <span class="dim">— L</span></label> |
| 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> |
| 57 | <div id="map-options"> |
| 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> |
| 61 | <p class="hint">Click a place to select it. <b>Shift-click two points</b> to |
| 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> |
| 64 | </div> |
| 65 | <div id="exterior-options" class="hidden"> |
| 66 | <label>Hull |
| 67 | <select id="f-ext-view"> |
| 68 | <option value="true" selected>True — what Tower looks like</option> |
| 69 | <option value="rock">Rock — an asteroid shell (experiment)</option> |
| 70 | <option value="pipes">Piping — plating, pipes and vents (experiment)</option> |
| 71 | <option value="rockpipes">Rock and piping — plant under shielding (experiment)</option> |
| 72 | <option value="xray">X-ray — the inner surface projected out</option> |
| 73 | </select></label> |
| 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, |
| 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 |
| 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> |
| 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> |
| 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. |
| 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> |
| 91 | </div> |
| 92 | <div id="interior-options" class="hidden"> |
| 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> |
| 95 | <button id="f-tour" type="button">Scenic tour</button> |
| 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 |
| 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 |
| 102 | flight key stops it where it is.</p> |
| 103 | <p class="hint"><b>One finger looks. Two fingers move</b> — drag with two |
| 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. |
| 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 |
| 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> |
| 114 | </div> |
| 115 | </details> |
| 116 | |
| 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 | |
| 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 |
| 141 | day 0; run the clock under Time to move through them.</p> |
| 142 | <ul id="weather-board" class="board"></ul> |
| 143 | </details> |
| 144 | |
| 145 | <details class="sec" id="world-section" open> |
| 146 | <summary>World <span id="counts" class="dim"></span></summary> |
| 147 | <ul id="list" class="list"></ul> |
| 148 | </details> |
| 149 | |
| 150 | <details class="sec" id="detail" hidden open> |
| 151 | <summary>Selected</summary> |
| 152 | <p id="d-name"></p> |
| 153 | <p id="d-blurb" class="dim"></p> |
| 154 | <p id="d-where" class="dim"></p> |
| 155 | <p id="d-state" class="hint" hidden></p> |
| 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"> |
| 162 | <a href="https://code.fuzzyworld.net/tower/" target="_blank" rel="noopener">Source code</a> |
| 163 | </p> |
| 164 | </details> |
| 165 | </aside> |
| 166 | </div> |
| 167 | <script type="module" src="/src/main.ts"></script> |
| 168 | </body> |
| 169 | </html> |