Fix #2021: Handle sleeves xp in stats overview

src/PersonObjects/formulas/skill.ts

@@ -17,6 +17,17 @@ export function calculateSkillProgress(exp: number, mult = 1): ISkillProgress {
   if (nextExperience < 0) nextExperience = 0;
 
   const normalize = (value: number): number => ((value - baseExperience) * 100) / (nextExperience - baseExperience);
+  let progress = (nextExperience - baseExperience !== 0) ? normalize(exp) : 99.99;
+
+  // Clamp progress: When sleeves are working out, the player gets way too much progress
+  if (progress < 0) progress = 0
+  if (progress > 100) progress = 100;
+
+  // Clamp floating point imprecisions
+  let currentExperience = exp - baseExperience;
+  let remainingExperience = nextExperience - exp;
+  if (currentExperience < 0) currentExperience = 0;
+  if (remainingExperience < 0) remainingExperience = 0;
 
   return {
     currentSkill,
@@ -24,7 +35,9 @@ export function calculateSkillProgress(exp: number, mult = 1): ISkillProgress {
     baseExperience,
     experience: exp,
     nextExperience,
-    progress: (nextExperience - baseExperience !== 0) ? normalize(exp) : 99.99
+    currentExperience,
+    remainingExperience,
+    progress
   }
 }
 
@@ -34,6 +47,8 @@ export interface ISkillProgress {
   baseExperience: number;
   experience: number;
   nextExperience: number;
+  currentExperience: number;
+  remainingExperience: number;
   progress: number;
 }
 
@@ -41,6 +56,7 @@ export function getEmptySkillProgress(): ISkillProgress {
   return {
     currentSkill: 0, nextSkill: 0,
     baseExperience: 0, experience: 0, nextExperience: 0,
+    currentExperience: 0, remainingExperience: 0,
     progress: 0,
   };
 }

src/ui/React/StatsProgressBar.tsx

@@ -9,6 +9,7 @@ interface IProgressProps {
   min: number;
   max: number;
   current: number;
+  remaining: number;
   progress: number;
   color?: React.CSSProperties["color"];
 }
@@ -18,14 +19,14 @@ interface IStatsOverviewCellProps {
   color?: React.CSSProperties["color"];
 }
 
-export function StatsProgressBar({ min, max, current, progress, color }: IProgressProps): React.ReactElement {
+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 - min)} / {numeralWrapper.formatExp(max - min)}
+      {numeralWrapper.formatExp(current)} / {numeralWrapper.formatExp(max - min)}
       <br />
       <strong>Remaining:</strong>&nbsp;
-      {numeralWrapper.formatExp(max - current)} ({progress.toFixed(2)}%)
+      {numeralWrapper.formatExp(remaining)} ({progress.toFixed(2)}%)
     </Typography>
   );
 
@@ -58,7 +59,8 @@ export function StatsProgressOverviewCell({ progress: skill, color }: IStatsOver
       <StatsProgressBar
         min={skill.baseExperience}
         max={skill.nextExperience}
-        current={skill.experience}
+        current={skill.currentExperience}
+        remaining={skill.remainingExperience}
         progress={skill.progress}
         color={color}
       />