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
Show Stats 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>
);

18
src/icons/D10Icon.js Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
function D10Icon() {
return (
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentcolor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12.596 2.067l.107.068 9.883 7.154a1 1 0 01.407.691l.007.12v4.14a1 1 0 01-.324.737l-.093.075L12.7 22.15a1 1 0 01-1.038.079l-.12-.073-10.117-7.104a1 1 0 01-.418-.698L1 14.234v-4.128a1 1 0 01.328-.74l.094-.076L11.54 2.129a1 1 0 011.057-.062zm-.488 2.217L3 10.55v3.236L12.109 20 21 13.798v-3.26l-8.892-6.254zm2.746 3.858c.527 0 .96.065 1.298.193.338.128.614.296.828.501.214.206.382.422.505.65.122.226.221.491.296.794A7.33 7.33 0 0118 12.084c0 1.404-.24 2.431-.721 3.082-.48.651-1.308.976-2.483.976-.659 0-1.191-.103-1.597-.311a2.574 2.574 0 01-.999-.913c-.189-.285-.335-.674-.44-1.169a7.897 7.897 0 01-.158-1.638c0-1.47.268-2.5.804-3.087.536-.588 1.352-.882 2.448-.882zm-4.368 0v7.868h-2.2v-5.155l-.265.19a6.26 6.26 0 01-.769.459c-.333.165-.75.324-1.252.475v-1.763l.27-.09c.612-.217 1.097-.47 1.455-.76.41-.33.73-.738.961-1.224h1.8zm4.294 1.43c-.36 0-.62.18-.78.541-.16.361-.24 1.029-.24 2.003 0 .985.088 1.658.264 2.018.176.361.432.541.766.541.221 0 .412-.076.574-.23.162-.152.282-.394.358-.725.077-.33.115-.846.115-1.546 0-1.027-.088-1.718-.264-2.071-.177-.354-.44-.53-.793-.53z" />
</svg>
);
}
export default D10Icon;

18
src/icons/D12Icon.js Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
function D12Icon() {
return (
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentcolor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12.297 2.037l5.578 1.734a1 1 0 01.5.35l3.421 4.504A1 1 0 0122 9.23v5.54a1 1 0 01-.204.605l-3.422 4.504a1 1 0 01-.5.35l-5.577 1.734a1 1 0 01-.594 0l-5.578-1.734a1 1 0 01-.5-.35l-3.421-4.504A1 1 0 012 14.77V9.23a1 1 0 01.204-.605L5.626 4.12a1 1 0 01.5-.35l5.577-1.734a1 1 0 01.594 0zM12 4.048L7.059 5.565 4 9.54v4.917l3.059 3.976 4.94 1.517 4.941-1.517L20 14.457V9.542l-3.06-3.977L12 4.048zM10.364 8v7.636h-2.14v-5.003l-.258.185a6.092 6.092 0 01-.748.444A7.92 7.92 0 016 11.723v-1.71l.263-.088c.595-.21 1.066-.456 1.415-.737A3.37 3.37 0 008.613 8h1.75zm4.417 0c.768 0 1.365.084 1.792.251.426.167.762.424 1.007.77.244.347.366.736.366 1.166 0 .457-.14.895-.42 1.311-.28.417-.79.874-1.53 1.373-.438.29-.732.493-.88.61a7.954 7.954 0 00-.523.455H18v1.7h-6.545l.035-.23a3.856 3.856 0 01.647-1.514c.38-.544 1.094-1.187 2.14-1.928.64-.454 1.048-.799 1.227-1.034.178-.236.268-.46.268-.671a.768.768 0 00-.265-.587.949.949 0 00-.667-.243c-.279 0-.506.084-.683.25-.177.168-.296.464-.356.887l-2.186-.17.041-.243c.091-.472.235-.849.43-1.131.23-.33.551-.582.967-.758.416-.176.992-.264 1.728-.264z" />
</svg>
);
}
export default D12Icon;

