Added sending of default maps

src/components/map/MapSelect.js

@@ -3,24 +3,34 @@ import { Flex, Image as UIImage } from "theme-ui";
 
 import AddIcon from "../../icons/AddIcon";
 
-function MapSelect({ maps, onMapAdd }) {
+function MapSelect({ maps, selectedMap, onMapSelected, onMapAdd }) {
   const tileProps = {
     m: 2,
-    sx: {
-      width: "150px",
-      height: "150px",
-      borderRadius: "4px",
-      justifyContent: "center",
-      alignItems: "center",
-    },
     bg: "muted",
   };
 
-  function tile(map) {
+  const tileStyle = {
+    width: "150px",
+    height: "150px",
+    borderRadius: "4px",
+    justifyContent: "center",
+    alignItems: "center",
+    cursor: "pointer",
+  };
+
+  // TODO move from passing index in to using DB ID
+  function tile(map, index) {
     return (
       <Flex // TODO: use DB key
         key={map.source}
+        sx={{
+          borderColor: "primary",
+          borderStyle: index === selectedMap ? "solid" : "none",
+          borderWidth: "4px",
+          ...tileStyle,
+        }}
         {...tileProps}
+        onClick={() => onMapSelected(index)}
       >
         <UIImage
           sx={{ width: "100%", objectFit: "contain" }}
@@ -44,8 +54,23 @@ function MapSelect({ maps, onMapAdd }) {
         flexGrow: 1,
       }}
     >
-      {maps.map(tile)}
-      <Flex onClick={onMapAdd} {...tileProps}>
+      {maps.map((map, index) => tile(map, index))}
+      <Flex
+        onClick={onMapAdd}
+        sx={{
+          ":hover": {
+            color: "primary",
+          },
+          ":focus": {
+            outline: "none",
+          },
+          ":active": {
+            color: "secondary",
+          },
+          ...tileStyle,
+        }}
+        {...tileProps}
+      >
         <AddIcon />
       </Flex>
     </Flex>

src/modals/AddMapModal.js

@@ -82,6 +82,15 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
     }
   }
 
+  function handleMapSelect(mapId) {
+    setCurrentMap(mapId);
+    setGridX(maps[mapId].gridX);
+    setGridY(maps[mapId].gridY);
+  }
+
+  /**
+   * Drag and Drop
+   */
   const [dragging, setDragging] = useState(false);
   function handleImageDragEnter(event) {
     event.preventDefault();
@@ -130,7 +139,12 @@ function AddMapModal({ isOpen, onRequestClose, onDone }) {
           <Label pt={2} pb={1}>
             Add map
           </Label>
-          <MapSelect maps={maps} onMapAdd={openImageDialog} />
+          <MapSelect
+            maps={maps}
+            onMapAdd={openImageDialog}
+            selectedMap={currentMap}
+            onMapSelected={handleMapSelect}
+          />
           <Flex>
             <Box mb={2} mr={1} sx={{ flexGrow: 1 }}>
               <Label htmlFor="gridX">Columns</Label>

src/routes/Game.js

@@ -39,7 +39,7 @@ function Game() {
   function handleMapChange(newMap) {
     setMap(newMap);
     for (let peer of Object.values(peers)) {
-      peer.connection.send({ id: "map", data: map });
+      peer.connection.send({ id: "map", data: newMap });
     }
   }
 
@@ -156,9 +156,15 @@ function Game() {
       }
     }
     if (data.id === "map") {
-      const file = new Blob([data.data.file]);
-      const source = URL.createObjectURL(file);
-      setMap({ ...data.data, file, source });
+      // 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) {
+        const file = new Blob([data.data.file]);
+        const source = URL.createObjectURL(file);
+        setMap({ ...data.data, file, source });
+      } else {
+        setMap(data.data);
+      }
     }
     if (data.id === "tokenEdit") {
       setMapTokens((prevMapTokens) => ({