@rpg-engine/long-bow 0.6.45 → 0.6.47

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

@@ -32129,27 +32129,38 @@ 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);
-  }
-  // Calculate the ratio for progress bar, ensuring it doesn't exceed 100% and resets to 0 on level up
-  var ratio = level > 0 ? Math.min(skillPoints / skillPointsToNextLevel * 100, 100) : 0;
+  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 != null ? initialSkillPointsToNextLevel : shared.getSPForLevel(initialLevel + 1)),
+    skillPointsToNextLevel = _useState3[0],
+    setSkillPointsToNextLevel = _useState3[1];
+  React.useEffect(function () {
+    if (skillPoints >= skillPointsToNextLevel) {
+      var excessSkillPoints = skillPoints - skillPointsToNextLevel;
+      var newLevel = level + 1;
+      setLevel(newLevel);
+      setSkillPoints(excessSkillPoints);
+      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) {
     var result = level * (buffAndDebuff / 100);
-    if (result > 0) {
-      return "+" + result.toFixed(2);
-    } else {
-      return "" + result.toFixed(2);
-    }
+    return result > 0 ? "+" + result.toFixed(2) : "" + result.toFixed(2);
   };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React__default.createElement(React__default.Fragment, null, buffAndDebuff > 0 ? React__default.createElement(BuffAndDebuffContainer, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameBuff, null, skillName), React__default.createElement(TitleNameBuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React__default.createElement(TitleNameBuffContainer, null, React__default.createElement(TitleNameBuff, null, "(+", buffAndDebuff, "%)"))) : buffAndDebuff < 0 ? React__default.createElement(React__default.Fragment, null, React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleNameDebuff, null, skillName), React__default.createElement(TitleNameDebuff, null, "lv ", level, " (", skillsBuffsCalc(level, buffAndDebuff), ")")), React__default.createElement("div", null, React__default.createElement(TitleNameDebuff, null, "(", buffAndDebuff, "%)"))) : React__default.createElement(TitleName, null, skillName)), !buffAndDebuff && React__default.createElement(TitleNameContainer, null, React__default.createElement(TitleName, null, skillName), React__default.createElement(ValueDisplay, null, "lv ", level))), React__default.createElement(ProgressBody, null, React__default.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React__default.createElement(SpriteContainer$2, null, React__default.createElement(ErrorBoundary, null, React__default.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,