|
|
|
@ -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) {
|
|
|
|
|