-
diff --git a/packages/react/src/components/style.css b/packages/react/src/components/style.css
index 767aa71d..d3aed9d7 100644
--- a/packages/react/src/components/style.css
+++ b/packages/react/src/components/style.css
@@ -2,7 +2,7 @@
background-color: transparent !important;
height: 100%;
z-index: 11;
- font-size: 16px;
+ font-size: 18px;
}
.cm-theme-light {
diff --git a/packages/react/src/hooks/useCycle.mjs b/packages/react/src/hooks/useCycle.mjs
deleted file mode 100644
index 5a68c9da..00000000
--- a/packages/react/src/hooks/useCycle.mjs
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
-useCycle.mjs -
- {!hideHeader && (
-
-
- )}
-
-
+
+
+ {error && (
+
+
);
}
export default App;
+
+export function useEvent(name, onTrigger, useCapture = false) {
+ useEffect(() => {
+ document.addEventListener(name, onTrigger, useCapture);
+ return () => {
+ document.removeEventListener(name, onTrigger, useCapture);
+ };
+ }, [onTrigger]);
+}
+function useKeydown(onTrigger) {
+ useEvent('keydown', onTrigger, true);
+}
diff --git a/repl/src/Footer.jsx b/repl/src/Footer.jsx
new file mode 100644
index 00000000..b3f0ddb0
--- /dev/null
+++ b/repl/src/Footer.jsx
@@ -0,0 +1,196 @@
+import XMarkIcon from '@heroicons/react/20/solid/XMarkIcon';
+import { logger } from '@strudel.cycles/core';
+import { cx } from '@strudel.cycles/react';
+import { nanoid } from 'nanoid';
+import React, { useContext, useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useEvent, loadedSamples, AppContext } from './App';
+import { Reference } from './Reference';
+
+export function Footer() {
+ // const [activeFooter, setActiveFooter] = useState('console');
+ const { activeFooter, setActiveFooter, isZen } = useContext(AppContext);
+ const footerContent = useRef();
+ const [log, setLog] = useState([]);
+
+ useLayoutEffect(() => {
+ if (footerContent.current && activeFooter === 'console') {
+ // scroll log box to bottom when log changes
+ footerContent.current.scrollTop = footerContent.current?.scrollHeight;
+ }
+ }, [log, activeFooter]);
+ useLayoutEffect(() => {
+ if (!footerContent.current) {
+ } else if (activeFooter === 'console') {
+ footerContent.current.scrollTop = footerContent.current?.scrollHeight;
+ } else {
+ footerContent.current.scrollTop = 0;
+ }
+ }, [activeFooter]);
+
+ useLogger(
+ useCallback((e) => {
+ const { message, type, data } = e.detail;
+ setLog((l) => {
+ const lastLog = l.length ? l[l.length - 1] : undefined;
+ const id = nanoid(12);
+ // if (type === 'loaded-sample' && lastLog.type === 'load-sample' && lastLog.url === data.url) {
+ if (type === 'loaded-sample') {
+ // const loadIndex = l.length - 1;
+ const loadIndex = l.findIndex(({ data: { url }, type }) => type === 'load-sample' && url === data.url);
+ l[loadIndex] = { message, type, id, data };
+ } else if (lastLog && lastLog.message === message) {
+ l = l.slice(0, -1).concat([{ message, type, count: (lastLog.count ?? 1) + 1, id, data }]);
+ } else {
+ l = l.concat([{ message, type, id, data }]);
+ }
+ return l.slice(-20);
+ });
+ }, []),
+ );
+
+ const FooterTab = ({ children, name, label }) => (
+ <>
+
- 
-
- Strudel {isEmbedded ? 'Mini ' : ''}REPL
-
-
-
- {!isEmbedded && (
-
- )}
- {!isEmbedded && (
-
- )}
- {!isEmbedded && (
-
- )}
- {isEmbedded && (
-
- )}
- {isEmbedded && (
-
- )}
-
-
- {/* onCursor={markParens} */}
-
- {!isEmbedded && !hideConsole && (
-
+ // bg-gradient-to-t from-blue-900 to-slate-900
+ // bg-gradient-to-t from-green-900 to-slate-900
+
- {error?.message || 'unknown error'}
-
- )}
-
- {/* !isEmbedded && (
-
- ) */}
-
+ >
+ {error.message || 'Unknown Error :-/'}
+ )}
+
+ setActiveFooter(name)}
+ className={cx(
+ 'h-8 px-2 text-white cursor-pointer hover:text-tertiary flex items-center space-x-1 border-b',
+ activeFooter === name ? 'border-white hover:border-tertiary' : 'border-transparent',
+ )}
+ >
+ {label || name}
+
+ {activeFooter === name && <>{children}}
+
+ );
+ if (isZen) {
+ return null;
+ }
+ return (
+
+ );
+}
+
+function useLogger(onTrigger) {
+ useEvent(logger.key, onTrigger);
+}
+
+function linkify(inputText) {
+ var replacedText, replacePattern1, replacePattern2, replacePattern3;
+
+ //URLs starting with http://, https://, or ftp://
+ replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
+ replacedText = inputText.replace(replacePattern1, '$1');
+
+ //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
+ replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+ replacedText = replacedText.replace(
+ replacePattern2,
+ '$1$2',
+ );
+
+ //Change email addresses to mailto:: links.
+ replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
+ replacedText = replacedText.replace(replacePattern3, '$1');
+
+ return replacedText;
+}
diff --git a/repl/src/Header.jsx b/repl/src/Header.jsx
new file mode 100644
index 00000000..0182fee5
--- /dev/null
+++ b/repl/src/Header.jsx
@@ -0,0 +1,140 @@
+import AcademicCapIcon from '@heroicons/react/20/solid/AcademicCapIcon';
+import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
+import LinkIcon from '@heroicons/react/20/solid/LinkIcon';
+import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon';
+import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon';
+import StopCircleIcon from '@heroicons/react/20/solid/StopCircleIcon';
+import { cx } from '@strudel.cycles/react';
+import React, { useContext } from 'react';
+import { AppContext } from './App';
+import './App.css';
+
+const isEmbedded = window.location !== window.parent.location;
+
+export function Header() {
+ const {
+ started,
+ pending,
+ isDirty,
+ lastShared,
+ activeCode,
+ handleTogglePlay,
+ handleUpdate,
+ handleShuffle,
+ handleShare,
+ isZen,
+ setIsZen,
+ } = useContext(AppContext);
+ return (
+
+ {/* */}
+
+
+
+ {!isZen && (
+
+ setIsZen((z) => !z)}
+ >
+ 🌀
+
+ {!isZen && (
+
+ strudel REPL
+
+ )}
+
+
+
+
+ {!isEmbedded && (
+
+ )}
+ {!isEmbedded && (
+
+
+ )}
+
+
+ );
+}
diff --git a/repl/src/prebake.mjs b/repl/src/prebake.mjs
index 0e5bb0d9..97443dcf 100644
--- a/repl/src/prebake.mjs
+++ b/repl/src/prebake.mjs
@@ -5,13 +5,15 @@ export async function prebake({ isMock = false, baseDir = '.' } = {}) {
if (!isMock) {
// https://archive.org/details/SalamanderGrandPianoV3
// License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm
- samples('piano.json', `${baseDir}/piano/`);
- // https://github.com/sgossner/VCSL/
- // https://api.github.com/repositories/126427031/contents/
- // LICENSE: CC0 general-purpose
- samples('vcsl.json', 'github:sgossner/VCSL/master/');
- samples('tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/');
- samples('EmuSP12.json', `${baseDir}/EmuSP12/`);
+ return await Promise.all([
+ samples('piano.json', `${baseDir}/piano/`),
+ // https://github.com/sgossner/VCSL/
+ // https://api.github.com/repositories/126427031/contents/
+ // LICENSE: CC0 general-purpose
+ samples('vcsl.json', 'github:sgossner/VCSL/master/'),
+ samples('tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/'),
+ samples('EmuSP12.json', `${baseDir}/EmuSP12/`),
+ ]);
}
}
diff --git a/repl/src/runtime.mjs b/repl/src/runtime.mjs
index 81fdc2d6..8945f1a8 100644
--- a/repl/src/runtime.mjs
+++ b/repl/src/runtime.mjs
@@ -3,8 +3,8 @@
// it might require mocking more stuff when tunes added that use other functions
// import * as tunes from './tunes.mjs';
-import { evaluate } from '@strudel.cycles/eval';
-// import { evaluate } from '@strudel.cycles/transpiler';
+// import { evaluate } from '@strudel.cycles/eval';
+import { evaluate } from '@strudel.cycles/transpiler';
import { evalScope } from '@strudel.cycles/core';
import * as strudel from '@strudel.cycles/core';
import * as webaudio from '@strudel.cycles/webaudio';
diff --git a/repl/src/test/__snapshots__/tunes.test.mjs.snap b/repl/src/test/__snapshots__/tunes.test.mjs.snap
index 609c2087..cb43a340 100644
--- a/repl/src/test/__snapshots__/tunes.test.mjs.snap
+++ b/repl/src/test/__snapshots__/tunes.test.mjs.snap
@@ -8335,6 +8335,21 @@ exports[`renders tunes > tune: hyperpop 1`] = `
]
`;
+exports[`renders tunes > tune: juxUndTollerei 1`] = `
+[
+ "3/4 -> 1/1: {\\"note\\":\\"c3\\",\\"s\\":\\"sawtooth\\",\\"pan\\":0,\\"cutoff\\":1670.953955747281,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+ "1/2 -> 3/4: {\\"note\\":\\"eb3\\",\\"s\\":\\"sawtooth\\",\\"pan\\":0,\\"cutoff\\":1524.257063143398,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+ "1/4 -> 1/2: {\\"note\\":\\"g3\\",\\"s\\":\\"sawtooth\\",\\"pan\\":0,\\"cutoff\\":1361.2562095290161,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+ "0/1 -> 1/4: {\\"note\\":\\"bb3\\",\\"s\\":\\"sawtooth\\",\\"pan\\":0,\\"cutoff\\":1188.2154262966046,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+ "0/1 -> 1/4: {\\"note\\":\\"c3\\",\\"s\\":\\"sawtooth\\",\\"pan\\":1,\\"cutoff\\":1188.2154262966046,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+ "1/4 -> 1/2: {\\"note\\":\\"eb3\\",\\"s\\":\\"sawtooth\\",\\"pan\\":1,\\"cutoff\\":1361.2562095290161,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+ "1/2 -> 3/4: {\\"note\\":\\"g3\\",\\"s\\":\\"sawtooth\\",\\"pan\\":1,\\"cutoff\\":1524.257063143398,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+ "3/4 -> 1/1: {\\"note\\":\\"bb3\\",\\"s\\":\\"sawtooth\\",\\"pan\\":1,\\"cutoff\\":1670.953955747281,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+ "101/200 -> 201/200: {\\"note\\":65,\\"s\\":\\"triangle\\",\\"pan\\":0,\\"cutoff\\":1601.4815730092653,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+ "101/200 -> 201/200: {\\"note\\":55,\\"s\\":\\"triangle\\",\\"pan\\":1,\\"cutoff\\":1601.4815730092653,\\"decay\\":0.05,\\"sustain\\":0,\\"room\\":0.6,\\"delay\\":0.5,\\"delaytime\\":0.1,\\"delayfeedback\\":0.4}",
+]
+`;
+
exports[`renders tunes > tune: meltingsubmarine 1`] = `
[
"0/1 -> 3/2: {\\"s\\":\\"bd\\",\\"speed\\":0.7519542165100574}",
diff --git a/repl/src/tunes.mjs b/repl/src/tunes.mjs
index e19b5859..c9224d7a 100644
--- a/repl/src/tunes.mjs
+++ b/repl/src/tunes.mjs
@@ -308,7 +308,6 @@ export const blippyRhodes = `samples({
}
}, 'https://loophole-letters.vercel.app/')
-const bass = synth(osc('sawtooth8')).chain(vol(.5),out())
const scales = cat('C major', 'C mixolydian', 'F lydian', ['F minor', cat('Db major','Db mixolydian')])
stack(
@@ -950,7 +949,7 @@ export const flatrave = `stack(
.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(
// amen
@@ -981,3 +980,14 @@ stack(
,
n("0 1").s("east").delay(.5).degradeBy(.8).speed(rand.range(.5,1.5))
).reset("
+ {visibleFunctions.map((entry, i) => (
+
+ {entry.name} {/* {entry.meta.filename} */}
+
+ ))}
+
+
+
+
+
+
+ ))}
+
+ API Reference
++ This is the long list functions you can use! Remember that you don't need to remember all of those and that + you can already make music with a small set of functions! +
+ {visibleFunctions.map((entry, i) => ( +{entry.name}
+ {/* {entry.meta.filename} */} + + + {entry.examples?.map((example, j) => ( +{example}
+ ))}
+