dreckiger commit

.gitignore

@@ -12,3 +12,6 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
+
+# vim
+*.swp

src/components/Main.vue

@@ -1,14 +1,25 @@
 <template>
   <div class="main">
-    <h1>Binaural Beats</h1>
+    <h1>Binaural Beats {{ started ? 'started' : 'stopped' }}</h1>
     <button v-on:click="start">Start</button>
     <button v-on:click="stop">Stop</button>
     <select v-model="waveform">
+      <option disabled value="">Waveform</option>
       <option>sine</option>
       <option>square</option>
       <option>triangle</option>
+      <option>sawtooth</option>
     </select>
     <input v-model="leftEar.frequency.value">
+    <input v-model="rightEar.frequency.value">
+    <select v-model="preset">
+      <option disabled value="">Preset</option>
+      <option value="alpha">α waves</option>
+      <option value="beta">β waves</option>
+      <option value="gamma">γ waves</option>
+      <option value="delta">δ waves</option>
+      <option value="theta">θ waves</option>
+    </select>
   </div>
 </template>
 
@@ -19,12 +30,24 @@ export default {
   name: 'Main',
   data () {
     return {
+      started: false,
       merge: null,
       leftEar: null,
       rightEar: null,
       waveform: 'sine',
-      left: 440,
-      right: 430
+      preset: null,
+      presets: {
+        alpha: {
+          waveform: 'sine',
+          right: 150,
+          left: 155
+        },
+        beta: {
+          waveform: 'sine',
+          right: 130,
+          left: 139
+        }
+      }
     }
   },
   created () {
@@ -38,22 +61,26 @@ export default {
       this.leftEar.frequency.value = 440
       this.rightEar.frequency.value = 430
     },
-    updateWaveform: function () {
-      this.leftEar.type = this.waveform
-      this.rightEar.type = this.waveform
-    },
     start: function () {
       this.leftEar.start()
       this.rightEar.start()
+      this.started = true
     },
     stop: function () {
       this.leftEar.stop()
       this.rightEar.stop()
+      this.started = false
     }
   },
   watch: {
     waveform: function () {
-      this.updateWaveform()
+      this.leftEar.type = this.waveform
+      this.rightEar.type = this.waveform
+    },
+    preset: function () {
+      this.waveform = this.presets[this.preset].waveform
+      this.leftEar.frequency.value = this.presets[this.preset].left
+      this.rightEar.frequency.value = this.presets[this.preset].right
     }
   }
 }
@@ -61,4 +88,10 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+button, select, input {
+  color: black;
+  background-color: white;
+  border-width: 1px;
+  border-style: solid;
+}
 </style>