bitburner-src/src/ui/React/StatsProgressBar.tsx
2021-12-23 09:11:08 -05:00

70 lines
2.0 KiB
TypeScript

import * as React from "react";
import LinearProgress from "@mui/material/LinearProgress";
import { TableCell, Tooltip, Typography } from "@mui/material";
import { characterOverviewStyles } from "./CharacterOverview";
import { ISkillProgress } from "src/PersonObjects/formulas/skill";
import { numeralWrapper } from "../numeralFormat";
interface IProgressProps {
min: number;
max: number;
current: number;
remaining: number;
progress: number;
color?: React.CSSProperties["color"];
}
interface IStatsOverviewCellProps {
progress: ISkillProgress;
color?: React.CSSProperties["color"];
}
export function StatsProgressBar({ min, max, current, remaining, progress, color }: IProgressProps): React.ReactElement {
const tooltip = (
<Typography sx={{ textAlign: 'right' }}>
<strong>Progress:</strong>&nbsp;
{numeralWrapper.formatExp(current)} / {numeralWrapper.formatExp(max - min)}
<br />
<strong>Remaining:</strong>&nbsp;
{numeralWrapper.formatExp(remaining)} ({progress.toFixed(2)}%)
</Typography>
);
return (
<Tooltip title={tooltip}>
<LinearProgress
variant="determinate"
value={progress}
sx={{
backgroundColor: "#111111",
"& .MuiLinearProgress-bar1Determinate": {
backgroundColor: color,
},
}}
/>
</Tooltip>
);
}
export function StatsProgressOverviewCell({ progress: skill, color }: IStatsOverviewCellProps): React.ReactElement {
const classes = characterOverviewStyles();
return (
<TableCell
component="th"
scope="row"
colSpan={2}
classes={{ root: classes.cellNone }}
style={{ paddingBottom: "2px", position: "relative", top: "-3px" }}
>
<StatsProgressBar
min={skill.baseExperience}
max={skill.nextExperience}
current={skill.currentExperience}
remaining={skill.remainingExperience}
progress={skill.progress}
color={color}
/>
</TableCell>
);
}