attach octave values to frets

sometimes just do the simple thing

1 files changed, 7 insertions, 0 deletions

diff --git a/string.mjs b/string.mjs
index d2f0461..03cf720 100644
--- a/string.mjs
+++ b/string.mjs
@@ -68,6 +68,7 @@ export default class extends HTMLElement {
         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'));
     }
 
     render() {
@@ -81,11 +82,13 @@ export default class extends HTMLElement {
         this.zot();
 
         const chromIndex = chromaticScale.indexOf(this.getAttribute('tonic'));
+        let octave = this.getAttribute('tonic-octave');
 
         const tmpl = this.querySelector('template');
         this.querySelectorAll('slot[name="open"]').forEach(s => {
             const note = chromaticScale[chromIndex]
             s.setAttribute('value', note);
+            s.setAttribute('octave', octave);
             s.textContent = note;
             s.parentNode.onclick = this.fretClicked.bind(this);
         })
@@ -103,6 +106,10 @@ export default class extends HTMLElement {
                 } else {
                     s.checked = false;
                 }
+                if (value === 'C') {
+                    octave++;
+                }
+                s.setAttribute('octave', octave);
                 s.parentNode.onclick = this.fretClicked.bind(this);
             })
             tmpl.parentNode.insertBefore(item, tmpl);