Further tweaks/fixes

This commit is contained in:
nickofolas 2022-04-07 19:06:42 -05:00
parent d728648bfa
commit 960dc354c1
2 changed files with 50 additions and 63 deletions

@ -43,12 +43,12 @@ function BitNodeModifiedStats(props: BitNodeModifiedStatsProps): React.ReactElem
interface MultListProps { interface MultListProps {
rows: (string | number)[][]; rows: (string | number)[][];
color: string; color: string;
noMargin?: boolean;
} }
function MultiplierList(props: MultListProps): React.ReactElement { function MultiplierList({ rows, color, noMargin = false }: MultListProps): React.ReactElement {
return ( const listItems = rows
<List disablePadding> .map((data) => {
{props.rows.map((data) => {
const mult = data[0] as string, const mult = data[0] as string,
value = data[1] as number, value = data[1] as number,
improved = data[2] as number | null, improved = data[2] as number | null,
@ -60,13 +60,13 @@ function MultiplierList(props: MultListProps): React.ReactElement {
<ListItemText <ListItemText
sx={{ my: 0.1 }} sx={{ my: 0.1 }}
primary={ primary={
<Typography color={props.color}> <Typography color={color}>
<b>{mult}</b> <b>{mult}</b>
</Typography> </Typography>
} }
secondary={ secondary={
<span style={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}> <span style={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>
<BitNodeModifiedStats base={value} mult={bnMult} color={props.color} /> <BitNodeModifiedStats base={value} mult={bnMult} color={color} />
<DoubleArrow fontSize="small" color="success" sx={{ mb: 1, mx: 1 }} /> <DoubleArrow fontSize="small" color="success" sx={{ mb: 1, mx: 1 }} />
<BitNodeModifiedStats base={improved} mult={bnMult} color={Settings.theme.success} /> <BitNodeModifiedStats base={improved} mult={bnMult} color={Settings.theme.success} />
</span> </span>
@ -76,10 +76,18 @@ function MultiplierList(props: MultListProps): React.ReactElement {
</ListItem> </ListItem>
); );
} }
return <></>; return;
})} })
.filter((i) => i !== undefined);
if (listItems.length > 0) {
return (
<List disablePadding sx={{ mb: noMargin ? 0 : 2 }}>
{listItems}
</List> </List>
); );
}
return <></>;
} }
export function PlayerMultipliers(): React.ReactElement { export function PlayerMultipliers(): React.ReactElement {
@ -125,7 +133,6 @@ export function PlayerMultipliers(): React.ReactElement {
return ( return (
<Paper sx={{ p: 1, maxHeight: 400, overflowY: "scroll" }}> <Paper sx={{ p: 1, maxHeight: 400, overflowY: "scroll" }}>
<Typography variant="h6">Multipliers</Typography>
<Box> <Box>
<MultiplierList <MultiplierList
rows={[ rows={[
@ -136,7 +143,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.hack} color={Settings.theme.hack}
/> />
<br />
<MultiplierList <MultiplierList
rows={[ rows={[
@ -155,7 +161,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.hack} color={Settings.theme.hack}
/> />
<br />
<MultiplierList <MultiplierList
rows={[ rows={[
@ -169,7 +174,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<MultiplierList <MultiplierList
rows={[ rows={[
@ -183,7 +187,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<MultiplierList <MultiplierList
rows={[ rows={[
@ -202,7 +205,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<MultiplierList <MultiplierList
rows={[ rows={[
@ -216,7 +218,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<MultiplierList <MultiplierList
rows={[ rows={[
@ -230,7 +231,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.cha} color={Settings.theme.cha}
/> />
<br />
<MultiplierList <MultiplierList
rows={[ rows={[
@ -267,7 +267,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.primary} color={Settings.theme.primary}
/> />
<br />
<MultiplierList <MultiplierList
rows={[ rows={[
@ -287,7 +286,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.primary} color={Settings.theme.primary}
/> />
<br />
<MultiplierList <MultiplierList
rows={[ rows={[
@ -301,7 +299,6 @@ export function PlayerMultipliers(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<BladeburnerMults /> <BladeburnerMults />
</Box> </Box>

@ -40,11 +40,12 @@ const EmployersModal = ({ open, onClose }: EmployersModalProps): React.ReactElem
interface MultTableProps { interface MultTableProps {
rows: (string | number)[][]; rows: (string | number)[][];
color: string; color: string;
noMargin?: boolean;
} }
function MultiplierTable(props: MultTableProps): React.ReactElement { function MultiplierTable(props: MultTableProps): React.ReactElement {
return ( return (
<Table sx={{ display: "table", width: "100%" }}> <Table sx={{ display: "table", width: "100%", mb: (props.noMargin ?? false) === true ? 0 : 2 }}>
<TableBody> <TableBody>
{props.rows.map((data) => { {props.rows.map((data) => {
const mult = data[0] as string, const mult = data[0] as string,
@ -89,6 +90,7 @@ function BladeburnerMults(): React.ReactElement {
["Bladeburner Field Analysis", player.bladeburner_analysis_mult], ["Bladeburner Field Analysis", player.bladeburner_analysis_mult],
]} ]}
color={Settings.theme.primary} color={Settings.theme.primary}
noMargin
/> />
); );
} }
@ -354,6 +356,10 @@ export function CharacterStats(): React.ReactElement {
<br /> <br />
When there is a dim number next to a multiplier, that means that the multiplier in question is being When there is a dim number next to a multiplier, that means that the multiplier in question is being
affected by BitNode multipliers. affected by BitNode multipliers.
<br />
<br />
The dim number is the raw multiplier, and the undimmed number is the effective multiplier, as dictated
by the BitNode.
</Typography> </Typography>
} }
> >
@ -379,7 +385,6 @@ export function CharacterStats(): React.ReactElement {
]} ]}
color={Settings.theme.hack} color={Settings.theme.hack}
/> />
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
@ -395,8 +400,6 @@ export function CharacterStats(): React.ReactElement {
]} ]}
color={Settings.theme.hack} color={Settings.theme.hack}
/> />
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
@ -408,8 +411,6 @@ export function CharacterStats(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
@ -421,8 +422,6 @@ export function CharacterStats(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
@ -434,8 +433,6 @@ export function CharacterStats(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
@ -447,8 +444,6 @@ export function CharacterStats(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ [
@ -459,6 +454,7 @@ export function CharacterStats(): React.ReactElement {
["Charisma Experience", player.charisma_exp_mult], ["Charisma Experience", player.charisma_exp_mult],
]} ]}
color={Settings.theme.cha} color={Settings.theme.cha}
noMargin
/> />
</Box> </Box>
@ -477,8 +473,6 @@ export function CharacterStats(): React.ReactElement {
]} ]}
color={Settings.theme.primary} color={Settings.theme.primary}
/> />
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Company reputation gain", player.company_rep_mult], ["Company reputation gain", player.company_rep_mult],
@ -491,8 +485,6 @@ export function CharacterStats(): React.ReactElement {
]} ]}
color={Settings.theme.primary} color={Settings.theme.primary}
/> />
<br />
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Crime success", player.crime_success_mult], ["Crime success", player.crime_success_mult],
@ -500,9 +492,7 @@ export function CharacterStats(): React.ReactElement {
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<br />
<BladeburnerMults /> <BladeburnerMults />
<br />
</Box> </Box>
</Box> </Box>
</Paper> </Paper>