Merge pull request #3779 from borisflagell/CorpoNumeral

CORPORATION: Add big number format support in some Corporation's modal
This commit is contained in:
hydroflame 2022-07-21 01:42:35 -04:00 committed by GitHub
commit 2772511525
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 35 additions and 92 deletions

@ -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<number | null>(0);
const [stock, setStock] = useState<number | null>(0);
const [money, setMoney] = useState<number>(NaN);
const [stock, setStock] = useState<number>(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,14 +39,6 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
corp.funds < money ||
stock > corp.numShares;
function onMoneyChange(event: React.ChangeEvent<HTMLInputElement>): void {
setMoney(parseFloat(event.target.value));
}
function onStockChange(event: React.ChangeEvent<HTMLInputElement>): void {
setStock(parseFloat(event.target.value));
}
function changeFaction(event: SelectChangeEvent<string>): void {
setSelectedFaction(event.target.value);
}
@ -110,8 +100,8 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
</Select>
</Box>
<Typography>{getRepText(money ? money : 0, stock ? stock : 0)}</Typography>
<TextField onChange={onMoneyChange} placeholder="Corporation funds" />
<TextField sx={{ mx: 1 }} onChange={onStockChange} placeholder="Stock Shares" />
<NumberInput onChange={setMoney} placeholder="Corporation funds" />
<NumberInput sx={{ mx: 1 }} onChange={setStock} placeholder="Stock Shares" />
<Button disabled={disabled} sx={{ mx: 1 }} onClick={() => bribe(money ? money : 0, stock ? stock : 0)}>
Bribe
</Button>

@ -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,12 +21,7 @@ interface IProps {
export function BuybackSharesModal(props: IProps): React.ReactElement {
const player = use.Player();
const corp = useCorporation();
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 [shares, setShares] = useState<number>(NaN);
const currentStockPrice = corp.sharePrice;
const buybackPrice = currentStockPrice * 1.1;
@ -87,11 +82,10 @@ export function BuybackSharesModal(props: IProps): React.ReactElement {
</Typography>
<CostIndicator />
<br />
<TextField
<NumberInput
autoFocus={true}
type="number"
placeholder="Shares to buyback"
onChange={changeShares}
onChange={setShares}
onKeyDown={onKeyDown}
/>
<Button disabled={disabled} onClick={buy}>

@ -5,7 +5,7 @@ import { numeralWrapper } from "../../../ui/numeralFormat";
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 Box from "@mui/material/Box";
import { KEY } from "../../../utils/helpers/keyCodes";
@ -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>(NaN);
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();
}
@ -49,10 +48,6 @@ export function GoPublicModal(props: IProps): React.ReactElement {
if (event.key === KEY.ENTER) goPublic();
}
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
setShares(event.target.value);
}
return (
<Modal open={props.open} onClose={props.onClose}>
<Typography>
@ -64,19 +59,8 @@ export function GoPublicModal(props: IProps): React.ReactElement {
You have a total of {numeralWrapper.format(corp.numShares, "0.000a")} of shares that you can issue.
</Typography>
<Box display="flex" alignItems="center">
<TextField
value={shares}
onChange={onChange}
autoFocus
type="number"
placeholder="Shares to issue"
onKeyDown={onKeyDown}
/>
<Button
disabled={parseFloat(shares) < 0 || parseFloat(shares) > corp.numShares}
sx={{ mx: 1 }}
onClick={goPublic}
>
<NumberInput onChange={setShares} autoFocus placeholder="Shares to issue" onKeyDown={onKeyDown} />
<Button disabled={shares < 0 || shares > corp.numShares} sx={{ mx: 1 }} onClick={goPublic}>
Go Public
</Button>
</Box>

@ -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<number | null>(null);
const [shares, setShares] = useState<number>(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,11 +97,6 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement {
if (event.key === KEY.ENTER) issueNewShares();
}
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
if (event.target.value === "") setShares(null);
else setShares(parseFloat(event.target.value));
}
return (
<Modal open={props.open} onClose={props.onClose}>
<Typography>
@ -124,7 +119,7 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement {
you cannot buy them back.
</Typography>
<EffectText shares={shares} />
<TextField autoFocus placeholder="# New Shares" onChange={onChange} onKeyDown={onKeyDown} />
<NumberInput autoFocus placeholder="# New Shares" onChange={setShares} onKeyDown={onKeyDown} />
<Button disabled={disabled} onClick={issueNewShares} sx={{ mx: 1 }}>
Issue New Shares
</Button>

@ -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 { NumberInput } from "../../../ui/React/NumberInput";
interface IProps {
open: boolean;
@ -34,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<number | null>(null);
const [marketing, setMarketing] = useState<number | null>(null);
const [design, setDesign] = useState<number>(NaN);
const [marketing, setMarketing] = useState<number>(NaN);
if (division.hasMaximumNumberProducts()) return <></>;
let createProductPopupText = <></>;
@ -138,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) {
@ -155,16 +156,6 @@ export function MakeProductModal(props: IProps): React.ReactElement {
setName(event.target.value);
}
function onDesignChange(event: React.ChangeEvent<HTMLInputElement>): void {
if (event.target.value === "") setDesign(null);
else setDesign(parseFloat(event.target.value));
}
function onMarketingChange(event: React.ChangeEvent<HTMLInputElement>): void {
if (event.target.value === "") setMarketing(null);
else setMarketing(parseFloat(event.target.value));
}
function onKeyDown(event: React.KeyboardEvent<HTMLInputElement>): void {
if (event.key === KEY.ENTER) makeProduct();
}
@ -181,13 +172,8 @@ 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={onMarketingChange}
onKeyDown={onKeyDown}
type="number"
placeholder={"Marketing investment"}
/>
<NumberInput onChange={setDesign} autoFocus={true} placeholder={"Design investment"} />
<NumberInput onChange={setMarketing} onKeyDown={onKeyDown} placeholder={"Marketing investment"} />
<Button onClick={makeProduct}>Develop Product</Button>
</Modal>
);

@ -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,14 +22,9 @@ interface IProps {
export function SellSharesModal(props: IProps): React.ReactElement {
const player = use.Player();
const corp = useCorporation();
const [shares, setShares] = useState<number | null>(null);
const [shares, setShares] = useState<number>(NaN);
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 disabled = isNaN(shares) || shares <= 0 || shares > corp.numShares;
function ProfitIndicator(props: { shares: number | null; corp: ICorporation }): React.ReactElement {
if (props.shares === null) return <></>;
@ -88,12 +83,11 @@ export function SellSharesModal(props: IProps): React.ReactElement {
The current price of your company's stock is {numeralWrapper.formatMoney(corp.sharePrice)}
</Typography>
<br />
<TextField
<NumberInput
variant="standard"
autoFocus
type="number"
placeholder="Shares to sell"
onChange={changeShares}
onChange={setShares}
onKeyDown={onKeyDown}
/>
<Button disabled={disabled} onClick={sell} sx={{ mx: 1 }}>