add Janko and traditional Piano layout

2 files changed, 31 insertions, 4 deletions

diff --git a/app/app.js b/app/app.js
index 7b77743..17cdb18 100644
--- a/app/app.js
+++ b/app/app.js
@@ -65,6 +65,29 @@ const layouts = {
       return note;
     },
   },
+  janko: {
+    major: 'row',
+    map: ([x, y], [w, h]) => {
+      let note = 5 + 2 * x;
+      if (y % 2 == 0) note += 1;
+      return note;
+    },
+  },
+  trad_piano: {
+    major: 'row',
+    map: ([x, y], [w, h]) => {
+      const pitches = [0, 1, 2, 3, 4, -1, 5, 6, 7, 8, 9, 10, 11, -1];
+
+      let i = 2 * x;
+      if (y % 2 == 1) i -= 1;
+
+      const pitch = pitches[i % 14];
+      if (pitch < 0) return pitch;
+
+      const oct = Math.floor(i / 14) + Math.floor(y / 2);
+      return 10 + pitch + 12 * oct;
+    },
+  },
   harmonic: {
     // A = 3
     // B = 7 = y
@@ -138,9 +161,11 @@ const Keyboard = ({ w, h, layout: { major, map }, state, scale, transpose, label
   >
     {range(w).map((_, x) => (
       range(h).map((_, y) => {
-        const note = map([x, y], [w, h]) + transpose;
-        const onCore = scale && scale.notes.indexOf(note) >= 0;
-        const onScale = scale && scale.modulo.indexOf(note % 12) >= 0;
+        const rawNote = map([x, y], [w, h]);
+        const disabled = rawNote < 0;
+        const note = disabled ? -1 : rawNote + transpose;
+        const onCore = !disabled && scale && scale.notes.indexOf(note) >= 0;
+        const onScale = !disabled && scale && scale.modulo.indexOf(note % 12) >= 0;
         return (
           <Hexagon
             key={x + ',' + y}
@@ -151,7 +176,7 @@ const Keyboard = ({ w, h, layout: { major, map }, state, scale, transpose, label
             noteoff={noteoff}
             major={major}
           >
-            {labels ? labels[note % 12] : note}
+            {!disabled && (labels ? labels[note % 12] : note)}
           </Hexagon>
         );
       })
diff --git a/app/config.js b/app/config.js
index 06b7b3a..7bf3a1b 100644
--- a/app/config.js
+++ b/app/config.js
@@ -104,6 +104,8 @@ export const Toolbar = ({ state, setState, midi }) => {
           <option value="wicki_hayden">Wicki-Hayden</option>
           <option value="harmonic">Harmonic Table</option>
           <option value="gerhard">Gerhard</option>
+          <option value="janko">Jankó</option>
+          <option value="trad_piano">Traditional Piano</option>
         </select>
       </div>
       <div className="group">