Added dice clear and dice reroll

src/components/map/dice/DiceResults.js

@@ -1,9 +1,12 @@
 import React, { useState } from "react";
-import { Flex, Text, Button } from "theme-ui";
+import { Flex, Text, Button, IconButton } from "theme-ui";
+
+import ClearDiceIcon from "../../../icons/ClearDiceIcon";
+import RerollDiceIcon from "../../../icons/RerollDiceIcon";
 
 const maxDiceRollsShown = 6;
 
-function DiceResults({ diceRolls }) {
+function DiceResults({ diceRolls, onDiceClear, onDiceReroll }) {
   const [isExpanded, setIsExpanded] = useState(false);
 
   if (
@@ -30,37 +33,61 @@ function DiceResults({ diceRolls }) {
   return (
     <Flex
       sx={{
-        flexDirection: "column",
-        justifyContent: "center",
+        width: "100%",
+        justifyContent: "space-between",
         alignItems: "center",
       }}
     >
-      <Text
-        variant="heading"
-        as="h1"
-        sx={{ fontSize: 5 }}
-        mb={diceRolls.length === 1 ? "24px" : 0}
+      <IconButton
+        ml="24px"
+        title="Clear Dice"
+        aria-label="Clear Dice"
+        onClick={onDiceClear}
       >
-        {diceRolls.reduce((accumulator, dice) => accumulator + dice.roll, 0)}
-      </Text>
-      {rolls.length > maxDiceRollsShown ? (
-        <Button
-          aria-label={"Show Dice Details"}
-          title={"Show Dice Details"}
-          onClick={() => setIsExpanded(!isExpanded)}
-          variant="secondary"
-          sx={{ display: "flex", height: "24px" }}
+        <ClearDiceIcon />
+      </IconButton>
+      <Flex
+        sx={{
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Text
+          variant="heading"
+          as="h1"
+          sx={{ fontSize: 5 }}
+          mb={diceRolls.length === 1 ? "24px" : 0}
         >
-          {isExpanded ? rolls : rolls.slice(0, maxDiceRollsShown)}
-          {!isExpanded && (
-            <Text variant="body2" as="p" color="hsl(210, 50%, 96%)">
-              ...
-            </Text>
-          )}
-        </Button>
-      ) : (
-        <Flex>{rolls}</Flex>
-      )}
+          {diceRolls.reduce((accumulator, dice) => accumulator + dice.roll, 0)}
+        </Text>
+        {rolls.length > maxDiceRollsShown ? (
+          <Button
+            aria-label={"Show Dice Details"}
+            title={"Show Dice Details"}
+            onClick={() => setIsExpanded(!isExpanded)}
+            variant="secondary"
+            sx={{ display: "flex", height: "24px" }}
+          >
+            {isExpanded ? rolls : rolls.slice(0, maxDiceRollsShown)}
+            {!isExpanded && (
+              <Text variant="body2" as="p" color="hsl(210, 50%, 96%)">
+                ...
+              </Text>
+            )}
+          </Button>
+        ) : (
+          <Flex>{rolls}</Flex>
+        )}
+      </Flex>
+      <IconButton
+        mr="24px"
+        title="Reroll Dice"
+        aria-label="Reroll Dice"
+        onClick={onDiceReroll}
+      >
+        <RerollDiceIcon />
+      </IconButton>
     </Flex>
   );
 }

src/components/map/dice/DiceTray.js

@@ -7,6 +7,7 @@ import environment from "../../../dice/environment.dds";
 import Scene from "./DiceScene";
 import DiceControls from "./DiceControls";
 import DiceResults from "./DiceResults";
+import Dice from "../../../dice/Dice";
 
 import createDiceTray, {
   diceTraySize,
@@ -197,11 +198,13 @@ function DiceTray({ isOpen }) {
     if (scene && shadowGenerator) {
       const instance = await style.createInstance(type, scene);
       shadowGenerator.addShadowCaster(instance);
+      Dice.roll(instance);
       let dice = { type, instance };
       // If we have a d100 add a d10 as well
       if (type === "d100") {
         const d10Instance = await style.createInstance("d10", scene);
         shadowGenerator.addShadowCaster(d10Instance);
+        Dice.roll(d10Instance);
         dice.d10Instance = d10Instance;
       }
       dieRef.current.push(dice);
@@ -210,6 +213,29 @@ function DiceTray({ isOpen }) {
     }
   }
 
+  function handleDiceClear() {
+    const die = dieRef.current;
+    for (let dice of die) {
+      dice.instance.dispose();
+      if (dice.type === "d100") {
+        dice.d10Instance.dispose();
+      }
+    }
+    dieRef.current = [];
+    dieSleepRef.current = [];
+    setDiceRolls([]);
+  }
+
+  function handleDiceReroll() {
+    const die = dieRef.current;
+    for (let dice of die) {
+      Dice.roll(dice.instance);
+      if (dice.type === "d100") {
+        Dice.roll(dice.d10Instance);
+      }
+    }
+  }
+
   return (
     <Box
       sx={{
@@ -227,13 +253,17 @@ function DiceTray({ isOpen }) {
         style={{
           position: "absolute",
           bottom: "16px",
-          left: "50%",
-          transform: "translateX(-50%)",
+          left: 0,
+          right: 0,
           display: "flex",
           color: "white",
         }}
       >
-        <DiceResults diceRolls={diceRolls} />
+        <DiceResults
+          diceRolls={diceRolls}
+          onDiceClear={handleDiceClear}
+          onDiceReroll={handleDiceReroll}
+        />
       </div>
       <div
         style={{