Merge pull request #2751 from nickofolas/improvement/ui-pass

UI Improvements Pass
This commit is contained in:
hydroflame 2022-01-26 00:44:20 -05:00 committed by GitHub
commit 85a8036ecf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 581 additions and 445 deletions

@ -26,6 +26,7 @@ import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody"; import TableBody from "@mui/material/TableBody";
import TableRow from "@mui/material/TableRow"; import TableRow from "@mui/material/TableRow";
import { TableCell } from "../../ui/React/Table"; import { TableCell } from "../../ui/React/Table";
import { Box } from "@mui/material";
interface IProps { interface IProps {
office: OfficeSpace; office: OfficeSpace;
@ -430,51 +431,46 @@ export function IndustryOffice(props: IProps): React.ReactElement {
<Typography> <Typography>
Size: {props.office.employees.length} / {props.office.size} employees Size: {props.office.employees.length} / {props.office.size} employees
</Typography> </Typography>
<Tooltip title={<Typography>Automatically hires an employee and gives him/her a random name</Typography>}> <Box sx={{ display: 'grid', gridTemplateColumns: '1fr', width: 'fit-content' }}>
<span> <Box sx={{ gridTemplateColumns: 'repeat(3, 1fr)' }}>
<Button disabled={props.office.atCapacity()} onClick={autohireEmployeeButtonOnClick}> <Tooltip title={<Typography>Automatically hires an employee and gives him/her a random name</Typography>}>
Hire Employee <Button disabled={props.office.atCapacity()} onClick={autohireEmployeeButtonOnClick}>
</Button> Hire Employee
</span> </Button>
</Tooltip>
<br />
<Tooltip title={<Typography>Upgrade the office's size so that it can hold more employees!</Typography>}>
<span>
<Button disabled={corp.funds < 0} onClick={() => setUpgradeOfficeSizeOpen(true)}>
Upgrade size
</Button>
</span>
</Tooltip>
<UpgradeOfficeSizeModal
rerender={props.rerender}
office={props.office}
open={upgradeOfficeSizeOpen}
onClose={() => setUpgradeOfficeSizeOpen(false)}
/>
{!division.hasResearch("AutoPartyManager") && (
<>
<Tooltip
title={<Typography>Throw an office party to increase your employee's morale and happiness</Typography>}
>
<span>
<Button disabled={corp.funds < 0} onClick={() => setThrowPartyOpen(true)}>
Throw Party
</Button>
</span>
</Tooltip> </Tooltip>
<ThrowPartyModal <Tooltip title={<Typography>Upgrade the office's size so that it can hold more employees!</Typography>}>
<Button disabled={corp.funds < 0} onClick={() => setUpgradeOfficeSizeOpen(true)}>
Upgrade size
</Button>
</Tooltip>
<UpgradeOfficeSizeModal
rerender={props.rerender} rerender={props.rerender}
office={props.office} office={props.office}
open={throwPartyOpen} open={upgradeOfficeSizeOpen}
onClose={() => setThrowPartyOpen(false)} onClose={() => setUpgradeOfficeSizeOpen(false)}
/> />
</>
)}
<br /> {!division.hasResearch("AutoPartyManager") && (
<>
<Tooltip
title={<Typography>Throw an office party to increase your employee's morale and happiness</Typography>}
>
<Button disabled={corp.funds < 0} onClick={() => setThrowPartyOpen(true)}>
Throw Party
</Button>
</Tooltip>
<ThrowPartyModal
rerender={props.rerender}
office={props.office}
open={throwPartyOpen}
onClose={() => setThrowPartyOpen(false)}
/>
</>
)}
<SwitchButton manualMode={employeeManualAssignMode} switchMode={setEmployeeManualAssignMode} /> </Box>
<SwitchButton manualMode={employeeManualAssignMode} switchMode={setEmployeeManualAssignMode} />
</Box>
{employeeManualAssignMode ? ( {employeeManualAssignMode ? (
<ManualManagement rerender={props.rerender} office={props.office} /> <ManualManagement rerender={props.rerender} office={props.office} />
) : ( ) : (

@ -139,13 +139,13 @@ function WarehouseRoot(props: IProps): React.ReactElement {
{numeralWrapper.formatBigNumber(props.warehouse.size)} {numeralWrapper.formatBigNumber(props.warehouse.size)}
</Typography> </Typography>
</Tooltip> </Tooltip>
<Button disabled={!canAffordUpgrade} onClick={upgradeWarehouseOnClick}>
Upgrade Warehouse Size -&nbsp;
<MoneyCost money={sizeUpgradeCost} corp={corp} />
</Button>
</Box> </Box>
<Button disabled={!canAffordUpgrade} onClick={upgradeWarehouseOnClick}>
Upgrade Warehouse Size -&nbsp;
<MoneyCost money={sizeUpgradeCost} corp={corp} />
</Button>
<Typography>This industry uses the following equation for its production: </Typography> <Typography>This industry uses the following equation for its production: </Typography>
<br /> <br />
<Typography> <Typography>

@ -112,7 +112,7 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
return ( return (
<Paper> <Paper>
<Box display="flex"> <Box sx={{ display: 'grid', gridTemplateColumns: '2fr 1fr', m: '5px' }}>
<Box> <Box>
<Tooltip <Tooltip
title={ title={
@ -149,11 +149,10 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
</Tooltip> </Tooltip>
</Box> </Box>
<Box> <Box sx={{ "& button": { width: '100%' } }}>
<Tooltip <Tooltip
title={tutorial ? <Typography>Purchase your required materials to get production started!</Typography> : ""} title={tutorial ? <Typography>Purchase your required materials to get production started!</Typography> : ""}
> >
<span>
<Button <Button
color={tutorial ? "error" : "primary"} color={tutorial ? "error" : "primary"}
onClick={() => setPurchaseMaterialOpen(true)} onClick={() => setPurchaseMaterialOpen(true)}
@ -161,7 +160,6 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
> >
{purchaseButtonText} {purchaseButtonText}
</Button> </Button>
</span>
</Tooltip> </Tooltip>
<PurchaseMaterialModal <PurchaseMaterialModal
mat={mat} mat={mat}
@ -177,7 +175,6 @@ export function MaterialElem(props: IMaterialProps): React.ReactElement {
<ExportModal mat={mat} open={exportOpen} onClose={() => setExportOpen(false)} /> <ExportModal mat={mat} open={exportOpen} onClose={() => setExportOpen(false)} />
</> </>
)} )}
<br />
<Button <Button
color={division.prodMats.includes(props.mat.name) && !mat.sllman[0] ? "error" : "primary"} color={division.prodMats.includes(props.mat.name) && !mat.sllman[0] ? "error" : "primary"}

@ -89,19 +89,21 @@ export function Overview({ rerender }: IProps): React.ReactElement {
<StatsTable rows={multRows} /> <StatsTable rows={multRows} />
<br /> <br />
<BonusTime /> <BonusTime />
<Tooltip <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', width: 'fit-content' }}>
title={ <Tooltip
<Typography> title={
Get a copy of and read 'The Complete Handbook for Creating a Successful Corporation.' This is a .lit file <Typography>
that guides you through the beginning of setting up a Corporation and provides some tips/pointers for Get a copy of and read 'The Complete Handbook for Creating a Successful Corporation.' This is a .lit file
helping you get started with managing it. that guides you through the beginning of setting up a Corporation and provides some tips/pointers for
</Typography> helping you get started with managing it.
} </Typography>
> }
<Button onClick={() => corp.getStarterGuide(player)}>Getting Started Guide</Button> >
</Tooltip> <Button onClick={() => corp.getStarterGuide(player)}>Getting Started Guide</Button>
{corp.public ? <PublicButtons rerender={rerender} /> : <PrivateButtons rerender={rerender} />} </Tooltip>
<BribeButton /> {corp.public ? <PublicButtons rerender={rerender} /> : <PrivateButtons rerender={rerender} />}
<BribeButton />
</Box>
<br /> <br />
<Upgrades rerender={rerender} /> <Upgrades rerender={rerender} />
</> </>
@ -125,11 +127,9 @@ function PrivateButtons({ rerender }: IPrivateButtonsProps): React.ReactElement
return ( return (
<> <>
<Tooltip title={<Typography>{findInvestorsTooltip}</Typography>}> <Tooltip title={<Typography>{findInvestorsTooltip}</Typography>}>
<span> <Button disabled={!fundingAvailable} onClick={() => setFindInvestorsopen(true)}>
<Button disabled={!fundingAvailable} onClick={() => setFindInvestorsopen(true)}> Find Investors
Find Investors </Button>
</Button>
</span>
</Tooltip> </Tooltip>
<Tooltip <Tooltip
title={ title={
@ -143,7 +143,6 @@ function PrivateButtons({ rerender }: IPrivateButtonsProps): React.ReactElement
</Tooltip> </Tooltip>
<FindInvestorsModal open={findInvestorsopen} onClose={() => setFindInvestorsopen(false)} rerender={rerender} /> <FindInvestorsModal open={findInvestorsopen} onClose={() => setFindInvestorsopen(false)} rerender={rerender} />
<GoPublicModal open={goPublicopen} onClose={() => setGoPublicopen(false)} rerender={rerender} /> <GoPublicModal open={goPublicopen} onClose={() => setGoPublicopen(false)} rerender={rerender} />
<br />
</> </>
); );
} }
@ -201,8 +200,8 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement {
const sellSharesTooltip = sellSharesOnCd const sellSharesTooltip = sellSharesOnCd
? "Cannot sell shares for " + corp.convertCooldownToString(corp.shareSaleCooldown) ? "Cannot sell shares for " + corp.convertCooldownToString(corp.shareSaleCooldown)
: "Sell your shares in the company. The money earned from selling your " + : "Sell your shares in the company. The money earned from selling your " +
"shares goes into your personal account, not the Corporation's. " + "shares goes into your personal account, not the Corporation's. " +
"This is one of the only ways to profit from your business venture."; "This is one of the only ways to profit from your business venture.";
const issueNewSharesOnCd = corp.issueNewSharesCooldown > 0; const issueNewSharesOnCd = corp.issueNewSharesCooldown > 0;
const issueNewSharesTooltip = issueNewSharesOnCd const issueNewSharesTooltip = issueNewSharesOnCd
@ -212,28 +211,21 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement {
return ( return (
<> <>
<Tooltip title={<Typography>{sellSharesTooltip}</Typography>}> <Tooltip title={<Typography>{sellSharesTooltip}</Typography>}>
<span> <Button disabled={sellSharesOnCd} onClick={() => setSellSharesOpen(true)}>
<Button disabled={sellSharesOnCd} onClick={() => setSellSharesOpen(true)}> Sell Shares
Sell Shares </Button>
</Button>
</span>
</Tooltip> </Tooltip>
<SellSharesModal open={sellSharesOpen} onClose={() => setSellSharesOpen(false)} rerender={rerender} /> <SellSharesModal open={sellSharesOpen} onClose={() => setSellSharesOpen(false)} rerender={rerender} />
<Tooltip title={<Typography>Buy back shares you that previously issued or sold at market price.</Typography>}> <Tooltip title={<Typography>Buy back shares you that previously issued or sold at market price.</Typography>}>
<span> <Button disabled={corp.issuedShares < 1} onClick={() => setBuybackSharesOpen(true)}>
<Button disabled={corp.issuedShares < 1} onClick={() => setBuybackSharesOpen(true)}> Buyback shares
Buyback shares </Button>
</Button>
</span>
</Tooltip> </Tooltip>
<BuybackSharesModal open={buybackSharesOpen} onClose={() => setBuybackSharesOpen(false)} rerender={rerender} /> <BuybackSharesModal open={buybackSharesOpen} onClose={() => setBuybackSharesOpen(false)} rerender={rerender} />
<br />
<Tooltip title={<Typography>{issueNewSharesTooltip}</Typography>}> <Tooltip title={<Typography>{issueNewSharesTooltip}</Typography>}>
<span> <Button disabled={issueNewSharesOnCd} onClick={() => setIssueNewSharesOpen(true)}>
<Button disabled={issueNewSharesOnCd} onClick={() => setIssueNewSharesOpen(true)}> Issue New Shares
Issue New Shares </Button>
</Button>
</span>
</Tooltip> </Tooltip>
<IssueNewSharesModal open={issueNewSharesOpen} onClose={() => setIssueNewSharesOpen(false)} /> <IssueNewSharesModal open={issueNewSharesOpen} onClose={() => setIssueNewSharesOpen(false)} />
<Tooltip <Tooltip
@ -242,7 +234,6 @@ function PublicButtons({ rerender }: IPublicButtonsProps): React.ReactElement {
<Button onClick={() => setIssueDividendsOpen(true)}>Issue Dividends</Button> <Button onClick={() => setIssueDividendsOpen(true)}>Issue Dividends</Button>
</Tooltip> </Tooltip>
<IssueDividendsModal open={issueDividendsOpen} onClose={() => setIssueDividendsOpen(false)} /> <IssueDividendsModal open={issueDividendsOpen} onClose={() => setIssueDividendsOpen(false)} />
<br />
</> </>
); );
} }
@ -269,11 +260,9 @@ function BribeButton(): React.ReactElement {
: "Your Corporation is not powerful enough to bribe Faction leaders" : "Your Corporation is not powerful enough to bribe Faction leaders"
} }
> >
<span> <Button disabled={!canBribe} onClick={openBribe}>
<Button disabled={!canBribe} onClick={openBribe}> Bribe Factions
Bribe Factions </Button>
</Button>
</span>
</Tooltip> </Tooltip>
<BribeFactionModal open={open} onClose={() => setOpen(false)} /> <BribeFactionModal open={open} onClose={() => setOpen(false)} />
</> </>

@ -6,17 +6,18 @@ import { IIndustry } from "../IIndustry";
import { Research } from "../Actions"; import { Research } from "../Actions";
import { Node } from "../ResearchTree"; import { Node } from "../ResearchTree";
import { ResearchMap } from "../ResearchMap"; import { ResearchMap } from "../ResearchMap";
import { Settings } from "../../Settings/Settings";
import { dialogBoxCreate } from "../../ui/React/DialogBox"; import { dialogBoxCreate } from "../../ui/React/DialogBox";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Collapse from "@mui/material/Collapse"; import Collapse from "@mui/material/Collapse";
import ExpandMore from "@mui/icons-material/ExpandMore"; import ExpandMore from "@mui/icons-material/ExpandMore";
import ExpandLess from "@mui/icons-material/ExpandLess"; import ExpandLess from "@mui/icons-material/ExpandLess";
import CheckIcon from '@mui/icons-material/Check';
interface INodeProps { interface INodeProps {
n: Node | null; n: Node | null;
division: IIndustry; division: IIndustry;
@ -42,8 +43,8 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
dialogBoxCreate( dialogBoxCreate(
`Researched ${n.text}. It may take a market cycle ` + `Researched ${n.text}. It may take a market cycle ` +
`(~${CorporationConstants.SecsPerMarketCycle} seconds) before the effects of ` + `(~${CorporationConstants.SecsPerMarketCycle} seconds) before the effects of ` +
`the Research apply.`, `the Research apply.`,
); );
} }
@ -52,8 +53,8 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
color = "info"; color = "info";
} }
const but = ( const wrapInTooltip = (ele: React.ReactElement): React.ReactElement => {
<Box> return (
<Tooltip <Tooltip
title={ title={
<Typography> <Typography>
@ -63,12 +64,22 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
</Typography> </Typography>
} }
> >
{ele}
</Tooltip>
)
}
const but = (
<Box>
{wrapInTooltip(
<span> <span>
<Button color={color} disabled={disabled && !n.researched} onClick={research}> <Button color={color} disabled={disabled && !n.researched} onClick={research}
{n.text} style={{ width: '100%', textAlign: 'left', justifyContent: 'unset' }}
>
{n.researched && (<CheckIcon sx={{ mr: 1 }} />)}{n.text}
</Button> </Button>
</span> </span>
</Tooltip> )}
</Box> </Box>
); );
@ -76,15 +87,25 @@ function Upgrade({ n, division }: INodeProps): React.ReactElement {
return ( return (
<Box> <Box>
<Box display="flex"> <Box display="flex" sx={{ border: '1px solid ' + Settings.theme.well }}>
{but} {wrapInTooltip(
<ListItemButton onClick={() => setOpen((old) => !old)}> <span style={{ width: '100%' }}>
<ListItemText /> <Button color={color} disabled={disabled && !n.researched} onClick={research} sx={{
width: '100%',
textAlign: 'left',
justifyContent: 'unset',
borderColor: Settings.theme.button
}}>
{n.researched && (<CheckIcon sx={{ mr: 1 }} />)}{n.text}
</Button>
</span>
)}
<Button onClick={() => setOpen((old) => !old)} sx={{ borderColor: Settings.theme.button, minWidth: 'fit-content' }}>
{open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />} {open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />}
</ListItemButton> </Button>
</Box> </Box>
<Collapse in={open} unmountOnExit> <Collapse in={open} unmountOnExit>
<Box m={4}> <Box m={1}>
{n.children.map((m) => ( {n.children.map((m) => (
<Upgrade key={m.text} division={division} n={m} /> <Upgrade key={m.text} division={division} n={m} />
))} ))}
@ -108,7 +129,7 @@ export function ResearchModal(props: IProps): React.ReactElement {
return ( return (
<Modal open={props.open} onClose={props.onClose}> <Modal open={props.open} onClose={props.onClose}>
<Upgrade division={props.industry} n={researchTree.root} /> <Upgrade division={props.industry} n={researchTree.root} />
<Typography> <Typography sx={{ mt: 1 }}>
Research points: {props.industry.sciResearch.qty.toFixed(3)} Research points: {props.industry.sciResearch.qty.toFixed(3)}
<br /> <br />
Multipliers from research: Multipliers from research:

@ -77,7 +77,7 @@ export function DonateOption(props: IProps): React.ReactElement {
} }
return ( return (
<Paper sx={{ my: 1, p: 1, width: "100%" }}> <Paper sx={{ my: 1, p: 1 }}>
<Status /> <Status />
{props.disabled ? ( {props.disabled ? (
<Typography> <Typography>

@ -19,7 +19,7 @@ type IProps = {
export function Option(props: IProps): React.ReactElement { export function Option(props: IProps): React.ReactElement {
return ( return (
<Box> <Box>
<Paper sx={{ my: 1, p: 1, width: "100%" }}> <Paper sx={{ my: 1, p: 1 }}>
<Button onClick={props.onClick}>{props.buttonText}</Button> <Button onClick={props.onClick}>{props.buttonText}</Button>
<Typography>{props.infoText}</Typography> <Typography>{props.infoText}</Typography>
</Paper> </Paper>

@ -31,7 +31,7 @@ export function AscensionModal(props: IProps): React.ReactElement {
props.onAscend(); props.onAscend();
const res = gang.ascendMember(props.member); const res = gang.ascendMember(props.member);
dialogBoxCreate( dialogBoxCreate(
<Typography> <>
You ascended {props.member.name}!<br /> You ascended {props.member.name}!<br />
<br /> <br />
Your gang lost {numeralWrapper.formatRespect(res.respect)} respect. Your gang lost {numeralWrapper.formatRespect(res.respect)} respect.
@ -51,7 +51,7 @@ export function AscensionModal(props: IProps): React.ReactElement {
<br /> <br />
Charisma: x{numeralWrapper.format(res.cha, "0.000")} Charisma: x{numeralWrapper.format(res.cha, "0.000")}
<br /> <br />
</Typography>, </>
); );
props.onClose(); props.onClose();
} }

@ -2,20 +2,27 @@
* React Component for the popup that manages gang members upgrades * React Component for the popup that manages gang members upgrades
*/ */
import React, { useState } from "react"; import React, { useState } from "react";
import { formatNumber } from "../../utils/StringHelperFunctions";
import { numeralWrapper } from "../../ui/numeralFormat";
import { GangMemberUpgrades } from "../GangMemberUpgrades";
import { GangMemberUpgrade } from "../GangMemberUpgrade";
import { Money } from "../../ui/React/Money";
import { useGang } from "./Context"; import { useGang } from "./Context";
import { GangMember } from "../GangMember"; import { generateTableRow } from "./GangMemberStats";
import { UpgradeType } from "../data/upgrades";
import { use } from "../../ui/Context";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Box from "@mui/material/Box"; import Box from "@mui/material/Box";
import Paper from "@mui/material/Paper"; import Paper from "@mui/material/Paper";
import Select, { SelectChangeEvent } from "@mui/material/Select";
import { MenuItem, Table, TableBody, TextField } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import { numeralWrapper } from "../../ui/numeralFormat";
import { GangMemberUpgrades } from "../GangMemberUpgrades";
import { GangMemberUpgrade } from "../GangMemberUpgrade";
import { Money } from "../../ui/React/Money";
import { GangMember } from "../GangMember";
import { UpgradeType } from "../data/upgrades";
import { use } from "../../ui/Context";
import { Settings } from "../../Settings/Settings";
import { characterOverviewStyles as useStyles } from "../../ui/React/CharacterOverview";
interface INextRevealProps { interface INextRevealProps {
upgrades: string[]; upgrades: string[];
@ -46,12 +53,10 @@ function NextReveal(props: INextRevealProps): React.ReactElement {
function PurchasedUpgrade({ upgName }: { upgName: string }): React.ReactElement { function PurchasedUpgrade({ upgName }: { upgName: string }): React.ReactElement {
const upg = GangMemberUpgrades[upgName]; const upg = GangMemberUpgrades[upgName];
return ( return (
<Paper sx={{ mx: 1, p: 1 }}> <Paper sx={{ p: 1 }}>
<Box display="flex"> <Tooltip title={<Typography dangerouslySetInnerHTML={{ __html: upg.desc }} />}>
<Tooltip title={<Typography dangerouslySetInnerHTML={{ __html: upg.desc }} />}> <Typography>{upg.name}</Typography>
<Typography>{upg.name}</Typography> </Tooltip>
</Tooltip>
</Box>
</Paper> </Paper>
); );
} }
@ -72,8 +77,8 @@ function UpgradeButton(props: IUpgradeButtonProps): React.ReactElement {
return ( return (
<Tooltip title={<Typography dangerouslySetInnerHTML={{ __html: props.upg.desc }} />}> <Tooltip title={<Typography dangerouslySetInnerHTML={{ __html: props.upg.desc }} />}>
<span> <span>
<Typography>{props.upg.name}</Typography> <Button onClick={onClick} sx={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%' }}>
<Button onClick={onClick}> <Typography sx={{ display: 'block' }}>{props.upg.name}</Typography>
<Money money={gang.getUpgradeCost(props.upg)} /> <Money money={gang.getUpgradeCost(props.upg)} />
</Button> </Button>
</span> </span>
@ -86,12 +91,16 @@ interface IPanelProps {
} }
function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement { function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement {
const classes = useStyles();
const gang = useGang(); const gang = useGang();
const player = use.Player(); const player = use.Player();
const setRerender = useState(false)[1]; const setRerender = useState(false)[1];
const [currentCategory, setCurrentCategory] = useState("Weapons");
function rerender(): void { function rerender(): void {
setRerender((old) => !old); setRerender((old) => !old);
} }
function filterUpgrades(list: string[], type: UpgradeType): GangMemberUpgrade[] { function filterUpgrades(list: string[], type: UpgradeType): GangMemberUpgrade[] {
return Object.keys(GangMemberUpgrades) return Object.keys(GangMemberUpgrades)
.filter((upgName: string) => { .filter((upgName: string) => {
@ -103,12 +112,26 @@ function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement {
}) })
.map((upgName: string) => GangMemberUpgrades[upgName]); .map((upgName: string) => GangMemberUpgrades[upgName]);
} }
const onChange = (event: SelectChangeEvent<string>): void => {
setCurrentCategory(event.target.value);
rerender()
}
const weaponUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Weapon); const weaponUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Weapon);
const armorUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Armor); const armorUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Armor);
const vehicleUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Vehicle); const vehicleUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Vehicle);
const rootkitUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Rootkit); const rootkitUpgrades = filterUpgrades(props.member.upgrades, UpgradeType.Rootkit);
const augUpgrades = filterUpgrades(props.member.augmentations, UpgradeType.Augmentation); const augUpgrades = filterUpgrades(props.member.augmentations, UpgradeType.Augmentation);
const categories: { [key: string]: (GangMemberUpgrade[] | UpgradeType)[] } = {
'Weapons': [weaponUpgrades, UpgradeType.Weapon],
'Armor': [armorUpgrades, UpgradeType.Armor],
'Vehicles': [vehicleUpgrades, UpgradeType.Vehicle],
'Rootkits': [rootkitUpgrades, UpgradeType.Rootkit],
'Augmentations': [augUpgrades, UpgradeType.Augmentation]
};
const asc = { const asc = {
hack: props.member.calculateAscensionMult(props.member.hack_asc_points), hack: props.member.calculateAscensionMult(props.member.hack_asc_points),
str: props.member.calculateAscensionMult(props.member.str_asc_points), str: props.member.calculateAscensionMult(props.member.str_asc_points),
@ -119,26 +142,89 @@ function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement {
}; };
return ( return (
<Paper> <Paper>
<Typography variant="h5" color="primary"> <Box display="grid" sx={{ gridTemplateColumns: '1fr 1fr', m: 1, gap: 1 }}>
{props.member.name} ({props.member.task}) <span>
</Typography> <Typography variant="h5" color="primary">
<Typography> {props.member.name} ({props.member.task})
Hack: {props.member.hack} (x </Typography>
{formatNumber(props.member.hack_mult * asc.hack, 2)})<br /> <Tooltip
Str: {props.member.str} (x title={
{formatNumber(props.member.str_mult * asc.str, 2)})<br /> <Typography>
Def: {props.member.def} (x Hk: x{numeralWrapper.formatMultiplier(props.member.hack_mult * asc.hack)}(x
{formatNumber(props.member.def_mult * asc.def, 2)})<br /> {numeralWrapper.formatMultiplier(props.member.hack_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.hack)}{" "}
Dex: {props.member.dex} (x Asc)
{formatNumber(props.member.dex_mult * asc.dex, 2)})<br /> <br />
Agi: {props.member.agi} (x St: x{numeralWrapper.formatMultiplier(props.member.str_mult * asc.str)}
{formatNumber(props.member.agi_mult * asc.agi, 2)})<br /> (x{numeralWrapper.formatMultiplier(props.member.str_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.str)}{" "}
Cha: {props.member.cha} (x Asc)
{formatNumber(props.member.cha_mult * asc.cha, 2)}) <br />
</Typography> Df: x{numeralWrapper.formatMultiplier(props.member.def_mult * asc.def)}
<Box display="flex" flexWrap="wrap"> (x{numeralWrapper.formatMultiplier(props.member.def_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.def)}{" "}
<Typography>Purchased Upgrades: </Typography> Asc)
<br /> <br />
Dx: x{numeralWrapper.formatMultiplier(props.member.dex_mult * asc.dex)}
(x{numeralWrapper.formatMultiplier(props.member.dex_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.dex)}{" "}
Asc)
<br />
Ag: x{numeralWrapper.formatMultiplier(props.member.agi_mult * asc.agi)}
(x{numeralWrapper.formatMultiplier(props.member.agi_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.agi)}{" "}
Asc)
<br />
Ch: x{numeralWrapper.formatMultiplier(props.member.cha_mult * asc.cha)}
(x{numeralWrapper.formatMultiplier(props.member.cha_mult)} Eq, x{numeralWrapper.formatMultiplier(asc.cha)}{" "}
Asc)
</Typography>
}
>
<Table>
<TableBody>
{generateTableRow("Hacking", props.member.hack, props.member.hack_exp, Settings.theme.hack, classes)}
{generateTableRow("Strength", props.member.str, props.member.str_exp, Settings.theme.combat, classes)}
{generateTableRow("Defense", props.member.def, props.member.def_exp, Settings.theme.combat, classes)}
{generateTableRow("Dexterity", props.member.dex, props.member.dex_exp, Settings.theme.combat, classes)}
{generateTableRow("Agility", props.member.agi, props.member.agi_exp, Settings.theme.combat, classes)}
{generateTableRow("Charisma", props.member.cha, props.member.cha_exp, Settings.theme.cha, classes)}
</TableBody>
</Table>
</Tooltip>
</span>
<span>
<Select onChange={onChange} value={currentCategory} sx={{ width: '100%', mb: 1 }}>
{Object.keys(categories).map((k, i) => (
<MenuItem key={i + 1} value={k}>
<Typography variant="h6">{k}</Typography>
</MenuItem>
))}
</Select>
<Box sx={{ width: '100%' }}>
{(categories[currentCategory][0] as GangMemberUpgrade[]).length === 0 && (
<Typography>
All upgrades owned!
</Typography>
)}
<Box display="grid" sx={{ gridTemplateColumns: '1fr 1fr' }}>
{(categories[currentCategory][0] as GangMemberUpgrade[]).map((upg) => (
<UpgradeButton
key={upg.name}
rerender={rerender}
member={props.member}
upg={upg}
/>
))}
</Box>
<NextReveal
type={categories[currentCategory][1] as UpgradeType}
upgrades={props.member.upgrades}
/>
</Box>
</span>
</Box>
<Typography sx={{ mx: 1 }}>Purchased Upgrades: </Typography>
<Box display="grid" sx={{ gridTemplateColumns: 'repeat(4, 1fr)', m: 1 }}>
{props.member.upgrades.map((upg: string) => ( {props.member.upgrades.map((upg: string) => (
<PurchasedUpgrade key={upg} upgName={upg} /> <PurchasedUpgrade key={upg} upgName={upg} />
))} ))}
@ -146,59 +232,22 @@ function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement {
<PurchasedUpgrade key={upg} upgName={upg} /> <PurchasedUpgrade key={upg} upgName={upg} />
))} ))}
</Box> </Box>
<Box display="flex" justifyContent="space-around"> </Paper >
<Box>
<Typography variant="h6" color="primary">
Weapons
</Typography>
{weaponUpgrades.map((upg) => (
<UpgradeButton key={upg.name} rerender={rerender} member={props.member} upg={upg} />
))}
<NextReveal type={UpgradeType.Weapon} upgrades={props.member.upgrades} />
</Box>
<Box>
<Typography variant="h6" color="primary">
Armor
</Typography>
{armorUpgrades.map((upg) => (
<UpgradeButton key={upg.name} rerender={rerender} member={props.member} upg={upg} />
))}
<NextReveal type={UpgradeType.Armor} upgrades={props.member.upgrades} />
</Box>
<Box>
<Typography variant="h6" color="primary">
Vehicles
</Typography>
{vehicleUpgrades.map((upg) => (
<UpgradeButton key={upg.name} rerender={rerender} member={props.member} upg={upg} />
))}
<NextReveal type={UpgradeType.Vehicle} upgrades={props.member.upgrades} />
</Box>
<Box>
<Typography variant="h6" color="primary">
Rootkits
</Typography>
{rootkitUpgrades.map((upg) => (
<UpgradeButton key={upg.name} rerender={rerender} member={props.member} upg={upg} />
))}
<NextReveal type={UpgradeType.Rootkit} upgrades={props.member.upgrades} />
</Box>
<Box>
<Typography variant="h6" color="primary">
Augmentations
</Typography>
{augUpgrades.map((upg) => (
<UpgradeButton key={upg.name} rerender={rerender} member={props.member} upg={upg} />
))}
<NextReveal type={UpgradeType.Augmentation} upgrades={props.member.upgrades} />
</Box>
</Box>
</Paper>
); );
} }
export function EquipmentsSubpage(): React.ReactElement { export function EquipmentsSubpage(): React.ReactElement {
const gang = useGang(); const gang = useGang();
const [filter, setFilter] = useState("");
const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
setFilter(event.target.value.toLowerCase());
}
const members = gang.members
.filter((member) => member && member.name.toLowerCase().includes(filter));
return ( return (
<> <>
<Tooltip <Tooltip
@ -209,11 +258,26 @@ export function EquipmentsSubpage(): React.ReactElement {
</Typography> </Typography>
} }
> >
<Typography>Discount: -{numeralWrapper.formatPercentage(1 - 1 / gang.getDiscount())}</Typography> <Typography sx={{ m: 1 }}>Discount: -{numeralWrapper.formatPercentage(1 - 1 / gang.getDiscount())}</Typography>
</Tooltip> </Tooltip>
{gang.members.map((member: GangMember) => (
<GangMemberUpgradePanel key={member.name} member={member} /> <TextField
))} value={filter}
onChange={handleFilterChange}
autoFocus
InputProps={{
startAdornment: <SearchIcon />,
spellCheck: false
}}
placeholder="Filter by member name"
sx={{ m: 1, width: '15%' }}
/>
<Box display="grid" sx={{ gridTemplateColumns: '1fr 1fr', width: 'fit-content' }}>
{members.map((member: GangMember) => (
<GangMemberUpgradePanel key={member.name} member={member} />
))}
</Box>
</> </>
); );
} }

@ -1,36 +0,0 @@
/**
* React Component for a gang member on the management subpage.
*/
import React, { useState } from "react";
import { GangMember } from "../GangMember";
import { GangMemberAccordionContent } from "./GangMemberAccordionContent";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import Paper from "@mui/material/Paper";
import Collapse from "@mui/material/Collapse";
import ExpandMore from "@mui/icons-material/ExpandMore";
import ExpandLess from "@mui/icons-material/ExpandLess";
interface IProps {
member: GangMember;
}
export function GangMemberAccordion(props: IProps): React.ReactElement {
const [open, setOpen] = useState(true);
return (
<Box component={Paper}>
<ListItemButton onClick={() => setOpen((old) => !old)}>
<ListItemText primary={<Typography>{props.member.name}</Typography>} />
{open ? <ExpandLess color="primary" /> : <ExpandMore color="primary" />}
</ListItemButton>
<Collapse in={open} unmountOnExit>
<Box sx={{ mx: 4 }}>
<GangMemberAccordionContent member={props.member} />
</Box>
</Collapse>
</Box>
);
}

@ -1,31 +0,0 @@
/**
* React Component for the content of the accordion of gang members on the
* management subpage.
*/
import React, { useState } from "react";
import { GangMemberStats } from "./GangMemberStats";
import { TaskSelector } from "./TaskSelector";
import { TaskDescription } from "./TaskDescription";
import { GangMember } from "../GangMember";
import Grid from "@mui/material/Grid";
interface IProps {
member: GangMember;
}
export function GangMemberAccordionContent(props: IProps): React.ReactElement {
const setRerender = useState(false)[1];
return (
<Grid container>
<Grid item xs={4}>
<GangMemberStats onAscend={() => setRerender((old) => !old)} member={props.member} />
</Grid>
<Grid item xs={4}>
<TaskSelector onTaskChange={() => setRerender((old) => !old)} member={props.member} />
</Grid>
<Grid item xs={4}>
<TaskDescription member={props.member} />
</Grid>
</Grid>
);
}

@ -0,0 +1,26 @@
/**
* React Component for a gang member on the management subpage.
*/
import React from "react";
import { GangMember } from "../GangMember";
import { GangMemberCardContent } from "./GangMemberCardContent";
import Box from "@mui/material/Box";
import ListItemText from "@mui/material/ListItemText";
import Paper from "@mui/material/Paper";
interface IProps {
member: GangMember;
}
export function GangMemberCard(props: IProps): React.ReactElement {
return (
<Box component={Paper} sx={{ width: 'auto' }}>
<Box sx={{ m: 1 }}>
<ListItemText primary={<b>{props.member.name}</b>} />
<GangMemberCardContent member={props.member} />
</Box>
</Box>
);
}

@ -0,0 +1,62 @@
/**
* React Component for the content of the accordion of gang members on the
* management subpage.
*/
import React, { useState } from "react";
import { GangMemberStats } from "./GangMemberStats";
import { TaskSelector } from "./TaskSelector";
import { AscensionModal } from "./AscensionModal";
import { Box } from "@mui/system";
import { Button, Typography } from "@mui/material";
import HelpIcon from "@mui/icons-material/Help";
import { GangMember } from "../GangMember";
import { StaticModal } from "../../ui/React/StaticModal";
interface IProps {
member: GangMember;
}
export function GangMemberCardContent(props: IProps): React.ReactElement {
const setRerender = useState(false)[1];
const [helpOpen, setHelpOpen] = useState(false);
const [ascendOpen, setAscendOpen] = useState(false);
return (
<>
{props.member.canAscend() && (
<Box sx={{ display: 'flex', justifyContent: 'space-between', my: 1 }}>
<Button onClick={() => setAscendOpen(true)} style={{ flexGrow: 1, borderRightWidth: 0 }}>Ascend</Button>
<AscensionModal
open={ascendOpen}
onClose={() => setAscendOpen(false)}
member={props.member}
onAscend={() => setRerender((old) => !old)}
/>
<Button onClick={() => setHelpOpen(true)} style={{ width: 'fit-content', borderLeftWidth: 0 }}>
<HelpIcon />
</Button>
<StaticModal open={helpOpen} onClose={() => setHelpOpen(false)}>
<Typography>
Ascending a Gang Member resets the member's progress and stats in exchange for a permanent boost to their
stat multipliers.
<br />
<br />
The additional stat multiplier that the Gang Member gains upon ascension is based on the amount of exp
they have.
<br />
<br />
Upon ascension, the member will lose all of its non-Augmentation Equipment and your gang will lose respect
equal to the total respect earned by the member.
</Typography>
</StaticModal>
</Box>
)}
<Box display="grid" sx={{ gridTemplateColumns: '1fr 1fr', width: '100%', gap: 1 }}>
<GangMemberStats member={props.member} />
<TaskSelector onTaskChange={() => setRerender((old) => !old)} member={props.member} />
</Box>
</>
);
}

@ -2,23 +2,63 @@
* React Component for the list of gang members on the management subpage. * React Component for the list of gang members on the management subpage.
*/ */
import React, { useState } from "react"; import React, { useState } from "react";
import { GangMemberAccordion } from "./GangMemberAccordion"; import { GangMemberCard } from "./GangMemberCard";
import { GangMember } from "../GangMember";
import { RecruitButton } from "./RecruitButton"; import { RecruitButton } from "./RecruitButton";
import { useGang } from "./Context"; import { useGang } from "./Context";
import { Box, TextField } from "@mui/material";
import SearchIcon from "@mui/icons-material/Search";
import { GangMember } from "../GangMember";
import { OptionSwitch } from "../../ui/React/OptionSwitch";
export function GangMemberList(): React.ReactElement { export function GangMemberList(): React.ReactElement {
const gang = useGang(); const gang = useGang();
const setRerender = useState(false)[1]; const setRerender = useState(false)[1];
const [filter, setFilter] = useState("");
const [ascendOnly, setAscendOnly] = useState(false);
const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
setFilter(event.target.value.toLowerCase());
}
const members = gang.members
.filter((member) => member && member.name.toLowerCase().includes(filter))
.filter((member) => {
if (ascendOnly) return member.canAscend();
return true;
});
return ( return (
<> <>
<RecruitButton onRecruit={() => setRerender((old) => !old)} /> <RecruitButton onRecruit={() => setRerender((old) => !old)} />
<ul> <TextField
{gang.members.map((member: GangMember) => ( value={filter}
<GangMemberAccordion key={member.name} member={member} /> onChange={handleFilterChange}
autoFocus
InputProps={{
startAdornment: <SearchIcon />,
spellCheck: false
}}
placeholder="Filter by member name"
sx={{ m: 1, width: '15%' }}
/>
<OptionSwitch
checked={ascendOnly}
onChange={(newValue) => (setAscendOnly(newValue))}
text="Show only ascendable"
tooltip={
<>
Filter the members list by whether or not the member
can be ascended.
</>
}
/>
<Box display="grid" sx={{ gridTemplateColumns: 'repeat(2, 1fr)' }}>
{members.map((member: GangMember) => (
<GangMemberCard key={member.name} member={member} />
))} ))}
</ul> </Box>
</> </>
); );
} }

@ -2,26 +2,53 @@
* React Component for the first part of a gang member details. * React Component for the first part of a gang member details.
* Contains skills and exp. * Contains skills and exp.
*/ */
import React, { useState } from "react"; import React from "react";
import { formatNumber } from "../../utils/StringHelperFunctions"; import { useGang } from "./Context";
import { numeralWrapper } from "../../ui/numeralFormat";
import { GangMember } from "../GangMember";
import { AscensionModal } from "./AscensionModal";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Tooltip from "@mui/material/Tooltip"; import Tooltip from "@mui/material/Tooltip";
import Button from "@mui/material/Button"; import {
import { StaticModal } from "../../ui/React/StaticModal"; Table,
import IconButton from "@mui/material/IconButton"; TableBody,
import HelpIcon from "@mui/icons-material/Help"; TableCell,
TableRow,
} from "@mui/material";
import { numeralWrapper } from "../../ui/numeralFormat";
import { GangMember } from "../GangMember";
import { Settings } from "../../Settings/Settings";
import { formatNumber } from "../../utils/StringHelperFunctions";
import { MoneyRate } from "../../ui/React/MoneyRate";
import { characterOverviewStyles as useStyles } from "../../ui/React/CharacterOverview";
interface IProps { interface IProps {
member: GangMember; member: GangMember;
onAscend: () => void; }
export const generateTableRow = (
name: string,
level: number,
exp: number,
color: string,
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
classes: any
): React.ReactElement => {
return (
<TableRow>
<TableCell classes={{ root: classes.cellNone }}>
<Typography style={{ color: color }}>{name}</Typography>
</TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography style={{ color: color }}>
{formatNumber(level, 0)} ({numeralWrapper.formatExp(exp)} exp)
</Typography>
</TableCell>
</TableRow>
)
} }
export function GangMemberStats(props: IProps): React.ReactElement { export function GangMemberStats(props: IProps): React.ReactElement {
const [helpOpen, setHelpOpen] = useState(false); const classes = useStyles();
const [ascendOpen, setAscendOpen] = useState(false);
const asc = { const asc = {
hack: props.member.calculateAscensionMult(props.member.hack_asc_points), hack: props.member.calculateAscensionMult(props.member.hack_asc_points),
@ -32,6 +59,16 @@ export function GangMemberStats(props: IProps): React.ReactElement {
cha: props.member.calculateAscensionMult(props.member.cha_asc_points), cha: props.member.calculateAscensionMult(props.member.cha_asc_points),
}; };
const gang = useGang();
const data = [
[`Money:`, <MoneyRate money={5 * props.member.calculateMoneyGain(gang)} />],
[`Respect:`, `${numeralWrapper.formatRespect(5 * props.member.calculateRespectGain(gang))} / sec`],
[`Wanted Level:`, `${numeralWrapper.formatWanted(5 * props.member.calculateWantedLevelGain(gang))} / sec`],
[`Total Respect:`, `${numeralWrapper.formatRespect(props.member.earnedRespect)}`],
];
return ( return (
<> <>
<Tooltip <Tooltip
@ -63,50 +100,32 @@ export function GangMemberStats(props: IProps): React.ReactElement {
</Typography> </Typography>
} }
> >
<Typography> <Table sx={{ display: 'table', mb: 1, width: '100%' }}>
Hacking: {formatNumber(props.member.hack, 0)} ({numeralWrapper.formatExp(props.member.hack_exp)} exp) <TableBody>
<br /> {generateTableRow("Hacking", props.member.hack, props.member.hack_exp, Settings.theme.hack, classes)}
Strength: {formatNumber(props.member.str, 0)} ({numeralWrapper.formatExp(props.member.str_exp)} exp) {generateTableRow("Strength", props.member.str, props.member.str_exp, Settings.theme.combat, classes)}
<br /> {generateTableRow("Defense", props.member.def, props.member.def_exp, Settings.theme.combat, classes)}
Defense: {formatNumber(props.member.def, 0)} ({numeralWrapper.formatExp(props.member.def_exp)} exp) {generateTableRow("Dexterity", props.member.dex, props.member.dex_exp, Settings.theme.combat, classes)}
<br /> {generateTableRow("Agility", props.member.agi, props.member.agi_exp, Settings.theme.combat, classes)}
Dexterity: {formatNumber(props.member.dex, 0)} ({numeralWrapper.formatExp(props.member.dex_exp)} exp) {generateTableRow("Charisma", props.member.cha, props.member.cha_exp, Settings.theme.cha, classes)}
<br /> <TableRow>
Agility: {formatNumber(props.member.agi, 0)} ({numeralWrapper.formatExp(props.member.agi_exp)} exp) <TableCell classes={{ root: classes.cellNone }}>
<br /> <br />
Charisma: {formatNumber(props.member.cha, 0)} ({numeralWrapper.formatExp(props.member.cha_exp)} exp) </TableCell>
<br /> </TableRow>
</Typography> {data.map(([a, b]) => (
<TableRow key={a.toString() + b.toString()}>
<TableCell classes={{ root: classes.cellNone }}>
<Typography>{a}</Typography>
</TableCell>
<TableCell align="right" classes={{ root: classes.cellNone }}>
<Typography>{b}</Typography>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Tooltip> </Tooltip>
<br />
{props.member.canAscend() && (
<>
<Button onClick={() => setAscendOpen(true)}>Ascend</Button>
<AscensionModal
open={ascendOpen}
onClose={() => setAscendOpen(false)}
member={props.member}
onAscend={props.onAscend}
/>
<IconButton onClick={() => setHelpOpen(true)}>
<HelpIcon />
</IconButton>
<StaticModal open={helpOpen} onClose={() => setHelpOpen(false)}>
<Typography>
Ascending a Gang Member resets the member's progress and stats in exchange for a permanent boost to their
stat multipliers.
<br />
<br />
The additional stat multiplier that the Gang Member gains upon ascension is based on the amount of exp
they have.
<br />
<br />
Upon ascension, the member will lose all of its non-Augmentation Equipment and your gang will lose respect
equal to the total respect earned by the member.
</Typography>
</StaticModal>
</>
)}
</> </>
); );
} }

@ -24,18 +24,20 @@ export function RecruitButton(props: IProps): React.ReactElement {
if (!gang.canRecruitMember()) { if (!gang.canRecruitMember()) {
const respect = gang.getRespectNeededToRecruitMember(); const respect = gang.getRespectNeededToRecruitMember();
return ( return (
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center" sx={{ mx: 1 }}>
<Button sx={{ mx: 1 }} disabled> <Button disabled>
Recruit Gang Member Recruit Gang Member
</Button> </Button>
<Typography>{numeralWrapper.formatRespect(respect)} respect needed to recruit next member</Typography> <Typography sx={{ ml: 1 }}>{numeralWrapper.formatRespect(respect)} respect needed to recruit next member</Typography>
</Box> </Box>
); );
} }
return ( return (
<> <>
<Button onClick={() => setOpen(true)}>Recruit Gang Member</Button> <Box sx={{ mx: 1 }}>
<Button onClick={() => setOpen(true)}>Recruit Gang Member</Button>
</Box>
<RecruitModal open={open} onClose={() => setOpen(false)} onRecruit={props.onRecruit} /> <RecruitModal open={open} onClose={() => setOpen(false)} onRecruit={props.onRecruit} />
</> </>
); );

@ -3,14 +3,15 @@
* the task selector as well as some stats. * the task selector as well as some stats.
*/ */
import React, { useState } from "react"; import React, { useState } from "react";
import { numeralWrapper } from "../../ui/numeralFormat";
import { StatsTable } from "../../ui/React/StatsTable";
import { MoneyRate } from "../../ui/React/MoneyRate";
import { useGang } from "./Context"; import { useGang } from "./Context";
import { GangMember } from "../GangMember"; import { TaskDescription } from "./TaskDescription";
import { Box } from "@mui/material";
import MenuItem from "@mui/material/MenuItem"; import MenuItem from "@mui/material/MenuItem";
import Select, { SelectChangeEvent } from "@mui/material/Select"; import Select, { SelectChangeEvent } from "@mui/material/Select";
import { GangMember } from "../GangMember";
interface IProps { interface IProps {
member: GangMember; member: GangMember;
onTaskChange: () => void; onTaskChange: () => void;
@ -29,16 +30,9 @@ export function TaskSelector(props: IProps): React.ReactElement {
const tasks = gang.getAllTaskNames(); const tasks = gang.getAllTaskNames();
const data = [
[`Money:`, <MoneyRate money={5 * props.member.calculateMoneyGain(gang)} />],
[`Respect:`, `${numeralWrapper.formatRespect(5 * props.member.calculateRespectGain(gang))} / sec`],
[`Wanted Level:`, `${numeralWrapper.formatWanted(5 * props.member.calculateWantedLevelGain(gang))} / sec`],
[`Total Respect:`, `${numeralWrapper.formatRespect(props.member.earnedRespect)}`],
];
return ( return (
<> <Box>
<Select onChange={onChange} value={currentTask}> <Select onChange={onChange} value={currentTask} sx={{ width: '100%' }}>
<MenuItem key={0} value={"Unassigned"}> <MenuItem key={0} value={"Unassigned"}>
Unassigned Unassigned
</MenuItem> </MenuItem>
@ -48,8 +42,7 @@ export function TaskSelector(props: IProps): React.ReactElement {
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
<TaskDescription member={props.member} />
<StatsTable rows={data} /> </Box>
</>
); );
} }

@ -205,103 +205,97 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<Grid item xs={12} sm={6}> <Grid item xs={12} sm={6}>
<List> <List>
<ListItem> <ListItem>
<Tooltip <Box display="grid" sx={{ width: 'fit-content', gridTemplateColumns: '1fr 3.5fr', gap: 1 }}>
title={ <Tooltip
<Typography> title={
The minimum number of milliseconds it takes to execute an operation in Netscript. Setting this too <Typography>
low can result in poor performance if you have many scripts running. The minimum number of milliseconds it takes to execute an operation in Netscript. Setting this too
</Typography> low can result in poor performance if you have many scripts running.
} </Typography>
> }
<Typography>.script exec time (ms)</Typography> >
</Tooltip> <Typography>.script exec time (ms)</Typography>
<Slider </Tooltip>
value={execTime} <Slider
onChange={handleExecTimeChange} value={execTime}
step={1} onChange={handleExecTimeChange}
min={5} step={1}
max={100} min={5}
valueLabelDisplay="auto" max={100}
/> valueLabelDisplay="auto"
</ListItem> />
<ListItem> <Tooltip
<Tooltip title={
title={ <Typography>
<Typography> The maximum number of lines a script's logs can hold. Setting this too high can cause the game to
The maximum number of lines a script's logs can hold. Setting this too high can cause the game to use a lot of memory if you have many scripts running.
use a lot of memory if you have many scripts running. </Typography>
</Typography> }
} >
> <Typography>Netscript log size</Typography>
<Typography>Netscript log size</Typography> </Tooltip>
</Tooltip> <Slider
<Slider value={logSize}
value={logSize} onChange={handleLogSizeChange}
onChange={handleLogSizeChange} step={20}
step={20} min={20}
min={20} max={500}
max={500} valueLabelDisplay="auto"
valueLabelDisplay="auto" />
/> <Tooltip
</ListItem> title={
<ListItem> <Typography>
<Tooltip The maximum number of entries that can be written to a port using Netscript's write() function.
title={ Setting this too high can cause the game to use a lot of memory.
<Typography> </Typography>
The maximum number of entries that can be written to a port using Netscript's write() function. }
Setting this too high can cause the game to use a lot of memory. >
</Typography> <Typography>Netscript port size</Typography>
} </Tooltip>
> <Slider
<Typography>Netscript port size</Typography> value={portSize}
</Tooltip> onChange={handlePortSizeChange}
<Slider step={1}
value={portSize} min={20}
onChange={handlePortSizeChange} max={100}
step={1} valueLabelDisplay="auto"
min={20} />
max={100} <Tooltip
valueLabelDisplay="auto" title={
/> <Typography>
</ListItem> The maximum number of entries that can be written to the terminal. Setting this too high can cause
<ListItem> the game to use a lot of memory.
<Tooltip </Typography>
title={ }
<Typography> >
The maximum number of entries that can be written to the terminal. Setting this too high can cause <Typography>Terminal capacity</Typography>
the game to use a lot of memory. </Tooltip>
</Typography> <Slider
} value={terminalSize}
> onChange={handleTerminalSizeChange}
<Typography>Terminal capacity</Typography> step={50}
</Tooltip> min={50}
<Slider max={500}
value={terminalSize} valueLabelDisplay="auto"
onChange={handleTerminalSizeChange} marks
step={50} />
min={50} <Tooltip
max={500} title={
valueLabelDisplay="auto" <Typography>The time (in seconds) between each autosave. Set to 0 to disable autosave.</Typography>
marks }
/> >
</ListItem> <Typography>Autosave interval (s)</Typography>
<ListItem> </Tooltip>
<Tooltip <Slider
title={ value={autosaveInterval}
<Typography>The time (in seconds) between each autosave. Set to 0 to disable autosave.</Typography> onChange={handleAutosaveIntervalChange}
} step={30}
> min={0}
<Typography>Autosave interval (s)</Typography> max={600}
</Tooltip> valueLabelDisplay="auto"
<Slider marks
value={autosaveInterval} />
onChange={handleAutosaveIntervalChange} </Box>
step={30}
min={0}
max={600}
valueLabelDisplay="auto"
marks
/>
</ListItem> </ListItem>
<ListItem> <ListItem>
<OptionSwitch <OptionSwitch