first stab at fretboard player.

need to handle actual chord positions so everything isn't in 4, but
otherwise works?

1 files changed, 25 insertions, 13 deletions

diff --git a/fretboard.mjs b/fretboard.mjs
index 7eba9f5..8a7fe36 100644
--- a/fretboard.mjs
+++ b/fretboard.mjs
@@ -28,6 +28,10 @@ export default class extends HTMLElement {
     }
 
     saveEvent = 'x-fretboard-save';
+    playEvent = 'x-fretboard-play';
+    stopEvent = 'x-fretboard-stop';
+
+    isPlaying = false;
 
     constructor() {
         super();
@@ -43,30 +47,38 @@ export default class extends HTMLElement {
 
     connectedCallback() {
         console.debug('Fretboard#connectedCallback', this);
-        this.querySelectorAll('.save').forEach(elt => {
-            elt.onclick = (e) => {
-                console.log('Fretboard#onSave');
+
+        const postEvent = (elt, eventName) => {
+            const res = (e) => {
                 e.preventDefault();
-                const event = new CustomEvent(this.saveEvent, {
+                const event = new CustomEvent(eventName, {
                     bubbles: true,
                     cancelable: true,
                     detail: this
                 });
                 this.dispatchEvent(event);
             };
-        })
+            return res.bind(this);
+        }
+        this.querySelectorAll('.save').forEach(elt => elt.onclick = postEvent(elt, this.saveEvent));
+        this.querySelectorAll('.play').forEach(elt => elt.onclick = e => {
+            if (this.isPlaying) {
+                (postEvent(elt, this.stopEvent))(e);
+                elt.innerText = 'play';
+                this.isPlaying = false;
+            } else {
+                (postEvent(elt, this.playEvent))(e);
+                elt.innerText = 'stop';
+                this.isPlaying = true;
+            }
+        });
         this.formChanged();
     }
 
     get notes() {
-        console.debug('Fretboard#notes', this);
-        return [];
-        // const formData = new FormData(this.form);
-        // return Array.from(this.form.querySelectorAll('tbody .selected')).map(elt => {
-        //     const string = Array.from(elt.parentNode.classList).filter(x => x.startsWith('string'))[0];
-        //     const val = formData.get(string);
-        //     return fretToNote(this.form, string, val);
-        // })
+        return Array.from(this.querySelectorAll('x-string')).map(elt => {
+            return elt.getAttribute('value');
+        });
     }
 
     updateSelected(formData) {