Refactor character stats table

This commit is contained in:
nickofolas 2022-05-07 16:51:34 -05:00
parent 5d89f17e4a
commit c688e20876

@ -37,8 +37,22 @@ const EmployersModal = ({ open, onClose }: EmployersModalProps): React.ReactElem
); );
}; };
interface IMultRow {
// The name of the multiplier
mult: string;
// The player's raw multiplier value
value: number;
// The player's effective multiplier value, affected by BitNode mults
effValue?: number;
// The text color for the row
color?: string;
}
interface MultTableProps { interface MultTableProps {
rows: (string | number)[][]; rows: IMultRow[];
color: string; color: string;
noMargin?: boolean; noMargin?: boolean;
} }
@ -49,29 +63,22 @@ function MultiplierTable(props: MultTableProps): React.ReactElement {
<Table sx={{ display: "table", width: "100%", mb: (props.noMargin ?? false) === true ? 0 : 2 }}> <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, value, effValue = null, color = props.color } = data;
value = data[1] as number,
modded = data[2] as number | null;
if (modded && modded !== value && player.sourceFileLvl(5) > 0) { if (effValue && effValue !== value && player.sourceFileLvl(5) > 0) {
return ( return (
<StatsRow key={mult} name={mult} color={props.color} data={{}}> <StatsRow key={mult} name={mult} color={color} data={{}}>
<> <>
<Typography color={props.color}> <Typography color={color}>
<span style={{ opacity: 0.5 }}>{numeralWrapper.formatPercentage(value)}</span>{" "} <span style={{ opacity: 0.5 }}>{numeralWrapper.formatPercentage(value)}</span>{" "}
{numeralWrapper.formatPercentage(modded)} {numeralWrapper.formatPercentage(effValue)}
</Typography> </Typography>
</> </>
</StatsRow> </StatsRow>
); );
} }
return ( return (
<StatsRow <StatsRow key={mult} name={mult} color={color} data={{ content: numeralWrapper.formatPercentage(value) }} />
key={mult}
name={mult}
color={props.color}
data={{ content: numeralWrapper.formatPercentage(value) }}
/>
); );
})} })}
</TableBody> </TableBody>
@ -359,76 +366,109 @@ export function CharacterStats(): React.ReactElement {
<Box> <Box>
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Hacking Chance", player.hacking_chance_mult], {
["Hacking Speed", player.hacking_speed_mult], mult: "Hacking Chance",
[ value: player.hacking_chance_mult,
"Hacking Money", },
player.hacking_money_mult, {
player.hacking_money_mult * BitNodeMultipliers.ScriptHackMoney, mult: "Hacking Speed",
], value: player.hacking_speed_mult,
[ },
"Hacking Growth", {
player.hacking_grow_mult, mult: "Hacking Money",
player.hacking_grow_mult * BitNodeMultipliers.ServerGrowthRate, value: player.hacking_money_mult,
], effValue: player.hacking_money_mult * BitNodeMultipliers.ScriptHackMoney,
},
{
mult: "Hacking Growth",
value: player.hacking_grow_mult,
effValue: player.hacking_grow_mult * BitNodeMultipliers.ServerGrowthRate,
},
]} ]}
color={Settings.theme.hack} color={Settings.theme.hack}
/> />
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Hacking Level", player.hacking_mult, player.hacking_mult * BitNodeMultipliers.HackingLevelMultiplier], {
[ mult: "Hacking Level",
"Hacking Experience", value: player.hacking_mult,
player.hacking_exp_mult, effValue: player.hacking_mult * BitNodeMultipliers.HackingLevelMultiplier,
player.hacking_exp_mult * BitNodeMultipliers.HackExpGain, },
], {
mult: "Hacking Experience",
value: player.hacking_exp_mult,
effValue: player.hacking_exp_mult * BitNodeMultipliers.HackExpGain,
},
]} ]}
color={Settings.theme.hack} color={Settings.theme.hack}
/> />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ {
"Strength Level", mult: "Strength Level",
player.strength_mult, value: player.strength_mult,
player.strength_mult * BitNodeMultipliers.StrengthLevelMultiplier, effValue: player.strength_mult * BitNodeMultipliers.StrengthLevelMultiplier,
], },
["Strength Experience", player.strength_exp_mult], {
mult: "Strength Experience",
value: player.strength_exp_mult,
},
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Defense Level", player.defense_mult, player.defense_mult * BitNodeMultipliers.DefenseLevelMultiplier], {
["Defense Experience", player.defense_exp_mult], mult: "Defense Level",
value: player.defense_mult,
effValue: player.defense_mult * BitNodeMultipliers.DefenseLevelMultiplier,
},
{
mult: "Defense Experience",
value: player.defense_exp_mult,
},
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ {
"Dexterity Level", mult: "Dexterity Level",
player.dexterity_mult, value: player.dexterity_mult,
player.dexterity_mult * BitNodeMultipliers.DexterityLevelMultiplier, effValue: player.dexterity_mult * BitNodeMultipliers.DexterityLevelMultiplier,
], },
["Dexterity Experience", player.dexterity_exp_mult], {
mult: "Dexterity Experience",
value: player.dexterity_exp_mult,
},
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Agility Level", player.agility_mult, player.agility_mult * BitNodeMultipliers.AgilityLevelMultiplier], {
["Agility Experience", player.agility_exp_mult], mult: "Agility Level",
value: player.agility_mult,
effValue: player.agility_mult * BitNodeMultipliers.AgilityLevelMultiplier,
},
{
mult: "Agility Experience",
value: player.agility_exp_mult,
},
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ {
"Charisma Level", mult: "Charisma Level",
player.charisma_mult, value: player.charisma_mult,
player.charisma_mult * BitNodeMultipliers.CharismaLevelMultiplier, effValue: player.charisma_mult * BitNodeMultipliers.CharismaLevelMultiplier,
], },
["Charisma Experience", player.charisma_exp_mult], {
mult: "Charisma Experience",
value: player.charisma_exp_mult,
},
]} ]}
color={Settings.theme.cha} color={Settings.theme.cha}
noMargin noMargin
@ -438,44 +478,86 @@ export function CharacterStats(): React.ReactElement {
<Box> <Box>
<MultiplierTable <MultiplierTable
rows={[ rows={[
[ {
"Hacknet Node production", mult: "Hacknet Node Production",
player.hacknet_node_money_mult, value: player.hacknet_node_money_mult,
player.hacknet_node_money_mult * BitNodeMultipliers.HacknetNodeMoney, effValue: player.hacknet_node_money_mult * BitNodeMultipliers.HacknetNodeMoney,
], },
["Hacknet Node purchase cost", player.hacknet_node_purchase_cost_mult], {
["Hacknet Node RAM upgrade cost", player.hacknet_node_ram_cost_mult], mult: "Hacknet Node Purchase Cost",
["Hacknet Node Core purchase cost", player.hacknet_node_core_cost_mult], value: player.hacknet_node_purchase_cost_mult,
["Hacknet Node level upgrade cost", player.hacknet_node_level_cost_mult], },
{
mult: "Hacknet Node RAM Upgrade Cost",
value: player.hacknet_node_ram_cost_mult,
},
{
mult: "Hacknet Node Core Purchase Cost",
value: player.hacknet_node_core_cost_mult,
},
{
mult: "Hacknet Node Level Upgrade Cost",
value: player.hacknet_node_level_cost_mult,
},
]} ]}
color={Settings.theme.primary} color={Settings.theme.primary}
/> />
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Company reputation gain", player.company_rep_mult], {
[ mult: "Company Reputation Gain",
"Faction reputation gain", value: player.company_rep_mult,
player.faction_rep_mult, color: Settings.theme.rep,
player.faction_rep_mult * BitNodeMultipliers.FactionWorkRepGain, },
], {
["Salary", player.work_money_mult, player.work_money_mult * BitNodeMultipliers.CompanyWorkMoney], mult: "Faction Reputation Gain",
value: player.faction_rep_mult,
effValue: player.faction_rep_mult * BitNodeMultipliers.FactionWorkRepGain,
color: Settings.theme.rep,
},
{
mult: "Salary",
value: player.work_money_mult,
effValue: player.work_money_mult * BitNodeMultipliers.CompanyWorkMoney,
color: Settings.theme.money,
},
]} ]}
color={Settings.theme.money} color={Settings.theme.money}
/> />
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Crime success", player.crime_success_mult], {
["Crime money", player.crime_money_mult, player.crime_money_mult * BitNodeMultipliers.CrimeMoney], mult: "Crime Success Chance",
value: player.crime_success_mult,
},
{
mult: "Crime Money",
value: player.crime_money_mult,
effValue: player.crime_money_mult * BitNodeMultipliers.CrimeMoney,
color: Settings.theme.money
},
]} ]}
color={Settings.theme.combat} color={Settings.theme.combat}
/> />
{player.canAccessBladeburner() && ( {player.canAccessBladeburner() && (
<MultiplierTable <MultiplierTable
rows={[ rows={[
["Bladeburner Success Chance", player.bladeburner_success_chance_mult], {
["Bladeburner Max Stamina", player.bladeburner_max_stamina_mult], mult: "Bladeburner Success Chance",
["Bladeburner Stamina Gain", player.bladeburner_stamina_gain_mult], value: player.bladeburner_success_chance_mult,
["Bladeburner Field Analysis", player.bladeburner_analysis_mult], },
{
mult: "Bladeburner Max Stamina",
value: player.bladeburner_max_stamina_mult,
},
{
mult: "Bladeburner Stamina Gain",
value: player.bladeburner_stamina_gain_mult,
},
{
mult: "Bladeburner Field Analysis",
value: player.bladeburner_analysis_mult,
},
]} ]}
color={Settings.theme.primary} color={Settings.theme.primary}
noMargin noMargin