Added a show rolls function to networked dice
This commit is contained in:
parent
1026c44205
commit
01ed7beecd
19
src/components/party/DiceRoll.js
Normal file
19
src/components/party/DiceRoll.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Flex, Box, Text } from "theme-ui";
|
||||||
|
|
||||||
|
function DiceRoll({ rolls, type, children }) {
|
||||||
|
return (
|
||||||
|
<Flex sx={{ flexWrap: "wrap" }}>
|
||||||
|
<Box sx={{ transform: "scale(0.8)" }}>{children}</Box>
|
||||||
|
{rolls
|
||||||
|
.filter((d) => d.type === type && d.roll !== "unknown")
|
||||||
|
.map((dice, index) => (
|
||||||
|
<Text as="p" my={1} variant="caption" mx={1} key={index}>
|
||||||
|
{dice.roll}
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DiceRoll;
|
@ -1,20 +1,70 @@
|
|||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
import { Flex, Text } from "theme-ui";
|
import { Flex, Text, IconButton } from "theme-ui";
|
||||||
|
|
||||||
import DiceRollsIcon from "../../icons/DiceRollsIcon";
|
import DiceRollsIcon from "../../icons/DiceRollsIcon";
|
||||||
|
import D20Icon from "../../icons/D20Icon";
|
||||||
|
import D12Icon from "../../icons/D12Icon";
|
||||||
|
import D10Icon from "../../icons/D10Icon";
|
||||||
|
import D8Icon from "../../icons/D8Icon";
|
||||||
|
import D6Icon from "../../icons/D6Icon";
|
||||||
|
import D4Icon from "../../icons/D4Icon";
|
||||||
|
import D100Icon from "../../icons/D100Icon";
|
||||||
|
|
||||||
|
import DiceRoll from "./DiceRoll";
|
||||||
|
|
||||||
import { getDiceRollTotal } from "../../helpers/dice";
|
import { getDiceRollTotal } from "../../helpers/dice";
|
||||||
|
|
||||||
function DiceRolls({ rolls }) {
|
function DiceRolls({ rolls }) {
|
||||||
const total = getDiceRollTotal(rolls);
|
const total = getDiceRollTotal(rolls);
|
||||||
|
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
total > 0 && (
|
total > 0 && (
|
||||||
<Flex p={1}>
|
<Flex sx={{ flexDirection: "column" }}>
|
||||||
|
<Flex sx={{ alignItems: "center" }}>
|
||||||
|
<IconButton
|
||||||
|
title={expanded ? "Hide Rolls" : "Show Rolls"}
|
||||||
|
aria-label={expanded ? "Hide Rolls" : "Show Rolls"}
|
||||||
|
onClick={() => setExpanded(!expanded)}
|
||||||
|
>
|
||||||
<DiceRollsIcon />
|
<DiceRollsIcon />
|
||||||
|
</IconButton>
|
||||||
<Text px={1} as="p" my={1} variant="body2" sx={{ width: "100%" }}>
|
<Text px={1} as="p" my={1} variant="body2" sx={{ width: "100%" }}>
|
||||||
{total}
|
{total}
|
||||||
</Text>
|
</Text>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
{expanded && (
|
||||||
|
<Flex
|
||||||
|
bg="overlay"
|
||||||
|
sx={{
|
||||||
|
flexDirection: "column",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DiceRoll rolls={rolls} type="d20">
|
||||||
|
<D20Icon />
|
||||||
|
</DiceRoll>
|
||||||
|
<DiceRoll rolls={rolls} type="d12">
|
||||||
|
<D12Icon />
|
||||||
|
</DiceRoll>
|
||||||
|
<DiceRoll rolls={rolls} type="d10">
|
||||||
|
<D10Icon />
|
||||||
|
</DiceRoll>
|
||||||
|
<DiceRoll rolls={rolls} type="d8">
|
||||||
|
<D8Icon />
|
||||||
|
</DiceRoll>
|
||||||
|
<DiceRoll rolls={rolls} type="d6">
|
||||||
|
<D6Icon />
|
||||||
|
</DiceRoll>
|
||||||
|
<DiceRoll rolls={rolls} type="d4">
|
||||||
|
<D4Icon />
|
||||||
|
</DiceRoll>
|
||||||
|
<DiceRoll rolls={rolls} type="d100">
|
||||||
|
<D100Icon />
|
||||||
|
</DiceRoll>
|
||||||
|
</Flex>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user