Added dice roll count

src/components/map/dice/DiceButton.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { IconButton } from "theme-ui";
+
+import Count from "./DiceButtonCount";
+
+function DiceButton({ title, children, count, onClick }) {
+  return (
+    <IconButton
+      title={title}
+      aria-label={title}
+      onClick={onClick}
+      color="hsl(210, 50%, 96%)"
+      sx={{ position: "relative" }}
+    >
+      {children}
+      {count && <Count>{count}</Count>}
+    </IconButton>
+  );
+}
+
+export default DiceButton;

src/components/map/dice/DiceButtonCount.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { Box, Text } from "theme-ui";
+
+function DiceButtonCount({ children }) {
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        left: "50%",
+        bottom: "100%",
+        transform: "translateX(-50%)",
+        height: "14px",
+        display: "flex",
+        alignItems: "center",
+      }}
+    >
+      <Text
+        variant="caption"
+        as="p"
+        color="text"
+        sx={{ fontSize: "10px", fontWeight: "bold" }}
+      >
+        {children}×
+      </Text>
+    </Box>
+  );
+}
+
+export default DiceButtonCount;

src/components/map/dice/DiceControls.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Flex, IconButton } from "theme-ui";
+import { Flex } from "theme-ui";
 
 import SunsetDice from "../../../dice/galaxy/GalaxyDice";
 
@@ -11,65 +11,69 @@ import D6Icon from "../../../icons/D6Icon";
 import D4Icon from "../../../icons/D4Icon";
 import D100Icon from "../../../icons/D100Icon";
 
