|
|
|
@ -123,28 +123,22 @@ class App extends React.Component {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const drumPadRows = this.state.drumPadKeys.map((row, rowIndex) => {
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className="row justify-content-center"
|
|
|
|
|
id={`drum-pads-row-${rowIndex}`}
|
|
|
|
|
>
|
|
|
|
|
{row.map((note) => {
|
|
|
|
|
return (
|
|
|
|
|
const drumPadKeys = [];
|
|
|
|
|
this.state.drumPadKeys.forEach((drumPad, index) => {
|
|
|
|
|
drumPadKeys.push(
|
|
|
|
|
<DrumPad
|
|
|
|
|
drumPadKey={note.key}
|
|
|
|
|
isKeyPressed={this.state.latestKeyPressed === note.key}
|
|
|
|
|
noteName={this.state.bank ? note.altName : note.name}
|
|
|
|
|
audioSrc={this.state.bank ? note.altAudioSrc : note.audioSrc}
|
|
|
|
|
drumPadKey={drumPad.key}
|
|
|
|
|
isKeyPressed={this.state.latestKeyPressed === drumPad.key}
|
|
|
|
|
noteName={this.state.bank ? drumPad.altName : drumPad.name}
|
|
|
|
|
audioSrc={this.state.bank ? drumPad.altAudioSrc : drumPad.audioSrc}
|
|
|
|
|
power={this.state.power}
|
|
|
|
|
volume={this.state.volume}
|
|
|
|
|
colSize={Math.trunc(12 / row.length || 1)}
|
|
|
|
|
displayDrumPadPress={this.displayDrumPadPress}
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
if (index % 3 === 2) {
|
|
|
|
|
drumPadKeys.push(<div className="w-100"></div>);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
@ -152,14 +146,14 @@ class App extends React.Component {
|
|
|
|
|
id="drum-machine"
|
|
|
|
|
>
|
|
|
|
|
<div className="container">
|
|
|
|
|
<div className="card">
|
|
|
|
|
<div className="card-body text-black">
|
|
|
|
|
<div
|
|
|
|
|
className="row justify-content-center justify-content-md-left"
|
|
|
|
|
className="row p-4 justify-content-center justify-content-md-left bg-white text-black"
|
|
|
|
|
id="drum-pads-and-controls"
|
|
|
|
|
>
|
|
|
|
|
<div className="col-md-7 col-12">{drumPadRows}</div>
|
|
|
|
|
<div className="col-md-3 col-sm-6 col-8">
|
|
|
|
|
<div className="col-md-8 col-12">
|
|
|
|
|
<div className="row pe-auto pe-md-3">{drumPadKeys}</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="col-md-4 col-sm-6 col-8">
|
|
|
|
|
<div className="row h-100">
|
|
|
|
|
<div className="col-12 mt-2 mb-0 my-md-0">
|
|
|
|
|
<p className="m-0">Power</p>
|
|
|
|
@ -193,8 +187,6 @@ class App extends React.Component {
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<footer className="mt-2">
|
|
|
|
|
<p>
|
|
|
|
|
<a
|
|
|
|
@ -237,14 +229,20 @@ class DrumPad extends React.Component {
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<div className="col-4 p-1">
|
|
|
|
|
<button
|
|
|
|
|
id={this.props.drumPadKey}
|
|
|
|
|
className={`drum-pad btn col-${this.props.colSize} m-1 custom-el-color`}
|
|
|
|
|
style={{ height: 80, width: 100, fontWeight: "bold" }}
|
|
|
|
|
className={`drum-pad w-100 h-100 btn custom-el-color rounded-0`}
|
|
|
|
|
style={{
|
|
|
|
|
paddingTop: "20%",
|
|
|
|
|
paddingBottom: "20%",
|
|
|
|
|
fontWeight: "bold",
|
|
|
|
|
}}
|
|
|
|
|
onClick={this.handleClick}
|
|
|
|
|
>
|
|
|
|
|
{this.props.drumPadKey}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|