0d37f8c6e3
This removes the need for calling prevent interaction all over the code also allowed pointer events to go through the empty parts of the dice tray
47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import { Flex, IconButton } from "theme-ui";
|
|
|
|
import ExpandMoreDiceIcon from "../../icons/ExpandMoreDiceIcon";
|
|
import DiceTrayOverlay from "./dice/DiceTrayOverlay";
|
|
|
|
import { DiceLoadingProvider } from "../../contexts/DiceLoadingContext";
|
|
|
|
function MapDice() {
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
|
|
|
return (
|
|
<Flex
|
|
sx={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
bottom: 0,
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
pointerEvents: "none",
|
|
}}
|
|
ml={1}
|
|
>
|
|
<IconButton
|
|
aria-label={isExpanded ? "Hide Dice Tray" : "Show Dice Tray"}
|
|
title={isExpanded ? "Hide Dice Tray" : "Show Dice Tray"}
|
|
onClick={() => setIsExpanded(!isExpanded)}
|
|
sx={{
|
|
display: "block",
|
|
backgroundColor: "overlay",
|
|
borderRadius: "50%",
|
|
pointerEvents: "all",
|
|
}}
|
|
m={2}
|
|
>
|
|
<ExpandMoreDiceIcon isExpanded={isExpanded} />
|
|
</IconButton>
|
|
<DiceLoadingProvider>
|
|
<DiceTrayOverlay isOpen={isExpanded} />
|
|
</DiceLoadingProvider>
|
|
</Flex>
|
|
);
|
|
}
|
|
|
|
export default MapDice;
|