From 0fa0858a3cbdaa6ff48384717ec87acb89ad3a62 Mon Sep 17 00:00:00 2001
From: Regalijan <r@regalijan.com>
Date: Sat, 16 Mar 2024 02:17:22 -0400
Subject: [PATCH] Fix stat input validation

---
 components/GameAppealCard.tsx | 26 ++++++++++++++------------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/components/GameAppealCard.tsx b/components/GameAppealCard.tsx
index 2e752e5..5606494 100644
--- a/components/GameAppealCard.tsx
+++ b/components/GameAppealCard.tsx
@@ -118,22 +118,24 @@ export default function (props: GameAppealProps & { port?: MessagePort }) {
                   const value = (e.target as EventTarget & { value: string })
                     .value;
 
-                  return (
-                    Boolean(value.match(/^-?\d{0,3}$/)) ||
-                    value === "-" ||
-                    !value
-                  );
+                  if (value !== "-" && value && !value.match(/^-?\d{0,3}$/))
+                    e.preventDefault();
                 }}
                 onChange={(e) => setPercentage(parseInt(e.target.value))}
+                pattern="/^-?\d{0,3}$/"
                 placeholder="Reduction factor"
               />
-              <br />
-              <Text>Stat multiplication factors:</Text>
-              <br />
-              <UnorderedList>
-                <ListItem>Money: {Math.min(0.1 * percentage, 1)}</ListItem>
-                <ListItem>Parts: {Math.min(0.6 * percentage, 1)}</ListItem>
-                <ListItem>Derby Wins: {Math.min(0.6 * percentage, 1)}</ListItem>
+              <Text alignSelf="start">Stat multiplication factors:</Text>
+              <UnorderedList alignSelf="start">
+                <ListItem>
+                  Money: {Math.min(0.1 * percentage, 1).toFixed(2)}
+                </ListItem>
+                <ListItem>
+                  Parts: {Math.min(0.6 * percentage, 1).toFixed(2)}
+                </ListItem>
+                <ListItem>
+                  Derby Wins: {Math.min(0.6 * percentage, 1).toFixed(2)}
+                </ListItem>
               </UnorderedList>
             </VStack>
           </ModalBody>