Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-23 22:52:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated Modal to use new NumberInput Component

Browse Source
This commit is contained in:
borisflagell 2022-05-28 03:15:23 +02:00
parent 6be884a9ad
commit 2332138fbd
6 changed files with 28 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/Corporation/ui/modals/BribeFactionModal.tsx
View File

@ -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,16 +39,6 @@ export function BribeFactionModal(props: IProps): React.ReactElement {
corp.funds < money ||
stock > corp.numShares;
function onMoneyChange(event: React.ChangeEvent<HTMLInputElement>): void {
const amt = numeralWrapper.parseMoney(event.target.value);
if (isNaN(amt)) setMoney(null);
else setMoney(amt);
}
function onStockChange(event: React.ChangeEvent<HTMLInputElement>): void {
setStock(parseFloat(event.target.value));
}
function changeFaction(event: SelectChangeEvent<string>): void {
setSelectedFaction(event.target.value);
}
@ -112,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>

15
src/Corporation/ui/modals/BuybackSharesModal.tsx
View File

@ -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<number | null>(null);
function changeShares(event: React.ChangeEvent<HTMLInputElement>): void {
const amt = numeralWrapper.parseMoney(event.target.value);
if (event.target.value === "" || isNaN(amt)) setShares(null);
else setShares(amt);
}
const [shares, setShares] = useState<number>(NaN);
const currentStockPrice = corp.sharePrice;
const buybackPrice = currentStockPrice * 1.1;
@ -88,11 +82,10 @@ export function BuybackSharesModal(props: IProps): React.ReactElement {
</Typography>
<CostIndicator />
<br />
<TextField
<NumberInput
autoFocus={true}
type="string"
placeholder="Shares to buyback"
onChange={changeShares}
onChange={setShares}
onKeyDown={onKeyDown}
/>
<Button disabled={disabled} onClick={buy}>

12
src/Corporation/ui/modals/GoPublicModal.tsx
View File

@ -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,7 +18,7 @@ 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<number>(0);
const [shares, setShares] = useState<number>(NaN);
const initialSharePrice = corp.determineValuation() / corp.totalShares;
function goPublic(): void {
@ -48,12 +48,6 @@ export function GoPublicModal(props: IProps): React.ReactElement {
if (event.key === KEY.ENTER) goPublic();
}
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
const amt = numeralWrapper.parseMoney(event.target.value);
if (event.target.value === "" || isNaN(amt)) setShares(NaN);
else setShares(amt);
}
return (
<Modal open={props.open} onClose={props.onClose}>
<Typography>
@ -65,7 +59,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.
</Typography>
<Box display="flex" alignItems="center">
<TextField onChange={onChange} autoFocus type="string" placeholder="Shares to issue" onKeyDown={onKeyDown} />
<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>

16
src/Corporation/ui/modals/IssueNewSharesModal.tsx
View File

@ -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,12 +97,6 @@ export function IssueNewSharesModal(props: IProps): React.ReactElement {
if (event.key === KEY.ENTER) issueNewShares();
}
function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
const amt = numeralWrapper.parseMoney(event.target.value);
if (event.target.value === "" || isNaN(amt)) setShares(null);
else setShares(amt);
}
return (
<Modal open={props.open} onClose={props.onClose}>
<Typography>
@ -125,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>

29
src/Corporation/ui/modals/MakeProductModal.tsx
View File

@ -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<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 = <></>;
@ -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<HTMLInputElement>): void {
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 {
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 {
if (event.key === KEY.ENTER) makeProduct();
}
@ -184,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="string" placeholder={"Design investment"} />
<TextField
onChange={onMarketingChange}
onKeyDown={onKeyDown}
type="string"
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>
);

17
src/Corporation/ui/modals/SellSharesModal.tsx
View File

@ -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<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 {
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)}
</Typography>
<br />
<TextField
<NumberInput
variant="standard"
autoFocus
type="string"
placeholder="Shares to sell"
onChange={changeShares}
onChange={setShares}
onKeyDown={onKeyDown}
/>
<Button disabled={disabled} onClick={sell} sx={{ mx: 1 }}>