build
This commit is contained in:
parent
cff3da3fd0
commit
8986399736
3 changed files with 24 additions and 12 deletions
31
docs/dist/App.js
vendored
31
docs/dist/App.js
vendored
|
|
@ -3,14 +3,15 @@ import logo from "./logo.svg.proxy.js";
|
||||||
import cx from "./cx.js";
|
import cx from "./cx.js";
|
||||||
import * as Tone from "../_snowpack/pkg/tone.js";
|
import * as Tone from "../_snowpack/pkg/tone.js";
|
||||||
import useCycle from "./useCycle.js";
|
import useCycle from "./useCycle.js";
|
||||||
import * as tunes from "./tunes.js";
|
import defaultTune from "./tunes.js";
|
||||||
import * as parser from "./parse.js";
|
import * as parser from "./parse.js";
|
||||||
import CodeMirror from "./CodeMirror.js";
|
import CodeMirror from "./CodeMirror.js";
|
||||||
import hot from "../hot.js";
|
import hot from "../hot.js";
|
||||||
import {isNote} from "../_snowpack/pkg/tone.js";
|
import {isNote} from "../_snowpack/pkg/tone.js";
|
||||||
import {useWebMidi} from "./midi.js";
|
import {useWebMidi} from "./midi.js";
|
||||||
const {tetris, tetrisRev, shapeShifted} = tunes;
|
|
||||||
const {parse} = parser;
|
const {parse} = parser;
|
||||||
|
const [_, codeParam] = window.location.href.split("#");
|
||||||
|
const decoded = atob(codeParam || "");
|
||||||
const getHotCode = async () => {
|
const getHotCode = async () => {
|
||||||
return fetch("/hot.js").then((res) => res.text()).then((src) => {
|
return fetch("/hot.js").then((res) => res.text()).then((src) => {
|
||||||
return src.split("export default").slice(-1)[0].trim();
|
return src.split("export default").slice(-1)[0].trim();
|
||||||
|
|
@ -25,12 +26,17 @@ defaultSynth.set({
|
||||||
});
|
});
|
||||||
function App() {
|
function App() {
|
||||||
const [mode, setMode] = useState("javascript");
|
const [mode, setMode] = useState("javascript");
|
||||||
const [code, setCode] = useState(shapeShifted);
|
const [code, setCode] = useState(decoded || defaultTune);
|
||||||
const [log, setLog] = useState("");
|
const [log, setLog] = useState("");
|
||||||
const logBox = useRef();
|
const logBox = useRef();
|
||||||
const [error, setError] = useState();
|
const [error, setError] = useState();
|
||||||
const [pattern, setPattern] = useState();
|
const [pattern, setPattern] = useState();
|
||||||
const [activePattern, setActivePattern] = useState();
|
const [activePattern, setActivePattern] = useState();
|
||||||
|
const activatePattern = (_pattern = pattern) => {
|
||||||
|
setActivePattern(() => _pattern);
|
||||||
|
window.location.hash = "#" + btoa(code);
|
||||||
|
!cycle.started && cycle.start();
|
||||||
|
};
|
||||||
const [isHot, setIsHot] = useState(false);
|
const [isHot, setIsHot] = useState(false);
|
||||||
const pushLog = (message) => setLog((log2) => log2 + `${log2 ? "\n\n" : ""}${message}`);
|
const pushLog = (message) => setLog((log2) => log2 + `${log2 ? "\n\n" : ""}${message}`);
|
||||||
const logCycle = (_events, cycle2) => {
|
const logCycle = (_events, cycle2) => {
|
||||||
|
|
@ -71,8 +77,7 @@ function App() {
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
const handleKeyPress = (e) => {
|
const handleKeyPress = (e) => {
|
||||||
if (e.ctrlKey && e.code === "Enter") {
|
if (e.ctrlKey && e.code === "Enter") {
|
||||||
setActivePattern(() => pattern);
|
activatePattern();
|
||||||
!cycle.started && cycle.start();
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
document.addEventListener("keypress", handleKeyPress);
|
document.addEventListener("keypress", handleKeyPress);
|
||||||
|
|
@ -86,7 +91,7 @@ function App() {
|
||||||
setCode(_code2);
|
setCode(_code2);
|
||||||
setMode("javascript");
|
setMode("javascript");
|
||||||
});
|
});
|
||||||
setActivePattern(hot);
|
activatePattern(hot);
|
||||||
return;
|
return;
|
||||||
} else {
|
} else {
|
||||||
_code = hot;
|
_code = hot;
|
||||||
|
|
@ -96,8 +101,8 @@ function App() {
|
||||||
try {
|
try {
|
||||||
const parsed = parse(_code);
|
const parsed = parse(_code);
|
||||||
setPattern(() => parsed.pattern);
|
setPattern(() => parsed.pattern);
|
||||||
if (!activePattern || isHot) {
|
if (isHot) {
|
||||||
setActivePattern(() => parsed.pattern);
|
activatePattern(parsed.pattern);
|
||||||
}
|
}
|
||||||
setMode(parsed.mode);
|
setMode(parsed.mode);
|
||||||
setError(void 0);
|
setError(void 0);
|
||||||
|
|
@ -152,7 +157,7 @@ function App() {
|
||||||
theme: "material",
|
theme: "material",
|
||||||
lineNumbers: true
|
lineNumbers: true
|
||||||
},
|
},
|
||||||
onChange: (_, __, value) => {
|
onChange: (_2, __, value) => {
|
||||||
if (!isHot) {
|
if (!isHot) {
|
||||||
setCode(value);
|
setCode(value);
|
||||||
}
|
}
|
||||||
|
|
@ -165,7 +170,13 @@ function App() {
|
||||||
className: "absolute right-2 bottom-2 text-red-500"
|
className: "absolute right-2 bottom-2 text-red-500"
|
||||||
}, error?.message || "unknown error")), /* @__PURE__ */ React.createElement("button", {
|
}, 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",
|
className: "flex-none w-full border border-gray-700 p-2 bg-slate-700 hover:bg-slate-500",
|
||||||
onClick: () => cycle.toggle()
|
onClick: () => {
|
||||||
|
if (!cycle.started) {
|
||||||
|
activatePattern();
|
||||||
|
} else {
|
||||||
|
cycle.stop();
|
||||||
|
}
|
||||||
|
}
|
||||||
}, cycle.started ? "pause" : "play"), /* @__PURE__ */ React.createElement("textarea", {
|
}, cycle.started ? "pause" : "play"), /* @__PURE__ */ React.createElement("textarea", {
|
||||||
className: "grow bg-[#283237] border-0 text-xs",
|
className: "grow bg-[#283237] border-0 text-xs",
|
||||||
value: log,
|
value: log,
|
||||||
|
|
|
||||||
2
docs/dist/midi.js
vendored
2
docs/dist/midi.js
vendored
|
|
@ -41,7 +41,7 @@ Pattern.prototype.midi = function(output, channel = 1) {
|
||||||
time = time * 1e3 + timingOffset;
|
time = time * 1e3 + timingOffset;
|
||||||
device.playNote(value, channel, {
|
device.playNote(value, channel, {
|
||||||
time,
|
time,
|
||||||
duration: event.duration * 1e3,
|
duration: event.duration * 1e3 - 5,
|
||||||
velocity: 0.9
|
velocity: 0.9
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
||||||
3
docs/dist/tunes.js
vendored
3
docs/dist/tunes.js
vendored
|
|
@ -32,7 +32,7 @@ export const shapeShifted = `stack(
|
||||||
b1, b2, b1, b2, e2, e3, e2, e3,
|
b1, b2, b1, b2, e2, e3, e2, e3,
|
||||||
a1, a2, a1, a2, a1, a2, a1, a2,
|
a1, a2, a1, a2, a1, a2, a1, a2,
|
||||||
).rev()
|
).rev()
|
||||||
).slow(16).rev()`;
|
).slow(16)`;
|
||||||
export const tetrisMidi = `${shapeShifted}.midi('IAC-Treiber Bus 1')`;
|
export const tetrisMidi = `${shapeShifted}.midi('IAC-Treiber Bus 1')`;
|
||||||
export const tetrisWithFunctions = `stack(sequence(
|
export const tetrisWithFunctions = `stack(sequence(
|
||||||
'e5', sequence('b4', 'c5'), 'd5', sequence('c5', 'b4'),
|
'e5', sequence('b4', 'c5'), 'd5', sequence('c5', 'b4'),
|
||||||
|
|
@ -171,3 +171,4 @@ export const whirlyStrudel = `mini("[e4 [b2 b3] c4]")
|
||||||
.every(3, x => x.slow(1.5))
|
.every(3, x => x.slow(1.5))
|
||||||
.fast(slowcat(1.25,1,1.5))
|
.fast(slowcat(1.25,1,1.5))
|
||||||
.every(2, _ => mini("e4 ~ e3 d4 ~"))`;
|
.every(2, _ => mini("e4 ~ e3 d4 ~"))`;
|
||||||
|
export default shapeShifted;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue