1 files changed, 65 insertions, 3 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);
 }