first stab at fretboard player.

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

1 files changed, 2 insertions, 51 deletions

diff --git a/string.mjs b/string.mjs
index 36f15ac..d2f0461 100644
--- a/string.mjs
+++ b/string.mjs
@@ -12,55 +12,6 @@ function dots(i) {
     }
 }
 
-/*
-        this.querySelectorAll('.open').forEach(elt => {
-            elt.onclick = this.openClicked.bind(this);
-        });
-        this.querySelectorAll('input[type="radio"]').forEach(elt => {
-            elt.onmousedown = this.fretMousedown.bind(this);
-            elt.onclick = this.fretClicked.bind(this);
-        });
-
-
-    #mousedownVal;
-    fretMousedown(e) {
-        // at mousedown time, the form hasn't yet been changed. to support
-        // deselecting elements, we need to know what the previous
-        // selection was, so store it here.
-        //
-        // it'd be nice to be able to do this just in the click handler.
-        this.#mousedownVal = e.target.checked;
-    }
-
-    openClicked(e) {
-        const elt = e.target.parentNode;
-        if (elt.classList.contains('muted')) {
-            elt.classList.remove('muted');
-            elt.querySelectorAll('input[type="radio"]').forEach(input => {
-                input.disabled = false;
-            })
-        } else {
-            elt.classList.add('muted');
-            elt.querySelectorAll('input[type="radio"]').forEach(input => {
-                input.checked = false;
-                input.disabled = true;
-            })
-        }
-        this.formChanged();
-    }
-
-    fretClicked(e) {
-        const elt = e.target;
-        // if this element was selected at mousedown time, deselect it
-        // now.
-        if (this.#mousedownVal) {
-            elt.checked = false;
-            // doesn't get called automatically.
-            this.formChanged();
-        }
-    }
- */
-
 export default class extends HTMLElement {
     // TODO: probably not worth observing frets since everything just
     // gets re-rendered when they change.
@@ -135,7 +86,7 @@ export default class extends HTMLElement {
         this.querySelectorAll('slot[name="open"]').forEach(s => {
             const note = chromaticScale[chromIndex]
             s.setAttribute('value', note);
-            s.innerText = note;
+            s.textContent = note;
             s.parentNode.onclick = this.fretClicked.bind(this);
         })
 
@@ -160,7 +111,7 @@ export default class extends HTMLElement {
         this.querySelectorAll('slot[name="selected"]').forEach(s => {
             const note = this.getAttribute('value');
             console.debug(' -- setting selected', note);
-            s.innerText = note;
+            s.textContent = note;
         })
     }
 }