import * as React from 'react' const PedalBoard = () => { const [unaCorda, setUnaCorda, ] = React.useState(0) const [sostenuto, setSostenuto, ] = React.useState(0) const [sustain, setSustain, ] = React.useState(0) const timer: React.MutableRefObject = React.useRef(null) React.useEffect(() => { const onMessage = (e: MessageEvent) => { if (e.data.event !== 'pedal') { return } if (timer.current !== null) { window.clearTimeout(timer.current) timer.current = null } const [which, value, ] = e.data.message.split(':') timer.current = window.setTimeout(() => { const setters: Record = { 64: setSustain, 66: setSostenuto, 67: setUnaCorda, } const { [which]: theSetter, } = setters theSetter(value) }, 50) } window.addEventListener('message', onMessage) return () => { window.removeEventListener('message', onMessage) } }, []) return (

) } export default PedalBoard