add octave to string so they're not all smooshed

1 files changed, 11 insertions, 2 deletions

diff --git a/fretboard.mjs b/fretboard.mjs
index 8a7fe36..9c25ff6 100644
--- a/fretboard.mjs
+++ b/fretboard.mjs
@@ -1,5 +1,6 @@
 // open string notes, starting from the deepest string.
 const openStrings = ['E', 'A', 'D', 'G', 'B', 'E'];
+const stringOctaves = [3, 3, 4, 4, 4, 5];
 
 // convert ‘string1’ ‘fret2’ in ‘form’ to F#
 export function fretToNote(form, stringName, fretName) {
@@ -64,11 +65,11 @@ export default class extends HTMLElement {
         this.querySelectorAll('.play').forEach(elt => elt.onclick = e => {
             if (this.isPlaying) {
                 (postEvent(elt, this.stopEvent))(e);
-                elt.innerText = 'play';
+                elt.innerText = '▶️ play';
                 this.isPlaying = false;
             } else {
                 (postEvent(elt, this.playEvent))(e);
-                elt.innerText = 'stop';
+                elt.innerText = '⏹️ stop';
                 this.isPlaying = true;
             }
         });
@@ -81,6 +82,12 @@ export default class extends HTMLElement {
         });
     }
 
+    get octaves() {
+        return Array.from(this.querySelectorAll('x-string')).map(elt => {
+            return Number(elt.getAttribute('octave'));
+        });
+    }
+
     updateSelected(formData) {
         // this.querySelectorAll('tbody .selected').forEach(elt => {
         //     const string = Array.from(elt.parentNode.classList).filter(x => x.startsWith('string'))[0];
@@ -129,9 +136,11 @@ export default class extends HTMLElement {
                 const item = tmpl.content.cloneNode(true);
                 console.debug(' -- item', item);
                 const tonic = openStrings[i];
+                const octave = stringOctaves[i];
                 item.querySelectorAll('[slot="string"]').forEach(s => {
                     console.debug(' -- setting tonic', tonic, 'on', s);
                     s.setAttribute('tonic', tonic);
+                    s.setAttribute('octave', octave);
                     s.setAttribute('value', tonic);
                     s.setAttribute('frets', frets.toString());
                 })