UI infrastructure and simple "Help" dialog (#3)

Sets up some WIP infrastructure for building out the UI, and adds a simple popup
to show the navigation controls for the app.
This commit is contained in:
Danny McGee
2023-10-09 22:19:58 -04:00
committed by GitHub
parent 57d64f08f0
commit c84fd31387
40 changed files with 1608 additions and 590 deletions
+49
View File
@@ -0,0 +1,49 @@
import { LitElement, html, unsafeCSS } from "lit";
import { customElement } from "lit/decorators.js";
import styles from "./help.element.scss?inline";
@customElement("sts-help")
export class HelpElement extends LitElement {
static override styles = unsafeCSS(styles);
protected override render = () => html`
<table>
<thead>
<tr>
<th>Action</th>
<th>Controls</th>
<th>Alternate</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pan view</td>
<td colspan="2">MMB</td>
</tr>
<tr>
<td>Orbit around point</td>
<td colspan="2">Alt + LMB</td>
</tr>
<tr>
<td>Zoom</td>
<td>Alt + RMB</td>
<td>Mouse Wheel</td>
</tr>
<tr>
<td>Free fly</td>
<td colspan="2">W, A, S, D</td>
</tr>
<tr>
<td style="padding-left: 20px">Up / Down</td>
<td colspan="2">E, Q</td>
</tr>
<tr>
<td>Free look</td>
<td>RMB</td>
<td>Shift</td>
</tr>
</tbody>
</table>
`;
}