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

build

Browse source
This commit is contained in:
Felix Roos 2022-02-18 21:58:15 +01:00
parent 57bddf9189
commit d26467d0de
12 changed files with 110588 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

142
docs/dist/App.js vendored
View file

@ -1,14 +1,12 @@
import React, {useCallback, useEffect, useLayoutEffect, useRef, useState} from "../_snowpack/pkg/react.js";
import logo from "./logo.svg.proxy.js";
import cx from "./cx.js";
import React, {useCallback, useLayoutEffect, useRef} from "../_snowpack/pkg/react.js";
import * as Tone from "../_snowpack/pkg/tone.js";
import useCycle from "./useCycle.js";
import * as tunes from "./tunes.js";
import {evaluate} from "./evaluate.js";
import CodeMirror from "./CodeMirror.js";
import hot from "../hot.js";
import {isNote} from "../_snowpack/pkg/tone.js";
import cx from "./cx.js";
import {evaluate} from "./evaluate.js";
import logo from "./logo.svg.proxy.js";
import {useWebMidi} from "./midi.js";
import * as tunes from "./tunes.js";
import useRepl from "./useRepl.js";
const [_, codeParam] = window.location.href.split("#");
let decoded;
try {
@ -16,11 +14,6 @@ try {
} catch (err) {
console.warn("failed to decode", err);
}
const getHotCode = async () => {
return fetch("/hot.js").then((res) => res.text()).then((src) => {
return src.split("export default").slice(-1)[0].trim();
});
};
const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destination);
defaultSynth.set({
oscillator: {type: "triangle"},
@ -35,76 +28,14 @@ function getRandomTune() {
}
const randomTune = getRandomTune();
function App() {
const [code, setCode] = useState(decoded || randomTune);
const [activeCode, setActiveCode] = useState();
const [log, setLog] = useState("");
const logBox = useRef();
const [error, setError] = useState();
const [pattern, setPattern] = useState();
const [activePattern, setActivePattern] = useState();
const dirty = code !== activeCode;
const activateCode = (_code = code) => {
!cycle.started && cycle.start();
if (activeCode && !dirty) {
setError(void 0);
return;
}
try {
const parsed = evaluate(_code);
setPattern(() => parsed.pattern);
activatePattern(parsed.pattern);
setError(void 0);
setActiveCode(_code);
} catch (err) {
setError(err);
}
};
const activatePattern = (_pattern) => {
try {
setActivePattern(() => _pattern);
window.location.hash = "#" + encodeURIComponent(btoa(code));
} catch (err) {
setError(err);
}
};
const [isHot, setIsHot] = useState(false);
const pushLog = (message) => setLog((log2) => log2 + `${log2 ? "\n\n" : ""}${message}`);
const logCycle = (_events, cycle2) => {
if (_events.length) {
pushLog(`# cycle ${cycle2}
` + _events.map((e) => e.show()).join("\n"));
}
};
const cycle = useCycle({
onEvent: useCallback((time, event) => {
try {
if (!event.value?.onTrigger) {
const note = event.value?.value || event.value;
if (!isNote(note)) {
throw new Error("not a note: " + note);
}
defaultSynth.triggerAttackRelease(note, event.duration, time);
} else {
const {onTrigger} = event.value;
onTrigger(time, event);
}
} catch (err) {
console.warn(err);
err.message = "unplayable event: " + err?.message;
pushLog(err.message);
}
}, []),
onQuery: useCallback((span) => {
try {
return activePattern?.query(span) || [];
} catch (err) {
setError(err);
return [];
}
}, [activePattern]),
onSchedule: useCallback((_events, cycle2) => logCycle(_events, cycle2), [activePattern]),
ready: !!activePattern
const {setCode, setPattern, error, code, cycle, dirty, log, togglePlay, activateCode, pattern, pushLog} = useRepl({
tune: decoded || randomTune,
defaultSynth
});
const logBox = useRef();
useLayoutEffect(() => {
logBox.current.scrollTop = logBox.current?.scrollHeight;
}, [log]);
useLayoutEffect(() => {
const handleKeyPress = (e) => {
if (e.ctrlKey || e.altKey) {
@ -121,22 +52,6 @@ function App() {
document.addEventListener("keypress", handleKeyPress);
return () => document.removeEventListener("keypress", handleKeyPress);
}, [pattern, code]);
useEffect(() => {
if (isHot) {
if (typeof hot !== "string") {
getHotCode().then((_code) => {
});
activatePattern(hot);
return;
} else {
setCode(hot);
activateCode(hot);
}
}
}, [code, isHot]);
useLayoutEffect(() => {
logBox.current.scrollTop = logBox.current?.scrollHeight;
}, [log]);
useWebMidi({
ready: useCallback(({outputs}) => {
pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `"${o.name}"`).join(" | ")}) to the pattern. `);
@ -168,15 +83,11 @@ function App() {
console.log("tune", _code);
setCode(_code);
const parsed = evaluate(_code);
setActivePattern(parsed.pattern);
setPattern(parsed.pattern);
}
}, "🎲 random tune"), window.location.href.includes("http://localhost:8080") && /* @__PURE__ */ React.createElement("button", {
onClick: () => {
if (isHot || confirm("Really switch? You might loose your current pattern..")) {
setIsHot((h) => !h);
}
}
}, "🔥 toggle hot mode"))), /* @__PURE__ */ React.createElement("section", {
}, "🎲 random tune"), /* @__PURE__ */ React.createElement("button", null, /* @__PURE__ */ React.createElement("a", {
href: "./tutorial"
}, "📚 tutorial")))), /* @__PURE__ */ React.createElement("section", {
className: "grow flex flex-col text-gray-100"
}, /* @__PURE__ */ React.createElement("div", {
className: "grow relative"
@ -184,32 +95,21 @@ function App() {
className: cx("h-full bg-[#2A3236]", error ? "focus:ring-red-500" : "focus:ring-slate-800")
}, /* @__PURE__ */ React.createElement(CodeMirror, {
value: code,
readOnly: isHot,
options: {
mode: "javascript",
theme: "material",
lineNumbers: true
},
onChange: (_2, __, value) => {
if (!isHot) {
setCode(value);
}
}
onChange: (_2, __, value) => setCode(value)
}), /* @__PURE__ */ React.createElement("span", {
className: "p-4 absolute top-0 right-0 text-xs whitespace-pre text-right"
}, !cycle.started ? `press ctrl+enter to play
` : !isHot && code !== activeCode ? `ctrl+enter to update
` : "no changes\n", isHot && "🔥 hot mode: go to hot.js to edit pattern, then save")), error && /* @__PURE__ */ React.createElement("div", {
` : dirty ? `ctrl+enter to update
` : "no changes\n")), error && /* @__PURE__ */ React.createElement("div", {
className: cx("absolute right-2 bottom-2", "text-red-500")
}, error?.message || "unknown error")), /* @__PURE__ */ React.createElement("button", {
className: "flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500",
onClick: () => {
if (!cycle.started) {
activateCode();
} else {
cycle.stop();
}
}
onClick: () => togglePlay()
}, cycle.started ? "pause" : "play"), /* @__PURE__ */ React.createElement("textarea", {
className: "grow bg-[#283237] border-0 text-xs min-h-[200px]",
value: log,

5
docs/dist/useCycle.js vendored
View file

@ -34,9 +34,8 @@ function useCycle(props) {
};
useEffect(() => {
ready && query();
}, [onEvent, onSchedule, onQuery]);
}, [onEvent, onSchedule, onQuery, ready]);
const start = async () => {
console.log("start");
setStarted(true);
await Tone.start();
Tone.Transport.start("+0.1");
@ -47,6 +46,6 @@ function useCycle(props) {
Tone.Transport.pause();
};
const toggle = () => started ? stop() : start();
return {start, stop, onEvent, started, toggle, query, activeCycle};
return {start, stop, setStarted, onEvent, started, toggle, query, activeCycle};
}
export default useCycle;

9
docs/dist/usePostMessage.js vendored Normal file
View file

@ -0,0 +1,9 @@
import {useEffect} from "../_snowpack/pkg/react.js";
function usePostMessage(listener) {
useEffect(() => {
window.addEventListener("message", listener);
return () => window.removeEventListener("message", listener);
}, [listener]);
return (data) => window.postMessage(data, "*");
}
export default usePostMessage;

105
docs/dist/useRepl.js vendored Normal file
View file

@ -0,0 +1,105 @@
import {useCallback, useState, useMemo} from "../_snowpack/pkg/react.js";
import {isNote} from "../_snowpack/pkg/tone.js";
import {evaluate} from "./evaluate.js";
import useCycle from "./useCycle.js";
import usePostMessage from "./usePostMessage.js";
let s4 = () => {
return Math.floor((1 + Math.random()) * 65536).toString(16).substring(1);
};
function useRepl({tune, defaultSynth, autolink = true}) {
const id = useMemo(() => s4(), []);
const [code, setCode] = useState(tune);
const [activeCode, setActiveCode] = useState();
const [log, setLog] = useState("");
const [error, setError] = useState();
const [pattern, setPattern] = useState();
const dirty = code !== activeCode;
const activateCode = (_code = code) => {
!cycle.started && cycle.start();
broadcast({type: "start", from: id});
if (activeCode && !dirty) {
setError(void 0);
return;
}
try {
const parsed = evaluate(_code);
setPattern(() => parsed.pattern);
if (autolink) {
window.location.hash = "#" + encodeURIComponent(btoa(code));
}
setError(void 0);
setActiveCode(_code);
} catch (err) {
setError(err);
}
};
const pushLog = (message) => setLog((log2) => log2 + `${log2 ? "\n\n" : ""}${message}`);
const logCycle = (_events, cycle2) => {
if (_events.length) {
pushLog(`# cycle ${cycle2}
` + _events.map((e) => e.show()).join("\n"));
}
};
const cycle = useCycle({
onEvent: useCallback((time, event) => {
try {
if (!event.value?.onTrigger) {
const note = event.value?.value || event.value;
if (!isNote(note)) {
throw new Error("not a note: " + note);
}
if (defaultSynth) {
defaultSynth.triggerAttackRelease(note, event.duration, time);
} else {
throw new Error("no defaultSynth passed to useRepl.");
}
} else {
const {onTrigger} = event.value;
onTrigger(time, event);
}
} catch (err) {
console.warn(err);
err.message = "unplayable event: " + err?.message;
pushLog(err.message);
}
}, []),
onQuery: useCallback((span) => {
try {
return pattern?.query(span) || [];
} catch (err) {
setError(err);
return [];
}
}, [pattern]),
onSchedule: useCallback((_events, cycle2) => logCycle(_events, cycle2), [pattern]),
ready: !!pattern
});
const broadcast = usePostMessage(({data: {from, type}}) => {
if (type === "start" && from !== id) {
cycle.setStarted(false);
setActiveCode(void 0);
}
});
const togglePlay = () => {
if (!cycle.started) {
activateCode();
} else {
cycle.stop();
}
};
return {
code,
setCode,
pattern,
error,
cycle,
setPattern,
dirty,
log,
togglePlay,
activateCode,
activeCode,
pushLog
};
}
export default useRepl;