import * as React from 'react' import Keyboard from './components/Keyboard/Keyboard' import PedalBoard from './components/PedalBoard/PedalBoard' const search = new URLSearchParams(window.location.search) const App = () => { const [startKey, setStartKey, ] = React.useState(Number(search.get('startKey'))) const [endKey, setEndKey, ] = React.useState(Number(search.get('endKey'))) React.useEffect(() => { const onMessage = (e: MessageEvent) => { if (e.data.event !== 'spanchange') { return } const [startKey, endKey, ] = e.data.message.split(':') setStartKey(Number(startKey)) setEndKey(Number(endKey)) } window.addEventListener('message', onMessage) return () => { window.removeEventListener('message', onMessage) } }, []) return ( ) } export default App;