Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-26 09:33:49 +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 { export function calculateSkillProgress(exp: number, mult = 1): ISkillProgress {
const currentSkill = calculateSkill(exp, mult); const currentSkill = calculateSkill(exp, mult);
const nextSkill = currentSkill + 1; const nextSkill = currentSkill + 1;
let baseExperience = calculateExp(currentSkill, mult); let baseExperience = calculateExp(currentSkill, mult);
if (baseExperience < 0) baseExperience = 0; 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 { return {
currentSkill, currentSkill,
@ -19,7 +24,7 @@ export function calculateSkillProgress(exp: number, mult = 1): ISkillProgress {
baseExperience, baseExperience,
experience: exp, experience: exp,
nextExperience, nextExperience,
progress: exp / nextExperience, progress: (nextExperience - baseExperience !== 0) ? normalize(exp) : 99.99
} }
} }
@ -32,7 +37,7 @@ export interface ISkillProgress {
progress: number; progress: number;
} }
export function getEmptySkillProgress() { export function getEmptySkillProgress(): ISkillProgress {
return { return {
currentSkill: 0, nextSkill: 0, currentSkill: 0, nextSkill: 0,
baseExperience: 0, experience: 0, nextExperience: 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 * as React from "react";
import LinearProgress from "@mui/material/LinearProgress"; import LinearProgress from "@mui/material/LinearProgress";
import { TableCell, Tooltip } from "@mui/material"; import { TableCell, Tooltip, Typography } from "@mui/material";
import { characterOverviewStyles } from "./CharacterOverview"; import { characterOverviewStyles } from "./CharacterOverview";
import { ISkillProgress } from "src/PersonObjects/formulas/skill"; import { ISkillProgress } from "src/PersonObjects/formulas/skill";
import { numeralWrapper } from "../numeralFormat"; import { numeralWrapper } from "../numeralFormat";
@ -9,6 +9,7 @@ interface IProgressProps {
min: number; min: number;
max: number; max: number;
current: number; current: number;
progress: number;
color?: React.CSSProperties["color"]; color?: React.CSSProperties["color"];
} }
@ -17,21 +18,22 @@ interface IStatsOverviewCellProps {
color?: React.CSSProperties["color"]; color?: React.CSSProperties["color"];
} }
export function StatsProgressBar({ min, max, current, color }: IProgressProps): React.ReactElement { export function StatsProgressBar({ min, max, current, progress, color }: IProgressProps): React.ReactElement {
const normalise = (value: number): number => ((value - min) * 100) / (max - min); const tooltip = (
const tooltipText = ( <Typography sx={{ textAlign: 'right' }}>
<> <strong>Progress:</strong>&nbsp;
Experience: {numeralWrapper.formatExp(current)}/{numeralWrapper.formatExp(max)} {numeralWrapper.formatExp(current - min)} / {numeralWrapper.formatExp(max - min)}
<br /> <br />
{normalise(current).toFixed(2)}% <strong>Remaining:</strong>&nbsp;
</> {numeralWrapper.formatExp(max - current)} ({progress.toFixed(2)}%)
</Typography>
); );
return ( return (
<Tooltip title={tooltipText}> <Tooltip title={tooltip}>
<LinearProgress <LinearProgress
variant="determinate" variant="determinate"
value={normalise(current)} value={progress}
sx={{ sx={{
backgroundColor: "#111111", backgroundColor: "#111111",
"& .MuiLinearProgress-bar1Determinate": { "& .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(); const classes = characterOverviewStyles();
return ( return (
<TableCell <TableCell
@ -54,9 +56,10 @@ export function StatsProgressOverviewCell({ progress, color }: IStatsOverviewCel
style={{ paddingBottom: "2px", position: "relative", top: "-3px" }} style={{ paddingBottom: "2px", position: "relative", top: "-3px" }}
> >
<StatsProgressBar <StatsProgressBar
min={progress.baseExperience} min={skill.baseExperience}
max={progress.nextExperience} max={skill.nextExperience}
current={progress.experience} current={skill.experience}
progress={skill.progress}
color={color} color={color}
/> />
</TableCell> </TableCell>