diff --git a/src/components/map/dice/DiceControls.js b/src/components/map/dice/DiceControls.js new file mode 100644 index 0000000..509c5d6 --- /dev/null +++ b/src/components/map/dice/DiceControls.js @@ -0,0 +1,47 @@ +import React from "react"; +import { Flex, IconButton } from "theme-ui"; + +import ColorDice from "../../../dice/color/ColorDice"; +import GemStoneDice from "../../../dice/gemStone/GemStoneDice"; +import GlassDice from "../../../dice/glass/GlassDice"; +import MetalDice from "../../../dice/metal/MetalDice"; +import MetalStoneDice from "../../../dice/metalStone/MetalStoneDice"; +import WoodDice from "../../../dice/wood/WoodDice"; + +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"; + +function DiceControls({ onDiceAdd }) { + return ( + + onDiceAdd(ColorDice, "d20")} + > + + + + + + + + + + + + + + + + + + + ); +} + +export default DiceControls; diff --git a/src/components/map/dice/DiceTray.js b/src/components/map/dice/DiceTray.js index 850e1dd..f58c459 100644 --- a/src/components/map/dice/DiceTray.js +++ b/src/components/map/dice/DiceTray.js @@ -4,14 +4,8 @@ import { Box } from "theme-ui"; import environment from "../../../dice/environment.dds"; -import ColorDice from "../../../dice/color/ColorDice"; -import GemStoneDice from "../../../dice/gemStone/GemStoneDice"; -import GlassDice from "../../../dice/glass/GlassDice"; -import MetalDice from "../../../dice/metal/MetalDice"; -import MetalStoneDice from "../../../dice/metalStone/MetalStoneDice"; -import WoodDice from "../../../dice/wood/WoodDice"; - import Scene from "./DiceScene"; +import DiceControls from "./DiceControls"; function DiceTray({ isOpen }) { const sceneRef = useRef(); @@ -133,7 +127,7 @@ function DiceTray({ isOpen }) { } } - async function handleAddDice(style, type) { + async function handleDiceAdd(style, type) { const scene = sceneRef.current; if (scene) { const instance = await style.createInstance(type, scene); @@ -146,12 +140,13 @@ function DiceTray({ isOpen }) { return (
- - - - - - +
); diff --git a/src/icons/D10Icon.js b/src/icons/D10Icon.js new file mode 100644 index 0000000..c045d0b --- /dev/null +++ b/src/icons/D10Icon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function D10Icon() { + return ( + + + + + ); +} + +export default D10Icon; diff --git a/src/icons/D12Icon.js b/src/icons/D12Icon.js new file mode 100644 index 0000000..fa34680 --- /dev/null +++ b/src/icons/D12Icon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function D12Icon() { + return ( + + + + + ); +} + +export default D12Icon; diff --git a/src/icons/D20Icon.js b/src/icons/D20Icon.js new file mode 100644 index 0000000..5975f0e --- /dev/null +++ b/src/icons/D20Icon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function D20Icon() { + return ( + + + + + ); +} + +export default D20Icon; diff --git a/src/icons/D4Icon.js b/src/icons/D4Icon.js new file mode 100644 index 0000000..c9377cd --- /dev/null +++ b/src/icons/D4Icon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function D4Icon() { + return ( + + + + + ); +} + +export default D4Icon; diff --git a/src/icons/D6Icon.js b/src/icons/D6Icon.js new file mode 100644 index 0000000..8135fa2 --- /dev/null +++ b/src/icons/D6Icon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function D6Icon() { + return ( + + + + + ); +} + +export default D6Icon; diff --git a/src/icons/D8Icon.js b/src/icons/D8Icon.js new file mode 100644 index 0000000..ad7bef1 --- /dev/null +++ b/src/icons/D8Icon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function D8Icon() { + return ( + + + + + ); +} + +export default D8Icon;