mirror of
https://github.com/storytold/storyteller-bevy.git
synced 2026-10-20 07:54:50 +00:00
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:
@@ -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>
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user