18
src/icons/D20Icon.js Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
function D20Icon() {
return (
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentcolor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M13.014 1.292l7.98 4.577A2 2 0 0122 7.604v8.767a2 2 0 01-.997 1.73l-7.978 4.626a2 2 0 01-2.003.002L3.001 18.1A2 2 0 012 16.369V7.58a2 2 0 011.013-1.74l8.019-4.553a2 2 0 011.982.004zm-.995 1.736L4 7.58v8.788l8.021 4.628L20 16.37V7.604l-7.981-4.576zm3.504 5.256c.491 0 .894.06 1.21.181.315.121.572.278.771.472.2.194.356.397.47.611.115.214.207.463.277.748.136.543.204 1.109.204 1.698 0 1.322-.224 2.289-.672 2.901-.448.613-1.22.92-2.314.92-.614 0-1.11-.099-1.488-.294a2.407 2.407 0 01-.931-.86c-.176-.268-.313-.634-.41-1.1a7.506 7.506 0 01-.147-1.542c0-1.384.25-2.353.749-2.906.499-.553 1.26-.83 2.281-.83zm-6.887 0c.713 0 1.268.08 1.665.243.396.162.708.412.935.748.227.336.341.713.341 1.13 0 .444-.13.867-.39 1.271-.261.404-.735.848-1.421 1.332-.409.281-.681.478-.82.59-.137.113-.299.26-.484.443h3.165v1.649H5.545l.039-.255c.094-.505.293-.984.596-1.436.353-.529 1.016-1.152 1.988-1.87.594-.441.974-.775 1.14-1.004.166-.228.249-.445.249-.65a.76.76 0 00-.247-.57.86.86 0 00-.62-.235.864.864 0 00-.634.243c-.164.162-.274.449-.33.86l-2.031-.165.038-.236c.084-.458.218-.823.4-1.097.212-.32.511-.565.898-.735.386-.17.921-.256 1.605-.256zm6.818 1.346c-.335 0-.578.17-.727.51-.15.338-.224.967-.224 1.884 0 .927.082 1.56.247 1.9.164.34.402.51.714.51a.75.75 0 00.535-.217c.15-.144.262-.372.333-.683.071-.311.107-.796.107-1.455 0-.967-.082-1.617-.246-1.95-.165-.333-.41-.5-.74-.5z" />
</svg>
);
}
export default D20Icon;

18
src/icons/D4Icon.js Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
function D4Icon() {
return (
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentcolor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12.485 2.24a1 1 0 01.39.389l9.922 17.886A1 1 0 0121.923 22H2.077a1 1 0 01-.875-1.485l9.923-17.886a1 1 0 011.36-.39zM12 5.173L3.775 20h16.449L12 5.174zM13.995 10v5.076H15v1.78h-1.005V18.4h-1.94v-1.544H8V14.97L12.055 10h1.94zm-1.94 2.479l-2.142 2.597h2.142V12.48z" />
</svg>
);
}
export default D4Icon;

18
src/icons/D6Icon.js Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
function D6Icon() {
return (
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentcolor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M19 3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14zm0 2H5v14h14V5zm-6.87 3c.579 0 1.036.075 1.372.224.337.15.616.369.837.657.222.288.391.65.507 1.086l-2.012.277-.029-.15c-.054-.235-.133-.407-.236-.515a.612.612 0 00-.46-.194c-.328 0-.583.185-.765.554-.132.266-.23.835-.293 1.707.242-.273.49-.476.745-.607s.55-.197.884-.197c.65 0 1.198.26 1.647.776.449.517.673 1.173.673 1.967 0 .536-.113 1.025-.34 1.469a2.35 2.35 0 01-.944 1.005c-.402.227-.906.341-1.512.341-.729 0-1.313-.139-1.754-.416-.44-.277-.792-.719-1.055-1.327C9.132 14.05 9 13.245 9 12.244c0-1.466.276-2.54.83-3.222C10.381 8.341 11.148 8 12.13 8zm-.016 4.239a.88.88 0 00-.708.349c-.19.233-.285.565-.285.997 0 .44.1.784.298 1.034.199.249.442.374.73.374.265 0 .487-.113.666-.338.178-.226.268-.562.268-1.009 0-.458-.093-.807-.278-1.047-.186-.24-.416-.36-.69-.36z" />
</svg>
);
}
export default D6Icon;

18
src/icons/D8Icon.js Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
function D8Icon() {
return (
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentcolor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12.76 1.093l.088.088 8.997 10.156a1 1 0 01.077 1.228l-.077.098-8.997 10.156a1 1 0 01-1.4.096l-.09-.088-9.2-10.156a1 1 0 01-.079-1.243l.08-.1 9.2-10.155a1 1 0 011.4-.08zm-.669 2.249l-7.843 8.657 7.843 8.658L19.759 12l-7.668-8.658zM11.88 8c.981 0 1.707.172 2.176.517.469.345.704.779.704 1.302 0 .305-.094.59-.28.854-.141.197-.361.388-.662.573.397.176.694.408.889.697.195.29.293.61.293.96 0 .34-.084.656-.253.95a1.952 1.952 0 01-.621.68c-.245.16-.55.278-.916.354a5.782 5.782 0 01-1.17.113c-.778 0-1.372-.085-1.783-.254-.41-.17-.723-.419-.936-.748A1.984 1.984 0 019 12.894c0-.397.1-.733.3-1.008.2-.276.51-.49.927-.64-.32-.157-.554-.332-.701-.526-.2-.265-.3-.57-.3-.915 0-.566.288-1.03.866-1.39C10.542 8.14 11.139 8 11.88 8zm.1 3.805a.918.918 0 00-.664.277c-.188.184-.283.434-.283.748a.97.97 0 00.296.732c.197.189.422.284.676.284a.908.908 0 00.656-.289.988.988 0 00.29-.732.982.982 0 00-.292-.734.942.942 0 00-.679-.286zm0-2.66a.855.855 0 00-.604.215.722.722 0 00-.232.556c0 .234.079.423.237.566.16.143.37.215.634.215.234 0 .426-.071.576-.213a.72.72 0 00.225-.55.744.744 0 00-.235-.57.847.847 0 00-.601-.219z" />
</svg>
);
}
export default D8Icon;