From c6b6ad1ab99111d6aea322e11bd993123d11510e Mon Sep 17 00:00:00 2001 From: borisflagell Date: Sat, 28 May 2022 00:51:54 +0200 Subject: [PATCH 1/3] 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 --- .../ui/modals/BribeFactionModal.tsx | 4 ++- .../ui/modals/BuybackSharesModal.tsx | 7 +++-- src/Corporation/ui/modals/GoPublicModal.tsx | 28 ++++++++----------- .../ui/modals/IssueNewSharesModal.tsx | 5 ++-- .../ui/modals/MakeProductModal.tsx | 15 ++++++---- src/Corporation/ui/modals/SellSharesModal.tsx | 7 +++-- 6 files changed, 35 insertions(+), 31 deletions(-) diff --git a/src/Corporation/ui/modals/BribeFactionModal.tsx b/src/Corporation/ui/modals/BribeFactionModal.tsx index a690d74bc..106350cda 100644 --- a/src/Corporation/ui/modals/BribeFactionModal.tsx +++ b/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): 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): void { diff --git a/src/Corporation/ui/modals/BuybackSharesModal.tsx b/src/Corporation/ui/modals/BuybackSharesModal.tsx index ae67656c4..83e4c6d95 100644 --- a/src/Corporation/ui/modals/BuybackSharesModal.tsx +++ b/src/Corporation/ui/modals/BuybackSharesModal.tsx @@ -24,8 +24,9 @@ export function BuybackSharesModal(props: IProps): React.ReactElement { const [shares, setShares] = useState(null); function changeShares(event: React.ChangeEvent): 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 {
(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): 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 { - diff --git a/src/Corporation/ui/modals/IssueNewSharesModal.tsx b/src/Corporation/ui/modals/IssueNewSharesModal.tsx index 570bf86e5..dab41e4d3 100644 --- a/src/Corporation/ui/modals/IssueNewSharesModal.tsx +++ b/src/Corporation/ui/modals/IssueNewSharesModal.tsx @@ -98,8 +98,9 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement { } function onChange(event: React.ChangeEvent): 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 ( diff --git a/src/Corporation/ui/modals/MakeProductModal.tsx b/src/Corporation/ui/modals/MakeProductModal.tsx index 11e36375b..8c43f03d5 100644 --- a/src/Corporation/ui/modals/MakeProductModal.tsx +++ b/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): 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): 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): void { @@ -181,11 +184,11 @@ export function MakeProductModal(props: IProps): React.ReactElement {
- + diff --git a/src/Corporation/ui/modals/SellSharesModal.tsx b/src/Corporation/ui/modals/SellSharesModal.tsx index 688fb119b..f5eba53aa 100644 --- a/src/Corporation/ui/modals/SellSharesModal.tsx +++ b/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): 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 { Date: Sat, 28 May 2022 01:15:05 +0200 Subject: [PATCH 2/3] prettier --- src/Corporation/ui/modals/GoPublicModal.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/Corporation/ui/modals/GoPublicModal.tsx b/src/Corporation/ui/modals/GoPublicModal.tsx index 7d8b503bb..d15531f37 100644 --- a/src/Corporation/ui/modals/GoPublicModal.tsx +++ b/src/Corporation/ui/modals/GoPublicModal.tsx @@ -65,13 +65,7 @@ export function GoPublicModal(props: IProps): React.ReactElement { You have a total of {numeralWrapper.format(corp.numShares, "0.000a")} of shares that you can issue. - + From 2332138fbd51361db78a6411808e0084c7560bb1 Mon Sep 17 00:00:00 2001 From: borisflagell Date: Sat, 28 May 2022 03:15:23 +0200 Subject: [PATCH 3/3] Updated Modal to use new NumberInput Component --- .../ui/modals/BribeFactionModal.tsx | 22 ++++---------- .../ui/modals/BuybackSharesModal.tsx | 15 +++------- src/Corporation/ui/modals/GoPublicModal.tsx | 12 ++------ .../ui/modals/IssueNewSharesModal.tsx | 16 ++++------ .../ui/modals/MakeProductModal.tsx | 29 ++++--------------- src/Corporation/ui/modals/SellSharesModal.tsx | 17 ++++------- 6 files changed, 28 insertions(+), 83 deletions(-) diff --git a/src/Corporation/ui/modals/BribeFactionModal.tsx b/src/Corporation/ui/modals/BribeFactionModal.tsx index 106350cda..92a0fb6ef 100644 --- a/src/Corporation/ui/modals/BribeFactionModal.tsx +++ b/src/Corporation/ui/modals/BribeFactionModal.tsx @@ -9,7 +9,7 @@ import { useCorporation } from "../Context"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import MenuItem from "@mui/material/MenuItem"; -import TextField from "@mui/material/TextField"; +import { NumberInput } from "../../../ui/React/NumberInput"; import Box from "@mui/material/Box"; import Select, { SelectChangeEvent } from "@mui/material/Select"; @@ -27,12 +27,10 @@ export function BribeFactionModal(props: IProps): React.ReactElement { return true; }); const corp = useCorporation(); - const [money, setMoney] = useState(0); - const [stock, setStock] = useState(0); + const [money, setMoney] = useState(NaN); + const [stock, setStock] = useState(NaN); const [selectedFaction, setSelectedFaction] = useState(factions.length > 0 ? factions[0] : ""); const disabled = - money === null || - stock === null || (money === 0 && stock === 0) || isNaN(money) || isNaN(stock) || @@ -41,16 +39,6 @@ export function BribeFactionModal(props: IProps): React.ReactElement { corp.funds < money || stock > corp.numShares; - function onMoneyChange(event: React.ChangeEvent): void { - const amt = numeralWrapper.parseMoney(event.target.value); - if (isNaN(amt)) setMoney(null); - else setMoney(amt); - } - - function onStockChange(event: React.ChangeEvent): void { - setStock(parseFloat(event.target.value)); - } - function changeFaction(event: SelectChangeEvent): void { setSelectedFaction(event.target.value); } @@ -112,8 +100,8 @@ export function BribeFactionModal(props: IProps): React.ReactElement { {getRepText(money ? money : 0, stock ? stock : 0)} - - + + diff --git a/src/Corporation/ui/modals/BuybackSharesModal.tsx b/src/Corporation/ui/modals/BuybackSharesModal.tsx index 83e4c6d95..def744d65 100644 --- a/src/Corporation/ui/modals/BuybackSharesModal.tsx +++ b/src/Corporation/ui/modals/BuybackSharesModal.tsx @@ -5,7 +5,7 @@ import { use } from "../../../ui/Context"; import { useCorporation } from "../Context"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; -import TextField from "@mui/material/TextField"; +import { NumberInput } from "../../../ui/React/NumberInput"; import { BuyBackShares } from "../../Actions"; import { dialogBoxCreate } from "../../../ui/React/DialogBox"; import { KEY } from "../../../utils/helpers/keyCodes"; @@ -21,13 +21,7 @@ interface IProps { export function BuybackSharesModal(props: IProps): React.ReactElement { const player = use.Player(); const corp = useCorporation(); - const [shares, setShares] = useState(null); - - function changeShares(event: React.ChangeEvent): void { - const amt = numeralWrapper.parseMoney(event.target.value); - if (event.target.value === "" || isNaN(amt)) setShares(null); - else setShares(amt); - } + const [shares, setShares] = useState(NaN); const currentStockPrice = corp.sharePrice; const buybackPrice = currentStockPrice * 1.1; @@ -88,11 +82,10 @@ export function BuybackSharesModal(props: IProps): React.ReactElement {
- diff --git a/src/Corporation/ui/modals/IssueNewSharesModal.tsx b/src/Corporation/ui/modals/IssueNewSharesModal.tsx index dab41e4d3..d4a3c50c2 100644 --- a/src/Corporation/ui/modals/IssueNewSharesModal.tsx +++ b/src/Corporation/ui/modals/IssueNewSharesModal.tsx @@ -6,7 +6,7 @@ import { getRandomInt } from "../../../utils/helpers/getRandomInt"; import { CorporationConstants } from "../../data/Constants"; import { useCorporation } from "../Context"; import Typography from "@mui/material/Typography"; -import TextField from "@mui/material/TextField"; +import { NumberInput } from "../../../ui/React/NumberInput"; import Button from "@mui/material/Button"; import { KEY } from "../../../utils/helpers/keyCodes"; @@ -54,15 +54,15 @@ interface IProps { // This is created when the player clicks the "Issue New Shares" buttons in the overview panel export function IssueNewSharesModal(props: IProps): React.ReactElement { const corp = useCorporation(); - const [shares, setShares] = useState(null); + const [shares, setShares] = useState(NaN); const maxNewSharesUnrounded = Math.round(corp.totalShares * 0.2); const maxNewShares = maxNewSharesUnrounded - (maxNewSharesUnrounded % 1e6); const newShares = Math.round((shares || 0) / 10e6) * 10e6; - const disabled = shares === null || isNaN(newShares) || newShares < 10e6 || newShares > maxNewShares; + const disabled = isNaN(shares) || isNaN(newShares) || newShares < 10e6 || newShares > maxNewShares; function issueNewShares(): void { - if (shares === null) return; + if (isNaN(shares)) return; if (disabled) return; const newSharePrice = Math.round(corp.sharePrice * 0.9); @@ -97,12 +97,6 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement { if (event.key === KEY.ENTER) issueNewShares(); } - function onChange(event: React.ChangeEvent): void { - const amt = numeralWrapper.parseMoney(event.target.value); - if (event.target.value === "" || isNaN(amt)) setShares(null); - else setShares(amt); - } - return ( @@ -125,7 +119,7 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement { you cannot buy them back. - + diff --git a/src/Corporation/ui/modals/MakeProductModal.tsx b/src/Corporation/ui/modals/MakeProductModal.tsx index 8c43f03d5..13e8b0da3 100644 --- a/src/Corporation/ui/modals/MakeProductModal.tsx +++ b/src/Corporation/ui/modals/MakeProductModal.tsx @@ -10,7 +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"; +import { NumberInput } from "../../../ui/React/NumberInput"; interface IProps { open: boolean; @@ -35,8 +35,8 @@ export function MakeProductModal(props: IProps): React.ReactElement { const allCities = Object.keys(division.offices).filter((cityName: string) => division.offices[cityName] !== 0); const [city, setCity] = useState(allCities.length > 0 ? allCities[0] : ""); const [name, setName] = useState(""); - const [design, setDesign] = useState(null); - const [marketing, setMarketing] = useState(null); + const [design, setDesign] = useState(NaN); + const [marketing, setMarketing] = useState(NaN); if (division.hasMaximumNumberProducts()) return <>; let createProductPopupText = <>; @@ -139,7 +139,7 @@ export function MakeProductModal(props: IProps): React.ReactElement { ); function makeProduct(): void { - if (design === null || marketing === null) return; + if (isNaN(design) || isNaN(marketing)) return; try { MakeProduct(corp, division, city, name, design, marketing); } catch (err) { @@ -156,18 +156,6 @@ export function MakeProductModal(props: IProps): React.ReactElement { setName(event.target.value); } - function onDesignChange(event: React.ChangeEvent): void { - const amt = numeralWrapper.parseMoney(event.target.value); - if (event.target.value === "" || isNaN(amt)) setDesign(null); - else setDesign(amt); - } - - function onMarketingChange(event: React.ChangeEvent): void { - const amt = numeralWrapper.parseMoney(event.target.value); - if (event.target.value === "" || isNaN(amt)) setMarketing(null); - else setMarketing(amt); - } - function onKeyDown(event: React.KeyboardEvent): void { if (event.key === KEY.ENTER) makeProduct(); } @@ -184,13 +172,8 @@ export function MakeProductModal(props: IProps): React.ReactElement {
- - + + ); diff --git a/src/Corporation/ui/modals/SellSharesModal.tsx b/src/Corporation/ui/modals/SellSharesModal.tsx index f5eba53aa..5a414d0d7 100644 --- a/src/Corporation/ui/modals/SellSharesModal.tsx +++ b/src/Corporation/ui/modals/SellSharesModal.tsx @@ -6,11 +6,11 @@ import { use } from "../../../ui/Context"; import { useCorporation } from "../Context"; import { ICorporation } from "../../ICorporation"; import Typography from "@mui/material/Typography"; -import TextField from "@mui/material/TextField"; import Button from "@mui/material/Button"; import { Money } from "../../../ui/React/Money"; import { SellShares } from "../../Actions"; import { KEY } from "../../../utils/helpers/keyCodes"; +import { NumberInput } from "../../../ui/React/NumberInput"; interface IProps { open: boolean; onClose: () => void; @@ -22,15 +22,9 @@ interface IProps { export function SellSharesModal(props: IProps): React.ReactElement { const player = use.Player(); const corp = useCorporation(); - const [shares, setShares] = useState(null); + const [shares, setShares] = useState(NaN); - const disabled = shares === null || isNaN(shares) || shares <= 0 || shares > corp.numShares; - - function changeShares(event: React.ChangeEvent): void { - const amt = numeralWrapper.parseMoney(event.target.value); - if (event.target.value === "" || isNaN(amt)) setShares(null); - else setShares(amt); - } + const disabled = isNaN(shares) || shares <= 0 || shares > corp.numShares; function ProfitIndicator(props: { shares: number | null; corp: ICorporation }): React.ReactElement { if (props.shares === null) return <>; @@ -89,12 +83,11 @@ export function SellSharesModal(props: IProps): React.ReactElement { The current price of your company's stock is {numeralWrapper.formatMoney(corp.sharePrice)}
-