implement test hover behavior on key selector's note list

3 files changed, 70 insertions, 48 deletions

diff --git a/index.html b/index.html
index 44b0f8b..d1ecafb 100644
--- a/index.html
+++ b/index.html
@@ -26,69 +26,69 @@
 
         <tbody>
           <tr class='string1'>
-            <td class='open'>E</td>
-            <td><input type='radio' name='string1' value='fret1'></td>
-            <td><input type='radio' name='string1' value='fret2'></td>
-            <td><input type='radio' name='string1' value='fret3'></td>
-            <td><input type='radio' name='string1' value='fret4'></td>
-            <td><input type='radio' name='string1' value='fret5'></td>
-            <td><input type='radio' name='string1' value='fret6'></td>
-            <td><input type='radio' name='string1' value='fret7'></td>
+            <td class='open' x-data-note='E'>E</td>
+            <td x-data-note='F'><input type='radio' name='string1' value='fret1'></td>
+            <td x-data-note='F♯'><input type='radio' name='string1' value='fret2'></td>
+            <td x-data-note='G'><input type='radio' name='string1' value='fret3'></td>
+            <td x-data-note='G♯'><input type='radio' name='string1' value='fret4'></td>
+            <td x-data-note='A'><input type='radio' name='string1' value='fret5'></td>
+            <td x-data-note='A♯'><input type='radio' name='string1' value='fret6'></td>
+            <td x-data-note='B'><input type='radio' name='string1' value='fret7'></td>
             <td class='selected'></td>
           </tr>
           <tr class='string2'>
-            <td class='open'>A</td>
-            <td><input type='radio' name='string2' value='fret1'></td>
-            <td><input type='radio' name='string2' value='fret2'></td>
-            <td><input type='radio' name='string2' value='fret3'></td>
-            <td><input type='radio' name='string2' value='fret4'></td>
-            <td><input type='radio' name='string2' value='fret5'></td>
-            <td><input type='radio' name='string2' value='fret6'></td>
-            <td><input type='radio' name='string2' value='fret7'></td>
+            <td class='open' x-data-note='A'>A</td>
+            <td x-data-note='A♯'><input type='radio' name='string2' value='fret1'></td>
+            <td x-data-note='B'><input type='radio' name='string2' value='fret2'></td>
+            <td x-data-note='C'><input type='radio' name='string2' value='fret3'></td>
+            <td x-data-note='C♯'><input type='radio' name='string2' value='fret4'></td>
+            <td x-data-note='D'><input type='radio' name='string2' value='fret5'></td>
+            <td x-data-note='D♯'><input type='radio' name='string2' value='fret6'></td>
+            <td x-data-note='E'><input type='radio' name='string2' value='fret7'></td>
             <td class='selected'></td>
           </tr>
           <tr class='string3'>
-            <td class='open'>D</td>
-            <td><input type='radio' name='string3' value='fret1'></td>
-            <td><input type='radio' name='string3' value='fret2'></td>
-            <td><input type='radio' name='string3' value='fret3'></td>
-            <td><input type='radio' name='string3' value='fret4'></td>
-            <td><input type='radio' name='string3' value='fret5'></td>
-            <td><input type='radio' name='string3' value='fret6'></td>
-            <td><input type='radio' name='string3' value='fret7'></td>
+            <td class='open' x-data-note='D'>D</td>
+            <td x-data-note='D♯'><input type='radio' name='string3' value='fret1'></td>
+            <td x-data-note='E'><input type='radio' name='string3' value='fret2'></td>
+            <td x-data-note='F'><input type='radio' name='string3' value='fret3'></td>
+            <td x-data-note='F♯'><input type='radio' name='string3' value='fret4'></td>
+            <td x-data-note='G'><input type='radio' name='string3' value='fret5'></td>
+            <td x-data-note='G♯'><input type='radio' name='string3' value='fret6'></td>
+            <td x-data-note='A'><input type='radio' name='string3' value='fret7'></td>
             <td class='selected'></td>
           </tr>
           <tr class='string4'>
