Added name to map and added default props

src/helpers/useDataSource.js

@@ -13,7 +13,7 @@ function useDataSource(data, defaultSources) {
     if (data.type === "file") {
       url = URL.createObjectURL(data.file);
     } else if (data.type === "default") {
-      url = defaultSources[data.name];
+      url = defaultSources[data.key];
     }
     setDataSource(url);
 

src/maps/index.js

@@ -14,8 +14,9 @@ export const mapSources = {
   wood: woodImage,
 };
 
-export const maps = Object.keys(mapSources).map((name) => ({
+export const maps = Object.keys(mapSources).map((key) => ({
-  name,
+  key,
+  name: key.charAt(0).toUpperCase() + key.slice(1),
   gridX: 22,
   gridY: 22,
   width: 1024,

src/modals/SelectMapModal.js

@@ -20,6 +20,14 @@ const defaultMapState = {
   drawActions: [],
 };
 
+const defaultMapProps = {
+  // Flags to determine what other people can edit
+  editFlags: [],
+  // Grid type
+  // TODO: add support for hex horizontal and hex vertical
+  gridType: "grid",
+};
+
 function SelectMapModal({
   isOpen,
   onRequestClose,
@@ -52,6 +60,7 @@ function SelectMapModal({
           owner: userId,
           // Emulate the time increasing to avoid sort errors
           timestamp: Date.now() + i,
+          ...defaultMapProps,
         });
         // Add a state for the map if there isn't one already
         const state = await db.table("states").get(id);
@@ -84,6 +93,7 @@ function SelectMapModal({
     }
     let fileGridX = defaultMapSize;
     let fileGridY = defaultMapSize;
+    let name = "Unknown Map";
     if (file.name) {
       // Match against a regex to find the grid size in the file name
       // e.g. Cave 22x23 will return [["22x22", "22", "x", "23"]]
@@ -97,6 +107,13 @@ function SelectMapModal({
           fileGridY = matchY;
         }
       }
+      // Remove file extension
+      name = file.name.replace(/\.[^/.]+$/, "");
+      // Removed grid size expression
+      name = name.replace(/(\[ ?|\( ?)?\d+ ?(x|X) ?\d+( ?\]| ?\))?/, "");
+      // Clean string
+      name = name.replace(/ +/g, " ");
+      name = name.trim();
     }
     let image = new Image();
     setImageLoading(true);
@@ -105,6 +122,7 @@ function SelectMapModal({
     image.onload = function () {
       handleMapAdd({
         file,
+        name,
         type: "file",
         gridX: fileGridX,
         gridY: fileGridY,
@@ -113,6 +131,7 @@ function SelectMapModal({
         id: shortid.generate(),
         timestamp: Date.now(),
         owner: userId,
+        ...defaultMapProps,
       });
       setImageLoading(false);
       URL.revokeObjectURL(url);

src/tokens/index.js

@@ -42,7 +42,8 @@ export const tokenSources = {
   triangle,
 };
 
-export const tokens = Object.keys(tokenSources).map((name) => ({
+export const tokens = Object.keys(tokenSources).map((key) => ({
-  name,
+  key,
+  name: key.charAt(0).toUpperCase() + key.slice(1),
   type: "default",
 }));