Added highlight to active instrument

P-bibs · May 26, 2019 · a4e32c9 · a4e32c9
1 parent 539a314
commit a4e32c9
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 1 deletion.
diff --git a/main.css b/main.css
@@ -25,6 +25,38 @@
     }
 }
 
+@keyframes instrument-button-activate {
+    from {
+        background-color: #dcdcdc
+    }
+
+    to {
+        background-color: #7abd89
+    }
+}
+
+@keyframes instrument-button-deactivate {
+    from {
+        background-color: #7abd89
+    }
+
+    to {
+        background-color: #dcdcdc
+    }
+}
+
+.instrument-button-active {
+    animation-name: instrument-button-activate;
+    animation-fill-mode: forwards;
+    animation-duration: .25s;
+}
+
+.instrument-button-inactive {
+    animation-name: instrument-button-deactivate;
+    animation-fill-mode: forwards;
+    animation-duration: .25s;
+}
+
 .chord-tile-active {
     background: rgb(204, 204, 204);
     color: black;

diff --git a/main.js b/main.js
@@ -89,7 +89,6 @@ function changeInstrument(num) {
     stopPlayback();
   }
 
-
   var synths = [
     Tone.Synth,
     Tone.AMSynth,
@@ -122,6 +121,14 @@ function changeInstrument(num) {
 
   var instruments = synths.concat(samples);
 
+  var buttons = document.getElementsByClassName('instrument-button');
+  var newButton = buttons[num].children[0];
+  var oldButton = buttons[instruments.indexOf(settings.instrument)].children[0];
+  oldButton.classList.remove("instrument-button-active")
+  oldButton.classList.add("instrument-button-inactive")
+  newButton.classList.remove("instrument-button-inactive")
+  newButton.classList.add("instrument-button-active")
+
   settings.instrument = instruments[num];
   if (num < 5) {
     settings.instrumentType = "monophonic";