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 }, chordCheckbox({ name: 'major', label: '', checked: opts.major }), chordCheckbox({ name: 'minor', label: '-', checked: opts.minor }), chordCheckbox({ name: 'seventh', label: '7', checked: opts.seventh }), chordCheckbox({ name: 'minorSeventh', label: '-7', checked: opts.minorSeventh }), chordCheckbox({ name: 'majorSeventh', label: '7', checked: opts.majorSeventh }), 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 chordCheckbox({ name, label, checked }: any): Element { return labelInput({ className: 'g-ChordLabel', type: 'checkbox', name, label, checked }) } 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, seventh: input('seventh').checked, minorSeventh: input('minorSeventh').checked, majorSeventh: input('majorSeventh').checked, bpm: parseInt(input('bpm').value), beatsPerChord: parseInt(input('beatsPerChord').value) } options.save(opts) dom.show(play.view(opts)) } type LabelInputParams = { className?: string, type: string, name: string, label: string, checked?: boolean, value?: string } function labelInput({ className, type, name, label, checked, value }: LabelInputParams) { return h('label', { className }, h('input', { type, name, checked, value }), label ) }