1 files changed, 24 insertions, 1 deletions
diff --git a/key-picker.mjs b/key-picker.mjs
index bd6482a..fc6b4ed 100644
--- a/key-picker.mjs
+++ b/key-picker.mjs
@@ -14,9 +14,32 @@ function scaleFrom(tonic, diatonic) {
 function formChanged(form) {
     const formData = new FormData(form);
     const scale = scaleFrom(formData.get('tonic'), formData.get('diatonic'));
-    ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh'].forEach((c, i) => {
+    ['tonic', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh'].forEach((c, i) => {
         Array.from(form.getElementsByClassName(c)).forEach(elt => elt.innerText = scale[i]);
     });
+
+    // todo: memoize this or put it in the scales module.
+    const allScales = chromaticScale.flatMap(tonic => {
+        return [MajorScale(tonic), MinorScale(tonic)];
+    })
+
+    const availableScales =
+        allScales.reduce((acc, s, i) => {
+            const suffix = i % 2 == 0 ? '' : 'min';
+            if (scale.includes(s.tonic) && scale.includes(s.third) && scale.includes(s.fifth)) {
+                return acc.concat(`${s.tonic}${suffix}`);
+            }
+            return acc;
+        }, []);
+    Array.from(form.getElementsByClassName('chords')).forEach(list => {
+        const items = availableScales.map(s => {
+            const elt = document.createElement('li');
+            elt.innerText = s;
+            return elt;
+        });
+        list.replaceChildren();
+        items.forEach(item => list.appendChild(item));
+    });
 }
 
 function handleFormChanged(e) {