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

Added dice add icons and moved dice tray controls to seperate component

Browse Source
This commit is contained in:
Mitchell McCaffrey
2020-05-08 17:08:47 +10:00
parent fee7a270e4
commit fbad2cfa46
8 changed files with 162 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/map/dice/DiceControls.js Normal file
View File

@@ -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 (
<Flex>
<IconButton
title="Add D20"
aria-label="Add D20"
onClick={() => onDiceAdd(ColorDice, "d20")}
>
<D20Icon />
</IconButton>
<IconButton title="Add D12" aria-label="Add D12">
<D12Icon />
</IconButton>
<IconButton title="Add D10" aria-label="Add D10">
<D10Icon />
</IconButton>
<IconButton title="Add D8" aria-label="Add D8">
<D8Icon />
</IconButton>
<IconButton title="Add D6" aria-label="Add D6">
<D6Icon />
</IconButton>
<IconButton title="Add D4" aria-label="Add D4">
<D4Icon />
</IconButton>
</Flex>
);
}
export default DiceControls;

36
src/components/map/dice/DiceTray.js
View File

@@ -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 (
<Box
sx={{
width: "500px",
width: "250px",
height: "500px",
borderRadius: "4px",
display: isOpen ? "box" : "none",
display: isOpen ? "block" : "none",
position: "relative",
}}
bg="overlay"
bg="background"
>
<Scene onSceneMount={handleSceneMount} />
<div
@@ -183,24 +178,7 @@ function DiceTray({ isOpen }) {
transform: "translateX(-50%)",
}}
>
<button onClick={() => handleAddDice(ColorDice, "d20")}>
Add color d20
</button>
<button onClick={() => handleAddDice(GemStoneDice, "d20")}>
Add gem d20
</button>
<button onClick={() => handleAddDice(GlassDice, "d20")}>
Add glass d20
</button>
<button onClick={() => handleAddDice(MetalDice, "d20")}>
Add metal d20
</button>
<button onClick={() => handleAddDice(MetalStoneDice, "d20")}>
Add metal stone d20
</button>
<button onClick={() => handleAddDice(WoodDice, "d20")}>
Add wood d20
</button>
<DiceControls onDiceAdd={handleDiceAdd} />
</div>
</Box>
);