From a73c71ec268d96c0e6447f581edc8b27df66e1f1 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Thu, 31 Dec 2020 17:07:51 +0200
Subject: [PATCH] maps decide count

---
 pages/maps.tsx | 36 ++++++++++++++++++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/pages/maps.tsx b/pages/maps.tsx
index c594cac12..b5b30fdbe 100644
--- a/pages/maps.tsx
+++ b/pages/maps.tsx
@@ -9,6 +9,11 @@ import {
   Input,
   InputGroup,
   InputRightElement,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
   Radio,
   RadioGroup,
   Stack,
@@ -268,7 +273,13 @@ const MapsGeneratorPage = () => {
           )}
         </>
       ) : (
-        <Grid my={8} templateColumns="repeat(4, 1fr)" rowGap={4} columnGap={4}>
+        <Grid
+          my={8}
+          templateColumns="repeat(4, 1fr)"
+          rowGap={4}
+          columnGap={4}
+          display={["none", null, "grid"]}
+        >
           <Box textAlign="center">
             <ModeImage mode="SZ" />
           </Box>
@@ -341,9 +352,30 @@ const MapsGeneratorPage = () => {
           </Radio>
         </Stack>
       </RadioGroup>
+      <FormLabel htmlFor="count" fontSize="sm">
+        <Trans>Amount of maps to generate</Trans>
+      </FormLabel>
+      <NumberInput
+        name="count"
+        size="sm"
+        value={count}
+        min={1}
+        max={100}
+        onChange={(_, value) => {
+          if (!Number.isNaN(value)) setCount(value);
+        }}
+        mb={4}
+        width={24}
+      >
+        <NumberInputField />
+        <NumberInputStepper>
+          <NumberIncrementStepper />
+          <NumberDecrementStepper />
+        </NumberInputStepper>
+      </NumberInput>
       {maplist && (
         <>
-          <Textarea value={maplist} readOnly rows={count} />
+          <Textarea value={maplist} readOnly rows={12} />
           {/* @ts-ignore */}
           {navigator.share ? (
             <Button