diff --git a/src/components/map/MapControls.js b/src/components/map/MapControls.js
index aa4f10b..7384ae1 100644
--- a/src/components/map/MapControls.js
+++ b/src/components/map/MapControls.js
@@ -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}
>
-
+
{divider}
-
+
{maps.map(tile)}
);
}
-export default MapSelect;
+export default MapTiles;
diff --git a/src/components/map/AddMapButton.js b/src/components/map/SelectMapIcon.js
similarity index 54%
rename from src/components/map/AddMapButton.js
rename to src/components/map/SelectMapIcon.js
index 75dfcd4..ce4a2a3 100644
--- a/src/components/map/AddMapButton.js
+++ b/src/components/map/SelectMapIcon.js
@@ -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 (
<>
-
-
+
+
-
@@ -15,4 +15,6 @@ function AddIcon() {
);
}
+AddIcon.defaultProps = { large: false };
+
export default AddIcon;
diff --git a/src/icons/AddMapIcon.js b/src/icons/AddMapIcon.js
deleted file mode 100644
index aebdf6a..0000000
--- a/src/icons/AddMapIcon.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-
-function AddMapIcon() {
- return (
-
- );
-}
-
-export default AddMapIcon;
diff --git a/src/icons/SelectMapIcon.js b/src/icons/SelectMapIcon.js
new file mode 100644
index 0000000..dbfd967
--- /dev/null
+++ b/src/icons/SelectMapIcon.js
@@ -0,0 +1,18 @@
+import React from "react";
+
+function SelectMapIcon() {
+ return (
+
+ );
+}
+
+export default SelectMapIcon;
diff --git a/src/modals/AddMapModal.js b/src/modals/SelectMapModal.js
similarity index 90%
rename from src/modals/AddMapModal.js
rename to src/modals/SelectMapModal.js
index 53088b0..970e7df 100644
--- a/src/modals/AddMapModal.js
+++ b/src/modals/SelectMapModal.js
@@ -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 }) {
}}
>
-
@@ -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}
/>
@@ -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}
/>
@@ -257,4 +257,4 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
);
}
-export default AddMapModal;
+export default SelectMapModal;