diff --git a/src/components/party/DiceRoll.js b/src/components/party/DiceRoll.js
new file mode 100644
index 0000000..f04d11b
--- /dev/null
+++ b/src/components/party/DiceRoll.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { Flex, Box, Text } from "theme-ui";
+
+function DiceRoll({ rolls, type, children }) {
+ return (
+
+ {children}
+ {rolls
+ .filter((d) => d.type === type && d.roll !== "unknown")
+ .map((dice, index) => (
+
+ {dice.roll}
+
+ ))}
+
+ );
+}
+
+export default DiceRoll;
diff --git a/src/components/party/DiceRolls.js b/src/components/party/DiceRolls.js
index c30303d..01d1ccc 100644
--- a/src/components/party/DiceRolls.js
+++ b/src/components/party/DiceRolls.js
@@ -1,19 +1,69 @@
-import React from "react";
-import { Flex, Text } from "theme-ui";
+import React, { useState } from "react";
+import { Flex, Text, IconButton } from "theme-ui";
import DiceRollsIcon from "../../icons/DiceRollsIcon";
+import D20Icon from "../../icons/D20Icon";
+import D12Icon from "../../icons/D12Icon";
+import D10Icon from "../../icons/D10Icon";
+import D8Icon from "../../icons/D8Icon";
+import D6Icon from "../../icons/D6Icon";
+import D4Icon from "../../icons/D4Icon";
+import D100Icon from "../../icons/D100Icon";
+
+import DiceRoll from "./DiceRoll";
import { getDiceRollTotal } from "../../helpers/dice";
function DiceRolls({ rolls }) {
const total = getDiceRollTotal(rolls);
+
+ const [expanded, setExpanded] = useState(false);
+
return (
total > 0 && (
-
-
-
- {total}
-
+
+
+ setExpanded(!expanded)}
+ >
+
+
+
+ {total}
+
+
+ {expanded && (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
)
);