Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-22 14:12:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix skills tooltip edge cases

Browse Source
This commit is contained in:
Martin Fournier 2021-12-19 05:45:35 -05:00
parent efc3992c78
commit 05ed3f5461
2 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/PersonObjects/formulas/skill.ts
View File

@ -9,9 +9,14 @@ export function calculateExp(skill: number, mult = 1): number {
export function calculateSkillProgress(exp: number, mult = 1): ISkillProgress {
const currentSkill = calculateSkill(exp, mult);
const nextSkill = currentSkill + 1;
let baseExperience = calculateExp(currentSkill, mult);
if (baseExperience < 0) baseExperience = 0;
const nextExperience = calculateExp(nextSkill, mult)
let nextExperience = calculateExp(nextSkill, mult)
if (nextExperience < 0) nextExperience = 0;
const normalize = (value: number): number => ((value - baseExperience) * 100) / (nextExperience - baseExperience);
return {
currentSkill,
@ -19,7 +24,7 @@ export function calculateSkillProgress(exp: number, mult = 1): ISkillProgress {
baseExperience,
experience: exp,
nextExperience,
progress: exp / nextExperience,
progress: (nextExperience - baseExperience !== 0) ? normalize(exp) : 99.99
}
}
@ -32,7 +37,7 @@ export interface ISkillProgress {
progress: number;
}
export function getEmptySkillProgress() {
export function getEmptySkillProgress(): ISkillProgress {
return {
currentSkill: 0, nextSkill: 0,
baseExperience: 0, experience: 0, nextExperience: 0,

31
src/ui/React/StatsProgressBar.tsx
View File

@ -1,6 +1,6 @@
import * as React from "react";
import LinearProgress from "@mui/material/LinearProgress";
import { TableCell, Tooltip } from "@mui/material";
import { TableCell, Tooltip, Typography } from "@mui/material";
import { characterOverviewStyles } from "./CharacterOverview";
import { ISkillProgress } from "src/PersonObjects/formulas/skill";
import { numeralWrapper } from "../numeralFormat";
@ -9,6 +9,7 @@ interface IProgressProps {
min: number;
max: number;
current: number;
progress: number;
color?: React.CSSProperties["color"];
}
@ -17,21 +18,22 @@ interface IStatsOverviewCellProps {
color?: React.CSSProperties["color"];
}
export function StatsProgressBar({ min, max, current, color }: IProgressProps): React.ReactElement {
const normalise = (value: number): number => ((value - min) * 100) / (max - min);
const tooltipText = (
<>
Experience: {numeralWrapper.formatExp(current)}/{numeralWrapper.formatExp(max)}
export function StatsProgressBar({ min, max, current, progress, color }: IProgressProps): React.ReactElement {
const tooltip = (
<Typography sx={{ textAlign: 'right' }}>
<strong>Progress:</strong>&nbsp;
{numeralWrapper.formatExp(current - min)} / {numeralWrapper.formatExp(max - min)}
<br />
{normalise(current).toFixed(2)}%
</>
<strong>Remaining:</strong>&nbsp;
{numeralWrapper.formatExp(max - current)} ({progress.toFixed(2)}%)
</Typography>
);
return (
<Tooltip title={tooltipText}>
<Tooltip title={tooltip}>
<LinearProgress
variant="determinate"
value={normalise(current)}
value={progress}
sx={{
backgroundColor: "#111111",
"& .MuiLinearProgress-bar1Determinate": {
@ -43,7 +45,7 @@ export function StatsProgressBar({ min, max, current, color }: IProgressProps):
);
}
export function StatsProgressOverviewCell({ progress, color }: IStatsOverviewCellProps): React.ReactElement {
export function StatsProgressOverviewCell({ progress: skill, color }: IStatsOverviewCellProps): React.ReactElement {
const classes = characterOverviewStyles();
return (
<TableCell
@ -54,9 +56,10 @@ export function StatsProgressOverviewCell({ progress, color }: IStatsOverviewCel
style={{ paddingBottom: "2px", position: "relative", top: "-3px" }}
>
<StatsProgressBar
min={progress.baseExperience}
max={progress.nextExperience}
current={progress.experience}
min={skill.baseExperience}
max={skill.nextExperience}
current={skill.experience}
progress={skill.progress}
color={color}
/>
</TableCell>