43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
|
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;
|