better toggling

1 files changed, 22 insertions, 10 deletions

diff --git a/client/index.js b/client/index.js
index e8477ec..d4e805b 100644
--- a/client/index.js
+++ b/client/index.js
@@ -5,7 +5,7 @@ import color from "./lib/color";
 import kalimba from "./lib/kalimba";
 import organ from "./lib/organ";
 import { getOutput } from "./lib/output";
-import { browser, requestAudioContext, choice } from "./lib/util";
+import { browser, requestAudioContext, choice, roundFreq } from "./lib/util";
 import { PRIMES } from "./lib/primes";
 // import life from "./lib/life";
 
@@ -53,8 +53,7 @@ function rebuild() {
   build();
 }
 function play(freq) {
-  if (!freq.playing) {
-    freq.playing = true;
+  if (!organ.isPlaying(freq.frequency)) {
     let frequency = freq.frequency;
     // while (frequency < root) {
     //   frequency *= 2;
@@ -62,22 +61,30 @@ function play(freq) {
     // while (frequency > root) {
     //   frequency /= 2;
     // }
+    const rounded = roundFreq(freq.frequency);
     organ.play(frequency);
-    freq.div.classList.add("playing");
+    notes.forEach((row) =>
+      row.forEach(
+        (note) => note.rounded === rounded && note.div.classList.add("playing"),
+      ),
+    );
   }
 }
 function trigger(freq) {
   kalimba.play(freq.frequency);
 }
 function pause(freq) {
-  if (freq.playing) {
-    freq.playing = false;
-    organ.pause(freq.frequency);
-    freq.div.classList.remove("playing");
-  }
+  organ.pause(freq.frequency);
+  const rounded = roundFreq(freq.frequency);
+  notes.forEach((row) =>
+    row.forEach(
+      (note) =>
+        note.rounded === rounded && note.div.classList.remove("playing"),
+    ),
+  );
 }
 function toggle(freq) {
-  if (freq.playing) {
+  if (organ.isPlaying(freq.rounded) || freq.div.classList.contains("playing")) {
     pause(freq);
   } else {
     play(freq);
@@ -101,6 +108,7 @@ function add(i, j) {
 
   const freq = {
     frequency,
+    rounded: roundFreq(frequency),
     div,
     i,
     j,
@@ -142,6 +150,10 @@ function add(i, j) {
       } else {
         div.style.backgroundColor = color(frac, add + add_off, mul_off);
       }
+
+      if (organ.isPlaying(frequency)) {
+        div.classList.add("playing");
+      }
     },
   };