index.html

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 hidden"></div>
24	<div id="cursor" class="overlay hidden"></div>
25	<div id="sightline" class="overlay hidden"></div>
26	</main>
27	<div id="scrim" class="scrim"></div>
28	<button id="panel-toggle" type="button" aria-controls="panel" aria-expanded="false">Panel</button>
29	<aside id="panel">
30	<header>
31	<h1>Tower</h1>
32	<span id="mode" class="pill"></span>
33	<button id="panel-close" type="button">Close</button>
34	</header>
35
36	<details class="sec" id="view-section" open>
37	<summary>View</summary>
38	<label class="row" id="terrain-row"><input id="f-terrain" type="checkbox" checked /> Show terrain</label>
39	<label>Surface
40	<select id="f-surface">
41	<option value="canon" selected>Tower — the authored world</option>
42	<option value="cascadia">Cascadia — the real coast, 1:1</option>
43	</select></label>
44	<p class="hint" id="surface-hint" hidden>Not Tower. This is the Pacific
45	Northwest at true scale, wrapped onto the same cylinder as a ruler: the
46	ground from the Pacific surf east to the Columbia measures 312.8 km, and
47	Tower is 314.2 km around, so the real coast closes the ring on real
48	terrain. Seattle sits 150 km deepward of the sun cap, and the point 100 km
49	straight overhead is both the surf north of Kalaloch and the Columbia at
50	Entiat — one place, reached by walking either way round. Nothing here is
51	canon; no place in the world list belongs to it.</p>
52	<div id="map-options">
53	<p class="hint" id="map-hint">Rendered by <code>npm run terrain</code> from
54	<code>content/geography.json</code>. On the exterior it is wrapped onto the
55	hull — an x-ray of the inner surface, not what Tower looks like from
56	outside.</p>
57	</div>
58	<div id="exterior-options" class="hidden">
59	<label>Hull
60	<select id="f-ext-view">
61	<option value="true">True — what Tower looks like</option>
62	<option value="xray" selected>X-ray — the inner surface projected out</option>
63	</select></label>
64	<p class="hint">True shows the outer skin: bare hull, checkered sun cap, and
65	the far cap window — look in through it and the land is really there,
66	540 km deep. X-ray wraps the terrain onto the outside instead, which is a
67	diagram of what is inside rather than a view of it.</p>
68	<label class="row"><input id="f-spin" type="checkbox" checked /> Spin</label>
69	<label>Speed <span id="speed-value" class="dim"></span>
70	<input id="f-speed" type="range" min="0" max="4" step="1" value="2" /></label>
71	<p class="hint">Tower turns once every 7 min 29 s. Drag to orbit, scroll to
72	zoom, click the hull to drop a point.</p>
73	</div>
74	<div id="interior-options" class="hidden">
75	<label>Eye height <span id="eye-value" class="dim"></span>
76	<input id="f-eye" type="range" min="0" max="1000" step="1" value="0" /></label>
77	<label>Time <span id="time-value" class="dim"></span>
78	<input id="f-time" type="range" min="0" max="1439" step="1" value="720" /></label>
79	<label class="row"><input id="f-cycle" type="checkbox" /> Run the clock</label>
80	<label>Rate <span id="cycle-value" class="dim"></span>
81	<input id="f-cycle-rate" type="range" min="0" max="4" step="1" value="2" /></label>
82	<label>Light
83	<select id="f-light">
84	<option value="dark">Dark — beam shut down</option>
85	<option value="night">Night — 0.3 W/m²</option>
86	<option value="twilight">Twilight — 30 W/m²</option>
87	<option value="temperate" selected>Temperate — 200 W/m²</option>
88	<option value="full">Full — 319 W/m²</option>
89	</select></label>
90	<p class="hint">Drag to look, scroll to zoom in like a pair of binoculars.
91	Selecting a place walks you there. Nothing inside here rotates: you, the
92	ground and the air all turn together. The far cap is a window, so at
93	night the sky through it wheels once every 7 min 29 s about a single
94	motionless star — the only place the spin is obvious.</p>
95	</div>
96	</details>
97
98	<details class="sec" id="tools-section">
99	<summary>Place</summary>
100	<div id="tools" class="tools"></div>
101	<p class="hint" id="tool-hint">Click a marker to select. Drag to move. Shift-click two points to measure a sightline.</p>
102	</details>
103
104	<details class="sec" id="world-section" open>
105	<summary>World <span id="counts" class="dim"></span></summary>
106	<ul id="list" class="list"></ul>
107	</details>
108
109	<details class="sec" id="detail" hidden open>
110	<summary>Selected</summary>
111	<p id="d-name"></p>
112	<p id="d-blurb" class="dim"></p>
113	<p id="d-where" class="dim"></p>
114	</details>
115
116	<details class="sec" id="editor" hidden open>
117	<summary>Selected</summary>
118	<label>Name <input id="f-name" type="text" /></label>
119	<label>Kind <select id="f-kind"></select></label>
120	<label>ID <span class="dim">— permalink target; follows the name until you edit it</span>
121	<input id="f-id" type="text" /></label>
122	<label>Public blurb <textarea id="f-blurb" rows="2" placeholder="Shown to readers."></textarea></label>
123	<label>Private notes <textarea id="f-notes" rows="3" placeholder="Never leaves your machine unless you export a backup."></textarea></label>
124	<label class="row"><input id="f-public" type="checkbox" /> Publish to readers</label>
125	<p class="dim" id="f-where"></p>
126	<button id="f-delete" class="danger">Delete</button>
127	</details>
128
129	<details class="sec" id="data-section">
130	<summary>Data</summary>
131	<div id="save" class="save"></div>
132	<button id="export-backup">Export backup <span class="dim">— everything</span></button>
133	<button id="export-static">Export static map content <span class="dim">— public only</span></button>
134	<button id="import">Import backup…</button>
135	<input id="import-file" type="file" accept="application/json" hidden />
136	<button id="reseed">Reload published world</button>
137	<p class="hint">
138	Backups carry your private notes; keep them out of a public repo.
139	The static export is <code>static/world.json</code> — the default readers see.
140	</p>
141	</details>
142
143	<details class="sec" id="about-section">
144	<summary>About</summary>
145	<p class="hint">Tower is the setting of a novel. This map is its companion piece.</p>
146	<p class="links">
147	<a href="https://gitlab.com/PavelSafronov/tower" target="_blank" rel="noopener">Source on GitLab</a>
148	</p>
149	</details>
150	</aside>
151	</div>
152	<script type="module" src="/src/main.ts"></script>
153	</body>
154	</html>