-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathplay.html
More file actions
215 lines (215 loc) · 11.3 KB
/
Copy pathplay.html
File metadata and controls
215 lines (215 loc) · 11.3 KB
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- A phone opens the page as an app from its home screen, with no address bar (docs/TODO/220). -->
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#000000" />
<title>HARMLESS — play</title>
<link rel="stylesheet" href="/src/style.css" />
</head>
<body>
<div id="app">
<canvas id="scene"></canvas>
<div id="crosshair"></div>
<div id="lock"></div>
<div id="viewlabel"></div>
<div id="shipid"></div>
<canvas id="reticle"></canvas>
<div id="bomb-flash"></div>
<div id="topbar">
<span id="system-name">SYSTEM: ----</span>
<!--
The elapsed day. Beside the system name because the two change
together and change only at a jump — and in flight, because that is
where the jump happens, so the pilot watches the day tick at the one
moment it moves. See docs/TODO/140.
-->
<span id="day-display"></span>
<span id="credits-display"></span>
<span id="condition">CONDITION: GREEN</span>
</div>
<div id="message"></div>
<!--
The course buttons (docs/TODO/205 M5): where the ship goes next. A
click or a tap sends the button's data-key, as a menu row does, and
hud/hud-buttons.ts paints them. They sit outside the console, which is
read and never touched.
-->
<div id="courses"></div>
<!--
The course row (docs/TODO/215 M2): the list, open under its header as
one row that scrolls sideways. Empty while the header is closed.
-->
<div id="course-row"></div>
<!--
The target list (docs/TODO/206 M3): what the ship can fight, one row
each. Bottom left, above the console, where a thumb rests. It sat on
the right with the guns until 2026-09-13, and it opened upward over
the action. The guns are a row in the console now (docs/TODO/215).
-->
<div id="targets"></div>
<!-- The target row (docs/TODO/215 M2): the ships, open above the header as one row. -->
<div id="target-row"></div>
<!--
The exercise strip: shown for as long as a training exercise is being
flown, and never in career flight. Painted by hud/hud.ts from the
exercise's own recorder — see game/combat-sim-strip.ts.
-->
<div id="exercise" class="hidden">
<div class="ex-head"><b>SIMULATION</b><span id="ex-scenario"></span></div>
<div class="ex-row"><span id="ex-clock"></span><span id="ex-mark"></span></div>
<div class="ex-row"><span id="ex-tally"></span></div>
<!--
One line per hostile still up, nearest first: hull, range, and what it
is doing right now. Painted from the same sample the record keeps, so
it cannot say something the report will later contradict.
-->
<div id="ex-live"></div>
</div>
<div id="damage-flash"></div>
<div id="hud">
<!--
The three panels are one row, and the guns are the row under them
(docs/TODO/215 M1). On a phone the wrapper gives up its box, as the
panels do, and the grid places every gauge itself.
-->
<div class="hud-row">
<div class="hud-panel hud-left">
<!--
The mark on the speed bar is the fastest the slot will take
(docs/TODO/207 M3). hud/hud.ts places it from the rule itself.
-->
<div class="gauge"><label>FWD SPEED</label><div class="bar"><div id="g-speed" class="fill"></div><div id="g-speed-limit" class="limit"></div></div></div>
<div class="gauge"><label>ROLL</label><div class="bar centered"><div id="g-roll" class="marker"></div></div></div>
<div class="gauge"><label>PITCH</label><div class="bar centered"><div id="g-pitch" class="marker"></div></div></div>
<div class="gauge"><label>FORE SHLD</label><div class="bar"><div id="g-fore" class="fill"></div></div></div>
<div class="gauge"><label>AFT SHLD</label><div class="bar"><div id="g-aft" class="fill"></div></div></div>
<!-- the segments are filled in by the painter, one per energy bank: how
many banks there are is systems.ts's ENERGY_BANKS, not markup -->
<div class="gauge"><label>ENERGY</label><div class="segs" id="g-energy"></div></div>
</div>
<div class="hud-panel hud-center">
<canvas id="scanner" width="300" height="176"></canvas>
</div>
<div class="hud-panel hud-right">
<div class="gauge"><label>FUEL</label><div class="bar"><div id="g-fuel" class="fill"></div></div></div>
<div class="gauge"><label>LASER TEMP</label><div class="bar"><div id="g-laser" class="fill"></div></div></div>
<div class="gauge"><label>ALTITUDE</label><div class="bar"><div id="g-alt" class="fill"></div></div></div>
<div class="gauge"><label>CABIN TEMP</label><div class="bar"><div id="g-cabin" class="fill"></div></div></div>
<div class="compass-row">
<div class="indicators">
<span id="ind-s" title="space station in range">S</span>
<span id="ind-e" title="E.C.M. broadcast detected">E</span>
</div>
<canvas id="compass" width="60" height="60"></canvas>
</div>
</div>
</div>
<!--
The guns (docs/TODO/215 M1): the laser, the missile as two buttons,
and the E.C.M., in a row at the bottom of the console. Chris drew it
there on 2026-09-13, so the sky is the sky. The laser button holds
its key while it is held (engine/hold-buttons.ts). The rest send
their data-key on a click. The missile squares that sat beside the
compass went with it: the count is on the arm button.
-->
<div id="guns"></div>
</div>
<div id="screen" class="hidden"></div>
<div id="help" class="hidden">
<h1>HARMLESS — CONTROLS</h1>
<div class="help-grid">
<div>
<!--
The command rows are PAINTED, not written: ui/key-help.ts fills
every host below from `BINDINGS` and `COMMAND_HELP`, so this panel
cannot advertise a key the game does not have or miss one it does.
Hand-maintained, it missed four: the distress beacon, ⇧Y, and
contracts and the briefing on the docked table — and the first two
were in no in-game surface at all. The flight AXES stay here
because they change with the layout and keymap.ts rewrites them.
-->
<h3>FLIGHT</h3>
<table>
<tr><td id="help-pitch">S / X · ↑ / ↓</td><td id="help-pitch-desc">dive / climb (1984 style)</td></tr>
<tr><td id="help-roll">, / . · ← / →</td><td>roll</td></tr>
<tr><td id="help-decel">SPACE · /</td><td>accelerate · decelerate</td></tr>
<tr><td id="help-fire">A (or F)</td><td>fire laser</td></tr>
</table>
<div id="help-flight"></div>
<h3>COMBAT</h3>
<div id="help-combat"></div>
<h3>NAVIGATION</h3>
<div id="help-navigation"></div>
<h3>ANY TIME</h3>
<div id="help-anywhere"></div>
</div>
<div>
<h3>DOCKED</h3>
<div id="help-docked"></div>
<h3>NEW COMMANDER (FROM THE STATION MENU)</h3>
<div id="help-confirm"></div>
<h3>GALACTIC JUMP WITH MISSIONS HELD (⇧H, FLIGHT)</h3>
<div id="help-confirm-jump"></div>
<h3>COMMANDER FILE (FROM THE STATION MENU)</h3>
<table>
<tr><td>S</td><td>save under a name — the same name replaces it, asking first</td></tr>
<tr><td>ENTER</td><td>load the selected save — it says what that costs first</td></tr>
<tr><td>D</td><td>delete the selected save (confirms)</td></tr>
<tr><td>R</td><td>change what you are called — your saves stay where they are</td></tr>
<tr><td>▶</td><td>a save belonging to the commander you are flying</td></tr>
</table>
<h3>AFTER A DEATH</h3>
<div id="help-dead"></div>
<h3>COMBAT SIMULATOR</h3>
<div id="help-simulator"></div>
<p class="note">Your ship flies exactly as it does outside, minus every way
out of the arena: no hyperspace, no beacon, no jettison, no docking computer.</p>
<table>
<tr><td>T</td><td>open it (docked) — free, at every station</td></tr>
<tr><td>↑ ↓ · ← →</td><td>pick a row · change it</td></tr>
<tr><td>HOME / END</td><td>first · last value of a long list (brains, hulls)</td></tr>
<tr><td>ENTER</td><td>launch the exercise</td></tr>
<tr><td>R</td><td>random seed (blank = a fresh fight each launch)</td></tr>
<tr><td>A / X</td><td>add · remove a custom opponent group</td></tr>
<tr><td>L</td><td>the last report, once you have flown one</td></tr>
<tr><td>C / X</td><td>report: copy JSON · export a file (⇧X all records)</td></tr>
<tr><td>← →</td><td>report: another record from the ring</td></tr>
<tr><td>ENTER</td><td>report: compare two records — ←→ picks the other,
C / X take the pair, ESC back</td></tr>
</table>
<h3>CONSOLE LIGHTS</h3>
<table>
<tr><td>S</td><td>station within scanner range</td></tr>
<tr><td>E</td><td>E.C.M. broadcast detected</td></tr>
</table>
<h3>IN SCREENS</h3>
<table>
<tr><td>↑ ↓</td><td>select item</td></tr>
<tr><td>B / V</td><td>buy / sell (market)</td></tr>
<tr><td>CLICK</td><td>target a system (charts)</td></tr>
<tr><td>D</td><td>data on system (charts / docked)</td></tr>
<tr><td>ARROWS + ENTER</td><td>chart cursor · set target</td></tr>
<tr><td>F / M</td><td>find by name / market estimate (charts)</td></tr>
<tr><td>ESC</td><td>back</td></tr>
</table>
</div>
</div>
<p><span id="help-layout">ACTIVE LAYOUT: CLASSIC — KEYBOARD LAYOUT on the station menu switches it</span><br/>
VIEWS ON 1-4 (WERE F0-F3) AND SCREENS ON LETTERS (WERE F4-F9) IN BOTH LAYOUTS</p>
<!-- The guide is reachable from anywhere in flight and when docked, so
the shared build/issues footer (vite.config.ts fills the marker)
lands at its foot. -->
<p><!--BUILD-FOOTER--></p>
</div>
<canvas id="tunnel"></canvas>
<div id="scanlines"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>