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

cleanup modal state

Browse source
This commit is contained in:
Robin Appelman 2024-12-07 13:45:39 +01:00
commit d699095369
1 changed files with 16 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -18,6 +18,13 @@ import {DemoHead} from "../../header";
import {EventSearch} from "./EventSearch"; import {EventSearch} from "./EventSearch";
import {Event} from "./Data/Parser"; import {Event} from "./Data/Parser";
enum ModalState {
Closed,
Help,
Goto,
Search,
}
export interface AnalyseProps { export interface AnalyseProps {
header: DemoHead; header: DemoHead;
isStored: boolean; isStored: boolean;
@ -37,15 +44,11 @@ export const Analyser = (props: AnalyseProps) => {
const [playing, setPlaying] = createSignal<boolean>(false); const [playing, setPlaying] = createSignal<boolean>(false);
const [sessionName, setSessionName] = createSignal<string>(""); const [sessionName, setSessionName] = createSignal<string>("");
const [clients, setClients] = createSignal<number>(0); const [clients, setClients] = createSignal<number>(0);
const [helpOpen, setHelpOpen] = createSignal<boolean>(false); const [modalState, setModalState] = createSignal<ModalState>(ModalState.Closed);
const [gotoOpen, setGotoOpen] = createSignal<boolean>(false);
const [searchOpen, setSearchOpen] = createSignal<boolean>(false);
const [search, setSearch] = createSignal<string>(''); const [search, setSearch] = createSignal<string>('');
const [gotoInput, setGotoInput] = createSignal<number>(0); const [gotoInput, setGotoInput] = createSignal<number>(0);
const closeDialogs = () => { const closeDialogs = () => {
setHelpOpen(false); setModalState(ModalState.Closed);
setGotoOpen(false);
setSearchOpen(false);
}; };
createEffect(() => { createEffect(() => {
@ -53,8 +56,7 @@ export const Analyser = (props: AnalyseProps) => {
untrack(() => { untrack(() => {
if (e) { if (e) {
const dialogOpen = searchOpen() | gotoOpen(); if (modalState() === ModalState.Closed) {
if (!dialogOpen) {
if (e.key === '.') { if (e.key === '.') {
seek(1); seek(1);
e.preventDefault(); e.preventDefault();
@ -76,22 +78,16 @@ export const Analyser = (props: AnalyseProps) => {
e.preventDefault(); e.preventDefault();
} }
if (e.key === '?') { if (e.key === '?') {
setHelpOpen(true); setModalState(ModalState.Help);
setGotoOpen(false);
setSearchOpen(false);
e.preventDefault(); e.preventDefault();
} }
} }
if (!inShared && e.getModifierState("Control") && e.key === 'g') { if (!inShared && e.getModifierState("Control") && e.key === 'g') {
setHelpOpen(false); setModalState(ModalState.Goto);
setGotoOpen(true);
setSearchOpen(false);
e.preventDefault(); e.preventDefault();
} }
if (!inShared && e.getModifierState("Control") && e.key === 'f') { if (!inShared && e.getModifierState("Control") && e.key === 'f') {
setHelpOpen(false); setModalState(ModalState.Search);
setGotoOpen(false);
setSearchOpen(true);
e.preventDefault(); e.preventDefault();
} }
if (e.key === 'Escape') { if (e.key === 'Escape') {
@ -280,7 +276,7 @@ export const Analyser = (props: AnalyseProps) => {
})} })}
disabled={inShared}/> disabled={inShared}/>
</div> </div>
<Modal isOpen={helpOpen()} onCloseRequest={() => setHelpOpen(false)} <Modal isOpen={modalState() === ModalState.Help} onCloseRequest={() => setModalState(ModalState.Closed)}
closeOnOutsideClick={true} overlayClass="modal-overlay" contentClass="modal-content"> closeOnOutsideClick={true} overlayClass="modal-overlay" contentClass="modal-content">
<h4>Keyboard Shortcuts</h4> <h4>Keyboard Shortcuts</h4>
<table class="shortcuts"> <table class="shortcuts">
@ -327,7 +323,7 @@ export const Analyser = (props: AnalyseProps) => {
</tbody> </tbody>
</table> </table>
</Modal> </Modal>
<Modal isOpen={gotoOpen()} onCloseRequest={() => setGotoOpen(false)} <Modal isOpen={modalState() === ModalState.Goto} onCloseRequest={() => setModalState(ModalState.Closed)}
closeOnOutsideClick={true} overlayClass="modal-overlay" contentClass="modal-content"> closeOnOutsideClick={true} overlayClass="modal-overlay" contentClass="modal-content">
<h4>Goto Tick</h4> <h4>Goto Tick</h4>
<form use:formSubmit={gotoTickSubmitted} class="goto"> <form use:formSubmit={gotoTickSubmitted} class="goto">
@ -336,7 +332,7 @@ export const Analyser = (props: AnalyseProps) => {
ref={autofocus} autofocus type="text" inputmode="numeric" min={0} max={lastTick - 1}/> ref={autofocus} autofocus type="text" inputmode="numeric" min={0} max={lastTick - 1}/>
</form> </form>
</Modal> </Modal>
<Modal isOpen={searchOpen()} onCloseRequest={() => setSearchOpen(false)} <Modal isOpen={modalState() === ModalState.Search} onCloseRequest={() => setModalState(ModalState.Closed)}
closeOnOutsideClick={true} overlayClass="modal-overlay" contentClass="modal-content"> closeOnOutsideClick={true} overlayClass="modal-overlay" contentClass="modal-content">
<EventSearch <EventSearch
players={players()} players={players()}