add realtime note selection

1 files changed, 13 insertions, 7 deletions

diff --git a/main.mjs b/main.mjs
index ad45d90..bee25cb 100644
--- a/main.mjs
+++ b/main.mjs
@@ -16,12 +16,8 @@ function save({ detail }) {
     });
 }
 
-function play({ detail }) {
-    console.debug('got playEvent', detail.notes);
-    if (player) {
-        player.stop();
-    }
-
+function changed({ detail }) {
+    console.debug('got changedEvent', detail.notes);
     const played = detail.notes.map((n, i) => {
         if (n !== 'x') {
             return [Note.fromString(n), detail.octaves[i]];
@@ -33,7 +29,14 @@ function play({ detail }) {
     }
     player = document.querySelector('x-player');
     player.getOffsets = getOffsets;
-    player.isPlaying = true;
+    player.update();
+}
+
+function play({ detail }) {
+    console.debug('got playEvent', detail.notes);
+    if (player) {
+        player.isPlaying = true;
+    }
 }
 
 function stop(e) {
@@ -69,8 +72,11 @@ function init() {
     // todo: maybe just attach the listener to document?
     document.querySelectorAll(Fretboard.name).forEach(f => {
         f.addEventListener(f.saveEvent, save);
+        f.addEventListener(f.changedEvent, changed);
         f.addEventListener(f.playEvent, play);
         f.addEventListener(f.stopEvent, stop);
+
+        changed({ detail: f });
     });
 
     document.querySelectorAll(KeyPicker.name).forEach(kp => {