-function DiceControls({ onDiceAdd }) {
+import DiceButton from "./DiceButton";
+
+function DiceControls({ diceRolls, onDiceAdd }) {
+  const diceCounts = {};
+  for (let dice of diceRolls) {
+    if (dice.type in diceCounts) {
+      diceCounts[dice.type] += 1;
+    } else {
+      diceCounts[dice.type] = 1;
+    }
+  }
+
   return (
     <Flex>
-      <IconButton
+      <DiceButton
         title="Add D20"
-        aria-label="Add D20"
+        count={diceCounts.d20}
         onClick={() => onDiceAdd(SunsetDice, "d20")}
-        color="hsl(210, 50%, 96%)"
       >
         <D20Icon />
-      </IconButton>
-      <IconButton
+      </DiceButton>
+      <DiceButton
         title="Add D12"
-        aria-label="Add D12"
+        count={diceCounts.d12}
         onClick={() => onDiceAdd(SunsetDice, "d12")}
-        color="hsl(210, 50%, 96%)"
       >
         <D12Icon />
-      </IconButton>
-      <IconButton
+      </DiceButton>
+      <DiceButton
         title="Add D10"
-        aria-label="Add D10"
+        count={diceCounts.d10}
         onClick={() => onDiceAdd(SunsetDice, "d10")}
-        color="hsl(210, 50%, 96%)"
       >
         <D10Icon />
-      </IconButton>
-      <IconButton
+      </DiceButton>
+      <DiceButton
         title="Add D8"
-        aria-label="Add D8"
+        count={diceCounts.d8}
         onClick={() => onDiceAdd(SunsetDice, "d8")}
-        color="hsl(210, 50%, 96%)"
       >
         <D8Icon />
-      </IconButton>
-      <IconButton
+      </DiceButton>
+      <DiceButton
         title="Add D6"
-        aria-label="Add D6"
+        count={diceCounts.d6}
         onClick={() => onDiceAdd(SunsetDice, "d6")}
-        color="hsl(210, 50%, 96%)"
       >
         <D6Icon />
-      </IconButton>
-      <IconButton
+      </DiceButton>
+      <DiceButton
         title="Add D4"
-        aria-label="Add D4"
+        count={diceCounts.d4}
         onClick={() => onDiceAdd(SunsetDice, "d4")}
-        color="hsl(210, 50%, 96%)"
       >
         <D4Icon />
-      </IconButton>
-      <IconButton
+      </DiceButton>
+      <DiceButton
         title="Add D100"
-        aria-label="Add D100"
+        count={diceCounts.d100}
         onClick={() => onDiceAdd(SunsetDice, "d100")}
-        color="hsl(210, 50%, 96%)"
       >
         <D100Icon />
-      </IconButton>
+      </DiceButton>
     </Flex>
   );
 }

src/components/map/dice/DiceResults.js

@@ -6,16 +6,19 @@ const maxDiceRollsShown = 6;
 function DiceResults({ diceRolls }) {
   const [isExpanded, setIsExpanded] = useState(false);
 
-  if (diceRolls.includes("unknown") || diceRolls.length === 0) {
+  if (
+    diceRolls.map((dice) => dice.roll).includes("unknown") ||
+    diceRolls.length === 0
+  ) {
     return null;
   }
 
   let rolls = [];
   if (diceRolls.length > 1) {
-    rolls = diceRolls.map((roll, index) => (
+    rolls = diceRolls.map((dice, index) => (
       <React.Fragment key={index}>
         <Text variant="body2" as="p" color="hsl(210, 50%, 96%)">
-          {roll}
+          {dice.roll}
         </Text>
         <Text variant="body2" as="p" color="grey">
           {index === diceRolls.length - 1 ? "" : "+"}
@@ -38,7 +41,7 @@ function DiceResults({ diceRolls }) {
         sx={{ fontSize: 5 }}
         mb={diceRolls.length === 1 ? "24px" : 0}
       >
-        {diceRolls.reduce((a, b) => a + b)}
+        {diceRolls.reduce((accumulator, dice) => accumulator + dice.roll, 0)}
       </Text>
       {rolls.length > maxDiceRollsShown ? (
         <Button

src/components/map/dice/DiceTray.js

@@ -138,7 +138,7 @@ function DiceTray({ isOpen }) {
       } else if (dice.type === "d10" && number === 0) {
         number = 10;
       }
-      return number;
+      return { type: dice.type, roll: number };
     }
 
     // Find the number facing up on a mesh instance of a dice
@@ -171,18 +171,18 @@ function DiceTray({ isOpen }) {
       const speed = getDiceSpeed(dice);
       if (speed < 0.01 && !diceIsAsleep) {
         dieSleepRef.current[i] = true;
-        let newNumber = getDiceRoll(dice);
-        setDiceRolls((prevNumbers) => {
-          let newNumbers = [...prevNumbers];
-          newNumbers[i] = newNumber;
-          return newNumbers;
+        let roll = getDiceRoll(dice);
+        setDiceRolls((prevRolls) => {
+          let newRolls = [...prevRolls];
+          newRolls[i] = roll;
+          return newRolls;
         });
       } else if (speed > 0.5 && diceIsAsleep) {
         dieSleepRef.current[i] = false;
-        setDiceRolls((prevNumbers) => {
-          let newNumbers = [...prevNumbers];
-          newNumbers[i] = "unknown";
-          return newNumbers;
+        setDiceRolls((prevRolls) => {
+          let newRolls = [...prevRolls];
+          newRolls[i].roll = "unknown";
+          return newRolls;
         });
       }
     }
@@ -206,7 +206,7 @@ function DiceTray({ isOpen }) {
       }
       dieRef.current.push(dice);
       dieSleepRef.current.push(false);
-      setDiceRolls((prevNumbers) => [...prevNumbers, "unknown"]);
+      setDiceRolls((prevRolls) => [...prevRolls, { type, roll: "unknown" }]);
     }
   }
 
@@ -243,7 +243,7 @@ function DiceTray({ isOpen }) {
           transform: "translateX(-50%)",
         }}
       >
-        <DiceControls onDiceAdd={handleDiceAdd} />
+        <DiceControls diceRolls={diceRolls} onDiceAdd={handleDiceAdd} />
       </div>
     </Box>
   );