diff --git a/src/components/dice/DiceResults.js b/src/components/dice/DiceResults.js
index 7ce4a2d..0bac0e2 100644
--- a/src/components/dice/DiceResults.js
+++ b/src/components/dice/DiceResults.js
@@ -4,30 +4,31 @@ import { Flex, Text, Button, IconButton } from "theme-ui";
import ClearDiceIcon from "../../icons/ClearDiceIcon";
import RerollDiceIcon from "../../icons/RerollDiceIcon";
+import { getDiceRollTotal } from "../../helpers/dice";
+
const maxDiceRollsShown = 6;
function DiceResults({ diceRolls, onDiceClear, onDiceReroll }) {
const [isExpanded, setIsExpanded] = useState(false);
- if (
- diceRolls.map((dice) => dice.roll).includes("unknown") ||
- diceRolls.length === 0
- ) {
+ if (diceRolls.length === 0) {
return null;
}
let rolls = [];
if (diceRolls.length > 1) {
- rolls = diceRolls.map((dice, index) => (
-
-
- {dice.roll}
-
-
- {index === diceRolls.length - 1 ? "" : "+"}
-
-
- ));
+ rolls = diceRolls
+ .filter((dice) => dice.roll !== "unknown")
+ .map((dice, index) => (
+
+
+ {dice.roll}
+
+
+ {index === diceRolls.length - 1 ? "" : "+"}
+
+
+ ));
}
return (
@@ -60,7 +61,7 @@ function DiceResults({ diceRolls, onDiceClear, onDiceReroll }) {
sx={{ fontSize: 5, userSelect: "none" }}
mb={diceRolls.length === 1 ? "24px" : 0}
>
- {diceRolls.reduce((accumulator, dice) => accumulator + dice.roll, 0)}
+ {getDiceRollTotal(diceRolls)}
{rolls.length > maxDiceRollsShown ? (