hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add pending flag

Browse source
This commit is contained in:
Felix Roos 2022-02-27 20:24:03 +01:00
parent f361b50f7f
commit 5f424e7113
2 changed files with 12 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

14
repl/src/App.tsx
View file

@ -37,11 +37,12 @@ const randomTune = getRandomTune();
function App() { function App() {
const [editor, setEditor] = useState<any>(); const [editor, setEditor] = useState<any>();
const { setCode, setPattern, error, code, cycle, dirty, log, togglePlay, activateCode, pattern, pushLog } = useRepl({ const { setCode, setPattern, error, code, cycle, dirty, log, togglePlay, activateCode, pattern, pushLog, pending } =
tune: decoded || randomTune, useRepl({
defaultSynth, tune: decoded || randomTune,
onDraw: useCallback(markEvent(editor), [editor]), defaultSynth,
}); onDraw: useCallback(markEvent(editor), [editor]),
});
const logBox = useRef<any>(); const logBox = useRef<any>();
// scroll log box to bottom when log changes // scroll log box to bottom when log changes
useLayoutEffect(() => { useLayoutEffect(() => {
@ -56,7 +57,6 @@ function App() {
switch (e.code) { switch (e.code) {
case 'Enter': case 'Enter':
await activateCode(); await activateCode();
!cycle.started && cycle.start();
break; break;
case 'Period': case 'Period':
cycle.stop(); cycle.stop();
@ -133,7 +133,7 @@ function App() {
className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500" className="flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500"
onClick={() => togglePlay()} onClick={() => togglePlay()}
> >
{cycle.started ? 'pause' : 'play'} {!pending ? <>{cycle.started ? 'pause' : 'play'}</> : <>loading...</>}
</button> </button>
<textarea <textarea
className="grow bg-[#283237] border-0 text-xs min-h-[200px]" className="grow bg-[#283237] border-0 text-xs min-h-[200px]"

5
repl/src/useRepl.ts
View file

@ -17,6 +17,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any)
const [activeCode, setActiveCode] = useState<string>(); const [activeCode, setActiveCode] = useState<string>();
const [log, setLog] = useState(''); const [log, setLog] = useState('');
const [error, setError] = useState<Error>(); const [error, setError] = useState<Error>();
const [pending, setPending] = useState(false);
const [hash, setHash] = useState(''); const [hash, setHash] = useState('');
const [pattern, setPattern] = useState<Pattern>(); const [pattern, setPattern] = useState<Pattern>();
const dirty = code !== activeCode || error; const dirty = code !== activeCode || error;
@ -24,9 +25,11 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any)
const activateCode = async (_code = code) => { const activateCode = async (_code = code) => {
if (activeCode && !dirty) { if (activeCode && !dirty) {
setError(undefined); setError(undefined);
!cycle.started && cycle.start();
return; return;
} }
try { try {
setPending(true);
const parsed = await evaluate(_code); const parsed = await evaluate(_code);
!cycle.started && cycle.start(); !cycle.started && cycle.start();
broadcast({ type: 'start', from: id }); broadcast({ type: 'start', from: id });
@ -37,6 +40,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any)
setHash(generateHash()); setHash(generateHash());
setError(undefined); setError(undefined);
setActiveCode(_code); setActiveCode(_code);
setPending(false);
} catch (err: any) { } catch (err: any) {
err.message = 'evaluation error: ' + err.message; err.message = 'evaluation error: ' + err.message;
console.warn(err); console.warn(err);
@ -145,6 +149,7 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw }: any)
}; };
return { return {
pending,
code, code,
setCode, setCode,
pattern, pattern,