Slight cleanup and documentation

main
Holly McFarland 2 years ago
parent d45698938b
commit ea46e54351

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

Loading…
Cancel
Save