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

Made the add map icon larger and changed to select map

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-23 18:01:40 +10:00
parent 25b215d4e4
commit 6f0df1c674
7 changed files with 59 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/map/MapControls.js
View File

@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef } from "react";
import { Flex, Box, IconButton, Label } from "theme-ui";
import AddMapButton from "./AddMapButton";
import SelectMapButton from "./SelectMapIcon";
import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
import PanToolIcon from "../../icons/PanToolIcon";
import BrushToolIcon from "../../icons/BrushToolIcon";
@ -233,7 +233,7 @@ function MapControls({
p={2}
ref={expanedMenuRef}
>
<AddMapButton onMapChange={onMapChange} />
<SelectMapButton onMapChange={onMapChange} />
{divider}
<IconButton
aria-label="Pan Tool"

6
src/components/map/MapSelect.js → src/components/map/MapTiles.js
View File

@ -4,7 +4,7 @@ import { Flex, Image as UIImage, IconButton } from "theme-ui";
import AddIcon from "../../icons/AddIcon";
import RemoveIcon from "../../icons/RemoveIcon";
function MapSelect({ maps, selectedMap, onMapSelect, onMapAdd, onMapRemove }) {
function MapTiles({ maps, selectedMap, onMapSelect, onMapAdd, onMapRemove }) {
const tileProps = {
m: 2,
bg: "muted",
@ -87,11 +87,11 @@ function MapSelect({ maps, selectedMap, onMapSelect, onMapAdd, onMapRemove }) {
aria-label="Add Map"
title="Add Map"
>
<AddIcon />
<AddIcon large />
</Flex>
{maps.map(tile)}
</Flex>
);
}
export default MapSelect;
export default MapTiles;

22
src/components/map/AddMapButton.js → src/components/map/SelectMapIcon.js
View File

@ -1,10 +1,10 @@
import React, { useState } from "react";
import { IconButton } from "theme-ui";
import AddMapModal from "../../modals/AddMapModal";
import AddMapIcon from "../../icons/AddMapIcon";
import SelectMapModal from "../../modals/SelectMapModal";
import SelectMapIcon from "../../icons/SelectMapIcon";
function AddMapButton({ onMapChange }) {
function SelectMapButton({ onMapChange }) {
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
function openModal() {
setIsAddModalOpen(true);
@ -14,16 +14,22 @@ function AddMapButton({ onMapChange }) {
}
function handleDone(map, mapState) {
onMapChange(map, mapState);
if (map) {
onMapChange(map, mapState);
}
closeModal();
}
return (
<>
<IconButton aria-label="Add Map" title="Add Map" onClick={openModal}>
<AddMapIcon />
<IconButton
aria-label="Select Map"
title="Select Map"
onClick={openModal}
>
<SelectMapIcon />
</IconButton>
<AddMapModal
<SelectMapModal
isOpen={isAddModalOpen}
onRequestClose={closeModal}
onDone={handleDone}
@ -32,4 +38,4 @@ function AddMapButton({ onMapChange }) {
);
}
export default AddMapButton;
export default SelectMapButton;

8
src/icons/AddIcon.js
View File

@ -1,12 +1,12 @@
import React from "react";
function AddIcon() {
function AddIcon({ large }) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
height={large ? "32" : "24"}
viewBox="0 0 24 24"
width="24"
width={large ? "32" : "24"}
fill="currentcolor"
>
<path d="M0 0h24v24H0V0z" fill="none" />
@ -15,4 +15,6 @@ function AddIcon() {
);
}
AddIcon.defaultProps = { large: false };
export default AddIcon;

18
src/icons/AddMapIcon.js
View File

@ -1,18 +0,0 @@
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/SelectMapIcon.js Normal file
View File

@ -0,0 +1,18 @@
import React from "react";
function SelectMapIcon() {
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="M22 16V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2zm-10.6-3.47l1.63 2.18 2.58-3.22c.2-.25.58-.25.78 0l2.96 3.7c.26.33.03.81-.39.81H9c-.41 0-.65-.47-.4-.8l2-2.67c.2-.26.6-.26.8 0zM2 7v13c0 1.1.9 2 2 2h13c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1-.45-1-1V7c0-.55-.45-1-1-1s-1 .45-1 1z" />
</svg>
);
}
export default SelectMapIcon;

34
src/modals/AddMapModal.js → src/modals/SelectMapModal.js
View File

@ -5,7 +5,7 @@ import shortid from "shortid";
import db from "../database";
import Modal from "../components/Modal";
import MapSelect from "../components/map/MapSelect";
import MapTiles from "../components/map/MapTiles";
import * as defaultMaps from "../maps";
@ -18,10 +18,10 @@ const defaultMapState = {
drawActions: [],
};
function AddMapModal({ isOpen, onRequestClose, onDone }) {
function SelectMapModal({ isOpen, onRequestClose, onDone }) {
const [imageLoading, setImageLoading] = useState(false);
const [currentMapId, setCurrentMapId] = useState(null);
const [currentMap, setCurrentMap] = useState(null);
const [maps, setMaps] = useState(Object.values(defaultMaps));
// Load maps from the database
useEffect(() => {
@ -90,7 +90,7 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
await db.table("maps").add(map);
await db.table("states").add({ ...defaultMapState, mapId: map.id });
setMaps((prevMaps) => [map, ...prevMaps]);
setCurrentMapId(map.id);
setCurrentMap(map);
setGridX(map.gridX);
setGridY(map.gridY);
}
@ -100,34 +100,34 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
await db.table("states").delete(id);
setMaps((prevMaps) => {
const filtered = prevMaps.filter((map) => map.id !== id);
setCurrentMapId(filtered[0].id);
setCurrentMap(filtered[0]);
return filtered;
});
}
function handleMapSelect(map) {
setCurrentMapId(map.id);
setCurrentMap(map);
setGridX(map.gridX);
setGridY(map.gridY);
}
async function handleSubmit(e) {
e.preventDefault();
const currentMap = maps.find((map) => map.id === currentMapId);
if (currentMap) {
let currentMapState =
(await db.table("states").get(currentMap.id)) || defaultMapState;
onDone(currentMap, currentMapState);
}
onDone(null, null);
}
async function handleGridXChange(e) {
const newX = e.target.value;
await db.table("maps").update(currentMapId, { gridX: newX });
await db.table("maps").update(currentMap.id, { gridX: newX });
setGridX(newX);
setMaps((prevMaps) => {
const newMaps = [...prevMaps];
const i = newMaps.findIndex((map) => map.id === currentMapId);
const i = newMaps.findIndex((map) => map.id === currentMap.id);
if (i > -1) {
newMaps[i].gridX = newX;
}
@ -137,11 +137,11 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
async function handleGridYChange(e) {
const newY = e.target.value;
await db.table("maps").update(currentMapId, { gridY: newY });
await db.table("maps").update(currentMap.id, { gridY: newY });
setGridY(newY);
setMaps((prevMaps) => {
const newMaps = [...prevMaps];
const i = newMaps.findIndex((map) => map.id === currentMapId);
const i = newMaps.findIndex((map) => map.id === currentMap.id);
if (i > -1) {
newMaps[i].gridY = newY;
}
@ -191,13 +191,13 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
}}
>
<Label pt={2} pb={1}>
Add map
Select or import a map
</Label>
<MapSelect
<MapTiles
maps={maps}
onMapAdd={openImageDialog}
onMapRemove={handleMapRemove}
selectedMap={currentMapId}
selectedMap={currentMap && currentMap.id}
onMapSelect={handleMapSelect}
/>
<Flex>
@ -208,7 +208,7 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
name="gridX"
value={gridX}
onChange={handleGridXChange}
disabled={currentMapId === null}
disabled={currentMap === null || currentMap.default}
min={1}
/>
</Box>
@ -219,7 +219,7 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
name="gridY"
value={gridY}
onChange={handleGridYChange}
disabled={currentMapId === null}
disabled={currentMap === null || currentMap.default}
min={1}
/>
</Box>
@ -257,4 +257,4 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
);
}
export default AddMapModal;
export default SelectMapModal;