Changed map data grid size labelling and fixed ui labels

This commit is contained in:
Mitchell McCaffrey 2020-04-20 14:49:38 +10:00
parent 91537a9477
commit 6fb2e9f113
3 changed files with 25 additions and 25 deletions

View File

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

View File

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

View File

@ -16,10 +16,10 @@ function AddMapModal({
onRequestClose,
onDone,
onImageUpload,
rows,
onRowsChange,
columns,
onColumnsChange,
gridX,
onGridXChange,
gridY,
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"
value={rows}
onChange={(e) => onRowsChange(e.target.value)}
name="gridX"
value={gridX}
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"
value={columns}
onChange={(e) => onColumnsChange(e.target.value)}
name="gridY"
value={gridY}
onChange={(e) => onGridYChange(e.target.value)}
/>
</Box>
</Flex>