mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-11-14 11:43:50 +01:00
Implement common stats row element
This commit is contained in:
parent
07a61c38a4
commit
230d68aab2
@ -3,7 +3,6 @@
|
|||||||
*/
|
*/
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { useGang } from "./Context";
|
import { useGang } from "./Context";
|
||||||
import { generateTableRow } from "./GangMemberStats";
|
|
||||||
|
|
||||||
import Typography from "@mui/material/Typography";
|
import Typography from "@mui/material/Typography";
|
||||||
import Button from "@mui/material/Button";
|
import Button from "@mui/material/Button";
|
||||||
@ -22,7 +21,7 @@ import { GangMember } from "../GangMember";
|
|||||||
import { UpgradeType } from "../data/upgrades";
|
import { UpgradeType } from "../data/upgrades";
|
||||||
import { use } from "../../ui/Context";
|
import { use } from "../../ui/Context";
|
||||||
import { Settings } from "../../Settings/Settings";
|
import { Settings } from "../../Settings/Settings";
|
||||||
import { characterOverviewStyles as useStyles } from "../../ui/React/CharacterOverview";
|
import { StatsRow } from "../../ui/React/StatsRow";
|
||||||
|
|
||||||
interface INextRevealProps {
|
interface INextRevealProps {
|
||||||
upgrades: string[];
|
upgrades: string[];
|
||||||
@ -91,7 +90,6 @@ 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];
|
||||||
@ -178,12 +176,12 @@ function GangMemberUpgradePanel(props: IPanelProps): React.ReactElement {
|
|||||||
>
|
>
|
||||||
<Table>
|
<Table>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{generateTableRow("Hacking", props.member.hack, props.member.hack_exp, Settings.theme.hack, classes)}
|
<StatsRow name="Hacking" color={Settings.theme.hack} data={{ level: props.member.hack, exp: props.member.hack_exp }} />
|
||||||
{generateTableRow("Strength", props.member.str, props.member.str_exp, Settings.theme.combat, classes)}
|
<StatsRow name="Strength" color={Settings.theme.combat} data={{ level: props.member.str, exp: props.member.str_exp }} />
|
||||||
{generateTableRow("Defense", props.member.def, props.member.def_exp, Settings.theme.combat, classes)}
|
<StatsRow name="Defense" color={Settings.theme.combat} data={{ level: props.member.def, exp: props.member.def_exp }} />
|
||||||
{generateTableRow("Dexterity", props.member.dex, props.member.dex_exp, Settings.theme.combat, classes)}
|
<StatsRow name="Dexterity" color={Settings.theme.combat} data={{ level: props.member.dex, exp: props.member.dex_exp }} />
|
||||||
{generateTableRow("Agility", props.member.agi, props.member.agi_exp, Settings.theme.combat, classes)}
|
<StatsRow name="Agility" color={Settings.theme.combat} data={{ level: props.member.agi, exp: props.member.agi_exp }} />
|
||||||
{generateTableRow("Charisma", props.member.cha, props.member.cha_exp, Settings.theme.cha, classes)}
|
<StatsRow name="Charisma" color={Settings.theme.cha} data={{ level: props.member.cha, exp: props.member.cha_exp }} />
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
|
@ -17,36 +17,14 @@ import {
|
|||||||
import { numeralWrapper } from "../../ui/numeralFormat";
|
import { numeralWrapper } from "../../ui/numeralFormat";
|
||||||
import { GangMember } from "../GangMember";
|
import { GangMember } from "../GangMember";
|
||||||
import { Settings } from "../../Settings/Settings";
|
import { Settings } from "../../Settings/Settings";
|
||||||
import { formatNumber } from "../../utils/StringHelperFunctions";
|
|
||||||
import { MoneyRate } from "../../ui/React/MoneyRate";
|
import { MoneyRate } from "../../ui/React/MoneyRate";
|
||||||
|
import { StatsRow } from "../../ui/React/StatsRow";
|
||||||
import { characterOverviewStyles as useStyles } from "../../ui/React/CharacterOverview";
|
import { characterOverviewStyles as useStyles } from "../../ui/React/CharacterOverview";
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
member: GangMember;
|
member: GangMember;
|
||||||
}
|
}
|
||||||
|
|
||||||
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 classes = useStyles();
|
const classes = useStyles();
|
||||||
|
|
||||||
@ -102,12 +80,12 @@ export function GangMemberStats(props: IProps): React.ReactElement {
|
|||||||
>
|
>
|
||||||
<Table sx={{ display: 'table', mb: 1, width: '100%' }}>
|
<Table sx={{ display: 'table', mb: 1, width: '100%' }}>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
{generateTableRow("Hacking", props.member.hack, props.member.hack_exp, Settings.theme.hack, classes)}
|
<StatsRow name="Hacking" color={Settings.theme.hack} data={{ level: props.member.hack, exp: props.member.hack_exp }} />
|
||||||
{generateTableRow("Strength", props.member.str, props.member.str_exp, Settings.theme.combat, classes)}
|
<StatsRow name="Strength" color={Settings.theme.combat} data={{ level: props.member.str, exp: props.member.str_exp }} />
|
||||||
{generateTableRow("Defense", props.member.def, props.member.def_exp, Settings.theme.combat, classes)}
|
<StatsRow name="Defense" color={Settings.theme.combat} data={{ level: props.member.def, exp: props.member.def_exp }} />
|
||||||
{generateTableRow("Dexterity", props.member.dex, props.member.dex_exp, Settings.theme.combat, classes)}
|
<StatsRow name="Dexterity" color={Settings.theme.combat} data={{ level: props.member.dex, exp: props.member.dex_exp }} />
|
||||||
{generateTableRow("Agility", props.member.agi, props.member.agi_exp, Settings.theme.combat, classes)}
|
<StatsRow name="Agility" color={Settings.theme.combat} data={{ level: props.member.agi, exp: props.member.agi_exp }} />
|
||||||
{generateTableRow("Charisma", props.member.cha, props.member.cha_exp, Settings.theme.cha, classes)}
|
<StatsRow name="Charisma" color={Settings.theme.cha} data={{ level: props.member.cha, exp: props.member.cha_exp }} />
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell classes={{ root: classes.cellNone }}>
|
<TableCell classes={{ root: classes.cellNone }}>
|
||||||
<br />
|
<br />
|
||||||
|
@ -10,7 +10,7 @@ import {
|
|||||||
|
|
||||||
import { numeralWrapper } from "../../../ui/numeralFormat";
|
import { numeralWrapper } from "../../../ui/numeralFormat";
|
||||||
import { Settings } from "../../../Settings/Settings";
|
import { Settings } from "../../../Settings/Settings";
|
||||||
import { formatNumber } from "../../../utils/StringHelperFunctions";
|
import { StatsRow } from "../../../ui/React/StatsRow";
|
||||||
import { characterOverviewStyles as useStyles } from "../../../ui/React/CharacterOverview";
|
import { characterOverviewStyles as useStyles } from "../../../ui/React/CharacterOverview";
|
||||||
import { Money } from "../../../ui/React/Money";
|
import { Money } from "../../../ui/React/Money";
|
||||||
import { MoneyRate } from "../../../ui/React/MoneyRate";
|
import { MoneyRate } from "../../../ui/React/MoneyRate";
|
||||||
@ -20,44 +20,6 @@ import { use } from "../../../ui/Context";
|
|||||||
import { Sleeve } from "../Sleeve";
|
import { Sleeve } from "../Sleeve";
|
||||||
import { SleeveTaskType } from "../SleeveTaskTypesEnum";
|
import { SleeveTaskType } from "../SleeveTaskTypesEnum";
|
||||||
|
|
||||||
interface ITableRowData {
|
|
||||||
content?: string;
|
|
||||||
level?: number;
|
|
||||||
exp?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IStatsRowProps {
|
|
||||||
name: string;
|
|
||||||
color: string;
|
|
||||||
classes: any;
|
|
||||||
data: ITableRowData;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const SleeveStatsRow = ({ name, color, classes, data }: IStatsRowProps): React.ReactElement => {
|
|
||||||
let content;
|
|
||||||
|
|
||||||
if (data.content !== undefined) {
|
|
||||||
content = data.content;
|
|
||||||
} else if (data.level !== undefined && data.exp !== undefined) {
|
|
||||||
content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
|
|
||||||
} else if (data.level !== undefined && data.exp === undefined) {
|
|
||||||
content = `${formatNumber(data.level, 0)}`;
|
|
||||||
}
|
|
||||||
|
|
||||||
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 }}>
|
|
||||||
{content}
|
|
||||||
</Typography>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
interface IProps {
|
interface IProps {
|
||||||
sleeve: Sleeve;
|
sleeve: Sleeve;
|
||||||
}
|
}
|
||||||
@ -68,44 +30,24 @@ export function StatsElement(props: IProps): React.ReactElement {
|
|||||||
return (
|
return (
|
||||||
<Table sx={{ display: 'table', mb: 1, width: '100%' }}>
|
<Table sx={{ display: 'table', mb: 1, width: '100%' }}>
|
||||||
<TableBody>
|
<TableBody>
|
||||||
<SleeveStatsRow name="City" color={Settings.theme.primary} classes={classes}
|
<StatsRow name="City" color={Settings.theme.primary} data={{ content: props.sleeve.city }} />
|
||||||
data={{ content: props.sleeve.city }}
|
<StatsRow name="HP" color={Settings.theme.hp}
|
||||||
/>
|
|
||||||
<SleeveStatsRow name="HP" color={Settings.theme.hp} classes={classes}
|
|
||||||
data={{ content: `${numeralWrapper.formatHp(props.sleeve.hp)} / ${numeralWrapper.formatHp(props.sleeve.max_hp)}` }}
|
data={{ content: `${numeralWrapper.formatHp(props.sleeve.hp)} / ${numeralWrapper.formatHp(props.sleeve.max_hp)}` }}
|
||||||
/>
|
/>
|
||||||
<SleeveStatsRow name="Hacking" color={Settings.theme.hack} classes={classes}
|
<StatsRow name="Hacking" color={Settings.theme.hack} data={{ level: props.sleeve.hacking, exp: props.sleeve.hacking_exp }} />
|
||||||
data={{ level: props.sleeve.hacking, exp: props.sleeve.hacking_exp }}
|
<StatsRow name="Strength" color={Settings.theme.combat} data={{ level: props.sleeve.strength, exp: props.sleeve.strength_exp }} />
|
||||||
/>
|
<StatsRow name="Defense" color={Settings.theme.combat} data={{ level: props.sleeve.defense, exp: props.sleeve.defense_exp }} />
|
||||||
<SleeveStatsRow name="Strength" color={Settings.theme.combat} classes={classes}
|
<StatsRow name="Dexterity" color={Settings.theme.combat} data={{ level: props.sleeve.dexterity, exp: props.sleeve.dexterity_exp }} />
|
||||||
data={{ level: props.sleeve.strength, exp: props.sleeve.strength_exp }}
|
<StatsRow name="Agility" color={Settings.theme.combat} data={{ level: props.sleeve.agility, exp: props.sleeve.agility_exp }} />
|
||||||
/>
|
<StatsRow name="Charisma" color={Settings.theme.cha} data={{ level: props.sleeve.charisma, exp: props.sleeve.charisma_exp }} />
|
||||||
<SleeveStatsRow name="Defense" color={Settings.theme.combat} classes={classes}
|
|
||||||
data={{ level: props.sleeve.defense, exp: props.sleeve.defense_exp }}
|
|
||||||
/>
|
|
||||||
<SleeveStatsRow name="Dexterity" color={Settings.theme.combat} classes={classes}
|
|
||||||
data={{ level: props.sleeve.dexterity, exp: props.sleeve.dexterity_exp }}
|
|
||||||
/>
|
|
||||||
<SleeveStatsRow name="Agility" color={Settings.theme.combat} classes={classes}
|
|
||||||
data={{ level: props.sleeve.agility, exp: props.sleeve.agility_exp }}
|
|
||||||
/>
|
|
||||||
<SleeveStatsRow name="Charisma" color={Settings.theme.cha} classes={classes}
|
|
||||||
data={{ level: props.sleeve.charisma, exp: props.sleeve.charisma_exp }}
|
|
||||||
/>
|
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell classes={{ root: classes.cellNone }}>
|
<TableCell classes={{ root: classes.cellNone }}>
|
||||||
<br />
|
<br />
|
||||||
</TableCell>
|
</TableCell>
|
||||||
</TableRow>
|
</TableRow>
|
||||||
<SleeveStatsRow name="Shock" color={Settings.theme.primary} classes={classes}
|
<StatsRow name="Shock" color={Settings.theme.primary} data={{ content: numeralWrapper.formatSleeveShock(100 - props.sleeve.shock) }} />
|
||||||
data={{ content: numeralWrapper.formatSleeveShock(100 - props.sleeve.shock) }}
|
<StatsRow name="Sync" color={Settings.theme.primary} data={{ content: numeralWrapper.formatSleeveSynchro(props.sleeve.sync) }} />
|
||||||
/>
|
<StatsRow name="Memory" color={Settings.theme.primary} data={{ content: numeralWrapper.formatSleeveMemory(props.sleeve.memory) }} />
|
||||||
<SleeveStatsRow name="Sync" color={Settings.theme.primary} classes={classes}
|
|
||||||
data={{ content: numeralWrapper.formatSleeveSynchro(props.sleeve.sync) }}
|
|
||||||
/>
|
|
||||||
<SleeveStatsRow name="Memory" color={Settings.theme.primary} classes={classes}
|
|
||||||
data={{ content: numeralWrapper.formatSleeveMemory(props.sleeve.memory) }}
|
|
||||||
/>
|
|
||||||
</TableBody>
|
</TableBody>
|
||||||
</Table>
|
</Table>
|
||||||
)
|
)
|
||||||
|
49
src/ui/React/StatsRow.tsx
Normal file
49
src/ui/React/StatsRow.tsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Typography,
|
||||||
|
TableCell,
|
||||||
|
TableRow,
|
||||||
|
} from "@mui/material";
|
||||||
|
|
||||||
|
import { numeralWrapper } from "../numeralFormat";
|
||||||
|
import { formatNumber } from "../../utils/StringHelperFunctions";
|
||||||
|
import { characterOverviewStyles as useStyles } from "./CharacterOverview";
|
||||||
|
|
||||||
|
interface ITableRowData {
|
||||||
|
content?: string;
|
||||||
|
level?: number;
|
||||||
|
exp?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
name: string;
|
||||||
|
color: string;
|
||||||
|
classes?: any;
|
||||||
|
data: ITableRowData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StatsRow = ({ name, color, classes = useStyles(), data }: IProps): React.ReactElement => {
|
||||||
|
let content;
|
||||||
|
|
||||||
|
if (data.content !== undefined) {
|
||||||
|
content = data.content;
|
||||||
|
} else if (data.level !== undefined && data.exp !== undefined) {
|
||||||
|
content = `${formatNumber(data.level, 0)} (${numeralWrapper.formatExp(data.exp)} exp)`;
|
||||||
|
} else if (data.level !== undefined && data.exp === undefined) {
|
||||||
|
content = `${formatNumber(data.level, 0)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 }}>
|
||||||
|
{content}
|
||||||
|
</Typography>
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user