React

by STHayden

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.board {
  display: flex;
}

.column {
  width: 100px;
  
}

.item {
  height: 50px;
  width: 100px;
  outline: 1px solid;
}

.circle {
  height: 30px;
  width: 30px;
  border-radius: 15px;
  background: white;
  border: 1px solid;
  position: relative;
  top: 5px;
  left: 35px;
  cursor: pointer;
}
.circle.active {
  background: black;
}

.step {
  text-align:center;
}

textarea {
  height: 100px;
  width: 500px;
}

React

const DumbMachineOutput = ({ data }) => <React.Fragment>
  <br />
  output - place this in to a json file and pass to golang drumb machine:
  <br /> 
  <textarea value={data}></textarea>
</React.Fragment>

const BeatColumn = ({ index, children }) =>	<div className="column">
  <div className="item">
    <div className="step">{index}</div>
  </div>
  {children}
</div>

const InstrumentColumn = ({ instruments, addBeat, removeBeat }) => <div className="column">
  <div className="item">
    Step
    <button title="add a beat column" onClick={addBeat}>+</button>
    <button title="remove a beat column" onClick={removeBeat}>-</button>
  </div>
  {instruments.map(item => (
    <div className="item">{item}</div>
  ))}
</div>

class DumbMachine extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      title: "Four on the floor",
      loop: [
        ["bass drum"],
        [],
        ["hihat"],
        [],
        ["bass drum", "snare drum"],
        [],
        ["hihat"]
      ],
      instruments: [
      	'cymbal',
      	'hihat',
      	'hcp/tamb',
      	'rim/cowbell',
      	'hi tom',
      	'mid tom',
      	'low tom',
      	'snare drum',
      	'bass drum',
      	'accent',
      ]
    }
  }
  
  onCircleClick(step, instrument) {
  	const loop = this.state.loop.slice();
  	const isSelected = loop[step].indexOf(instrument) > -1;
    if (isSelected) {
    	loop[step] = loop[step].filter(i => i !== instrument);
    } else {
    	loop[step].push(instrument)
    }
    this.setState({ loop });
  }
  
  onTitleChange(e) {
  	this.setState({ title: e.target.value });
  }
  
  getFileData() {
  	return JSON.stringify({
    	title: this.state.title,
    	loop: this.state.loop,
    }, null, '\t')
  }
  
  addBeat() {
  	const loop = this.state.loop.slice();
    loop.push([]);
    this.setState({ loop });
  }
  
  removeBeat() {
  	const loop = this.state.loop.slice();
    loop.pop();
    this.setState({ loop });
  }
  
  render() {
   ...