Play random major and/or minor chords

1 files changed, 55 insertions, 0 deletions

diff --git a/src/view/form.ts b/src/view/form.ts
new file mode 100644
index 0000000..a74a7de
--- /dev/null
+++ b/src/view/form.ts
@@ -0,0 +1,55 @@
+import h, { classNames } from 'lib/h'
+import * as dom from 'lib/dom'
+import * as play from 'view/play'
+import * as layout from 'view/layout'
+import * as chord from 'chord'
+import * as options from 'view/options'
+
+// View
+
+export function view(): Element[] {
+  let opts = options.load()
+
+  return layout.view(
+    h('form',
+      { 
+        className: 'g-Form', 
+        onsubmit 
+      },
+      labelInput({ type: 'checkbox', name: 'major', label: 'Major', checked: opts.major }),
+      labelInput({ type: 'checkbox', name: 'minor', label: 'Minor', checked: opts.minor }),
+      labelInput({ type: 'number', name: 'bpm', label: 'BPM', value: opts.bpm.toString() }),
+      labelInput({ type: 'number', name: 'beatsPerChord', label: 'Beats per Chord', value: opts.beatsPerChord.toString() }),
+      h('input', { type: 'submit', value: 'Play' })
+    )
+  )
+}
+
+function onsubmit(event: Event): void {
+  event.preventDefault()
+  let input = (name: String) => document.querySelector(`input[name="${name}"]`) as HTMLInputElement
+  let opts = {
+    major: input('major').checked,
+    minor: input('minor').checked,
+    bpm: parseInt(input('bpm').value),
+    beatsPerChord: parseInt(input('beatsPerChord').value)
+  }
+  options.save(opts)
+  dom.show(play.view(opts))
+}
+
+type LabelInputParams = {
+  type: string,
+  name: string,
+  label: string,
+  checked?: boolean,
+  value?: string
+}
+
+function labelInput({ type, name, label, checked, value }: LabelInputParams) {
+  return h('label',
+    {},
+    h('input', { type, name, checked, value }),
+    label
+  )
+}