49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
|
import './App.css';
|
||
|
import React from 'react';
|
||
|
import {DrumPad, drumPads} from "./Components";
|
||
|
|
||
|
class App extends React.Component {
|
||
|
constructor(props) {
|
||
|
super(props);
|
||
|
this.state = {
|
||
|
volume: '50%',
|
||
|
currentSound: '',
|
||
|
}
|
||
|
this.updateDisplay = this.updateDisplay.bind(this)
|
||
|
}
|
||
|
updateDisplay(soundID) {
|
||
|
this.setState({
|
||
|
currentSound: soundID,
|
||
|
})
|
||
|
|
||
|
}
|
||
|
render() {
|
||
|
return (
|
||
|
<div className="App">
|
||
|
<div id={'drum-machine'}>
|
||
|
<div id="drumPads">
|
||
|
{drumPads.map((drumPad, i, arr) => (
|
||
|
<DrumPad
|
||
|
padKey={arr[i].key}
|
||
|
soundID={arr[i].soundID}
|
||
|
url={arr[i].url}
|
||
|
updateDisplay={this.updateDisplay}
|
||
|
/>
|
||
|
))}
|
||
|
</div>
|
||
|
<div>
|
||
|
<div id={'controls'}>
|
||
|
<div id={'display'}>
|
||
|
{this.state.currentSound}
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
export default App;
|
||
|
|