From 35e57671f2cf055bd096e1d53b511efb604d683a Mon Sep 17 00:00:00 2001
From: s-ol <s+removethis@s-ol.nu>
Date: Mon, 21 Mar 2022 23:02:42 +0100
Subject: add various labeling schemes

---
 app/app.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 55 insertions(+), 19 deletions(-)

(limited to 'app/app.js')

diff --git a/app/app.js b/app/app.js
index d85d9c5..5074285 100644
--- a/app/app.js
+++ b/app/app.js
@@ -46,24 +46,51 @@ const Hexagon = ({ x, y, children, state, note, major, scale, noteon, noteoff })
   );
 };
 
+//                B         A
+//   A  B       A   C          B
+//     o  C       o         o
+//                             C
+
+
 const layouts = {
   wicki_hayden: {
     major: 'row',
     map: ([x, y], [w, h]) => {
-      let note = 48 + 2 * x + 6 * y;
+      // A = 5
+      // B = 7
+      // C = 2 = x
+      // A + B = 12 = y
+      let note = 41 + 2 * x + 6 * y;
       if (y % 2 == 0) note += 1;
       return note;
     },
   },
   harmonic: {
+    // A = 3
+    // B = 7 = y
+    // C = 4
+    // C - A = 1 = x
+
+    // A = 7 = y
+    // B = 4
+    // C = -3
+    // B + C = 1 = x
     major: 'col',
     map: ([x, y], [w, h]) => {
       let note = 48 + x * 0.5 + y * 7;
-      if (x % 2 === 1) note += 3.5;
+      if (x % 2 === 1) note -= 3.5;
       return note;
     },
   },
   gerhard: {
+    // A = -3
+    // B = 1
+    // C = 4
+    //
+    // A = 1 = y
+    // B = 4
+    // C = 3
+    // B + C = 7 = x
     major: 'col',
     map: ([x, y], [w, h]) => {
       let note = 48 + x * 3.5 + y;
@@ -101,7 +128,7 @@ const tallyup = (steps, offset=0) => {
   };
 };
 
-const Keyboard = ({ w, h, layout: { major, map }, showMidi, state, scale, noteon, noteoff }) => (
+const Keyboard = ({ w, h, layout: { major, map }, state, scale, labels, noteon, noteoff }) => (
   <div
     className={`keyboard ${major}-major`}
     style={{
@@ -124,7 +151,7 @@ const Keyboard = ({ w, h, layout: { major, map }, showMidi, state, scale, noteon
             noteoff={noteoff}
             major={major}
           >
-            {showMidi ? note : notes.music[note % 12]}
+            {labels ? labels[note % 12] : note}
           </Hexagon>
         );
       })
@@ -217,6 +244,7 @@ export default class App extends React.Component {
   state = {
     layout: 'wicki_hayden',
     scale: 'major',
+    labels: 'english',
     offset: 60,
     state: {},
     w: 12,
@@ -270,13 +298,12 @@ export default class App extends React.Component {
     this.send(NOTE_OFF, note);
   }
 
-  set(key) {
-    return (e) => {
-      let value = e.target.value;
-      if (key === 'w' || key === 'h') value = +value;
-      this.setState({ [key]: value });
-    };
-  }
+  set = (e) => {
+    const key = e.target.name;
+    let value = e.target.value;
+    if (key === 'w' || key === 'h') value = +value;
+    this.setState({ [key]: value });
+  };
 
   onoffset = (offset) => (e) => this.setState({ offset });
 
@@ -319,8 +346,8 @@ export default class App extends React.Component {
   }
 
   render() {
-    const { configure, showMidi } = this.props;
-    const { w, h, scale, offset, layout, state } = this.state;
+    const { configure } = this.props;
+    const { w, h, scale, layout, labels, offset, state } = this.state;
 
     const chord = Object.entries(state).filter(([note, on]) => on).map(([k, _]) => k);
     chord.sort();
@@ -333,18 +360,27 @@ export default class App extends React.Component {
           </div>
           <div className="group">
             <label>layout:</label>
-            <select name="layout" value={layout} onChange={this.set('layout')}>
+            <select name="layout" value={layout} onChange={this.set}>
               <option value="wicki_hayden">Wicki-Hayden</option>
               <option value="harmonic">Harmonic Table</option>
               <option value="gerhard">Gerhard</option>
             </select>
           </div>
+          <div className="group">
+            <label>note format:</label>
+            <select name="labels" value={labels} onChange={this.set}>
+              <option value="english">English</option>
+              <option value="german">German</option>
+              <option value="sol">Solfège</option>
+              <option value="midi">MIDI no</option>
+            </select>
+          </div>
           <div className="group">
             <label>scale:</label>
             <button onClick={this.onoffset(null)}>
-              {notes.music[offset % 12]}
+              {labels ? notes.labels[labels][offset % 12] : offset}
             </button>
-            <select name="layout" value={scale} onChange={this.set('scale')}>
+            <select name="scale" value={scale} onChange={this.set}>
               <option value="none">None</option>
               <option value="major">Major</option>
               <option value="minor_nat">Natural Minor</option>
@@ -363,9 +399,9 @@ export default class App extends React.Component {
           </div>
           <div className="group">
             <label>size:</label>
-            <input className="small" type="number" min="1" value={w} onChange={this.set('w')} />
+            <input className="small" type="number" min="1" name="w" value={w} onChange={this.set} />
             {'x'}
-            <input className="small" type="number" min="1" value={h} onChange={this.set('h')} />
+            <input className="small" type="number" min="1" name="h" value={h} onChange={this.set} />
           </div>
           <div className="spacer" />
         </nav>
@@ -376,9 +412,9 @@ export default class App extends React.Component {
             h={h}
             noteon={this.noteon.bind(this)}
             noteoff={this.noteoff.bind(this)}
-            showMidi={showMidi}
             layout={layouts[layout]}
             scale={scale !== "none" && offset !== null && tallyup(scales[scale], offset)}
+            labels={notes.labels[this.state.labels]}
             offset={offset}
             state={state}
           />
-- 
cgit v1.2.3