@rpg-engine/long-bow 0.6.44 → 0.6.46

package/dist/long-bow.cjs.development.js

@@ -32129,18 +32129,33 @@ var ProgressBarContainer = /*#__PURE__*/styled__default.div.withConfig({
 var SkillProgressBar = function SkillProgressBar(_ref) {
   var bgColor = _ref.bgColor,
     skillName = _ref.skillName,
-    level = _ref.level,
-    skillPoints = _ref.skillPoints,
-    skillPointsToNextLevel = _ref.skillPointsToNextLevel,
+    initialLevel = _ref.level,
+    initialSkillPoints = _ref.skillPoints,
+    initialSkillPointsToNextLevel = _ref.skillPointsToNextLevel,
     texturePath = _ref.texturePath,
     _ref$showSkillPoints = _ref.showSkillPoints,
     showSkillPoints = _ref$showSkillPoints === void 0 ? true : _ref$showSkillPoints,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
     buffAndDebuff = _ref.buffAndDebuff;
-  if (!skillPointsToNextLevel) {
-    skillPointsToNextLevel = shared.getSPForLevel(level + 1);
-  }
+  var _useState = React.useState(initialLevel),
+    level = _useState[0],
+    setLevel = _useState[1];
+  var _useState2 = React.useState(initialSkillPoints),
+    skillPoints = _useState2[0],
+    setSkillPoints = _useState2[1];
+  var _useState3 = React.useState(initialSkillPointsToNextLevel || shared.getSPForLevel(initialLevel + 1)),
+    skillPointsToNextLevel = _useState3[0],
+    setSkillPointsToNextLevel = _useState3[1];
+  React.useEffect(function () {
+    if (skillPoints >= skillPointsToNextLevel) {
+      var newSkillPoints = skillPoints - skillPointsToNextLevel;
+      var newLevel = level + 1;
+      setLevel(newLevel);
+      setSkillPoints(newSkillPoints);
+      setSkillPointsToNextLevel(shared.getSPForLevel(newLevel + 1));
+    }
+  }, [skillPoints, skillPointsToNextLevel, level]);
   // Calculate the ratio for progress bar, ensuring it doesn't exceed 100%
   var ratio = Math.min(skillPoints / skillPointsToNextLevel * 100, 100);
   var skillsBuffsCalc = function skillsBuffsCalc(level, buffAndDebuff) {