2 files changed, 69 insertions, 6 deletions

diff --git a/fretboard.mjs b/fretboard.mjs
index c58543c..dee7175 100644
--- a/fretboard.mjs
+++ b/fretboard.mjs
@@ -1,5 +1,66 @@
-function fretChanged(e) {
-    console.log('fret changed', e);
+import { chromaticScale } from "./scale.mjs";
+
+const strings = {
+    string1: 'E',
+    string2: 'A',
+    string3: 'D',
+    string4: 'G',
+    string5: 'B',
+    string6: 'E'
+};
+
+function isAccidental(note) {
+    return note[1] === '#' || note[1] === 'b';
+}
+
+function alternateAccidental(note) {
+    const root = chromaticScale.indexOf(note[0]);
+    switch (note[1]) {
+    case '#':
+        return `${chromaticScale[root+2]}b`;
+    case 'b':
+        return `${chromaticScale[root-1]}#`;
+    default:
+        return note;
+    }
+}
+
+function fretToNote(stringName, fretName) {
+    console.debug('fretToNote', stringName, fretName);
+    const string = strings[stringName];
+    if (!string) {
+        return null;
+    }
+
+    if (!fretName?.startsWith('fret')) {
+        return string;
+    }
+
+    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)}`;
+        } else {
+            p.innerText = note;
+        }
+    });
+}
+
+function handleFormChanged(e) {
+    console.log('handle form changed', e);
+    formChanged(e.target.form);
 }
 
 let mousedownVal = undefined;
@@ -24,9 +85,10 @@ function click(e) {
 
 export default function Fretboard(form) {
     console.debug('Fretboard()', form);
-    form.onchange = fretChanged;
+    form.onchange = handleFormChanged;
     form.querySelectorAll('input[type="radio"]').forEach(elt => {
         elt.onmousedown = mousedown;
         elt.onclick = click;
     });
+    formChanged(form);
 }
diff --git a/main.mjs b/main.mjs
index 97ba06f..18daab6 100644
--- a/main.mjs
+++ b/main.mjs
@@ -3,11 +3,12 @@ import { MajorScale, MinorScale } from './scale.mjs';
 
 Fretboard(document.getElementById('fretboard'));
 const cMaj = MajorScale('C');
-console.log('test major scale', cMaj.length);
+console.log('test major scale', cMaj.toString());
 console.log(`test fifth ${cMaj.root}`, cMaj.fifth);
 const cMin = MinorScale('C');
-console.log('test major scale', cMin.length);
+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.length);
+console.log('test major scale', bMaj.toString());
 console.log(`test fifth ${bMaj.root}`, bMaj.fifth);
+window.bjc = bMaj;