convert to web components

one less thing to hard-code: element ids, which were brittle already.

1 files changed, 18 insertions, 11 deletions

diff --git a/main.mjs b/main.mjs
index 3054208..f0e4ed8 100644
--- a/main.mjs
+++ b/main.mjs
@@ -2,25 +2,32 @@ import Fretboard, { fretToNote } from './fretboard.mjs';
 import KeyPicker from './key-picker.mjs';
 import History from './history.mjs';
 
+function memoize(fn) {
+    let val = undefined;
+    return function () {
+        if (val === undefined) {
+            val = fn();
+        }
+        return val;
+    }
+}
+
 function notes(form) {
     const strings = ['string1', 'string2', 'string3', 'string4', 'string5', 'string6'];
     const formData = new FormData(form);
-    console.log('notes', form, formData);
+    console.debug('notes', form, formData);
     return strings.map((klass) => fretToNote(form, klass, formData.get(klass)));
 }
 
 function onSave(form) {
-    console.log('we done saved', form, notes(form));
+    console.debug('we done saved', form, notes(form));
 }
 
+function init() {
+    console.debug('App#init', this);
 
-function main() {
-    const fretboard = document.getElementById('fretboard');
-    const keyPicker = document.getElementById('key-picker');
-    const history = document.getElementById('history');
-
-    Fretboard(fretboard, { onSave });
-    KeyPicker(keyPicker);
-    History(history, keyPicker);
+    Fretboard.register();
+    KeyPicker.register();
+    History.register();
 }
-document.addEventListener('DOMContentLoaded', main);
+document.addEventListener('DOMContentLoaded', init);