Added dice network replication and display for peers

src/components/party/DiceRolls.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { Flex, Text } from "theme-ui";
+
+import DiceRollsIcon from "../../icons/DiceRollsIcon";
+
+import { getDiceRollTotal } from "../../helpers/dice";
+
+function DiceRolls({ rolls }) {
+  const total = getDiceRollTotal(rolls);
+  return (
+    total > 0 && (
+      <Flex p={1}>
+        <DiceRollsIcon />
+        <Text px={1} as="p" my={1} variant="body2" sx={{ width: "100%" }}>
+          {total}
+        </Text>
+      </Flex>
+    )
+  );
+}
+
+export default DiceRolls;

src/components/party/Nickname.js

@@ -2,8 +2,9 @@ import React from "react";
 import { Text, Flex } from "theme-ui";
 
 import Stream from "./Stream";
+import DiceRolls from "./DiceRolls";
 
-function Nickname({ nickname, stream }) {
+function Nickname({ nickname, stream, diceRolls }) {
   return (
     <Flex sx={{ flexDirection: "column" }}>
       <Text
@@ -17,6 +18,7 @@ function Nickname({ nickname, stream }) {
         {nickname}
       </Text>
       {stream && <Stream stream={stream} nickname={nickname} />}
+      {diceRolls && <DiceRolls rolls={diceRolls} />}
     </Flex>
   );
 }

src/components/party/Party.js

@@ -27,6 +27,7 @@ function Party({
   onShareDiceChage,
   diceRolls,
   onDiceRollsChange,
+  partyDiceRolls,
 }) {
   return (
     <Flex
@@ -56,17 +57,13 @@ function Party({
           width: "100%",
         }}
       >
-        <Nickname
-          nickname={`${nickname} (you) ${
-            shareDice &&
-            diceRolls.reduce((accumulator, dice) => accumulator + dice.roll, 0)
-          }`}
-        />
+        <Nickname nickname={`${nickname} (you)`} />
         {Object.entries(partyNicknames).map(([id, partyNickname]) => (
           <Nickname
             nickname={partyNickname}
             key={id}
             stream={partyStreams[id]}
+            diceRolls={partyDiceRolls[id]}
           />
         ))}
         {timer && <Timer timer={timer} index={0} />}