add ability to set root note

1 files changed, 11 insertions, 3 deletions

diff --git a/client/index.js b/client/index.js
index 1e31678..a50208c 100644
--- a/client/index.js
+++ b/client/index.js
@@ -385,6 +385,9 @@ function bind() {
 
 let isReset = false;
 function keydown(e) {
+  if (document.activeElement !== document.body) {
+    return;
+  }
   let step = 1;
   if (e.shiftKey) {
     step += 4;
@@ -498,10 +501,17 @@ function bindRoot() {
       document.querySelector(".root-select").classList.remove("visible"),
     "div-2": () => setRoot(root / 2),
     "mul-2": () => setRoot(root * 2),
+    "div-3-2": () => setRoot((root * 2) / 3),
+    "mul-3-2": () => setRoot((root * 3) / 2),
     "sub-10": () => setRoot(root - 10),
     "sub-1": () => setRoot(root - 1),
     "add-1": () => setRoot(root + 1),
     "add-10": () => setRoot(root + 10),
+  }).forEach(([key, fn], index) => {
+    const el = document.querySelector(`.root-select .${key}`);
+    el.addEventListener("click", fn);
+  });
+  Object.entries({
     "note-c": () => setRoot(440 * Math.pow(2, -9 / 12) * getOctave(root)),
     "note-db": () => setRoot(440 * Math.pow(2, -8 / 12) * getOctave(root)),
     "note-d": () => setRoot(440 * Math.pow(2, -7 / 12) * getOctave(root)),
@@ -518,9 +528,7 @@ function bindRoot() {
   }).forEach(([key, fn], index) => {
     const el = document.querySelector(`.root-select .${key}`);
     el.addEventListener("click", fn);
-    if (key.startsWith("note")) {
-      el.style.background = color(Math.pow(2, (index - 7) / 12), 0, 1.6);
-    }
+    el.style.background = color(Math.pow(2, index / 12), 0, 1.6);
   });
 }