begin reimplementing draw logic for parallel use

This commit is contained in:
Felix Roos 2022-12-26 20:58:57 +01:00
parent 0792d0d59d
commit 2d1b62a978
9 changed files with 550 additions and 250 deletions

View file

@ -22,7 +22,7 @@ if (typeof window !== 'undefined') {
prebake();
}
export function MiniRepl({ tune }) {
export function MiniRepl({ tune, withCanvas }) {
const [Repl, setRepl] = useState();
useEffect(() => {
// we have to load this package on the client
@ -31,5 +31,5 @@ export function MiniRepl({ tune }) {
setRepl(() => res.MiniRepl);
});
}, []);
return Repl ? <Repl tune={tune} hideOutsideView={true} /> : <pre>{tune}</pre>;
return Repl ? <Repl tune={tune} hideOutsideView={true} withCanvas={withCanvas} /> : <pre>{tune}</pre>;
}

View file

@ -15,7 +15,7 @@ Here's the same pattern written in three different ways:
- `note`: letter notation, good for those who are familiar with western music theory:
<MiniRepl client:idle tune={`note("a3 c#4 e4 a4")`} />
<MiniRepl client:idle tune={`note("a3 c#4 e4 a4")`} withCanvas />
- `n`: number notation, good for those who want to use recognisable pitches, but don't care about music theory: