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