1 files changed, 29 insertions, 9 deletions

diff --git a/main.mjs b/main.mjs
index 6c71e9c..9aa4dd2 100644
--- a/main.mjs
+++ b/main.mjs
@@ -5,30 +5,31 @@ import String from './string.mjs';
 import Player from './player.mjs';
 import { Note, toCents } from './scale.mjs';
 
+// assume A440 tuning
+const noteA = Note.fromString('A');
 let player = undefined;
 
-function save(e) {
+function save({ detail }) {
     document.querySelectorAll(History.name).forEach(h => {
-        console.debug('h is', h, 'e is', e.detail);
-        h.add(e.detail);
+        console.debug('h is', h, 'e is', detail);
+        h.add(detail);
     });
 }
 
-function play(e) {
-    console.debug('got playEvent', e, e.detail.notes);
+function play({ detail }) {
+    console.debug('got playEvent', detail.notes);
     if (player) {
         player.stop();
     }
 
-    const played = e.detail.notes.map((n, i) => {
+    const played = detail.notes.map((n, i) => {
         if (n !== 'x') {
-            return [Note.fromString(n), e.detail.octaves[i]];
+            return [Note.fromString(n), detail.octaves[i]];
         }
     }).filter(n => n);
 
-    const a = Note.fromString('A');
     player = new Player(played.map(([n, o]) => {
-        return toCents([a, 4], [n, o]);
+        return toCents([noteA, 4], [n, o]);
     }));
     player.start();
 }
@@ -40,6 +41,20 @@ function stop(e) {
     }
 }
 
+function noteEnter({ detail }) {
+    console.debug('got noteEnter', detail);
+    Array.from(document.querySelectorAll(`.fret [value='${detail.toString()}']`))
+        .map(f => f.parentNode)
+        .forEach(f => f.classList.add('hover'));
+}
+
+function noteLeave({ detail }) {
+    console.debug('got noteLeave', detail);
+    Array.from(document.querySelectorAll(`.fret [value='${detail.toString()}']`))
+        .map(f => f.parentNode)
+        .forEach(f => f.classList.remove('hover'));
+}
+
 function init() {
     console.debug('init()', this);
 
@@ -54,5 +69,10 @@ function init() {
         f.addEventListener(f.playEvent, play);
         f.addEventListener(f.stopEvent, stop);
     });
+
+    document.querySelectorAll(KeyPicker.name).forEach(kp => {
+        kp.addEventListener(kp.noteEnterEvent, noteEnter);
+        kp.addEventListener(kp.noteLeaveEvent, noteLeave);
+    })
 }
 document.addEventListener('DOMContentLoaded', init);