Changed map data grid size labelling and fixed ui labels

src/components/AddMapButton.js

@@ -25,8 +25,8 @@ function AddMapButton({ onMapChange }) {
     image.onload = function () {
       mapDataRef.current = {
         file,
-        rows,
+        gridX: gridX,
-        columns,
+        gridY: gridY,
         width: image.width,
         height: image.height,
       };
@@ -43,14 +43,14 @@ function AddMapButton({ onMapChange }) {
     closeModal();
   }
 
-  const [rows, setRows] = useState(defaultMapSize);
+  const [gridX, setGridX] = useState(defaultMapSize);
-  const [columns, setColumns] = useState(defaultMapSize);
+  const [gridY, setGridY] = useState(defaultMapSize);
   useEffect(() => {
     if (mapDataRef.current) {
-      mapDataRef.current.rows = rows;
+      mapDataRef.current.gridX = gridX;
-      mapDataRef.current.columns = columns;
+      mapDataRef.current.gridY = gridY;
     }
-  }, [rows, columns]);
+  }, [gridX, gridY]);
 
   return (
     <>
@@ -62,10 +62,10 @@ function AddMapButton({ onMapChange }) {
         onRequestClose={closeModal}
         onDone={handleDone}
         onImageUpload={handleImageUpload}
-        rows={rows}
+        gridX={gridX}
-        onRowsChange={setRows}
+        onGridXChange={setGridX}
-        columns={columns}
+        gridY={gridY}
-        onColumnsChange={setColumns}
+        onGridYChange={setGridY}
         imageLoaded={imageLoaded}
         mapSource={mapSource}
       />

src/components/Map.js

@@ -191,8 +191,8 @@ function Map({
 
   const mapRef = useRef(null);
   const mapContainerRef = useRef();
-  const rows = mapData && mapData.rows;
+  const gridX = mapData && mapData.gridX;
-  const tokenSizePercent = (1 / rows) * 100;
+  const tokenSizePercent = (1 / gridX) * 100;
   const aspectRatio = (mapData && mapData.width / mapData.height) || 1;
 
   const mapImage = (

src/modals/AddMapModal.js

@@ -16,10 +16,10 @@ function AddMapModal({
   onRequestClose,
   onDone,
   onImageUpload,
-  rows,
+  gridX,
-  onRowsChange,
+  onGridXChange,
-  columns,
+  gridY,
-  onColumnsChange,
+  onGridYChange,
   imageLoaded,
   mapSource,
 }) {
@@ -95,21 +95,21 @@ function AddMapModal({
           />
           <Flex>
             <Box mb={2} mr={1} sx={{ flexGrow: 1 }}>
-              <Label htmlFor="rows">Rows</Label>
+              <Label htmlFor="gridX">Columns</Label>
               <Input
                 type="number"
-                name="rows"
+                name="gridX"
-                value={rows}
+                value={gridX}
-                onChange={(e) => onRowsChange(e.target.value)}
+                onChange={(e) => onGridXChange(e.target.value)}
               />
             </Box>
             <Box mb={2} ml={1} sx={{ flexGrow: 1 }}>
-              <Label htmlFor="columns">Columns</Label>
+              <Label htmlFor="gridY">Rows</Label>
               <Input
                 type="number"
-                name="columns"
+                name="gridY"
-                value={columns}
+                value={gridY}
-                onChange={(e) => onColumnsChange(e.target.value)}
+                onChange={(e) => onGridYChange(e.target.value)}
               />
             </Box>
           </Flex>