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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
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 blocks = [{
[Sound.Bass]: true,
[Sound.Snare]: false,
[Sound.HitHatClosed]: false,
}]
let blocksNode = h('div',
{ className: 'g-Sequencer__Blocks' },
block.column([
{
checked: false,
onCheck: checked => blocks[0][Sound.HitHatClosed] = checked
},
{
checked: false,
onCheck: checked => blocks[0][Sound.Snare] = checked
},
{
checked: true,
onCheck: checked => blocks[0][Sound.Bass] = checked
}
])
)
let onNextStep = (sounds: soundsLib.Sounds) => {
let oldIndex = index
let newIndex = (index + 1) % blocks.length
index = newIndex
let oldBlock = blocksNode.childNodes[oldIndex] as HTMLElement
if (oldBlock !== undefined) oldBlock.classList.remove('g-Sequencer__Block--Beat')
let newBlock = 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 newBlock.offsetWidth
newBlock.classList.add('g-Sequencer__Block--Beat')
soundsLib.all().forEach(sound => {
if (blocks[newIndex][sound]) soundsLib.play(sounds, sound)
})
}
let sequencer = h('div', { className: 'g-Sequencer' },
play.view({
onNextStep,
onStop: () => {
let block = blocksNode.childNodes[index] as HTMLElement
block.classList.remove('g-Sequencer__Block--Beat')
index = -1
}
}),
addRemoveBeat.view({
initBeats: 1,
onRemove: index => {
let lastBlock = blocksNode.childNodes[index]
blocksNode.removeChild(lastBlock)
blocks.pop()
},
onAdd: index => {
blocks.push({
[Sound.Bass]: false,
[Sound.Snare]: false,
[Sound.HitHatClosed]: false,
})
blocksNode.appendChild(block.column(
soundsLib.all().map(sound => ({
checked: false,
onCheck: checked => blocks[index][sound] = checked
}))
))
}
}),
h('div',
{ className: 'g-Sequencer__Grid' },
h('ol',
{ className: 'g-Sequencer__Column' },
soundItem('Hit-hat (closed)', Sound.HitHatClosed),
soundItem('Snare', Sound.Snare),
soundItem('Bass', Sound.Bass)
),
blocksNode
)
)
return sequencer
}
function soundItem(name: string, sound: Sound): Element {
return h('li',
{ onclick: async () => {
let sounds = await soundsLib.load()
soundsLib.play(sounds, sound)
}
},
name
)
}
|
