From 5d649a516f246194b693334b2ce59794a645f0a0 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 18 Feb 2022 21:39:37 +0100 Subject: [PATCH] docs docs docs --- repl/src/App.tsx | 36 ++- repl/src/tutorial/MiniRepl.tsx | 51 ++++- repl/src/tutorial/Tutorial.js | 30 +-- repl/src/tutorial/style.css | 10 + repl/src/tutorial/tutorial.mdx | 397 ++++++++++++++++++++++++++++++++- repl/src/useRepl.ts | 24 +- repl/tailwind.config.js | 2 +- 7 files changed, 516 insertions(+), 34 deletions(-) diff --git a/repl/src/App.tsx b/repl/src/App.tsx index ec5ec941..99374dfb 100644 --- a/repl/src/App.tsx +++ b/repl/src/App.tsx @@ -1,9 +1,10 @@ -import React, { useLayoutEffect, useRef } from 'react'; +import React, { useCallback, useLayoutEffect, useRef } from 'react'; import * as Tone from 'tone'; import CodeMirror from './CodeMirror'; import cx from './cx'; import { evaluate } from './evaluate'; import logo from './logo.svg'; +import { useWebMidi } from './midi'; import * as tunes from './tunes'; import useRepl from './useRepl'; @@ -34,7 +35,7 @@ function getRandomTune() { const randomTune = getRandomTune(); function App() { - const { setCode, setPattern, error, code, cycle, dirty, log, togglePlay } = useRepl({ + const { setCode, setPattern, error, code, cycle, dirty, log, togglePlay, activateCode, pattern, pushLog } = useRepl({ tune: decoded || randomTune, defaultSynth, }); @@ -44,6 +45,37 @@ function App() { logBox.current.scrollTop = logBox.current?.scrollHeight; }, [log]); + // set active pattern on ctrl+enter + useLayoutEffect(() => { + // TODO: make sure this is only fired when editor has focus + const handleKeyPress = (e: any) => { + if (e.ctrlKey || e.altKey) { + switch (e.code) { + case 'Enter': + activateCode(); + !cycle.started && cycle.start(); + break; + case 'Period': + cycle.stop(); + } + } + }; + document.addEventListener('keypress', handleKeyPress); + return () => document.removeEventListener('keypress', handleKeyPress); + }, [pattern, code]); + + useWebMidi({ + ready: useCallback(({ outputs }) => { + pushLog(`WebMidi ready! Just add .midi(${outputs.map((o) => `"${o.name}"`).join(' | ')}) to the pattern. `); + }, []), + connected: useCallback(({ outputs }) => { + pushLog(`Midi device connected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`); + }, []), + disconnected: useCallback(({ outputs }) => { + pushLog(`Midi device disconnected! Available: ${outputs.map((o) => `"${o.name}"`).join(', ')}`); + }, []), + }); + return (
diff --git a/repl/src/tutorial/MiniRepl.tsx b/repl/src/tutorial/MiniRepl.tsx index 85bfc68f..ba7b02b2 100644 --- a/repl/src/tutorial/MiniRepl.tsx +++ b/repl/src/tutorial/MiniRepl.tsx @@ -1,25 +1,60 @@ import React, { useMemo } from 'react'; import * as Tone from 'tone'; import useRepl from '../useRepl'; +import CodeMirror from '../CodeMirror'; +import cx from '../cx'; -function MiniRepl({ tune }) { - const defaultSynth = useMemo(() => { +const defaultSynth = new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destination).set({ + oscillator: { type: 'triangle' }, + envelope: { + release: 0.01, + }, +}); + +function MiniRepl({ tune, height = 100 }) { + /* const defaultSynth = useMemo(() => { return new Tone.PolySynth().chain(new Tone.Gain(0.5), Tone.Destination).set({ oscillator: { type: 'triangle' }, envelope: { release: 0.01, }, }); - }, []); - const { code, setCode, setPattern, error, cycle, dirty, log, togglePlay } = useRepl({ + }, []); */ + const { code, setCode, activateCode, activeCode, setPattern, error, cycle, dirty, log, togglePlay } = useRepl({ tune, defaultSynth, }); return ( - <> -