|
|
@ -1,9 +1,4 @@ |
|
|
|
class Die extends React.Component { |
|
|
|
render() { |
|
|
|
return (<li key={this.props.index}>{this.props.num}</li>); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// Parent component that's rendered to the DOM
|
|
|
|
class Main extends React.Component { |
|
|
|
constructor(props) { |
|
|
|
super(props); |
|
|
@ -15,7 +10,31 @@ class Main extends React.Component { |
|
|
|
}; |
|
|
|
} |
|
|
|
|
|
|
|
renderBody() { |
|
|
|
// Renders a single die
|
|
|
|
renderDie(num) { |
|
|
|
// Adds a key attribute for reasons I don't really understand, but it made my js console stop complaining
|
|
|
|
return <Die key={this.state.numrendered++} num={num} />; |
|
|
|
} |
|
|
|
|
|
|
|
// Renders all dice from a new roll and saves total to component state
|
|
|
|
renderDice() { |
|
|
|
const values = Array.from({ length: this.state.numdice }, () => Math.floor(Math.random() * this.state.sides + 1)); |
|
|
|
this.state.total = values.reduce((a, b) => (a + b)) |
|
|
|
return values.map(this.renderDie.bind(this)); |
|
|
|
} |
|
|
|
|
|
|
|
// Updates state with new roll config, triggering a rerender/reroll
|
|
|
|
rollDice(numdice, sides) { |
|
|
|
this.setState({ numdice: numdice, sides: sides }); |
|
|
|
} |
|
|
|
|
|
|
|
// Convenience method for getting the config panel
|
|
|
|
getControlsObject(numdice, sides) { |
|
|
|
return <Controls numdice={numdice} sides={sides} roll={this.rollDice.bind(this)} /> |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
if (this.state.numdice == 0) { |
|
|
|
return <div>{this.getControlsObject(1, 6)}</div>; |
|
|
|
} else { |
|
|
@ -35,29 +54,13 @@ class Main extends React.Component { |
|
|
|
); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
renderDie(num) { |
|
|
|
return <Die key={this.state.numrendered++} num={num} />; |
|
|
|
} |
|
|
|
|
|
|
|
renderDice() { |
|
|
|
const values = Array.from({ length: this.state.numdice }, () => Math.floor(Math.random() * this.state.sides + 1)); |
|
|
|
this.state.total = values.reduce((a, b) => (a + b)) |
|
|
|
return values.map(this.renderDie.bind(this)); |
|
|
|
} |
|
|
|
|
|
|
|
rollDice(numdice, sides) { |
|
|
|
this.setState({ numdice: numdice, sides: sides }); |
|
|
|
} |
|
|
|
|
|
|
|
getControlsObject(numdice, sides) { |
|
|
|
return <Controls numdice={numdice} sides={sides} roll={this.rollDice.bind(this)} /> |
|
|
|
} |
|
|
|
|
|
|
|
class Die extends React.Component { |
|
|
|
render() { |
|
|
|
return this.renderBody(); |
|
|
|
return (<li key={this.props.index}>{this.props.num}</li>); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
class Controls extends React.Component { |
|
|
|
constructor(props) { |
|
|
@ -68,14 +71,17 @@ class Controls extends React.Component { |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// Uses current config values to trigger new roll
|
|
|
|
roll() { |
|
|
|
this.props.roll(this.state.numdice, this.state.sides); |
|
|
|
} |
|
|
|
|
|
|
|
// Updates number of dice to roll without actually triggering roll
|
|
|
|
setNumDice(num) { |
|
|
|
this.setState({ numdice: num }); |
|
|
|
} |
|
|
|
|
|
|
|
// Updates number of sides on dice without actually triggering roll
|
|
|
|
setSides(num) { |
|
|
|
this.setState({ sides: num }); |
|
|
|
} |
|
|
@ -96,10 +102,12 @@ class Controls extends React.Component { |
|
|
|
} |
|
|
|
|
|
|
|
class NumberControl extends React.Component { |
|
|
|
// Increment value assigned to this control
|
|
|
|
increment() { |
|
|
|
this.props.update(this.props.val + 1); |
|
|
|
} |
|
|
|
|
|
|
|
// Decrement value assigned to this control, no lower than min
|
|
|
|
decrement() { |
|
|
|
const newVal = this.props.val - 1; |
|
|
|
if (newVal >= this.props.min) { |
|
|
|