Corporation: Add big number format support in some modal corp

Add big number format support. to the following Corporation's modal :
-BuybackShare
-BribeFaction
-GoPublicModal
-IssueNewShare
-MakeProduct
-SellSahares

src/Corporation/ui/modals/BribeFactionModal.tsx

@@ -42,7 +42,9 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
     stock > corp.numShares;
 
   function onMoneyChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    setMoney(parseFloat(event.target.value));
+    const amt = numeralWrapper.parseMoney(event.target.value);
+    if (isNaN(amt)) setMoney(null);
+    else setMoney(amt);
   }
 
   function onStockChange(event: React.ChangeEvent<HTMLInputElement>): void {

src/Corporation/ui/modals/BuybackSharesModal.tsx

@@ -24,8 +24,9 @@ export function BuybackSharesModal(props: IProps): React.ReactElement {
   const [shares, setShares] = useState<number | null>(null);
 
   function changeShares(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.value === "") setShares(null);
-    else setShares(Math.round(parseFloat(event.target.value)));
+    const amt = numeralWrapper.parseMoney(event.target.value);
+    if (event.target.value === "" || isNaN(amt)) setShares(null);
+    else setShares(amt);
   }
 
   const currentStockPrice = corp.sharePrice;
@@ -89,7 +90,7 @@ export function BuybackSharesModal(props: IProps): React.ReactElement {
       <br />
       <TextField
         autoFocus={true}
-        type="number"
+        type="string"
         placeholder="Shares to buyback"
         onChange={changeShares}
         onKeyDown={onKeyDown}

src/Corporation/ui/modals/GoPublicModal.tsx

@@ -18,29 +18,28 @@ interface IProps {
 // Create a popup that lets the player manage exports
 export function GoPublicModal(props: IProps): React.ReactElement {
   const corp = useCorporation();
-  const [shares, setShares] = useState("");
+  const [shares, setShares] = useState<number>(0);
   const initialSharePrice = corp.determineValuation() / corp.totalShares;
 
   function goPublic(): void {
-    const numShares = parseFloat(shares);
     const initialSharePrice = corp.determineValuation() / corp.totalShares;
-    if (isNaN(numShares)) {
+    if (isNaN(shares)) {
       dialogBoxCreate("Invalid value for number of issued shares");
       return;
     }
-    if (numShares > corp.numShares) {
+    if (shares > corp.numShares) {
       dialogBoxCreate("Error: You don't have that many shares to issue!");
       return;
     }
     corp.public = true;
     corp.sharePrice = initialSharePrice;
-    corp.issuedShares = numShares;
-    corp.numShares -= numShares;
-    corp.addFunds(numShares * initialSharePrice);
+    corp.issuedShares = shares;
+    corp.numShares -= shares;
+    corp.addFunds(shares * initialSharePrice);
     props.rerender();
     dialogBoxCreate(
       `You took your ${corp.name} public and earned ` +
-        `${numeralWrapper.formatMoney(numShares * initialSharePrice)} in your IPO`,
+        `${numeralWrapper.formatMoney(shares * initialSharePrice)} in your IPO`,
     );
     props.onClose();
   }
@@ -50,7 +49,9 @@ export function GoPublicModal(props: IProps): React.ReactElement {
   }
 
   function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    setShares(event.target.value);
+    const amt = numeralWrapper.parseMoney(event.target.value);
+    if (event.target.value === "" || isNaN(amt)) setShares(NaN);
+    else setShares(amt);
   }
 
   return (
@@ -65,18 +66,13 @@ export function GoPublicModal(props: IProps): React.ReactElement {
       </Typography>
       <Box display="flex" alignItems="center">
         <TextField
-          value={shares}
           onChange={onChange}
           autoFocus
-          type="number"
+          type="string"
           placeholder="Shares to issue"
           onKeyDown={onKeyDown}
         />
-        <Button
-          disabled={parseFloat(shares) < 0 || parseFloat(shares) > corp.numShares}
-          sx={{ mx: 1 }}
-          onClick={goPublic}
-        >
+        <Button disabled={shares < 0 || shares > corp.numShares} sx={{ mx: 1 }} onClick={goPublic}>
           Go Public
         </Button>
       </Box>

src/Corporation/ui/modals/IssueNewSharesModal.tsx

@@ -98,8 +98,9 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement {
   }
 
   function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.value === "") setShares(null);
-    else setShares(parseFloat(event.target.value));
+    const amt = numeralWrapper.parseMoney(event.target.value);
+    if (event.target.value === "" || isNaN(amt)) setShares(null);
+    else setShares(amt);
   }
 
   return (

src/Corporation/ui/modals/MakeProductModal.tsx

@@ -10,6 +10,7 @@ import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import { KEY } from "../../../utils/helpers/keyCodes";
+import { numeralWrapper } from "../../../ui/numeralFormat";
 
 interface IProps {
   open: boolean;
@@ -156,13 +157,15 @@ export function MakeProductModal(props: IProps): React.ReactElement {
   }
 
   function onDesignChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.value === "") setDesign(null);
-    else setDesign(parseFloat(event.target.value));
+    const amt = numeralWrapper.parseMoney(event.target.value);
+    if (event.target.value === "" || isNaN(amt)) setDesign(null);
+    else setDesign(amt);
   }
 
   function onMarketingChange(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.value === "") setMarketing(null);
-    else setMarketing(parseFloat(event.target.value));
+    const amt = numeralWrapper.parseMoney(event.target.value);
+    if (event.target.value === "" || isNaN(amt)) setMarketing(null);
+    else setMarketing(amt);
   }
 
   function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
@@ -181,11 +184,11 @@ export function MakeProductModal(props: IProps): React.ReactElement {
       </Select>
       <TextField onChange={onProductNameChange} placeholder={productPlaceholder(division.type)} />
       <br />
-      <TextField onChange={onDesignChange} autoFocus={true} type="number" placeholder={"Design investment"} />
+      <TextField onChange={onDesignChange} autoFocus={true} type="string" placeholder={"Design investment"} />
       <TextField
         onChange={onMarketingChange}
         onKeyDown={onKeyDown}
-        type="number"
+        type="string"
         placeholder={"Marketing investment"}
       />
       <Button onClick={makeProduct}>Develop Product</Button>

src/Corporation/ui/modals/SellSharesModal.tsx

@@ -27,8 +27,9 @@ export function SellSharesModal(props: IProps): React.ReactElement {
   const disabled = shares === null || isNaN(shares) || shares <= 0 || shares > corp.numShares;
 
   function changeShares(event: React.ChangeEvent<HTMLInputElement>): void {
-    if (event.target.value === "") setShares(null);
-    else setShares(Math.round(parseFloat(event.target.value)));
+    const amt = numeralWrapper.parseMoney(event.target.value);
+    if (event.target.value === "" || isNaN(amt)) setShares(null);
+    else setShares(amt);
   }
 
   function ProfitIndicator(props: { shares: number | null; corp: ICorporation }): React.ReactElement {
@@ -91,7 +92,7 @@ export function SellSharesModal(props: IProps): React.ReactElement {
       <TextField
         variant="standard"
         autoFocus
-        type="number"
+        type="string"
         placeholder="Shares to sell"
         onChange={changeShares}
         onKeyDown={onKeyDown}