remove redundancy

1 files changed, 26 insertions, 25 deletions

diff --git a/app/app.js b/app/app.js
index 522cb99..5b3c6ca 100644
--- a/app/app.js
+++ b/app/app.js
@@ -10,12 +10,6 @@ const NOTE_ON  = 0b1001;
 const NOTE_OFF = 0b1000;
 const CCHANGE  = 0b1011;
 
-/*
-  const noteon  = (key, vel=127, chan=0) => [statbyte(0b1001, chan), key, vel];
-  const noteoff = (key, vel=127, chan=0) => [statbyte(0b1000, chan), key, vel];
-  const ccchange = (ctl, val, chan=0) => [statbyte(0b1011, chan), ctl, val];
-*/
-
 const clamp = (val, min=0, max=1) => Math.max(min, Math.min(val, max));
 const ramp = i => new Array(i).fill(true).map((_, i) => i);
 const mix = (i, a, b) => i * a + (1-i) * b;
@@ -27,7 +21,7 @@ const parse = message => ({
   val: message.data[2] / 127,
 });
 
-const Hexagon = ({ x, y, children, state, note, send, major, scale }) => {
+const Hexagon = ({ x, y, children, state, note, major, scale, noteon, noteoff }) => {
   if (major == 'row') {
     if (y % 2 == 0)
       x += 0.5;
@@ -43,8 +37,8 @@ const Hexagon = ({ x, y, children, state, note, send, major, scale }) => {
     >
       <div
         className="inner"
-        onMouseDown={() => send(NOTE_ON,  note)}
-        onMouseUp  ={() => send(NOTE_OFF, note)}
+        onMouseDown={() => noteon(note)}
+        onMouseUp  ={() => noteoff(note)}
       >
         {children}
       </div>
@@ -107,7 +101,7 @@ const tallyup = (steps, offset=0) => {
   };
 };
 
-const Keyboard = ({ w, h, send, layout: { major, map }, showMidi, state, scale }) => (
+const Keyboard = ({ w, h, layout: { major, map }, showMidi, state, scale, noteon, noteoff }) => (
   <div
     className={`keyboard ${major}-major`}
     style={{
@@ -123,12 +117,12 @@ const Keyboard = ({ w, h, send, layout: { major, map }, showMidi, state, scale }
         return (
           <Hexagon
             key={x + ',' + y}
-            x={x} y={y}
-            note={note}
+            x={x} y={y} note={note}
             state={state[note]}
-            send={send}
-            major={major}
             scale={onCore ? "core" : (onScale ? "" : "disabled")}
+            noteon={noteon}
+            noteoff={noteoff}
+            major={major}
           >
             {showMidi ? note : notes.music[note % 12]}
           </Hexagon>
@@ -196,7 +190,7 @@ export default class App extends React.Component {
     setTimeout(() => this.onmessage({ cmd: NOTE_OFF, note }), 250);
   }
 
-  send = (command, note, vel=127) => {
+  send(command, note, vel=127) {
     if (command === NOTE_ON && this.state.offset === null)
       this.setState({ offset: note });
 
@@ -207,6 +201,19 @@ export default class App extends React.Component {
     this.props.midiout.send(msg);
   }
 
+  noteon(note) {
+    if (this.state.offset === null)
+      this.setState({ offset: note });
+
+    this.setState(({ state }) => ({ state: { ...state, [note]: true } }));
+    this.send(NOTE_ON,  note);
+  }
+
+  noteoff(note) {
+    this.setState(({ state }) => ({ state: { ...state, [note]: false } }));
+    this.send(NOTE_OFF, note);
+  }
+
   onlayout = (e) => this.setState({ layout: e.target.value })
   onscale = (e) => this.setState({ scale: e.target.value })
 
@@ -238,12 +245,7 @@ export default class App extends React.Component {
     const note = notes.key2midi[e.code];
     if (!note) return;
     e.preventDefault();
-
-    if (this.state.offset === null)
-      this.setState({ offset: note });
-
-    this.setState(({ state }) => ({ state: { ...state, [note]: true } }));
-    this.send(NOTE_ON,  note);
+    this.noteon(note);
   }
 
   onkeyup = (e) => {
@@ -252,9 +254,7 @@ export default class App extends React.Component {
     const note = notes.key2midi[e.code];
     if (!note) return;
     e.preventDefault();
-
-    this.setState(({ state }) => ({ state: { ...state, [note]: false } }));
-    this.send(NOTE_OFF,  note);
+    this.noteoff(note);
   }
 
   render() {
@@ -292,7 +292,8 @@ export default class App extends React.Component {
           <Keyboard
             w={12}
             h={4}
-            send={this.send}
+            noteon={this.noteon}
+            noteoff={this.noteoff}
             showMidi={showMidi}
             layout={layouts[layout]}
             scale={scale !== "none" && offset !== null && tallyup(scales[scale], offset)}