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

Added map controls component and moved to seperate files for icons

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-18 23:31:40 +10:00
parent ecaf82fd53
commit c12abf5706
14 changed files with 233 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/AddMapButton.js
View File

@ -2,10 +2,11 @@ import React, { useRef, useState, useEffect } from "react";
import { IconButton } from "theme-ui";
import AddMapModal from "../modals/AddMapModal";
import AddMapIcon from "../icons/AddMapIcon";
const defaultMapSize = 22;
function AddMapButton({ onMapChanged }) {
function AddMapButton({ onMapChange }) {
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
function openModal() {
setIsAddModalOpen(true);
@ -37,7 +38,7 @@ function AddMapButton({ onMapChanged }) {
function handleDone() {
if (mapDataRef.current && mapSource) {
onMapChanged(mapDataRef.current, mapSource);
onMapChange(mapDataRef.current, mapSource);
}
closeModal();
}
@ -54,16 +55,7 @@ function AddMapButton({ onMapChanged }) {
return (
<>
<IconButton aria-label="Add Map" title="Add Map" onClick={openModal}>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M21.02 5H19V2.98c0-.54-.44-.98-.98-.98h-.03c-.55 0-.99.44-.99.98V5h-2.01c-.54 0-.98.44-.99.98v.03c0 .55.44.99.99.99H17v2.01c0 .54.44.99.99.98h.03c.54 0 .98-.44.98-.98V7h2.02c.54 0 .98-.44.98-.98v-.04c0-.54-.44-.98-.98-.98zM16 9.01V8h-1.01c-.53 0-1.03-.21-1.41-.58-.37-.38-.58-.88-.58-1.44 0-.36.1-.69.27-.98H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8.28c-.3.17-.64.28-1.02.28-1.09-.01-1.98-.9-1.98-1.99zM15.96 19H6c-.41 0-.65-.47-.4-.8l1.98-2.63c.21-.28.62-.26.82.02L10 18l2.61-3.48c.2-.26.59-.27.79-.01l2.95 3.68c.26.33.03.81-.39.81z" />
</svg>
<AddMapIcon />
</IconButton>
<AddMapModal
isOpen={isAddModalOpen}

12
src/components/AddPartyMemberButton.js
View File

@ -2,6 +2,7 @@ import React, { useState } from "react";
import { IconButton } from "theme-ui";
import AddPartyMemberModal from "../modals/AddPartyMemberModal";
import AddPartyMemberIcon from "../icons/AddPartyMemberIcon";
function AddPartyMemberButton({ gameId }) {
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
@ -20,16 +21,7 @@ function AddPartyMemberButton({ gameId }) {
title="Add Party Member"
onClick={openModal}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V8c0-.55-.45-1-1-1s-1 .45-1 1v2H2c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1H6zm9 4c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z" />
</svg>
<AddPartyMemberIcon />
</IconButton>
<AddPartyMemberModal
isOpen={isAddModalOpen}

12
src/components/ChangeNicknameButton.js
View File

@ -2,6 +2,7 @@ import React, { useState } from "react";
import { IconButton } from "theme-ui";
import ChangeNicknameModal from "../modals/ChangeNicknameModal";
import ChangeNicknameIcon from "../icons/ChangeNicknameIcon";
function ChangeNicknameButton({ nickname, onChange }) {
const [isChangeModalOpen, setIsChangeModalOpen] = useState(false);
@ -30,16 +31,7 @@ function ChangeNicknameButton({ nickname, onChange }) {
title="Change Nickname"
onClick={openModal}
>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
</svg>
<ChangeNicknameIcon />
</IconButton>
<ChangeNicknameModal
isOpen={isChangeModalOpen}

18
src/components/Map.js
View File

@ -3,10 +3,10 @@ import { Box, Image } from "theme-ui";
import interact from "interactjs";
import ProxyToken from "./ProxyToken";
import AddMapButton from "./AddMapButton";
import TokenMenu from "./TokenMenu";
import MapToken from "./MapToken";
import MapDrawing from "./MapDrawing";
import MapControls from "./MapControls";
const mapTokenClassName = "map-token";
const zoomSpeed = -0.005;
@ -154,20 +154,6 @@ function Map({
</Box>
);
const mapActions = (
<Box
p={2}
sx={{
position: "absolute",
top: "0",
left: "50%",
transform: "translateX(-50%)",
}}
>
<AddMapButton onMapChanged={onMapChange} />
</Box>
);
return (
<>
<Box
@ -211,7 +197,7 @@ function Map({
/>
</Box>
</Box>
{mapActions}
<MapControls onMapChange={onMapChange} />
</Box>
<ProxyToken
tokenClassName={mapTokenClassName}

56
src/components/MapControls.js Normal file
View File

@ -0,0 +1,56 @@
import React from "react";
import { Flex, Box, IconButton } from "theme-ui";
import AddMapButton from "./AddMapButton";
import ExpandMoreIcon from "../icons/ExpandMoreIcon";
import PanToolIcon from "../icons/PanToolIcon";
import BrushToolIcon from "../icons/BrushToolIcon";
import EraseToolIcon from "../icons/EraseToolIcon";
import UndoIcon from "../icons/UndoIcon";
import RedoIcon from "../icons/RedoIcon";
function MapControls({ onMapChange }) {
const divider = (
<Box
my={2}
bg="text"
sx={{ height: "2px", width: "24px", borderRadius: "2px", opacity: 0.5 }}
></Box>
);
return (
<Flex
p={2}
sx={{
position: "absolute",
top: 0,
right: 0,
flexDirection: "column",
alignItems: "center",
}}
>
<IconButton aria-label="Expand More" title="Expand More">
<ExpandMoreIcon />
</IconButton>
<AddMapButton onMapChange={onMapChange} />
{divider}
<IconButton aria-label="Pan Tool" title="Pan Tool">
<PanToolIcon />
</IconButton>
<IconButton aria-label="Brush Tool" title="Brush Tool">
<BrushToolIcon />
</IconButton>
<IconButton aria-label="Erase Tool" title="Erase Tool">
<EraseToolIcon />
</IconButton>
{divider}
<IconButton aria-label="Undo" title="Undo">
<UndoIcon />
</IconButton>
<IconButton aria-label="Redo" title="Redo">
<RedoIcon />
</IconButton>
</Flex>
);
}
export default MapControls;

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

@ -0,0 +1,18 @@
import React from "react";
function AddMapIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M21.02 5H19V2.98c0-.54-.44-.98-.98-.98h-.03c-.55 0-.99.44-.99.98V5h-2.01c-.54 0-.98.44-.99.98v.03c0 .55.44.99.99.99H17v2.01c0 .54.44.99.99.98h.03c.54 0 .98-.44.98-.98V7h2.02c.54 0 .98-.44.98-.98v-.04c0-.54-.44-.98-.98-.98zM16 9.01V8h-1.01c-.53 0-1.03-.21-1.41-.58-.37-.38-.58-.88-.58-1.44 0-.36.1-.69.27-.98H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8.28c-.3.17-.64.28-1.02.28-1.09-.01-1.98-.9-1.98-1.99zM15.96 19H6c-.41 0-.65-.47-.4-.8l1.98-2.63c.21-.28.62-.26.82.02L10 18l2.61-3.48c.2-.26.59-.27.79-.01l2.95 3.68c.26.33.03.81-.39.81z" />
</svg>
);
}
export default AddMapIcon;

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

@ -0,0 +1,18 @@
import React from "react";
function AddPartyMemberIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V8c0-.55-.45-1-1-1s-1 .45-1 1v2H2c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1H6zm9 4c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z" />
</svg>
);
}
export default AddPartyMemberIcon;

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

@ -0,0 +1,18 @@
import React from "react";
function BrushToolIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M7 14c-1.66 0-3 1.34-3 3 0 1.31-1.16 2-2 2 .92 1.22 2.49 2 4 2 2.21 0 4-1.79 4-4 0-1.66-1.34-3-3-3zm13.71-9.37l-1.34-1.34c-.39-.39-1.02-.39-1.41 0L9 12.25 11.75 15l8.96-8.96c.39-.39.39-1.02 0-1.41z" />
</svg>
);
}
export default BrushToolIcon;

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

@ -0,0 +1,18 @@
import React from "react";
function ChangeNicknameIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
</svg>
);
}
export default ChangeNicknameIcon;

23
src/icons/EraseToolIcon.js Normal file
View File

@ -0,0 +1,23 @@
import React from "react";
function EraseToolIcon() {
return (
<svg
width="24"
height="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
>
<g fill="none" fillRule="evenodd">
<path d="M0 0h24v24H0z" />
<path
d="M3.212 12.303c-1 1-1.182 2.455-.404 3.233l5.656 5.656c.778.778 2.233.596 3.233-.404l9.091-9.091c1-1 1.182-2.455.404-3.233l-5.656-5.656c-.778-.778-2.233-.596-3.233.404l-9.091 9.091zm6.667-2.424l4.242 4.242c.39.39.485.93.212 1.202l-3.96 3.96c-.272.272-.813.177-1.201-.212l-4.243-4.243c-.389-.388-.484-.93-.212-1.202l3.96-3.96c.272-.272.813-.176 1.202.213z"
fill="currentcolor"
fillRule="nonzero"
/>
</g>
</svg>
);
}
export default EraseToolIcon;

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

@ -0,0 +1,18 @@
import React from "react";
function ExpandMoreIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M24 24H0V0h24v24z" fill="none" opacity=".87" />
<path d="M15.88 9.29L12 13.17 8.12 9.29c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41-.39-.38-1.03-.39-1.42 0z" />
</svg>
);
}
export default ExpandMoreIcon;

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

@ -0,0 +1,18 @@
import React from "react";
function PanToolIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M21.5 4c-.83 0-1.5.67-1.5 1.5v5c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-8c0-.83-.67-1.5-1.5-1.5S16 1.67 16 2.5v8c0 .28-.22.5-.5.5s-.5-.22-.5-.5v-9c0-.83-.67-1.5-1.5-1.5S12 .67 12 1.5v8.99c0 .28-.22.5-.5.5s-.5-.22-.5-.5V4.5c0-.83-.67-1.5-1.5-1.5S8 3.67 8 4.5v11.41l-4.12-2.35c-.58-.33-1.3-.24-1.78.22-.6.58-.62 1.54-.03 2.13l6.78 6.89c.75.77 1.77 1.2 2.85 1.2H19c2.21 0 4-1.79 4-4V5.5c0-.83-.67-1.5-1.5-1.5z" />
</svg>
);
}
export default PanToolIcon;

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

@ -0,0 +1,18 @@
import React from "react";
function RedoIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.16 0-7.74 2.42-9.44 5.93-.32.67.04 1.47.75 1.71.59.2 1.23-.08 1.5-.64 1.3-2.66 4.03-4.5 7.19-4.5 1.95 0 3.73.72 5.12 1.88l-1.91 1.91c-.63.63-.19 1.71.7 1.71H21c.55 0 1-.45 1-1V9.41c0-.89-1.08-1.34-1.71-.71l-1.89 1.9z" />
</svg>
);
}
export default RedoIcon;

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

@ -0,0 +1,18 @@
import React from "react";
function UndoIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
viewBox="0 0 24 24"
width="24"
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
<path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L3.71 8.71C3.08 8.08 2 8.52 2 9.41V15c0 .55.45 1 1 1h5.59c.89 0 1.34-1.08.71-1.71l-1.91-1.91c1.39-1.16 3.16-1.88 5.12-1.88 3.16 0 5.89 1.84 7.19 4.5.27.56.91.84 1.5.64.71-.23 1.07-1.04.75-1.72C20.23 10.42 16.65 8 12.5 8z" />
</svg>
);
}
export default UndoIcon;