Updated dice tray icon and fixed map interaction with select dice modal open
This commit is contained in:
parent
84b198c851
commit
dec8fd3c2e
@ -24,14 +24,13 @@ function MapDice() {
|
|||||||
title={isExpanded ? "Hide Dice Tray" : "Show Dice Tray"}
|
title={isExpanded ? "Hide Dice Tray" : "Show Dice Tray"}
|
||||||
onClick={() => setIsExpanded(!isExpanded)}
|
onClick={() => setIsExpanded(!isExpanded)}
|
||||||
sx={{
|
sx={{
|
||||||
transform: `rotate(${isExpanded ? "0" : "180deg"})`,
|
|
||||||
display: "block",
|
display: "block",
|
||||||
backgroundColor: "overlay",
|
backgroundColor: "overlay",
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
}}
|
}}
|
||||||
m={2}
|
m={2}
|
||||||
>
|
>
|
||||||
<ExpandMoreDiceIcon />
|
<ExpandMoreDiceIcon isExpanded={isExpanded} />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
<DiceTray isOpen={isExpanded} />
|
<DiceTray isOpen={isExpanded} />
|
||||||
</Flex>
|
</Flex>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { Flex, IconButton } from "theme-ui";
|
import { Flex } from "theme-ui";
|
||||||
|
|
||||||
import D20Icon from "../../../icons/D20Icon";
|
import D20Icon from "../../../icons/D20Icon";
|
||||||
import D12Icon from "../../../icons/D12Icon";
|
import D12Icon from "../../../icons/D12Icon";
|
||||||
@ -9,18 +9,15 @@ import D6Icon from "../../../icons/D6Icon";
|
|||||||
import D4Icon from "../../../icons/D4Icon";
|
import D4Icon from "../../../icons/D4Icon";
|
||||||
import D100Icon from "../../../icons/D100Icon";
|
import D100Icon from "../../../icons/D100Icon";
|
||||||
|
|
||||||
import SelectDiceIcon from "../../../icons/SelectDiceIcon";
|
|
||||||
import SelectDiceModal from "../../../modals/SelectDiceModal";
|
|
||||||
|
|
||||||
import DiceButton from "./DiceButton";
|
import DiceButton from "./DiceButton";
|
||||||
|
import SelectDiceButton from "./SelectDiceButton";
|
||||||
|
|
||||||
import Divider from "../../Divider";
|
import Divider from "../../Divider";
|
||||||
|
|
||||||
import { dice } from "../../../dice";
|
import { dice } from "../../../dice";
|
||||||
|
|
||||||
function DiceButtons({ diceRolls, onDiceAdd }) {
|
function DiceButtons({ diceRolls, onDiceAdd }) {
|
||||||
const [isSelectModalOpen, setIsSelectModalOpen] = useState(false);
|
const [currentDice, setCurrentDice] = useState(dice[0]);
|
||||||
const [selectedDice, setSelectedDice] = useState(dice[0]);
|
|
||||||
|
|
||||||
const diceCounts = {};
|
const diceCounts = {};
|
||||||
for (let dice of diceRolls) {
|
for (let dice of diceRolls) {
|
||||||
@ -32,82 +29,69 @@ function DiceButtons({ diceRolls, onDiceAdd }) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
42
src/components/map/dice/SelectDiceButton.js
Normal file
42
src/components/map/dice/SelectDiceButton.js
Normal file
@ -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;
|
@ -1,6 +1,6 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
function ExpandMoreDiceIcon() {
|
function ExpandMoreDiceIcon({ isExpanded }) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
width="24"
|
width="24"
|
||||||
@ -10,7 +10,11 @@ function ExpandMoreDiceIcon() {
|
|||||||
fill="currentcolor"
|
fill="currentcolor"
|
||||||
>
|
>
|
||||||
<path d="M0 0h24v24H0z" fill="none" />
|
<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>
|
</svg>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user