Updated dice tray icon and fixed map interaction with select dice modal open

src/components/map/MapDice.js

@@ -24,14 +24,13 @@ function MapDice() {
         title={isExpanded ? "Hide Dice Tray" : "Show Dice Tray"}
         onClick={() => setIsExpanded(!isExpanded)}
         sx={{
-          transform: `rotate(${isExpanded ? "0" : "180deg"})`,
           display: "block",
           backgroundColor: "overlay",
           borderRadius: "50%",
         }}
         m={2}
       >
-        <ExpandMoreDiceIcon />
+        <ExpandMoreDiceIcon isExpanded={isExpanded} />
       </IconButton>
       <DiceTray isOpen={isExpanded} />
     </Flex>

src/components/map/dice/DiceButtons.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Flex, IconButton } from "theme-ui";
+import { Flex } from "theme-ui";
 
 import D20Icon from "../../../icons/D20Icon";
 import D12Icon from "../../../icons/D12Icon";
@@ -9,18 +9,15 @@ import D6Icon from "../../../icons/D6Icon";
 import D4Icon from "../../../icons/D4Icon";
 import D100Icon from "../../../icons/D100Icon";
 
-import SelectDiceIcon from "../../../icons/SelectDiceIcon";
-import SelectDiceModal from "../../../modals/SelectDiceModal";
-
 import DiceButton from "./DiceButton";
