add click handler for notes in key selector

1 files changed, 17 insertions, 2 deletions

diff --git a/key-picker.mjs b/key-picker.mjs
index a1739fa..0d3b421 100644
--- a/key-picker.mjs
+++ b/key-picker.mjs
@@ -16,19 +16,33 @@ function handleNoteEnter(e) {
     // todo: this should be delegated. the key selector shouldn't know
     // about the fretboard at all.
     document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
-        console.debug('wow! found elt', elt);
         elt.classList.add('hover');
     })
 }
+
 function handleNoteLeave(e) {
     const n = Note.fromString(e.target.innerText).toString();
     // ibid.
     document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
-        console.debug('wow! found elt', elt);
         elt.classList.remove('hover');
     })
 }
 
+function handleNoteClick(e) {
+    const elt = e.target;
+    const n = Note.fromString(elt.innerText).toString();
+    const count = Number(elt.getAttribute('x-data-clicked')) || 0;
+    const next = (count + 1) % 4;
+    elt.classList.remove(`click${count}`);
+    elt.classList.add(`click${next}`);
+    // ibid.
+    document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
+        elt.classList.remove(`click${count}`);
+        elt.classList.add(`click${next}`);
+    })
+    elt.setAttribute('x-data-clicked', next.toString());
+}
+
 function formChanged(form) {
     const formData = new FormData(form);
     const scale = scaleFrom(formData.get('tonic'), formData.get('scale'));
@@ -70,6 +84,7 @@ export default function KeyPicker(form) {
     form.querySelectorAll('.notes li').forEach(elt => {
         elt.onmouseenter = handleNoteEnter;
         elt.onmouseleave = handleNoteLeave;
+        elt.onclick = handleNoteClick;
     })
     formChanged(form);
 }