diff --git a/src/components/party/DiceRolls.js b/src/components/party/DiceRolls.js
new file mode 100644
index 0000000..c30303d
--- /dev/null
+++ b/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 && (
+
+
+
+ {total}
+
+
+ )
+ );
+}
+
+export default DiceRolls;
diff --git a/src/components/party/Nickname.js b/src/components/party/Nickname.js
index c20a588..12cdd33 100644
--- a/src/components/party/Nickname.js
+++ b/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 (
{stream && }
+ {diceRolls && }
);
}
diff --git a/src/components/party/Party.js b/src/components/party/Party.js
index 42324e1..e7ce986 100644
--- a/src/components/party/Party.js
+++ b/src/components/party/Party.js
@@ -27,6 +27,7 @@ function Party({
onShareDiceChage,
diceRolls,
onDiceRollsChange,
+ partyDiceRolls,
}) {
return (
- accumulator + dice.roll, 0)
- }`}
- />
+
{Object.entries(partyNicknames).map(([id, partyNickname]) => (
))}
{timer && }
diff --git a/src/icons/DiceRollsIcon.js b/src/icons/DiceRollsIcon.js
new file mode 100644
index 0000000..572a707
--- /dev/null
+++ b/src/icons/DiceRollsIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function DiceRollsIcon() {
+ return (
+
+ );
+}
+
+export default DiceRollsIcon;
diff --git a/src/network/NetworkedParty.js b/src/network/NetworkedParty.js
index 6590453..ad48594 100644
--- a/src/network/NetworkedParty.js
+++ b/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}
/>
);
}