-            <td class='open'>G</td>
-            <td><input type='radio' name='string4' value='fret1'></td>
-            <td><input type='radio' name='string4' value='fret2'></td>
-            <td><input type='radio' name='string4' value='fret3'></td>
-            <td><input type='radio' name='string4' value='fret4'></td>
-            <td><input type='radio' name='string4' value='fret5'></td>
-            <td><input type='radio' name='string4' value='fret6'></td>
-            <td><input type='radio' name='string4' value='fret7'></td>
+            <td class='open' x-data-note='G'>G</td>
+            <td x-data-note='G♯'><input type='radio' name='string4' value='fret1'></td>
+            <td x-data-note='A'><input type='radio' name='string4' value='fret2'></td>
+            <td x-data-note='A♯'><input type='radio' name='string4' value='fret3'></td>
+            <td x-data-note='B'><input type='radio' name='string4' value='fret4'></td>
+            <td x-data-note='C'><input type='radio' name='string4' value='fret5'></td>
+            <td x-data-note='C♯'><input type='radio' name='string4' value='fret6'></td>
+            <td x-data-note='D'><input type='radio' name='string4' value='fret7'></td>
             <td class='selected'></td>
           </tr>
           <tr class='string5'>
-            <td class='open'>B</td>
-            <td><input type='radio' name='string5' value='fret1'></td>
-            <td><input type='radio' name='string5' value='fret2'></td>
-            <td><input type='radio' name='string5' value='fret3'></td>
-            <td><input type='radio' name='string5' value='fret4'></td>
-            <td><input type='radio' name='string5' value='fret5'></td>
-            <td><input type='radio' name='string5' value='fret6'></td>
-            <td><input type='radio' name='string5' value='fret7'></td>
+            <td class='open' x-data-note='B'>B</td>
+            <td x-data-note='C'><input type='radio' name='string5' value='fret1'></td>
+            <td x-data-note='C♯'><input type='radio' name='string5' value='fret2'></td>
+            <td x-data-note='D'><input type='radio' name='string5' value='fret3'></td>
+            <td x-data-note='D♯'><input type='radio' name='string5' value='fret4'></td>
+            <td x-data-note='E'><input type='radio' name='string5' value='fret5'></td>
+            <td x-data-note='F'><input type='radio' name='string5' value='fret6'></td>
+            <td x-data-note='F♯'><input type='radio' name='string5' value='fret7'></td>
             <td class='selected'></td>
           </tr>
           <tr class='string6'>
-            <td class='open'>E</td>
-            <td><input type='radio' name='string6' value='fret1'></td>
-            <td><input type='radio' name='string6' value='fret2'></td>
-            <td><input type='radio' name='string6' value='fret3'></td>
-            <td><input type='radio' name='string6' value='fret4'></td>
-            <td><input type='radio' name='string6' value='fret5'></td>
-            <td><input type='radio' name='string6' value='fret6'></td>
-            <td><input type='radio' name='string6' value='fret7'></td>
+            <td class='open' x-data-note='E'>E</td>
+            <td x-data-note='F'><input type='radio' name='string6' value='fret1'></td>
+            <td x-data-note='F♯'><input type='radio' name='string6' value='fret2'></td>
+            <td x-data-note='G'><input type='radio' name='string6' value='fret3'></td>
+            <td x-data-note='G♯'><input type='radio' name='string6' value='fret4'></td>
+            <td x-data-note='A'><input type='radio' name='string6' value='fret5'></td>
+            <td x-data-note='A♯'><input type='radio' name='string6' value='fret6'></td>
+            <td x-data-note='B'><input type='radio' name='string6' value='fret7'></td>
             <td class='selected'></td>
           </tr>
         </tbody>
diff --git a/key-picker.mjs b/key-picker.mjs
index 431fdcd..3b4a378 100644
--- a/key-picker.mjs
+++ b/key-picker.mjs
@@ -11,6 +11,24 @@ function scaleFrom(tonic, scale) {
     }
 }
 
+function handleNoteEnter(e) {
+    const n = e.target.innerText;
+    // 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 = e.target.innerText;
+    // ibid.
+    document.querySelectorAll(`#fretboard [x-data-note="${n}"]`).forEach(elt => {
+        console.debug('wow! found elt', elt);
+        elt.classList.remove('hover');
+    })
+}
+
 function formChanged(form) {
     const formData = new FormData(form);
     const scale = scaleFrom(formData.get('tonic'), formData.get('scale'));
diff --git a/main.css b/main.css
index 717fdfb..7f81ea8 100644
--- a/main.css
+++ b/main.css
@@ -3,6 +3,10 @@ body {
     background-color: white;
 }
 
+.hover {
+    background-color: yellow;
+}
+
 #fretboard {
     float: left;
     padding-right: 1em;