basic viewer keyboard shortcuts

package-lock.json

@@ -7,6 +7,7 @@
       "dependencies": {
         "@demostf/edit": "0.2.0",
         "@demostf/tf-demos-viewer": "^0.1.2",
+        "@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",
@@ -36,6 +37,20 @@
         "solid-js": "^1.6.12"
       }
     },
+    "node_modules/@solid-primitives/keyboard": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@solid-primitives/keyboard/-/keyboard-1.2.8.tgz",
+      "integrity": "sha512-pJtcbkjozS6L1xvTht9rPpyPpX55nAkfBzbFWdf3y0Suwh6qClTibvvObzKOf7uzQ+8aZRDH4LsoGmbTKXtJjQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@solid-primitives/event-listener": "^2.3.3",
+        "@solid-primitives/rootless": "^1.4.5",
+        "@solid-primitives/utils": "^6.2.3"
+      },
+      "peerDependencies": {
+        "solid-js": "^1.6.12"
+      }
+    },
     "node_modules/@solid-primitives/resize-observer": {
       "version": "2.0.26",
       "resolved": "https://registry.npmjs.org/@solid-primitives/resize-observer/-/resize-observer-2.0.26.tgz",

package.json

@@ -3,6 +3,7 @@
     "@demostf/edit": "0.2.0",
     "@demostf/tf-demos-viewer": "^0.1.2",
     "@solid-primitives/resize-observer": "^2.0.15",
+    "@solid-primitives/keyboard": "^1.2.8",
     "@thisbeyond/solid-select": "^0.13.0",
     "@types/throttle-debounce": "^5.0.2",
     "solid-js": "1.8.23",

script/viewer/Analyse/Analyser.tsx

@@ -4,10 +4,11 @@ import {throttle, debounce} from 'throttle-debounce';
 import {Timeline} from './Render/Timeline';
 import {SpecHUD} from './Render/SpecHUD';
 import {AnalyseMenu} from './AnalyseMenu'
+import {useKeyDownEvent} from "@solid-primitives/keyboard";
 
 import {AsyncParser} from "./Data/AsyncParser";
 import {getMapBoundaries} from "./MapBoundries";
-import {createSignal} from "solid-js";
+import {createEffect, createSignal, untrack} from "solid-js";
 import {Session, StateUpdate} from "./Session";
 import {DemoHead} from "../../header";
 
@@ -17,8 +18,11 @@ export interface AnalyseProps {
     parser: AsyncParser;
 }
 
+const event = useKeyDownEvent();
+
 export const Analyser = (props: AnalyseProps) => {
     const parser = props.parser;
+    const lastTick = parser.demo.tickCount - 1;
     const intervalPerTick = props.header.duration / props.header.ticks;
 
     const [tick, setTick] = createSignal<number>(0);
@@ -27,6 +31,31 @@ export const Analyser = (props: AnalyseProps) => {
     const [sessionName, setSessionName] = createSignal<string>("");
     const [clients, setClients] = createSignal<number>(0);
 
+    createEffect(() => {
+        const e = event();
+
+        untrack(() => {
+            if (e) {
+                if (e.key === '.') {
+                    seek(1);
+                }
+                if (e.key === ',') {
+                    seek(-1);
+                }
+                if (e.key === 'ArrowRight') {
+                    seek(15);
+                }
+                if (e.key === 'ArrowLeft') {
+                    seek(-15);
+                }
+                if (e.key === ' ') {
+                    togglePlay();
+                }
+                e.preventDefault();
+            }
+        });
+    });
+
     let lastFrameTime = 0;
     let playStartTick = 0;
     let playStartTime = 0;
@@ -52,7 +81,9 @@ export const Analyser = (props: AnalyseProps) => {
     if (props.isStored && window.location.hash) {
         const parsed = parseInt(window.location.hash.substr(1), 10);
         if (('#' + parsed) === window.location.hash) {
+            if (parsed > 0 && parsed < lastTick) {
                 setTick(Math.floor(parsed));
+            }
         } else {
             const name = window.location.hash.substring(1);
             session = Session.join(name, onUpdate);
@@ -70,6 +101,13 @@ export const Analyser = (props: AnalyseProps) => {
         height: backgroundBoundaries.boundary_max.y - backgroundBoundaries.boundary_min.y,
     };
 
+    const seek = (offset) => {
+        console.log(lastTick, tick(), tick() + offset);
+        const target = Math.max(0, Math.min(lastTick, tick() + offset));
+        console.log(target);
+        setTickNow(target);
+    }
+
     const setTickNow = (tick) => {
         lastFrameTime = 0;
         playStartTick = tick;
@@ -126,7 +164,7 @@ export const Analyser = (props: AnalyseProps) => {
         const timePassed = (timestamp - playStartTime) / 1000;
         const targetTick = playStartTick + (Math.round(timePassed / intervalPerTick));
         lastFrameTime = timestamp;
-        if (targetTick >= (parser.demo.tick - 1)) {
+        if (targetTick >= (lastTick)) {
             pause();
         }
         setHash(targetTick);