3 files changed, 22 insertions, 15 deletions

diff --git a/index.html b/index.html
index 093606f..6595fb9 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,7 @@
       </template>
 
       <x-player>
+        <input type='range' min='0' max='1' value='0.1' step='0.1'>
         <button class='play'>play ▶️</button>
       </x-player>
       <button class='save'>+</button>
diff --git a/main.mjs b/main.mjs
index 452620d..38cfc60 100644
--- a/main.mjs
+++ b/main.mjs
@@ -74,12 +74,5 @@ function init() {
         kp.addEventListener(kp.noteEnterEvent, noteEnter);
         kp.addEventListener(kp.noteLeaveEvent, noteLeave);
     });
-
-    document.querySelector('a.run').forEach(a => {
-        a.onclick = e => {
-            e.preventDefault();
-            location.reload(true);
-        }
-    })
 }
 document.addEventListener('DOMContentLoaded', init);
diff --git a/string.mjs b/string.mjs
index 39a3533..e8c32a7 100644
--- a/string.mjs
+++ b/string.mjs
@@ -59,22 +59,40 @@ export default class extends HTMLElement {
         });
     }
 
+    deselectInputs() {
+        this.querySelectorAll('input[slot="fret"]').forEach(i => {
+            console.debug('desecl inputs', i);
+            i.checked = false
+        });
+    }
+
     muteClicked(e) {
         console.debug('String#muteClicked', this, e);
         if (this.getAttribute('value') !== 'x') {
             this.setAttribute('value', 'x');
             this.classList.add('muted');
+            this.deselectInputs();
         } else {
             this.setAttribute('value', this.getAttribute('tonic'));
             this.classList.remove('muted');
         }
+
+        this.updateSelected();
     }
 
     fretClicked(e) {
         console.debug('String#fretClicked', this, e);
         console.debug(' -- note', e.target.note);
-        this.setAttribute('value', e.target.getAttribute('value'));
-        this.setAttribute('octave', e.target.getAttribute('octave'));
+        const [v, o] = ['value', 'octave'].map(attr => e.target.getAttribute(attr));
+
+        // if the open ‘fret’ was clicked, deselect any previously
+        // selected frets because it won't be done automatically, as
+        // the open position isn't in the dom as a radio input.
+        if (v == this.getAttribute('tonic') && o == this.getAttribute('tonic-octave')) {
+            this.querySelectorAll('input[type="radio"]').forEach(inp => inp.checked = false);
+        }
+        this.setAttribute('value', v);
+        this.setAttribute('octave', o);
         this.updateSelected();
     }
 
@@ -121,11 +139,6 @@ export default class extends HTMLElement {
             })
             tmpl.parentNode.insertBefore(item, tmpl);
         }
-
-        this.querySelectorAll('slot[name="selected"]').forEach(s => {
-            const note = this.getAttribute('value');
-            console.debug(' -- setting selected', note);
-            s.textContent = note;
-        })
+        this.updateSelected();
     }
 }