@rpg-engine/long-bow 0.6.48 → 0.6.50

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.48",
+  "version": "0.6.50",
   "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,37 +22,36 @@ export interface ISkillProgressBarProps {
 export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   bgColor,
   skillName,
-  level: initialLevel,
-  skillPoints: initialSkillPoints,
-  skillPointsToNextLevel: initialSkillPointsToNextLevel,
+  level,
+  skillPoints,
+  skillPointsToNextLevel,
   texturePath,
   showSkillPoints = true,
   atlasIMG,
   atlasJSON,
   buffAndDebuff,
 }) => {
-  const [level, setLevel] = useState(initialLevel);
-  const [skillPoints, setSkillPoints] = useState(initialSkillPoints);
-  const [skillPointsToNextLevel, setSkillPointsToNextLevel] = useState(
-    initialSkillPointsToNextLevel || getSPForLevel(initialLevel + 1)
-  );
+  if (!skillPointsToNextLevel) {
+    skillPointsToNextLevel = getSPForLevel(level + 1);
+  }
 
-  useEffect(() => {
-    if (skillPoints >= skillPointsToNextLevel) {
-      const excessSkillPoints = skillPoints - skillPointsToNextLevel;
-      const newLevel = level + 1;
-      setLevel(newLevel);
-      setSkillPoints(excessSkillPoints);
-      setSkillPointsToNextLevel(getSPForLevel(newLevel + 1));
-    }
-  }, [skillPoints, skillPointsToNextLevel, level]);
+  const baseSkillPoints = getSPForLevel(level);
 
-  // Calculate the ratio, ensuring it doesn't exceed 100%
-  const ratio = Math.min((skillPoints / skillPointsToNextLevel) * 100, 100);
+  const excessSkillPoints = skillPoints - baseSkillPoints;
+
+  const ratio = Math.min(
+    (excessSkillPoints / skillPointsToNextLevel) * 100,
+    100
+  );
 
   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 (
@@ -124,7 +123,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
       {showSkillPoints && (
         <SkillDisplayContainer>
           <SkillPointsDisplay>
-            {skillPoints} / {skillPointsToNextLevel} ({ratio.toFixed(2)}%)
+            {ratio.toFixed(2)}% ({skillPoints} SP)
           </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: {