From 77f5e81d0a1adc497040eaa89095635f3de3924e Mon Sep 17 00:00:00 2001 From: Brian Cully Date: Mon, 28 Jul 2025 08:52:51 -0400 Subject: attach octave values to frets sometimes just do the simple thing --- fretboard.mjs | 9 +++++++- history.mjs | 7 +++--- index.html | 2 +- main.mjs | 70 ++++++++++++++++++++++++++++++++--------------------------- scale.mjs | 17 +++++++++++++-- string.mjs | 7 ++++++ tests.mjs | 10 ++++++--- 7 files changed, 79 insertions(+), 43 deletions(-) diff --git a/fretboard.mjs b/fretboard.mjs index 9c25ff6..cae94ec 100644 --- a/fretboard.mjs +++ b/fretboard.mjs @@ -82,6 +82,12 @@ export default class extends HTMLElement { }); } + get tonics() { + return Array.from(this.querySelectorAll('x-string')).map(elt => { + return elt.getAttribute('tonic'); + }); + } + get octaves() { return Array.from(this.querySelectorAll('x-string')).map(elt => { return Number(elt.getAttribute('octave')); @@ -140,8 +146,9 @@ export default class extends HTMLElement { item.querySelectorAll('[slot="string"]').forEach(s => { console.debug(' -- setting tonic', tonic, 'on', s); s.setAttribute('tonic', tonic); - s.setAttribute('octave', octave); + s.setAttribute('tonic-octave', octave); s.setAttribute('value', tonic); + s.setAttribute('octave', octave); s.setAttribute('frets', frets.toString()); }) tmpl.parentNode.insertBefore(item, tmpl); diff --git a/history.mjs b/history.mjs index b7d49ed..e09073a 100644 --- a/history.mjs +++ b/history.mjs @@ -18,7 +18,10 @@ export default class extends HTMLElement { console.debug('History#constructor', this); this.onClick = e => console.debug('history click', e); + } + connectedCallback() { + console.debug('History#connectedCallback', this); this.template = this.querySelector('template'); this.list = this.querySelector('ol'); @@ -26,10 +29,6 @@ export default class extends HTMLElement { this._internals = this.attachInternals(); } - connectedCallback() { - console.debug('History#connectedCallback', this); - } - add(fretboard) { console.debug('History#add', this, fretboard); this._internals.states.add('fresh'); diff --git a/index.html b/index.html index 9488e0c..3c02fa2 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@