Finally fix stat reduction modal

components/GameAppealCard.tsx

@@ -7,6 +7,7 @@ import {
   CardHeader,
   Heading,
   Input,
+  ListItem,
   Modal,
   ModalBody,
   ModalContent,
@@ -16,8 +17,10 @@ import {
   Stack,
   StackDivider,
   Text,
+  UnorderedList,
   useDisclosure,
   useToast,
+  VStack,
 } from "@chakra-ui/react";
 import { useState } from "react";
 
@@ -104,21 +107,35 @@ export default function (props: GameAppealProps & { port?: MessagePort }) {
         <ModalOverlay />
         <ModalContent>
           <ModalHeader>
-            <Heading>
+            <Heading size="sm">
               How much should this player's stats be reduced by?
             </Heading>
           </ModalHeader>
           <ModalBody>
-            <Input
+            <VStack spacing={4}>
-              onBeforeInput={(e) => {
+              <Input
-                const value = (e.target as EventTarget & { value: string })
+                onBeforeInput={(e) => {
-                  .value;
+                  const value = (e.target as EventTarget & { value: string })
+                    .value;
 
-                return !value.match(/\D/);
+                  return (
-              }}
+                    Boolean(value.match(/^-?\d{0,3}$/)) ||
-              onChange={(e) => setPercentage(parseInt(e.target.value))}
+                    value === "-" ||
-              placeholder="Number between 0 and 100"
+                    !value
-            />
+                  );
+                }}
+                onChange={(e) => setPercentage(parseInt(e.target.value))}
+                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>
+              </UnorderedList>
+            </VStack>
           </ModalBody>
           <ModalFooter>
             <Button colorScheme="red" onClick={onClose}>