Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Mitchell McCaffrey
2020-05-26 15:43:46 +10:00
parent 84b198c851
commit dec8fd3c2e
4 changed files with 114 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/map/MapDice.js
View File

@@ -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>

146
src/components/map/dice/DiceButtons.js
View File

@@ -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 (
<>
<Flex
sx={{
justifyContent: "center",
flexWrap: "wrap",
width: "100%",
alignItems: "center",
}}
>
<IconButton
color="hsl(210, 50%, 96%)"
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);
}}
<Flex
sx={{
justifyContent: "center",
flexWrap: "wrap",
width: "100%",
alignItems: "center",
}}
>
<SelectDiceButton
onDiceChange={setCurrentDice}
currentDice={currentDice}
/>
</>
<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
View 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;