Fix stat input validation

regalijan · Mar 16, 2024 · 0fa0858 · 0fa0858
1 parent 5cf8063
commit 0fa0858
Showing 1 changed file with 14 additions and 12 deletions.
diff --git 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>