Greatly simplify stat reduction input

components/GameAppealCard.tsx

@@ -14,6 +14,11 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
   Stack,
   StackDivider,
   Text,
@@ -113,6 +118,18 @@ export default function (props: GameAppealProps & { port?: MessagePort }) {
           </ModalHeader>
           <ModalBody>
             <VStack spacing={4}>
+              <NumberInput
+                max={10}
+                min={-10}
+                onChange={(_, n) => setPercentage(n)}
+                precision={0}
+              >
+                <NumberInputField />
+                <NumberInputStepper>
+                  <NumberIncrementStepper />
+                  <NumberDecrementStepper />
+                </NumberInputStepper>
+              </NumberInput>
               <Input
                 onBeforeInput={(e) => {
                   const value = (e.target as EventTarget & { value: string })
@@ -122,7 +139,6 @@ export default function (props: GameAppealProps & { port?: MessagePort }) {
                     e.preventDefault();
                 }}
                 onChange={(e) => setPercentage(parseInt(e.target.value))}
-                pattern="/^-?\d{0,3}$/"
                 placeholder="Reduction factor"
               />
               <Text alignSelf="start">Stat multiplication factors:</Text>