-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
62 lines (61 loc) · 3.38 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛳️</text></svg>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Titanic Voyage RPG replay</title>
</head>
<body>
<div id="centred-absolute" style="display:none;">
<div id="instructions-menu" style="text-align:left;padding-top:1em;">
<strong><span id="pan-instruction">Left-click + drag to pan,<br>scroll in and out to zoom</span><br><span style="font-size:0.8em">Deckplans from Encyclopedia Titanica</span></strong>
</div>
<div>
<input id="time-range" type="range" min="0" max="1" step="0.005" style="margin-top:2em">
<div id="iceberg-range">
<div title="Iceberg impact" id="iceberg"></div>
</div>
<div class="label-FORMERLY" style="text-align:center; margin-bottom:0">
<h2 class="label-toggle text" style="max-width:unset;text-align:center;margin:0" id="titleText">April 15, 1912</h2>
</div>
</div>
<div id="highlight-menu" style="text-align:left;">
<strong>Highlight a particular person:</strong>
<br>
<input type="checkbox" id="leave-trails" name="leave-trails">
<label style="pointer-events: all;" for="leave-trails">Highlighted people leave trails behind them</label>
<br>
<select id="person-selector">
<option value=-1>None</option>
</select>
<div id="highlighted-people-parent" >
</div>
</div>
<div id="unknown-location-message-parent" style="bottom:10%;position:absolute;left:50%;transform:translate(-50%,-50%)">
</div>
</div>
<div id="canvas-parent"></div>
<div id="loading-text" style="top:50%;position:absolute;left:50%;transform:translate(-50%,-50%);z-index:5;font-size:1.5em;">
Loading... but while you wait, here's a short explanation about this project:
<br><br>
This page synthesises player movement data from Titanic Voyage RPG, which is an online game/experience that runs every year and simulates the Titanic's maiden voyage.
<br><br>
While it isn't historically representative and is ultimately a curiosity more than anything, the event is simulated with hundreds of players, and therefore generates a wealth of roleplay-driven data about player movement. This movement data is implicitly released in the form of message logs.
<br><br>
<strong>This webpage geolocates that data onto a map of the ship</strong> - so you can see the flow of players around the game world, and especially how the movement patterns change following the iceberg impact at 11:40pm.
<br><br>
<span style="font-size:0.8em;line-height:1.3;display:inline-block">
(There's a <em>lot</em> of players and a lot of movement though, so that's the reason
<br>
for the wait - chugging through all of them and locating them on the 3D map!)</span>
<br><br>
<div style="text-align:center;">
<button id="start-button" type="button" disabled="true" style="cursor:wait;">
Loading... <span class="ship-chug">🚢</span>
</button>
</div>
</div>
<script type="module" src="./src/main.js"></script>
</body>
</html>