1 files changed, 93 insertions, 15 deletions

diff --git a/client/index.js b/client/index.js
index 66059fd..1e31678 100644
--- a/client/index.js
+++ b/client/index.js
@@ -193,9 +193,7 @@ function add(i, j) {
     i,
     j,
     playing: false,
-    destroy: () => {
-      div.parentNode && div.parentNode.removeChild(div);
-    },
+    destroy: () => grid.removeChild(div),
     recolor: (numerator, denominator) => {
       let aa = a / numerator;
       let bb = b / denominator;
@@ -343,19 +341,18 @@ function bind() {
 
   // UI
   document
-    .querySelector("#help .close")
+    .querySelector("#help-button")
     .addEventListener("click", () =>
-      document.querySelector("#help").classList.remove("visible"),
+      document.querySelector("#help").classList.toggle("visible"),
     );
   document
-    .querySelector("#help-button")
+    .querySelector("#root")
     .addEventListener("click", () =>
-      document.querySelector("#help").classList.toggle("visible"),
+      document.querySelector(".root-select").classList.toggle("visible"),
     );
-  toggleModus();
   document.querySelector("#modus").addEventListener("click", toggleModus);
   Array.from(document.querySelectorAll(".mode")).forEach((el) => {
-    console.log(el.getAttribute("name"));
+    // console.log(el.getAttribute("name"));
     el.addEventListener("click", (event) => {
       const name = el.getAttribute("name");
       scaleMode = scales.findIndex((scale) => scale.name === name);
@@ -363,6 +360,9 @@ function bind() {
     });
   });
 
+  toggleModus();
+  bindRoot();
+
   // Wheel to scroll
   if (browser.isDesktop) {
     grid.addEventListener("wheel", (e) => {
@@ -426,6 +426,9 @@ function keydown(e) {
     case 220: // \
       midi.enable(trigger_index);
       break;
+    case 192: // ~
+      toggleModus();
+      break;
     case 191: // ?
       document.querySelector("#help").classList.toggle("visible");
       break;
@@ -434,9 +437,7 @@ function keydown(e) {
       e.preventDefault();
       e.stopPropagation();
       if (e.altKey || e.metaKey) {
-        root = clamp(root - (e.shiftKey ? 10 : 1), 1, 200000);
-        organ.setRoot(root);
-        showMessage(`Root: ${root} hz`);
+        setRoot(root - e.shiftKey ? 10 : 1);
       } else {
         scaleMode = mod(scaleMode - 1, scales.length);
         rebuild();
@@ -448,9 +449,7 @@ function keydown(e) {
       e.preventDefault();
       e.stopPropagation();
       if (e.altKey || e.metaKey) {
-        root = clamp(root + (e.shiftKey ? 10 : 1), 1, 200000);
-        organ.setRoot(root);
-        showMessage(`Root: ${root} hz`);
+        setRoot(root + e.shiftKey ? 10 : 1);
       } else {
         scaleMode = mod(scaleMode + 1, scales.length);
         rebuild();
@@ -459,6 +458,85 @@ function keydown(e) {
       break;
   }
 }
+function setRoot(newRoot) {
+  if (!newRoot) {
+    return;
+  }
+  root = clamp(Math.round(newRoot), 1, 300000);
+  sine.setRoot(root);
+  bandpass.setRoot(root);
+  showMessage(`Root: ${Math.round(root)} hz`);
+  showRoot(root);
+  document.querySelector(".root-select input").value = Math.round(root);
+}
+
+function showRoot(root) {
+  const el = document.querySelector("#root span");
+  el.style.fontSize = root < 1000 ? "14px" : root < 10000 ? "12px" : "9px";
+  el.innerHTML = Math.round(root);
+}
+function bindRoot() {
+  document.querySelector(".root-select").addEventListener(
+    "click",
+    () => {
+      document.querySelector(".root-select").classList.remove("visible");
+    },
+    false,
+  );
+  document
+    .querySelector(".root-select > div")
+    .addEventListener("click", (event) => {
+      event.stopPropagation();
+    });
+  document
+    .querySelector(".root-select input")
+    .addEventListener("input", (event) => {
+      setRoot(parseFloat(event.target.value));
+    });
+  Object.entries({
+    ok: () =>
+      document.querySelector(".root-select").classList.remove("visible"),
+    "div-2": () => setRoot(root / 2),
+    "mul-2": () => setRoot(root * 2),
+    "sub-10": () => setRoot(root - 10),
+    "sub-1": () => setRoot(root - 1),
+    "add-1": () => setRoot(root + 1),
+    "add-10": () => setRoot(root + 10),
+    "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)),
+    "note-eb": () => setRoot(440 * Math.pow(2, -6 / 12) * getOctave(root)),
+    "note-e": () => setRoot(440 * Math.pow(2, -5 / 12) * getOctave(root)),
+    "note-f": () => setRoot(440 * Math.pow(2, -4 / 12) * getOctave(root)),
+    "note-gb": () => setRoot(440 * Math.pow(2, -3 / 12) * getOctave(root)),
+    "note-g": () => setRoot(440 * Math.pow(2, -2 / 12) * getOctave(root)),
+    "note-ab": () => setRoot(440 * Math.pow(2, -1 / 12) * getOctave(root)),
+    "note-a": () => setRoot(440 * Math.pow(2, 0 / 12) * getOctave(root)),
+    "note-bb": () => setRoot(440 * Math.pow(2, 1 / 12) * getOctave(root)),
+    "note-b": () => setRoot(440 * Math.pow(2, 2 / 12) * getOctave(root)),
+    "note-c2": () => setRoot(440 * Math.pow(2, 3 / 12) * getOctave(root)),
+  }).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);
+    }
+  });
+}
+
+let C_ROOT = Math.round(440 * Math.pow(2, 3 / 12));
+function getOctave(value) {
+  let octave = 0;
+  while (value < C_ROOT) {
+    octave -= 1;
+    value *= 2;
+  }
+  while (value > C_ROOT) {
+    octave += 1;
+    value /= 2;
+  }
+  return Math.pow(2, octave);
+}
 
 let messageTransition;
 function showMessage(message) {