@rpg-engine/long-bow 0.6.49 → 0.6.51

package/package.json

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

package/src/components/SkillProgressBar.tsx

@@ -1,5 +1,5 @@
 import { getSPForLevel } from '@rpg-engine/shared';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../constants/uiColors';
 import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
@@ -22,46 +22,46 @@ export interface ISkillProgressBarProps {
 export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   bgColor,
   skillName,
-  level: initialLevel,
-  skillPoints: initialSkillPoints,
-  skillPointsToNextLevel: initialSkillPointsToNextLevel,
+  level,
+  skillPoints: currentSkillPoints,
+
   texturePath,
   showSkillPoints = true,
   atlasIMG,
   atlasJSON,
   buffAndDebuff,
 }) => {
-  const [level, setLevel] = useState(initialLevel);
-  const [skillPoints, setSkillPoints] = useState(initialSkillPoints);
-  const [skillPointsToNextLevel, setSkillPointsToNextLevel] = useState(
-    initialSkillPointsToNextLevel || getSPForLevel(initialLevel + 1)
-  );
-
-  // Update skill points and level from props when they change
-  useEffect(() => {
-    setLevel(initialLevel);
-    setSkillPoints(initialSkillPoints);
-    setSkillPointsToNextLevel(
-      initialSkillPointsToNextLevel || getSPForLevel(initialLevel + 1)
-    );
-  }, [initialLevel, initialSkillPoints, initialSkillPointsToNextLevel]);
-
-  useEffect(() => {
-    if (skillPoints >= skillPointsToNextLevel) {
-      const excessSkillPoints = skillPoints - skillPointsToNextLevel;
-      const newLevel = level + 1;
-      setLevel(newLevel);
-      setSkillPoints(excessSkillPoints);
-      setSkillPointsToNextLevel(getSPForLevel(newLevel + 1));
-    }
-  }, [skillPoints, skillPointsToNextLevel, level]);
-
-  // Calculate the ratio, ensuring it doesn't exceed 100%
-  const ratio = Math.min((skillPoints / 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);
-    return result > 0 ? `+${result}` : `${result}`;
+
+    if (result > 0) {
+      return `+${result.toFixed(2)}`;
+    } else {
+      return `${result.toFixed(2)}`;
+    }
   };
 
   return (
@@ -127,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>
-            {skillPoints} / {skillPointsToNextLevel} ({ratio.toFixed(2)}%)
-          </SkillPointsDisplay>
+          <SkillPointsDisplay>{progress.toFixed(2)}%</SkillPointsDisplay>
         </SkillDisplayContainer>
       )}
     </>

package/src/mocks/skills.mocks.ts

@@ -1,18 +1,22 @@
 import { ISkill, SkillType, getSPForLevel } from '@rpg-engine/shared';
 
+for (let level = 2; level <= 10; level++) {
+  console.log(`SP for level ${level}: ${getSPForLevel(level)}`);
+}
+
 export const skillMock = {
   _id: '62aebda8785a9f0089a4f757',
   stamina: {
     type: SkillType.BasicAttributes,
-    level: 2,
-    skillPoints: 50.03,
+    level: 1,
+    skillPoints: 5,
     skillPointsToNextLevel: getSPForLevel(2),
   },
   magic: {
     type: SkillType.BasicAttributes,
-    level: 2,
-    skillPoints: 22,
-    skillPointsToNextLevel: getSPForLevel(2.4),
+    level: 1,
+    skillPoints: 12,
+    skillPointsToNextLevel: getSPForLevel(2),
     buffAndDebuff: -10,
   },
   magicResistance: {