2021-12-18 22:26:50 +01:00
|
|
|
import * as React from "react";
|
|
|
|
import LinearProgress from "@mui/material/LinearProgress";
|
|
|
|
import { TableCell, Tooltip } from "@mui/material";
|
|
|
|
import { characterOverviewStyles } from "./CharacterOverview";
|
|
|
|
import { ISkillProgress } from "src/PersonObjects/formulas/skill";
|
|
|
|
import { numeralWrapper } from "../numeralFormat";
|
2021-12-17 15:35:54 +01:00
|
|
|
|
|
|
|
interface IProgressProps {
|
|
|
|
min: number;
|
|
|
|
max: number;
|
|
|
|
current: number;
|
|
|
|
color?: React.CSSProperties["color"];
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IStatsOverviewCellProps {
|
|
|
|
progress: ISkillProgress;
|
|
|
|
color?: React.CSSProperties["color"];
|
|
|
|
}
|
|
|
|
|
|
|
|
export function StatsProgressBar({ min, max, current, color }: IProgressProps): React.ReactElement {
|
|
|
|
const normalise = (value: number): number => ((value - min) * 100) / (max - min);
|
2021-12-18 22:26:50 +01:00
|
|
|
const tooltipText = (
|
|
|
|
<>
|
|
|
|
Experience: {numeralWrapper.formatExp(current)}/{numeralWrapper.formatExp(max)}
|
|
|
|
<br />
|
|
|
|
{normalise(current).toFixed(2)}%
|
|
|
|
</>
|
|
|
|
);
|
2021-12-17 15:35:54 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Tooltip title={tooltipText}>
|
|
|
|
<LinearProgress
|
|
|
|
variant="determinate"
|
|
|
|
value={normalise(current)}
|
|
|
|
sx={{
|
2021-12-18 22:26:50 +01:00
|
|
|
backgroundColor: "#111111",
|
|
|
|
"& .MuiLinearProgress-bar1Determinate": {
|
2021-12-17 15:35:54 +01:00
|
|
|
backgroundColor: color,
|
|
|
|
},
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</Tooltip>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-12-18 22:26:50 +01:00
|
|
|
export function StatsProgressOverviewCell({ progress, color }: IStatsOverviewCellProps): React.ReactElement {
|
2021-12-17 15:35:54 +01:00
|
|
|
const classes = characterOverviewStyles();
|
|
|
|
return (
|
2021-12-18 22:26:50 +01:00
|
|
|
<TableCell
|
|
|
|
component="th"
|
|
|
|
scope="row"
|
|
|
|
colSpan={2}
|
2021-12-17 15:35:54 +01:00
|
|
|
classes={{ root: classes.cellNone }}
|
2021-12-18 22:26:50 +01:00
|
|
|
style={{ paddingBottom: "2px", position: "relative", top: "-3px" }}
|
|
|
|
>
|
2021-12-17 15:35:54 +01:00
|
|
|
<StatsProgressBar
|
|
|
|
min={progress.baseExperience}
|
|
|
|
max={progress.nextExperience}
|
|
|
|
current={progress.experience}
|
|
|
|
color={color}
|
|
|
|
/>
|
|
|
|
</TableCell>
|
2021-12-18 22:26:50 +01:00
|
|
|
);
|
2021-12-17 15:35:54 +01:00
|
|
|
}
|