elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-23 19:48:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

unfriend intro readers

Browse Source
This commit is contained in:
Felix Roos 2022-11-12 23:38:02 +01:00
parent 04f2b905af
commit ce6495a46d
2 changed files with 20 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
repl/src/App.jsx
View File

@ -140,6 +140,13 @@ function App() {
footerContent.current.scrollTop = footerContent.current?.scrollHeight; footerContent.current.scrollTop = footerContent.current?.scrollHeight;
} }
}, [log, activeFooter]); }, [log, activeFooter]);
useLayoutEffect(() => {
if (activeFooter === 'console') {
footerContent.current.scrollTop = footerContent.current?.scrollHeight;
} else {
footerContent.current.scrollTop = 0;
}
}, [activeFooter]);
const { code, setCode, scheduler, evaluate, activateCode, error, isDirty, activeCode, pattern, started, stop } = const { code, setCode, scheduler, evaluate, activateCode, error, isDirty, activeCode, pattern, started, stop } =
useStrudel({ useStrudel({
@ -147,13 +154,16 @@ function App() {
defaultOutput: webaudioOutput, defaultOutput: webaudioOutput,
getTime, getTime,
autolink: true, autolink: true,
onEvalError: () => {
setActiveFooter('console');
},
}); });
// init code // init code
useEffect(() => { useEffect(() => {
initCode().then((decoded) => { initCode().then((decoded) => {
logger( logger(
`🌀 Welcome to Strudel! ${ `Welcome to Strudel! ${
decoded ? `I have loaded the code from the URL.` : `A random code snippet named "${name}" has been loaded!` decoded ? `I have loaded the code from the URL.` : `A random code snippet named "${name}" has been loaded!`
} Press play or hit ctrl+enter to run it!`, } Press play or hit ctrl+enter to run it!`,
'highlight', 'highlight',
@ -232,6 +242,7 @@ function App() {
// copy shareUrl to clipboard // copy shareUrl to clipboard
navigator.clipboard.writeText(shareUrl); navigator.clipboard.writeText(shareUrl);
const message = `Link copied to clipboard: ${shareUrl}`; const message = `Link copied to clipboard: ${shareUrl}`;
alert(message);
// alert(message); // alert(message);
logger(message, 'highlight'); logger(message, 'highlight');
} else { } else {
@ -247,7 +258,7 @@ function App() {
started && logger('[edit] code changed. hit ctrl+enter to update'); started && logger('[edit] code changed. hit ctrl+enter to update');
}; };
const FooterTab = ({ children, name }) => ( const FooterTab = ({ children, name, label }) => (
<> <>
<div <div
onClick={() => setActiveFooter(name)} onClick={() => setActiveFooter(name)}
@ -256,7 +267,7 @@ function App() {
activeFooter === name ? 'border-white hover:border-tertiary' : 'border-transparent', activeFooter === name ? 'border-white hover:border-tertiary' : 'border-transparent',
)} )}
> >
{name} {label || name}
</div> </div>
{activeFooter === name && <>{children}</>} {activeFooter === name && <>{children}</>}
</> </>
@ -381,7 +392,7 @@ function App() {
<div className="flex pb-2 select-none"> <div className="flex pb-2 select-none">
<FooterTab name="intro" /> <FooterTab name="intro" />
<FooterTab name="samples" /> <FooterTab name="samples" />
<FooterTab name="console" /> <FooterTab name="console" label={`console (${log.length})`} />
</div> </div>
{activeFooter !== '' && ( {activeFooter !== '' && (
<button onClick={() => setActiveFooter('')} className="text-white"> <button onClick={() => setActiveFooter('')} className="text-white">
@ -395,15 +406,15 @@ function App() {
ref={footerContent} ref={footerContent}
> >
{activeFooter === 'intro' && ( {activeFooter === 'intro' && (
<div className="prose prose-invert pt-2 font-sans pb-8"> <div className="prose prose-invert max-w-[600px] pt-2 font-sans pb-8">
<h3> <h3>
<span className={cx('animate-spin inline-block')}>😻</span> Hello Friend <span className={cx('animate-spin inline-block select-none')}>🌀</span> welcome
</h3> </h3>
<p> <p>
You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic You have found <span className="underline">strudel</span>, a new live coding platform to write dynamic
music pieces in the browser! It is free and open-source and made for beginners and experts alike. music pieces in the browser! It is free and open-source and made for beginners and experts alike. To
get started:
<br /> <br />
To get started:
<br /> <br />
<span className="underline">1. hit play</span> -{' '} <span className="underline">1. hit play</span> -{' '}
<span className="underline">2. change something</span> -{' '} <span className="underline">2. change something</span> -{' '}

2
repl/src/tunes.mjs
View File

@ -949,7 +949,7 @@ export const flatrave = `stack(
.decay(.05).sustain(0).delay(.2).degradeBy(.5).mask("<0 1>/16") .decay(.05).sustain(0).delay(.2).degradeBy(.5).mask("<0 1>/16")
)`; )`;
export const amensister = `samples('github:tidalcycles/Dirt-Samples/master') export const amensister = `await samples('github:tidalcycles/Dirt-Samples/master')
stack( stack(
// amen // amen