+import SelectDiceButton from "./SelectDiceButton";
 
 import Divider from "../../Divider";
 
 import { dice } from "../../../dice";
 
 function DiceButtons({ diceRolls, onDiceAdd }) {
-  const [isSelectModalOpen, setIsSelectModalOpen] = useState(false);
+  const [currentDice, setCurrentDice] = useState(dice[0]);
-  const [selectedDice, setSelectedDice] = useState(dice[0]);
 
   const diceCounts = {};
   for (let dice of diceRolls) {
@@ -32,82 +29,69 @@ function DiceButtons({ diceRolls, onDiceAdd }) {
   }
 
   return (
-    <>
+    <Flex
-      <Flex
+      sx={{
-        sx={{
+        justifyContent: "center",
-          justifyContent: "center",
+        flexWrap: "wrap",
-          flexWrap: "wrap",
+        width: "100%",
-          width: "100%",
+        alignItems: "center",
-          alignItems: "center",
+      }}
-        }}
+    >
-      >
+      <SelectDiceButton
-        <IconButton
+        onDiceChange={setCurrentDice}
-          color="hsl(210, 50%, 96%)"
+        currentDice={currentDice}
-          onClick={() => setIsSelectModalOpen(true)}
-        >
-          <SelectDiceIcon />
-        </IconButton>
-        <Divider vertical color="hsl(210, 50%, 96%)" />
-        <DiceButton
-          title="Add D20"
-          count={diceCounts.d20}
-          onClick={() => onDiceAdd(selectedDice.class, "d20")}
-        >
-          <D20Icon />
-        </DiceButton>
-        <DiceButton
-          title="Add D12"
-          count={diceCounts.d12}
-          onClick={() => onDiceAdd(selectedDice.class, "d12")}
-        >
-          <D12Icon />
-        </DiceButton>
-        <DiceButton
-          title="Add D10"
-          count={diceCounts.d10}
-          onClick={() => onDiceAdd(selectedDice.class, "d10")}
-        >
-          <D10Icon />
-        </DiceButton>
-        <DiceButton
-          title="Add D8"
-          count={diceCounts.d8}
-          onClick={() => onDiceAdd(selectedDice.class, "d8")}
-        >
-          <D8Icon />
-        </DiceButton>
-        <DiceButton
-          title="Add D6"
-          count={diceCounts.d6}
-          onClick={() => onDiceAdd(selectedDice.class, "d6")}
-        >
-          <D6Icon />
-        </DiceButton>
-        <DiceButton
-          title="Add D4"
-          count={diceCounts.d4}
-          onClick={() => onDiceAdd(selectedDice.class, "d4")}
-        >
-          <D4Icon />
-        </DiceButton>
-        <DiceButton
-          title="Add D100"
-          count={diceCounts.d100}
-          onClick={() => onDiceAdd(selectedDice.class, "d100")}
-        >
-          <D100Icon />
-        </DiceButton>
-      </Flex>
-      <SelectDiceModal
-        isOpen={isSelectModalOpen}
-        onRequestClose={() => setIsSelectModalOpen(false)}
-        defaultDice={selectedDice}
-        onDone={(dice) => {
-          setSelectedDice(dice);
-          setIsSelectModalOpen(false);
-        }}
       />
-    </>
+      <Divider vertical color="hsl(210, 50%, 96%)" />
+      <DiceButton
+        title="Add D20"
+        count={diceCounts.d20}
+        onClick={() => onDiceAdd(currentDice.class, "d20")}
+      >
+        <D20Icon />
+      </DiceButton>
+      <DiceButton
+        title="Add D12"
+        count={diceCounts.d12}
+        onClick={() => onDiceAdd(currentDice.class, "d12")}
+      >
+        <D12Icon />
+      </DiceButton>
+      <DiceButton
+        title="Add D10"
+        count={diceCounts.d10}
+        onClick={() => onDiceAdd(currentDice.class, "d10")}
+      >
+        <D10Icon />
+      </DiceButton>
+      <DiceButton
+        title="Add D8"
+        count={diceCounts.d8}
+        onClick={() => onDiceAdd(currentDice.class, "d8")}
+      >
+        <D8Icon />
+      </DiceButton>
+      <DiceButton
+        title="Add D6"
+        count={diceCounts.d6}
+        onClick={() => onDiceAdd(currentDice.class, "d6")}
+      >
+        <D6Icon />
+      </DiceButton>
+      <DiceButton
+        title="Add D4"
+        count={diceCounts.d4}
+        onClick={() => onDiceAdd(currentDice.class, "d4")}
+      >
+        <D4Icon />
+      </DiceButton>
+      <DiceButton
+        title="Add D100"
+        count={diceCounts.d100}
+        onClick={() => onDiceAdd(currentDice.class, "d100")}
+      >
+        <D100Icon />
+      </DiceButton>
+    </Flex>
   );
 }
 

src/components/map/dice/SelectDiceButton.js

@@ -0,0 +1,42 @@
+import React, { useState, useContext } from "react";
+import { IconButton } from "theme-ui";
+
+import SelectDiceIcon from "../../../icons/SelectDiceIcon";
+import SelectDiceModal from "../../../modals/SelectDiceModal";
+
+import MapInteractionContext from "../../../contexts/MapInteractionContext";
+
+function SelectDiceButton({ onDiceChange, currentDice }) {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const { setPreventMapInteraction } = useContext(MapInteractionContext);
+
+  function openModal() {
+    setIsModalOpen(true);
+    setPreventMapInteraction(true);
+  }
+  function closeModal() {
+    setIsModalOpen(false);
+    setPreventMapInteraction(false);
+  }
+
+  function handleDone(dice) {
+    onDiceChange(dice);
+    closeModal();
+  }
+
+  return (
+    <>
+      <IconButton color="hsl(210, 50%, 96%)" onClick={openModal}>
+        <SelectDiceIcon />
+      </IconButton>
+      <SelectDiceModal
+        isOpen={isModalOpen}
+        onRequestClose={closeModal}
+        defaultDice={currentDice}
+        onDone={handleDone}
+      />
+    </>
+  );
+}
+
+export default SelectDiceButton;

src/icons/ExpandMoreDiceIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function ExpandMoreDiceIcon() {
+function ExpandMoreDiceIcon({ isExpanded }) {
   return (
     <svg
       width="24"
@@ -10,7 +10,11 @@ function ExpandMoreDiceIcon() {
       fill="currentcolor"
     >
       <path d="M0 0h24v24H0z" fill="none" />
-      <path d="M13.006 3.564l5.986 3.42A2 2 0 0120 8.72v6.516a2 2 0 01-1 1.732l-5.983 3.456a2 2 0 01-1.997.002l-6.017-3.459A2 2 0 014 15.233v-6.53a2 2 0 011.015-1.74L11.03 3.56a2 2 0 011.977.004zm-.992 1.737L6 8.703v6.53l6.017 3.459L18 15.236V8.72L12.014 5.3zM13.92 10a1 1 0 01.781 1.625l-1.92 2.399a1 1 0 01-1.56 0l-1.92-2.4A1 1 0 0110.08 10z" />
+      {isExpanded ? (
+        <path d="M17.727 6c.7 0 1.273.6 1.273 1.333v9.334C19 17.4 18.427 18 17.727 18H6.273C5.573 18 5 17.4 5 16.667V7.333C5 6.6 5.573 6 6.273 6zM17 8H7v8h10V8zm-5.444 1c.244 0 .444.193.444.429v5.182c0 .236-.2.429-.444.429H8.444A.438.438 0 018 14.611V9.43C8 9.193 8.2 9 8.444 9h3.112z" />
+      ) : (
+        <path d="M17.727 6c.7 0 1.273.6 1.273 1.333v9.334C19 17.4 18.427 18 17.727 18H6.273C5.573 18 5 17.4 5 16.667V7.333C5 6.6 5.573 6 6.273 6zM17 8H7v8h10V8zm-5.444 1c.244 0 .444.193.444.429v2.142c0 .236-.2.429-.444.429H8.444A.438.438 0 018 11.571V9.43C8 9.193 8.2 9 8.444 9h3.112z" />
+      )}
     </svg>
   );
 }