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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
|
import h, { classNames } from 'lib/h'
import * as soundsLib from 'sounds'
import { Sound } from 'sounds'
import * as play from 'view/sequencer/play'
import * as addRemoveBeat from 'view/sequencer/addRemoveBeat'
import * as block from 'view/sequencer/block'
export function view() {
let index = -1
let columns = [soundsLib.record(sound => sound == Sound.Kick)]
let blocksNode = h('div',
{ className: 'g-Sequencer__Blocks' },
block.column(
soundsLib.all().map(sound => ({
checked: sound == Sound.Kick,
onCheck: checked => columns[0][sound] = checked
}))
)
)
let onNextStep = (sounds: soundsLib.Sounds) => {
let oldIndex = index
let newIndex = (index + 1) % columns.length
index = newIndex
let oldColumn = blocksNode.childNodes[oldIndex] as HTMLElement
if (oldColumn !== undefined) oldColumn.classList.remove('g-Sequencer__Column--Beat')
let newColumn = blocksNode.childNodes[newIndex] as HTMLElement
// Trigger reflow between removing and adding the classname.
// Allow to re-trigger the animation if there is only one column.
// See https://css-tricks.com/restart-css-animation/
void newColumn.offsetWidth
newColumn.classList.add('g-Sequencer__Column--Beat')
soundsLib.all().forEach(sound => {
if (columns[newIndex][sound]) soundsLib.play(sounds, sound)
})
}
let sequencer = h('div', { className: 'g-Sequencer' },
play.view({
onNextStep,
onStop: () => {
let column = blocksNode.childNodes[index] as HTMLElement
column.classList.remove('g-Sequencer__Column--Beat')
index = -1
}
}),
addRemoveBeat.view({
initBeats: 1,
onRemove: index => {
let lastColumn = blocksNode.childNodes[index]
blocksNode.removeChild(lastColumn)
columns.pop()
},
onAdd: index => {
columns.push(soundsLib.record(sound => false))
blocksNode.appendChild(block.column(
soundsLib.all().map(sound => ({
checked: false,
onCheck: checked => columns[index][sound] = checked
}))
))
}
}),
h('div',
{ className: 'g-Sequencer__Grid' },
h('ol',
{ className: 'g-Sequencer__Column' },
...soundsLib.all().map(soundItem)
),
blocksNode
)
)
return sequencer
}
function soundItem(sound: Sound): Element {
return h('li',
{ onclick: async () => {
let sounds = await soundsLib.load()
soundsLib.play(sounds, sound)
}
},
soundsLib.toString(sound)
)
}
|
