From 18b63657328a619a638688e5a85c9c1da2b196c1 Mon Sep 17 00:00:00 2001 From: Brian Cully Date: Mon, 12 May 2025 23:06:19 -0400 Subject: radio radio! --- fretboard.mjs | 2 +- index.html | 4 ++-- string.mjs | 31 +++++++++++++++++++++---------- 3 files changed, 24 insertions(+), 13 deletions(-) diff --git a/fretboard.mjs b/fretboard.mjs index 7ba0dab..7eba9f5 100644 --- a/fretboard.mjs +++ b/fretboard.mjs @@ -120,7 +120,7 @@ export default class extends HTMLElement { item.querySelectorAll('[slot="string"]').forEach(s => { console.debug(' -- setting tonic', tonic, 'on', s); s.setAttribute('tonic', tonic); - s.setAttribute('selected', tonic); + s.setAttribute('value', tonic); s.setAttribute('frets', frets.toString()); }) tmpl.parentNode.insertBefore(item, tmpl); diff --git a/index.html b/index.html index 76284f2..9300ab9 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ -

selected

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; }) } } -- cgit v1.3