@rpg-engine/long-bow 0.6.45 → 0.6.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.45",
+  "version": "0.6.46",
   "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 from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../constants/uiColors';
 import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
@@ -22,22 +22,33 @@ export interface ISkillProgressBarProps {
 export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   bgColor,
   skillName,
-  level,
-  skillPoints,
-  skillPointsToNextLevel,
+  level: initialLevel,
+  skillPoints: initialSkillPoints,
+  skillPointsToNextLevel: initialSkillPointsToNextLevel,
   texturePath,
   showSkillPoints = true,
   atlasIMG,
   atlasJSON,
   buffAndDebuff,
 }) => {
-  if (!skillPointsToNextLevel) {
-    skillPointsToNextLevel = getSPForLevel(level + 1);
-  }
+  const [level, setLevel] = useState(initialLevel);
+  const [skillPoints, setSkillPoints] = useState(initialSkillPoints);
+  const [skillPointsToNextLevel, setSkillPointsToNextLevel] = useState(
+    initialSkillPointsToNextLevel || getSPForLevel(initialLevel + 1)
+  );
+
+  useEffect(() => {
+    if (skillPoints >= skillPointsToNextLevel) {
+      const newSkillPoints = skillPoints - skillPointsToNextLevel;
+      const newLevel = level + 1;
+      setLevel(newLevel);
+      setSkillPoints(newSkillPoints);
+      setSkillPointsToNextLevel(getSPForLevel(newLevel + 1));
+    }
+  }, [skillPoints, skillPointsToNextLevel, level]);
 
-  // Calculate the ratio for progress bar, ensuring it doesn't exceed 100% and resets to 0 on level up
-  const ratio =
-    level > 0 ? Math.min((skillPoints / skillPointsToNextLevel) * 100, 100) : 0;
+  // Calculate the ratio for progress bar, ensuring it doesn't exceed 100%
+  const ratio = Math.min((skillPoints / skillPointsToNextLevel) * 100, 100);
 
   const skillsBuffsCalc = (level: number, buffAndDebuff: number): string => {
     const result = level * (buffAndDebuff / 100);