1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import h, { classNames } from 'lib/h'
import * as dom from 'lib/dom'
import { Options } from 'view/options'
import * as chord from 'chord'
import * as layout from 'view/layout'
export function view(options: Options): Element[] {
let chords = h('div',
{ className: 'g-Play' },
chordNode(),
chordNode(options),
chordNode(options)
)
let chordBeat = 1
dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
setInterval(() => {
if (chordBeat == options.beatsPerChord) {
shiftChords(chords, options)
chords.children[0].classList.remove('g-Chord--Beat')
dom.triggerAnimation(chords as HTMLElement, 'g-Play--Shift')
dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
chordBeat = 1
} else {
dom.triggerAnimation(chords.children[1] as HTMLElement, 'g-Chord--Beat')
chordBeat += 1
}
}, 60 / options.bpm * 1000)
return layout.view(chords)
}
/* Shift chords and generate a new random one.
*/
function shiftChords(chords: Element, options: Options) {
chords.removeChild(chords.children[0])
chords.appendChild(chordNode(options))
}
function chordNode(options?: Options): Element {
let [base, alteration] = options ? chord.generate(options) : ['', '']
return h('div',
{ className: 'g-Chord' },
base,
h('sup', {}, alteration)
)
}
|
