From f648fe8a0c2eb1ea653da51cf2cc47fc0e21fda3 Mon Sep 17 00:00:00 2001
From: Regalijan <r@regalijan.com>
Date: Sat, 16 Mar 2024 02:37:07 -0400
Subject: [PATCH] Greatly simplify stat reduction input

---
 components/GameAppealCard.tsx | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/components/GameAppealCard.tsx b/components/GameAppealCard.tsx
index 5606494..b087b57 100644
--- a/components/GameAppealCard.tsx
+++ b/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>