Return individual results with total

src/DiceContainer.js

@@ -5,15 +5,20 @@ import './styles.scss'
 export default class DiceContainer extends Component {
   constructor(props) {
     super(props)
+    let diceValues = []
+    for (let i = 0; i < props.numDice; i++) {
+      diceValues[i] = 6
+    }
     this.state = {
       totalValue: props.numDice * 6,
+      diceValues,
     }
     this.dice = []
     this.rollCount = 0
 
     this.rollDone = this.rollDone.bind(this)
     this.rollAll = this.rollAll.bind(this)
-    this.getDiceTotal = this.getDiceTotal.bind(this)
+    this.getRollResults = this.getRollResults.bind(this)
   }
 
   rollAll(values) {
@@ -31,24 +36,27 @@ export default class DiceContainer extends Component {
   rollDone() {
     this.rollCount--
     if (this.rollCount <= 0) {
-      this.getDiceTotal()
+      this.getRollResults()
     }
   }
 
-  getDiceTotal() {
-    let total = 0
+  getRollResults() {
+    let totalValue = 0
+    let diceValues = []
     for (let die of this.dice) {
       if (die !== null) {
-        total += die.getValue()
+        let value = die.getValue()
+        diceValues.push(value)
+        totalValue += value
       }
     }
-    this.setState({ totalValue: total })
-    this.props.totalCb(total)
+    this.setState({ totalValue, diceValues })
+    this.props.totalCb(totalValue, diceValues)
   }
 
   componentDidUpdate(prevProps, prevState) {
     if (prevProps.numDice !== this.props.numDice) {
-      this.getDiceTotal()
+      this.getRollResults()
     }
   }
 

src/ReactDice.js

@@ -36,8 +36,8 @@ class ReactDice extends Component {
     this.rollAll = this.rollAll.bind(this)
   }
 
-  totalCb(value) {
-    this.props.rollDone(value)
+  totalCb(total, diceValues) {
+    this.props.rollDone(total, diceValues)
   }
 
   rollAll(values = []) {

src/TestApp.js

@@ -15,7 +15,7 @@ class TestApp extends Component {
       rollTime: 2,
       faceColor: '#FF00AC',
       dotColor: '#1eff00',
-      diceTotal: 0,
+      diceTotal: '...',
       rolling: false,
     }
     this.handleChange = this.handleChange.bind(this)
@@ -42,7 +42,7 @@ class TestApp extends Component {
     })
   }
 
-  rollDone(value) {
+  rollDone(value, values) {
     this.setState({ diceTotal: value, rolling: false })
   }