diff --git a/src/components/map/MapDice.js b/src/components/map/MapDice.js
index fbf4a64..98c0653 100644
--- a/src/components/map/MapDice.js
+++ b/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}
>
-
+
diff --git a/src/components/map/dice/DiceButtons.js b/src/components/map/dice/DiceButtons.js
index 5eb9484..4c611e9 100644
--- a/src/components/map/dice/DiceButtons.js
+++ b/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 [selectedDice, setSelectedDice] = useState(dice[0]);
+ const [currentDice, setCurrentDice] = useState(dice[0]);
const diceCounts = {};
for (let dice of diceRolls) {
@@ -32,82 +29,69 @@ function DiceButtons({ diceRolls, onDiceAdd }) {
}
return (
- <>
-
- setIsSelectModalOpen(true)}
- >
-
-
-
- onDiceAdd(selectedDice.class, "d20")}
- >
-
-
- onDiceAdd(selectedDice.class, "d12")}
- >
-
-
- onDiceAdd(selectedDice.class, "d10")}
- >
-
-
- onDiceAdd(selectedDice.class, "d8")}
- >
-
-
- onDiceAdd(selectedDice.class, "d6")}
- >
-
-
- onDiceAdd(selectedDice.class, "d4")}
- >
-
-
- onDiceAdd(selectedDice.class, "d100")}
- >
-
-
-
- setIsSelectModalOpen(false)}
- defaultDice={selectedDice}
- onDone={(dice) => {
- setSelectedDice(dice);
- setIsSelectModalOpen(false);
- }}
+
+
-
+
+ onDiceAdd(currentDice.class, "d20")}
+ >
+
+
+ onDiceAdd(currentDice.class, "d12")}
+ >
+
+
+ onDiceAdd(currentDice.class, "d10")}
+ >
+
+
+ onDiceAdd(currentDice.class, "d8")}
+ >
+
+
+ onDiceAdd(currentDice.class, "d6")}
+ >
+
+
+ onDiceAdd(currentDice.class, "d4")}
+ >
+
+
+ onDiceAdd(currentDice.class, "d100")}
+ >
+
+
+
);
}
diff --git a/src/components/map/dice/SelectDiceButton.js b/src/components/map/dice/SelectDiceButton.js
new file mode 100644
index 0000000..8550667
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+
+ );
+}
+
+export default SelectDiceButton;
diff --git a/src/icons/ExpandMoreDiceIcon.js b/src/icons/ExpandMoreDiceIcon.js
index 69a60d9..53f0a14 100644
--- a/src/icons/ExpandMoreDiceIcon.js
+++ b/src/icons/ExpandMoreDiceIcon.js
@@ -1,6 +1,6 @@
import React from "react";
-function ExpandMoreDiceIcon() {
+function ExpandMoreDiceIcon({ isExpanded }) {
return (
);
}