1 files changed, 21 insertions, 10 deletions

diff --git a/string.mjs b/string.mjs
index 4e1f198..36f15ac 100644
--- a/string.mjs
+++ b/string.mjs
@@ -64,7 +64,7 @@ function dots(i) {
 export default class extends HTMLElement {
     // TODO: probably not worth observing frets since everything just
     // gets re-rendered when they change.
-    static observedAttributes = ['frets', 'tonic', 'selected'];
+    static observedAttributes = ['frets', 'tonic', 'value'];
 
     static name = 'x-string';
     static register() {
@@ -104,11 +104,11 @@ export default class extends HTMLElement {
 
     muteClicked(e) {
         console.debug('String#muteClicked', this, e);
-        if (this.getAttribute('selected') !== 'x') {
-            this.setAttribute('selected', 'x');
+        if (this.getAttribute('value') !== 'x') {
+            this.setAttribute('value', 'x');
             this.classList.add('muted');
         } else {
-            this.setAttribute('selected', this.getAttribute('tonic'));
+            this.setAttribute('value', this.getAttribute('tonic'));
             this.classList.remove('muted');
         }
     }
@@ -116,7 +116,7 @@ export default class extends HTMLElement {
     fretClicked(e) {
         console.debug('String#fretClicked', this, e);
         console.debug(' -- note', e.target.note);
-        this.setAttribute('selected', e.target.note);
+        this.setAttribute('value', e.target.getAttribute('value'));
     }
 
     render() {
@@ -129,27 +129,38 @@ export default class extends HTMLElement {
 
         this.zot();
 
+        const chromIndex = chromaticScale.indexOf(this.getAttribute('tonic'));
+
         const tmpl = this.querySelector('template');
         this.querySelectorAll('slot[name="open"]').forEach(s => {
-            s.note = this.getAttribute('tonic');
-            s.innerText = s.note;
+            const note = chromaticScale[chromIndex]
+            s.setAttribute('value', note);
+            s.innerText = note;
             s.parentNode.onclick = this.fretClicked.bind(this);
         })
 
-        const chromIndex = chromaticScale.indexOf(this.getAttribute('tonic'));
+        const sel = this.getAttribute('value');
         const frets = Number(this.getAttribute('frets'));
         for (let i = 1; i <= frets; i++) {
             const item = tmpl.content.cloneNode(true);
             item.querySelectorAll('input[slot="fret"]').forEach(s => {
+                const value = chromaticScale[chromIndex + i];
                 s.setAttribute('name', this.myName());
-                s.setAttribute('value', chromaticScale[chromIndex + i]);
+                s.setAttribute('value', value);
+                if (value === sel) {
+                    s.checked = true;
+                } else {
+                    s.checked = false;
+                }
                 s.parentNode.onclick = this.fretClicked.bind(this);
             })
             tmpl.parentNode.insertBefore(item, tmpl);
         }
 
         this.querySelectorAll('slot[name="selected"]').forEach(s => {
-            s.innerText = this.getAttribute('selected');
+            const note = this.getAttribute('value');
+            console.debug(' -- setting selected', note);
+            s.innerText = note;
         })
     }
 }