From 05ed3f546140e5315a63d0ae680f6c466be78399 Mon Sep 17 00:00:00 2001
From: Martin Fournier <martin@mfournier.com>
Date: Sun, 19 Dec 2021 05:45:35 -0500
Subject: [PATCH] Fix skills tooltip edge cases

---
 src/PersonObjects/formulas/skill.ts | 11 +++++++---
 src/ui/React/StatsProgressBar.tsx   | 31 ++++++++++++++++-------------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/PersonObjects/formulas/skill.ts b/src/PersonObjects/formulas/skill.ts
index 86f422ce4..2aa52bff4 100644
--- a/src/PersonObjects/formulas/skill.ts
+++ b/src/PersonObjects/formulas/skill.ts
@@ -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,
diff --git a/src/ui/React/StatsProgressBar.tsx b/src/ui/React/StatsProgressBar.tsx
index 7811a8c30..085d5afca 100644
--- a/src/ui/React/StatsProgressBar.tsx
+++ b/src/ui/React/StatsProgressBar.tsx
@@ -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>