normalize note names for hover matching

1 files changed, 7 insertions, 3 deletions

diff --git a/key-picker.mjs b/key-picker.mjs
index 3b4a378..a1739fa 100644
--- a/key-picker.mjs
+++ b/key-picker.mjs
@@ -1,4 +1,4 @@
-import { MajorScale, MinorScale, chromaticScale } from "./scale.mjs";
+import { MajorScale, MinorScale, Note, chromaticScale } from "./scale.mjs";
 
 function scaleFrom(tonic, scale) {
     switch (scale) {
@@ -12,7 +12,7 @@ function scaleFrom(tonic, scale) {
 }
 
 function handleNoteEnter(e) {
-    const n = e.target.innerText;
+    const n = Note.fromString(e.target.innerText).toString();
     // 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 => {
@@ -21,7 +21,7 @@ function handleNoteEnter(e) {
     })
 }
 function handleNoteLeave(e) {
-    const n = e.target.innerText;
+    const n = Note.fromString(e.target.innerText).toString();
     // ibid.
     document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
         console.debug('wow! found elt', elt);
@@ -67,5 +67,9 @@ function handleFormChanged(e) {
 export default function KeyPicker(form) {
     console.debug('KeyPicker()', form);
     form.onchange = handleFormChanged;
+    form.querySelectorAll('.notes li').forEach(elt => {
+        elt.onmouseenter = handleNoteEnter;
+        elt.onmouseleave = handleNoteLeave;
+    })
     formChanged(form);
 }