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

Fix selectMapButton name and a bug with deleting a map that isn't the current one

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-23 21:54:58 +10:00
parent 81da404eec
commit 5539fcf16a
5 changed files with 63 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/map/Map.js
View File

@ -22,6 +22,7 @@ function Map({
onMapTokenChange,
onMapTokenRemove,
onMapChange,
onMapStateChange,
onMapDraw,
onMapDrawUndo,
onMapDrawRedo,
@ -296,6 +297,8 @@ function Map({
</Box>
<MapControls
onMapChange={onMapChange}
onMapStateChange={onMapStateChange}
currentMap={map}
onToolChange={setSelectedTool}
selectedTool={selectedTool}
disabledTools={disabledTools}

10
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 SelectMapButton from "./SelectMapIcon";
import SelectMapButton from "./SelectMapButton";
import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
import PanToolIcon from "../../icons/PanToolIcon";
import BrushToolIcon from "../../icons/BrushToolIcon";
@ -22,6 +22,8 @@ import EraseAllIcon from "../../icons/EraseAllIcon";
function MapControls({
onMapChange,
onMapStateChange,
currentMap,
onToolChange,
selectedTool,
disabledTools,
@ -233,7 +235,11 @@ function MapControls({
p={2}
ref={expanedMenuRef}
>
<SelectMapButton onMapChange={onMapChange} />
<SelectMapButton
onMapChange={onMapChange}
onMapStateChange={onMapStateChange}
currentMap={currentMap}
/>
{divider}
<IconButton
aria-label="Pan Tool"

10
src/components/map/SelectMapIcon.js → src/components/map/SelectMapButton.js
View File

@ -4,7 +4,7 @@ import { IconButton } from "theme-ui";
import SelectMapModal from "../../modals/SelectMapModal";
import SelectMapIcon from "../../icons/SelectMapIcon";
function SelectMapButton({ onMapChange }) {
function SelectMapButton({ onMapChange, onMapStateChange, currentMap }) {
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
function openModal() {
setIsAddModalOpen(true);
@ -13,10 +13,7 @@ function SelectMapButton({ onMapChange }) {
setIsAddModalOpen(false);
}
function handleDone(map, mapState) {
if (map) {
onMapChange(map, mapState);
}
function handleDone() {
closeModal();
}
@ -33,6 +30,9 @@ function SelectMapButton({ onMapChange }) {
isOpen={isAddModalOpen}
onRequestClose={closeModal}
onDone={handleDone}
onMapChange={onMapChange}
onMapStateChange={onMapStateChange}
currentMap={currentMap}
/>
</>
);

55
src/modals/SelectMapModal.js
View File

@ -18,10 +18,19 @@ const defaultMapState = {
drawActions: [],
};
function SelectMapModal({ isOpen, onRequestClose, onDone }) {
function SelectMapModal({
isOpen,
onRequestClose,
onDone,
onMapChange,
onMapStateChange,
// The map currently being view in the map screen
currentMap,
}) {
const [imageLoading, setImageLoading] = useState(false);
const [currentMap, setCurrentMap] = useState(null);
// The map selected in the modal
const [selectedMap, setSelectedMap] = useState(null);
const [maps, setMaps] = useState([]);
// Load maps from the database and ensure state is properly setup
useEffect(() => {
@ -121,48 +130,60 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
await db.table("maps").add(map);
await db.table("states").add({ ...defaultMapState, mapId: map.id });
setMaps((prevMaps) => [map, ...prevMaps]);
setCurrentMap(map);
setSelectedMap(map);
setGridX(map.gridX);
setGridY(map.gridY);
}
// Keep track of removed maps
async function handleMapRemove(id) {
await db.table("maps").delete(id);
await db.table("states").delete(id);
setMaps((prevMaps) => {
const filtered = prevMaps.filter((map) => map.id !== id);
setCurrentMap(filtered[0]);
setSelectedMap(filtered[0]);
return filtered;
});
// Removed the map from the map screen if needed
if (currentMap.id === selectedMap.id) {
onMapChange(null);
}
}
function handleMapSelect(map) {
setCurrentMap(map);
setSelectedMap(map);
setGridX(map.gridX);
setGridY(map.gridY);
}
async function handleMapReset(id) {
await db.table("states").put({ ...defaultMapState, mapId: id });
const state = { ...defaultMapState, mapId: id };
await db.table("states").put(state);
// Reset the state of the current map if needed
if (currentMap.id === selectedMap.id) {
onMapStateChange(state);
}
}
async function handleSubmit(e) {
e.preventDefault();
if (currentMap) {
if (selectedMap) {
let currentMapState =
(await db.table("states").get(currentMap.id)) || defaultMapState;
onDone(currentMap, currentMapState);
(await db.table("states").get(selectedMap.id)) || defaultMapState;
onMapStateChange(currentMapState);
onMapChange(selectedMap);
onDone();
}
onDone(null, null);
onDone();
}
async function handleGridXChange(e) {
const newX = e.target.value;
await db.table("maps").update(currentMap.id, { gridX: newX });
await db.table("maps").update(selectedMap.id, { gridX: newX });
setGridX(newX);
setMaps((prevMaps) => {
const newMaps = [...prevMaps];
const i = newMaps.findIndex((map) => map.id === currentMap.id);
const i = newMaps.findIndex((map) => map.id === selectedMap.id);
if (i > -1) {
newMaps[i].gridX = newX;
}
@ -172,11 +193,11 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
async function handleGridYChange(e) {
const newY = e.target.value;
await db.table("maps").update(currentMap.id, { gridY: newY });
await db.table("maps").update(selectedMap.id, { gridY: newY });
setGridY(newY);
setMaps((prevMaps) => {
const newMaps = [...prevMaps];
const i = newMaps.findIndex((map) => map.id === currentMap.id);
const i = newMaps.findIndex((map) => map.id === selectedMap.id);
if (i > -1) {
newMaps[i].gridY = newY;
}
@ -232,7 +253,7 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
maps={maps}
onMapAdd={openImageDialog}
onMapRemove={handleMapRemove}
selectedMap={currentMap && currentMap.id}
selectedMap={selectedMap && selectedMap.id}
onMapSelect={handleMapSelect}
onMapReset={handleMapReset}
/>
@ -244,7 +265,7 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
name="gridX"
value={gridX}
onChange={handleGridXChange}
disabled={currentMap === null || currentMap.default}
disabled={selectedMap === null || selectedMap.default}
min={1}
/>
</Box>
@ -255,7 +276,7 @@ function SelectMapModal({ isOpen, onRequestClose, onDone }) {
name="gridY"
value={gridY}
onChange={handleGridYChange}
disabled={currentMap === null || currentMap.default}
disabled={selectedMap === null || selectedMap.default}
min={1}
/>
</Box>

12
src/routes/Game.js
View File

@ -48,12 +48,17 @@ function Game() {
}
}, [debouncedMapState]);
function handleMapChange(newMap, newMapState) {
function handleMapChange(newMap) {
setMap(newMap);
for (let peer of Object.values(peers)) {
peer.connection.send({ id: "map", data: newMap });
}
}
function handleMapStateChange(newMapState) {
setMapState(newMapState);
for (let peer of Object.values(peers)) {
peer.connection.send({ id: "mapState", data: newMapState });
peer.connection.send({ id: "map", data: newMap });
}
}
@ -169,7 +174,7 @@ function Game() {
if (data.id === "map") {
// If we have a file convert it to a url
// TODO clear the file url of the previous map if it's a blob
if (data.data.file) {
if (data.data && data.data.file) {
const file = new Blob([data.data.file]);
const source = URL.createObjectURL(file);
setMap({ ...data.data, file, source });
@ -323,6 +328,7 @@ function Game() {
onMapTokenChange={handleMapTokenChange}
onMapTokenRemove={handleMapTokenRemove}
onMapChange={handleMapChange}
onMapStateChange={handleMapStateChange}
onMapDraw={handleMapDraw}
onMapDrawUndo={handleMapDrawUndo}
onMapDrawRedo={handleMapDrawRedo}