diff --git a/images/help.svg b/images/help.svg new file mode 100644 index 0000000..d3a9cfc --- /dev/null +++ b/images/help.svg @@ -0,0 +1 @@ + diff --git a/package-lock.json b/package-lock.json index 8715fb5..e8b2dd9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 30b8645..bb3deef 100644 --- 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 index 3b163dd..e837acc 100644 --- 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) { +
  • + +
    • diff --git a/script/viewer/Analyse/Analyser.tsx b/script/viewer/Analyse/Analyser.tsx index f5514e4..164ed4b 100644 --- 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(false); const [sessionName, setSessionName] = createSignal(""); const [clients, setClients] = createSignal(0); + const [helpOpen, setHelpOpen] = createSignal(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}/> + setHelpOpen(false)} + closeOnOutsideClick={true}> +

    Keyboard Shortcuts

    + + + + + + + + + + + + + + + + + + + + + + + +
    .Next tick
    ,Previous tick
    ⇒0.5s forward
    ⇐0.5s backwards
    SpacebarPlay/Pause
    +     ); } diff --git a/style/pages/viewer/AnalyseMenu.css b/style/pages/viewer/AnalyseMenu.css index f7dcf74..214223b 100644 --- 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,48 @@ ul { padding: 0; margin: 0; + + button { + background: transparent; + color: var(--primary-color); + padding-left: 32px; + height: 24px; + margin: 10px; + border: none; + cursor: pointer; + background-size: contain; + background-repeat: 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; } } \ No newline at end of file