1 files changed, 18 insertions, 15 deletions

diff --git a/main.mjs b/main.mjs
index bee25cb..1164c49 100644
--- a/main.mjs
+++ b/main.mjs
@@ -16,34 +16,37 @@ function save({ detail }) {
     });
 }
 
-function changed({ detail }) {
-    console.debug('got changedEvent', detail.notes);
-    const played = detail.notes.map((n, i) => {
+function getOffsetsFromFretboard(fretboard) {
+    const played = fretboard.notes.map((n, i) => {
         if (n !== 'x') {
-            return [Note.fromString(n), detail.octaves[i]];
+            return [Note.fromString(n), fretboard.octaves[i]];
         }
     }).filter(n => n);
 
-    const getOffsets = () => {
-        return played.map(([n, o]) =>  toCents([noteA, 4], [n, o]));
-    }
+    return () => played.map(([n, o]) => toCents([noteA, 4], [n, o]));
+}
+
+function changed({ detail }) {
+    console.debug('got changedEvent', detail.notes);
     player = document.querySelector('x-player');
-    player.getOffsets = getOffsets;
-    player.update();
+    player.getOffsets = getOffsetsFromFretboard(detail);
+    if (player.isPlaying) {
+        player.update();
+    }
 }
 
 function play({ detail }) {
     console.debug('got playEvent', detail.notes);
-    if (player) {
-        player.isPlaying = true;
-    }
+    player = document.querySelector('x-player');
+    player.isPlaying = true;
+    player.getOffsets = getOffsetsFromFretboard(detail);
+    player.update();
 }
 
 function stop(e) {
     console.debug('got stopEvent', e);
-    if (player) {
-        player.isPlaying = false;
-    }
+    player = document.querySelector('x-player');
+    player.isPlaying = false;
 }
 
 function noteEnter({ detail }) {