Slight cleanup and documentation

script.js

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