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} />}

src/icons/DiceRollsIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function DiceRollsIcon() {
+  return (
+    <svg
+      width="24"
+      height="24"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7.5 18c-.83 0-1.5-.67-1.5-1.5S6.67 15 7.5 15s1.5.67 1.5 1.5S8.33 18 7.5 18zm0-9C6.67 9 6 8.33 6 7.5S6.67 6 7.5 6 9 6.67 9 7.5 8.33 9 7.5 9zm4.5 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5 4.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm0-9c-.83 0-1.5-.67-1.5-1.5S15.67 6 16.5 6s1.5.67 1.5 1.5S17.33 9 16.5 9z" />
+    </svg>
+  );
+}
+
+export default DiceRollsIcon;

src/network/NetworkedParty.js

@@ -98,10 +98,18 @@ function NetworkedParty({ gameId, session }) {
 
   function handleDiceRollsChange(newDiceRolls) {
     setDiceRolls(newDiceRolls);
+    if (shareDice) {
+      session.send("dice", { [session.id]: newDiceRolls });
+    }
   }
 
   function handleShareDiceChange(newShareDice) {
     setShareDice(newShareDice);
+    if (newShareDice) {
+      session.send("dice", { [session.id]: diceRolls });
+    } else {
+      session.send("dice", { [session.id]: null });
+    }
   }
 
   useEffect(() => {
@@ -113,6 +121,9 @@ function NetworkedParty({ gameId, session }) {
       if (timer) {
         reply("timer", { [session.id]: timer });
       }
+      if (shareDice) {
+        reply("dice", { [session.id]: diceRolls });
+      }
     }
 
     function handlePeerDisconnect({ peer }) {
@@ -137,6 +148,16 @@ function NetworkedParty({ gameId, session }) {
           return fromEntries(filtered);
         });
       }
+      if (id === "dice") {
+        setPartyDiceRolls((prevDiceRolls) => {
+          const newRolls = { ...prevDiceRolls, ...data };
+          // filter out dice rolls that are null
+          const filtered = Object.entries(newRolls).filter(
+            ([, value]) => value !== null
+          );
+          return fromEntries(filtered);
+        });
+      }
     }
 
     function handlePeerTrackAdded({ peer, stream: remoteStream }) {
@@ -170,7 +191,7 @@ function NetworkedParty({ gameId, session }) {
       session.off("trackAdded", handlePeerTrackAdded);
       session.off("trackRemoved", handlePeerTrackRemoved);
     };
-  }, [session, nickname, stream, timer]);
+  }, [session, nickname, stream, timer, shareDice, diceRolls]);
 
   useEffect(() => {
     if (stream) {
@@ -206,6 +227,7 @@ function NetworkedParty({ gameId, session }) {
       onShareDiceChage={handleShareDiceChange}
       diceRolls={diceRolls}
       onDiceRollsChange={handleDiceRollsChange}
+      partyDiceRolls={partyDiceRolls}
     />
   );
 }