piano-midi-monitor/src/App.tsx

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>(Number(search.get('startKey')))
  const [endKey, setEndKey, ] = React.useState<number>(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 (
    <React.Fragment>
      <Keyboard
        startKey={startKey}
        endKey={endKey}
      />
      <PedalBoard />
    </React.Fragment>
  )
}

export default App;