From 9f0be08d005a0838af793dab8658b3cab8868c65 Mon Sep 17 00:00:00 2001
From: Brian Cully <bjc@spork.org>
Date: Mon, 10 Mar 2025 12:27:55 -0400
Subject: normalize note names for hover matching

---
 key-picker.mjs | 10 +++++++---
 1 file 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);
 }
-- 
cgit v1.3