Touch controls, guided city tour and shareable places

Touch: in walk and fly the left thumb drives a virtual joystick while
the right thumb looks around; pinch zooms in every view (and climbs
when flying); help text switches for coarse pointers.

Tour (T or the Tour button) flies the helicopter over the six largest
districts with captions of their file and line counts, circling each
before moving on, and stops on any input.

Copy link encodes the GitHub repository, view, city camera and selected
file in the URL fragment. Opening such a link loads the repository
(including through GitHub sign-in for private repos) and restores the
place. Fragments are validated: only github.com repositories and finite
camera values are accepted. Helpers are unit tested.
This commit is contained in:
Andy Dixon
2026-05-31 21:36:54 +01:00
parent f035ecb4a5
commit dd8976b13c
5 changed files with 225 additions and 10 deletions
+6
View File
@@ -87,9 +87,15 @@
<button type="button" data-city-view="walk" title="Walk (2)"><kbd>2</kbd> Walk</button>
<button type="button" data-city-view="fly" title="Fly (3)"><kbd>3</kbd> Fly</button>
</div>
<div class="city-actions">
<button type="button" id="tourButton" title="Guided tour (T)">Tour</button>
<button type="button" id="shareButton" title="Copy a link to this place">Copy link</button>
</div>
<span class="city-help" id="cityHelp"></span>
</div>
<div class="crosshair" id="crosshair" hidden></div>
<div class="tour-caption" id="tourCaption" hidden></div>
<div class="joystick" id="joystick" hidden><i></i></div>
<div class="city-target" id="cityTarget" hidden></div>
<div class="city-address" id="cityAddress" hidden></div>
<canvas class="minimap" id="minimap" width="220" height="150" hidden title="Click to travel"></canvas>