@rpg-engine/long-bow 0.6.50 → 0.6.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.50",
+  "version": "0.6.51",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/SkillProgressBar.tsx

@@ -23,26 +23,36 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   bgColor,
   skillName,
   level,
-  skillPoints,
-  skillPointsToNextLevel,
+  skillPoints: currentSkillPoints,
+
   texturePath,
   showSkillPoints = true,
   atlasIMG,
   atlasJSON,
   buffAndDebuff,
 }) => {
-  if (!skillPointsToNextLevel) {
-    skillPointsToNextLevel = getSPForLevel(level + 1);
-  }
-
-  const baseSkillPoints = getSPForLevel(level);
-
-  const excessSkillPoints = skillPoints - baseSkillPoints;
-
-  const ratio = Math.min(
-    (excessSkillPoints / skillPointsToNextLevel) * 100,
-    100
-  );
+  // Base skill points for the previous level (0 for level 1)
+  const baseSkillPointsPrevLevel = level > 1 ? getSPForLevel(level - 1) : 0;
+
+  // Total skill points needed for the next level
+  const nextLevelSkillPoints = getSPForLevel(level + 1);
+
+  // Calculate excess skill points above the previous level
+  const excessSkillPoints = currentSkillPoints - baseSkillPointsPrevLevel;
+
+  // Calculate progress percentage towards the next level
+  const progress =
+    nextLevelSkillPoints > baseSkillPointsPrevLevel
+      ? Math.max(
+          Math.min(
+            (excessSkillPoints /
+              (nextLevelSkillPoints - baseSkillPointsPrevLevel)) *
+              100,
+            100
+          ),
+          0
+        )
+      : 0;
 
   const skillsBuffsCalc = (level: number, buffAndDebuff: number): string => {
     const result = level * (buffAndDebuff / 100);
@@ -117,14 +127,12 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
         </ProgressIconContainer>
 
         <ProgressBarContainer>
-          <SimpleProgressBar value={ratio} bgColor={bgColor} />
+          <SimpleProgressBar value={progress} bgColor={bgColor} />
         </ProgressBarContainer>
       </ProgressBody>
       {showSkillPoints && (
         <SkillDisplayContainer>
-          <SkillPointsDisplay>
-            {ratio.toFixed(2)}% ({skillPoints} SP)
-          </SkillPointsDisplay>
+          <SkillPointsDisplay>{progress.toFixed(2)}%</SkillPointsDisplay>
         </SkillDisplayContainer>
       )}
     </>