Add intro screen to fix user-interaction error

Since this was originally built a new restriction is now in place
in Chrome that requires a user interaction to happen before
audioContext initilization can occur.  Figured adding a short
intro screen was the easiest way to fix this.

Author: looshi2

css/index.scss

@@ -26,6 +26,18 @@ h2 {
   padding-bottom: 0;
 }
 
+.get-started {
+  padding: 80px;
+  text-align: center;
+  max-width: 600px;
+  margin:0 auto;
+}
+.get-started button{
+  background-color: $blue;
+  padding: 24px 36px;
+  color: white;
+}
+
 .scroll-container {
   padding: 0;
   margin: 0;

src/App.js

@@ -21,12 +21,8 @@ import EventEmitter from 'event-emitter'
 
 import WaveTableData from './data/WaveTableData.json'
 
-let audioContext
-const eventEmitter = new EventEmitter()
 
-if (window.AudioContext) {
-  audioContext = new AudioContext()
-}
+const eventEmitter = new EventEmitter()
 
 class App extends React.Component {
   constructor (props) {
@@ -68,18 +64,13 @@ class App extends React.Component {
         </div>
       )
     }
-    // Shows a message if not Chrome.
-    const isChrome = !!window.chrome && !!window.chrome.webstore
+    const { audioContext } = this.props;
+
+
+
     return (
       <div>
         <div className='scroll-container'>
-          {!isChrome &&
-            <div>
-              <h1 className='text-center'>
-                Try this synth in Chrome for better audio quality and MIDI support.
-              </h1>
-            </div>
-          }
           <header>
             <div>
               <h1>Wavetable</h1>

src/index.js

@@ -11,10 +11,37 @@ import App from './App.js'
 import Reducers from './data/Reducers.js'
 
 let store = createStore(Reducers)
+let audioContext
+const createAudioContext = () => {
+  audioContext = new AudioContext()
+  renderApp();
+}
 
-render(
-  <Provider store={store}>
-    <App store={store} />
-  </Provider>,
-  document.getElementById('root')
-)
+const renderApp = () => {
+  if(!audioContext){
+    return render(
+      <div className="get-started">
+        <h1>Welcome to Wavetable synth!</h1>
+        <p>Click on the piano keys, type keys on your keyboard, or even hook up a MIDI keyboard to hear it in action!</p>
+        <button
+          onClick={createAudioContext}>
+          Click Here to Start
+        </button>
+      </div>,
+      document.getElementById('root')
+    );
+  }
+
+  return render(
+    <Provider store={store}>
+      <App
+        store={store}
+        audioContext={audioContext}
+        createAudioContext={createAudioContext}
+      />
+    </Provider>,
+    document.getElementById('root')
+  )
+}
+
+renderApp();

src/views/Presets/Presets.js

@@ -29,6 +29,7 @@ class Presets extends React.Component {
   }
 
   render () {
+    console.log("options --->", this.props.presetId, this.state.options);
     return (
       <div className='preset-list-container'>
         <Select