demostf/frontend
1
0
Fork 0
mirror of https://codeberg.org/demostf/frontend.git synced 2026-06-03 18:24:12 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

keyboard shortcut help

Browse source
This commit is contained in:
Robin Appelman 2024-12-01 00:35:08 +01:00
commit 11c43d5057
6 changed files with 97 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

1
images/help.svg Normal file
View file

@ -0,0 +1 @@
<svg class="svg-icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M0 512a512 512 0 1 1 512 512A512 512 0 0 1 0 512zm128 0a384 384 0 1 0 384-384 384 384 0 0 0-384 384zm320 256a64 64 0 1 1 64 64 64 64 0 0 1-64-65zm47-130a64 64 0 0 1-45-78 202 202 0 0 1 80-106c32-27 46-38 46-70a64 64 0 0 0-128 0 64 64 0 1 1-128 0 192 192 0 0 1 384 0 146 146 0 0 1-64 128 138 138 0 0 0-66 80 63 63 0 0 1-62 48 64 64 0 0 1-16-2z" fill="#FFF"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 454 B

10
package-lock.json generated
View file

@ -7,6 +7,7 @@
"dependencies": {
"@demostf/edit": "0.2.0",
"@demostf/tf-demos-viewer": "^0.1.2",
"@lutaok/solid-modal": "^0.1.1",
"@solid-primitives/keyboard": "^1.2.8",
"@solid-primitives/resize-observer": "^2.0.15",
"@thisbeyond/solid-select": "^0.13.0",
@ -25,6 +26,15 @@
"resolved": "https://registry.npmjs.org/@demostf/tf-demos-viewer/-/tf-demos-viewer-0.1.2.tgz",
"integrity": "sha512-BeeUWsFmICuma2FWJK4gjrILwwdgZbeCm2TELZfcJDV4QYfmukI8weNdQb3RFurxcebFZ0IER9fA0oXAdiGYpw=="
},
"node_modules/@lutaok/solid-modal": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/@lutaok/solid-modal/-/solid-modal-0.1.1.tgz",
"integrity": "sha512-2fw3JgReT7xxDDnXxQoWV7N3ldHkFMj2eyNXQa3zvUmZeZ1/KZMRiMy7qZVXYedqxQW+mRSkY80V15P6s/wJlw==",
"license": "MIT",
"peerDependencies": {
"solid-js": "^1.4.0"
}
},
"node_modules/@solid-primitives/event-listener": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/@solid-primitives/event-listener/-/event-listener-2.3.3.tgz",

3
package.json
View file

@ -2,8 +2,9 @@
"dependencies": {
"@demostf/edit": "0.2.0",
"@demostf/tf-demos-viewer": "^0.1.2",
"@solid-primitives/resize-observer": "^2.0.15",
"@lutaok/solid-modal": "^0.1.1",
"@solid-primitives/keyboard": "^1.2.8",
"@solid-primitives/resize-observer": "^2.0.15",
"@thisbeyond/solid-select": "^0.13.0",
"@types/throttle-debounce": "^5.0.2",
"solid-js": "1.8.23",

6
script/viewer/Analyse/AnalyseMenu.tsx
View file

@ -6,6 +6,7 @@ export interface AnalyseMenuProps {
clients: number,
inShared: boolean,
open: boolean,
openHelp: Function;
}
export function AnalyseMenu(props: AnalyseMenuProps) {
@ -39,6 +40,11 @@ export function AnalyseMenu(props: AnalyseMenuProps) {
</Show>
</button>
</li>
<li>
<button class="help" title="Help" onClick={() => props.openHelp()}>
Help
</button>
</li>
</ul>
</details>
</Show>

36
script/viewer/Analyse/Analyser.tsx
View file

@ -5,6 +5,7 @@ import {Timeline} from './Render/Timeline';
import {SpecHUD} from './Render/SpecHUD';
import {AnalyseMenu} from './AnalyseMenu'
import {useKeyDownEvent} from "@solid-primitives/keyboard";
import Modal from "@lutaok/solid-modal";
import {AsyncParser} from "./Data/AsyncParser";
import {getMapBoundaries} from "./MapBoundries";
@ -18,9 +19,10 @@ export interface AnalyseProps {
parser: AsyncParser;
}
const event = useKeyDownEvent();
export const Analyser = (props: AnalyseProps) => {
const event = useKeyDownEvent();
const parser = props.parser;
const lastTick = parser.demo.tickCount - 1;
const intervalPerTick = props.header.duration / props.header.ticks;
@ -30,6 +32,7 @@ export const Analyser = (props: AnalyseProps) => {
const [playing, setPlaying] = createSignal<boolean>(false);
const [sessionName, setSessionName] = createSignal<string>("");
const [clients, setClients] = createSignal<number>(0);
const [helpOpen, setHelpOpen] = createSignal<boolean>(false);
createEffect(() => {
const e = event();
@ -208,6 +211,7 @@ export const Analyser = (props: AnalyseProps) => {
}, onUpdate);
setSessionName(session.sessionName);
}}
openHelp={() => setHelpOpen(true)}
canShare={props.isStored && !inShared}
isShared={isShared()}
clients={clients()}
@ -229,6 +233,34 @@ export const Analyser = (props: AnalyseProps) => {
})}
disabled={inShared}/>
</div>
<Modal class="help" isOpen={helpOpen()} onCloseRequest={() => setHelpOpen(false)}
closeOnOutsideClick={true}>
<h4>Keyboard Shortcuts</h4>
<table class="shortcuts">
<tbody>
<tr>
<td><kbd>.</kbd></td>
<td>Next tick</td>
</tr>
<tr>
<td><kbd>,</kbd></td>
<td>Previous tick</td>
</tr>
<tr>
<td><kbd>⇒</kbd></td>
<td>0.5s forward</td>
</tr>
<tr>
<td><kbd>⇐</kbd></td>
<td>0.5s backwards</td>
</tr>
<tr>
<td><kbd>Spacebar</kbd></td>
<td>Play/Pause</td>
</tr>
</tbody>
</table>
</Modal>
</div>
);
}

56
style/pages/viewer/AnalyseMenu.css
View file

@ -23,20 +23,11 @@
}
& button.share-session {
background: transparent;
color: var(--primary-color);
padding-left: 32px;
height: 24px;
margin: 10px;
border: none;
cursor: pointer;
background-image: url("inline://images//link_white.svg");
background-size: contain;
background-repeat: no-repeat;
}
&:active, &:focus {
outline: none;
}
& button.help {
background-image: url("inline://images//help.svg");
}
& input.share-text {
@ -78,5 +69,46 @@
ul {
padding: 0;
margin: 0;
button {
color: var(--primary-color);
padding-left: 32px;
height: 24px;
margin: 10px;
border: none;
cursor: pointer;
background-size: 24px;
background: transparent no-repeat;
&:active, &:focus {
outline: none;
}
}
}
}
.solid-modal-content h4 {
margin-top: 0;
}
kbd {
background-color: #eee;
border-radius: 3px;
border: 1px solid #b4b4b4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
color: #333;
display: inline-block;
font-size: 1.4em;
font-weight: 700;
line-height: 1;
padding: 2px 4px;
white-space: nowrap;
min-width: 1.5em;
text-align: center;
}
.shortcuts {
td:first-child {
text-align: center;
}
}