keyboard shortcut help

demostf · Dec 1, 2024 · d5abe52 · d5abe52
1 parent 0f857af
commit d5abe52
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 15 deletions.
diff --git a/images/help.svg b/images/help.svg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git a/script/viewer/Analyse/AnalyseMenu.tsx b/script/viewer/Analyse/AnalyseMenu.tsx
@@ -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>

diff --git a/script/viewer/Analyse/Analyser.tsx b/script/viewer/Analyse/Analyser.tsx
@@ -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>
     );
 }

diff --git a/style/pages/viewer/AnalyseMenu.css b/style/pages/viewer/AnalyseMenu.css
@@ -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: contain;
+            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;
     }
 }