synthing

commit 2c8c739a6d19ddf1c65c4d11dceaa257a1caaf87
parent a41113bb0bc474abbc4493d5818829b817ce2ad5
Author: Massimo Siboldi <mdsiboldi@gmail.com>
Date:   Tue, 16 Jan 2018 23:26:30 -0800

An ugly looking synthing

Diffstat:
M
log.org
 | 
2
++
M
src/App/index.js
 | 
22
+++++++++++++++++++---
M
src/WaveManager/index.js
 | 
14
++++++++++++--

3 files changed, 33 insertions(+), 5 deletions(-)
diff --git a/log.org b/log.org
@@ -18,3 +18,5 @@
 *** DONE be able to change active waveform
 * <2017-12-03 Sun 21:35>
 here's an idea: make modules in vanilla js and interact with them via react. We'll get some reusability in other projects and keep react doing viewstuff, not statelogicstuff
+* <2017-12-10 Sun 18:18>
+Working on some optimizations. Playing is event heavy so I want to make keyevents be as quick as possible. Bubbling
diff --git a/src/App/index.js b/src/App/index.js
@@ -93,7 +93,7 @@ class App extends Component {
         let initBeats = 4;
         this.state = {
             metroMs: 250,
-            beat: 1,
+            beat: 0,
             waveforms: [{
                 waveform: initialWave.slice(),
                 beats: boolArray.create(initBeats)
@@ -173,10 +173,25 @@ class App extends Component {
     }
 
     metro = () => {
+        const loop = () => {
+            this.setState({
+                beat: (this.state.beat + 1) % this.state.numBeats
+            })
+        }
+        const interval = window.setInterval(loop, this.state.metroMs);
+        this.setState({
+            interval
+        })
+    }
+
+    stopMetro = () => {
+        if (this.state.interval) {
+            window.clearInterval(this.state.interval);
+        }
         this.setState({
-            beat: (this.state.beat + 1) % this.state.numBeats
+            interval: null,
+            beat: 0
         })
-        window.setTimeout(this.metro, this.state.metroMs);
     }
 
     render() {
@@ -225,6 +240,7 @@ class App extends Component {
             {waves}
             <Synth waveforms={this.activeWaveforms()} adsr={this.state.adsr}></Synth>
             <button onClick={this.metro}>start</button>
+            <button onClick={this.stopMetro}>stop</button>
           </div>
         );
     }
diff --git a/src/WaveManager/index.js b/src/WaveManager/index.js
@@ -1,4 +1,5 @@
 import { h, Component } from 'preact';
+import './style.css';
 
 export default class WaveManager extends Component {
     render() {
@@ -12,8 +13,17 @@ export default class WaveManager extends Component {
               </div>
               <div class="beats">
                 {this.props.beats.map((val, idx) => {
-                    return <input type="checkbox" checked={val} onChange={(ev) => {this.props.updateBeat(idx, ev.target.checked)}}></input>
-                })}
+                    return (
+                        <span class={this.props.beat === idx ? 'beat' : ''}>
+                          <input
+                            type="checkbox"
+                            checked={val}
+                            onChange={(ev) => {this.props.updateBeat(
+                              idx,
+                              ev.target.checked)}}
+                          ></input>
+                        </span>
+                )})}
               </div>
             </div>
         );