mute strings by clicking on the open note

3 files changed, 32 insertions, 21 deletions

diff --git a/fretboard.mjs b/fretboard.mjs
index dee7175..9a965b7 100644
--- a/fretboard.mjs
+++ b/fretboard.mjs
@@ -1,5 +1,6 @@
 import { chromaticScale } from "./scale.mjs";
 
+// open string notes, starting from the deepest string.
 const strings = {
     string1: 'E',
     string2: 'A',
@@ -9,10 +10,12 @@ const strings = {
     string6: 'E'
 };
 
+// true if not a natural note
 function isAccidental(note) {
     return note[1] === '#' || note[1] === 'b';
 }
 
+// convert ‘Eb’ to ‘D#’ and vice versa.
 function alternateAccidental(note) {
     const root = chromaticScale.indexOf(note[0]);
     switch (note[1]) {
@@ -25,8 +28,8 @@ function alternateAccidental(note) {
     }
 }
 
+// convert ‘fret2’ to Number(2)
 function fretToNote(stringName, fretName) {
-    console.debug('fretToNote', stringName, fretName);
     const string = strings[stringName];
     if (!string) {
         return null;
@@ -38,17 +41,13 @@ function fretToNote(stringName, fretName) {
 
     const root = chromaticScale.indexOf(string)
     const fret = Number(fretName.substring(4));
-    console.debug('root', root, 'fret', fret);
     return chromaticScale[root+fret];
 }
 
 function formChanged(form) {
-    console.log('form changed', form);
     const formData = new FormData(form);
-    console.log('form', formData);
     form.querySelectorAll('p').forEach(p => {
         const val = formData.get(p.className)
-        console.debug('found sel', val, p.className, formData);
         const note = fretToNote(p.className, val);
         if (isAccidental(note)) {
             p.innerText = `${note} / ${alternateAccidental(note)}`;
@@ -59,13 +58,12 @@ function formChanged(form) {
 }
 
 function handleFormChanged(e) {
-    console.log('handle form changed', e);
     formChanged(e.target.form);
 }
 
 let mousedownVal = undefined;
 
-function mousedown(e) {
+function fretMousedown(e) {
     // at mousedown time, the form hasn't yet been changed. to support
     // deselecting elements, we need to know what the previous
     // selection was, so store it here.
@@ -74,7 +72,7 @@ function mousedown(e) {
     mousedownVal = e.target.checked;
 }
 
-function click(e) {
+function fretClick(e) {
     const elt = e.target;
     // if this element was selected at mousedown time, deselect it
     // now.
@@ -83,12 +81,32 @@ function click(e) {
     }
 }
 
+function openClick(e) {
+    const elt = e.target.parentNode;
+    if (elt.classList.contains('muted')) {
+        elt.classList.remove('muted');
+        elt.querySelectorAll('input[type="radio"]').forEach(input => {
+            input.disabled = false;
+        })
+    } else {
+        elt.classList.add('muted');
+        elt.querySelectorAll('input[type="radio"]').forEach(input => {
+            input.checked = false;
+            input.disabled = true;
+        })
+    }
+}
+
 export default function Fretboard(form) {
     console.debug('Fretboard()', form);
     form.onchange = handleFormChanged;
+    form.querySelectorAll('.open').forEach(elt => {
+        console.debug('found open', elt);
+        elt.onclick = openClick;
+    });
     form.querySelectorAll('input[type="radio"]').forEach(elt => {
-        elt.onmousedown = mousedown;
-        elt.onclick = click;
+        elt.onmousedown = fretMousedown;
+        elt.onclick = fretClick;
     });
     formChanged(form);
 }
diff --git a/main.css b/main.css
index a59a4c1..8706203 100644
--- a/main.css
+++ b/main.css
@@ -14,3 +14,7 @@ thead {
 #fretboard p {
     font-style: italic;
 }
+
+tr.muted {
+    color: grey;
+}
diff --git a/main.mjs b/main.mjs
index 18daab6..219c3db 100644
--- a/main.mjs
+++ b/main.mjs
@@ -1,14 +1,3 @@
 import Fretboard from './fretboard.mjs'
-import { MajorScale, MinorScale } from './scale.mjs';
 
 Fretboard(document.getElementById('fretboard'));
-const cMaj = MajorScale('C');
-console.log('test major scale', cMaj.toString());
-console.log(`test fifth ${cMaj.root}`, cMaj.fifth);
-const cMin = MinorScale('C');
-console.log('test minor scale', cMin.toString());
-console.log(`test fifth ${cMin.root}`, cMin.fifth);
-const bMaj = MajorScale('B');
-console.log('test major scale', bMaj.toString());
-console.log(`test fifth ${bMaj.root}`, bMaj.fifth);
-window.bjc = bMaj;