From 2a9b6ef0be04b5b5cacc47922e19c05d190d6ade Mon Sep 17 00:00:00 2001
From: Brian Cully <bjc@spork.org>
Date: Sat, 26 Jul 2025 14:55:53 -0400
Subject: first stab at fretboard player.

need to handle actual chord positions so everything isn't in 4, but
otherwise works?
---
 fretboard.mjs | 38 +++++++++++++++++++++++++-------------
 1 file changed, 25 insertions(+), 13 deletions(-)

(limited to 'fretboard.mjs')

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) {
-- 
cgit v1.3