@rpg-engine/long-bow 0.8.82 → 0.8.83

package/package.json

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

package/src/components/SkillProgressBar.tsx

@@ -1,10 +1,11 @@
 import {
+  CharacterClass,
+  getLevelFromSP,
   getSPForLevel,
   getSPForLevelExponential,
   getSkillConstants,
-  CharacterClass,
 } from '@rpg-engine/shared';
-import React, { useMemo } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../constants/uiColors';
 import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
@@ -34,7 +35,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   characterClass,
   level,
   skillPoints: currentSkillPoints,
-  skillPointsToNextLevel,
+
   texturePath,
   showSkillPoints = true,
   atlasIMG,
@@ -42,26 +43,44 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
 
   buffAndDebuff,
 }) => {
-  // Skill points needed to start the current level
-  const baseSkillPoints = useMemo(() => {
-    if (skillKey && characterClass) {
-      const { A, b, c } = getSkillConstants(skillKey, characterClass);
-      return getSPForLevelExponential(level, A, b, c);
+  // Use CharacterClass.None as default if skillKey is provided but characterClass is not
+  const effectiveClass = characterClass ?? CharacterClass.None;
+
+  // Calculate the effective level based on actual SP (handles data inconsistencies)
+  const calculateEffectiveLevel = (): number => {
+    if (!skillKey) {
+      return level; // Fallback to stored level for general "Level" display
     }
-    // Fallback to old formula for backwards compatibility
-    return getSPForLevel(level);
-  }, [level, skillKey, characterClass]);
+
+    const { A, b, c } = getSkillConstants(skillKey, effectiveClass);
+    const actualLevel = Math.floor(getLevelFromSP(currentSkillPoints, A, b, c));
+    return Math.max(c, actualLevel); // At least starting level
+  };
+
+  const effectiveLevel = calculateEffectiveLevel();
+
+  // Calculate progress based on actual SP position
   const calculateProgress = (): number => {
-    const totalPointsForLevelUp = Math.max(
-      1,
-      skillPointsToNextLevel - baseSkillPoints
-    );
-    const excessSkillPoints = Math.max(0, currentSkillPoints - baseSkillPoints);
-
-    return Math.min(
-      100,
-      Math.max(0, (excessSkillPoints / totalPointsForLevelUp) * 100)
-    );
+    if (!skillKey) {
+      // Fallback for general "Level" display: simple ratio of current SP to next level
+      const spForCurrentLevel = getSPForLevel(level);
+      const spForNextLevel = getSPForLevel(level + 1);
+      const range = spForNextLevel - spForCurrentLevel;
+      const progress = currentSkillPoints - spForCurrentLevel;
+      return Math.min(100, Math.max(0, (progress / range) * 100));
+    }
+
+    const { A, b, c } = getSkillConstants(skillKey, effectiveClass);
+
+    // Calculate SP thresholds for current effective level
+    const spForEffectiveLevel = getSPForLevelExponential(effectiveLevel, A, b, c);
+    const spForNextLevel = getSPForLevelExponential(effectiveLevel + 1, A, b, c);
+
+    // Progress within current effective level
+    const range = spForNextLevel - spForEffectiveLevel;
+    const progressInLevel = currentSkillPoints - spForEffectiveLevel;
+
+    return Math.min(100, Math.max(0, (progressInLevel / Math.max(1, range)) * 100));
   };
 
   const progress = calculateProgress();
@@ -85,7 +104,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
                 <TitleNameContainer>
                   <TitleNameBuff>{skillName}</TitleNameBuff>
                   <TitleNameBuff>
-                    lv {level} ({skillsBuffsCalc(level, buffAndDebuff)})
+                    lv {effectiveLevel} ({skillsBuffsCalc(effectiveLevel, buffAndDebuff)})
                   </TitleNameBuff>
                 </TitleNameContainer>
                 <TitleNameBuffContainer>
@@ -99,7 +118,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
                 <TitleNameContainer>
                   <TitleNameDebuff>{skillName}</TitleNameDebuff>
                   <TitleNameDebuff>
-                    lv {level} ({skillsBuffsCalc(level, buffAndDebuff)})
+                    lv {effectiveLevel} ({skillsBuffsCalc(effectiveLevel, buffAndDebuff)})
                   </TitleNameDebuff>
                 </TitleNameContainer>
                 <div>
@@ -116,7 +135,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
         {!buffAndDebuff && (
           <TitleNameContainer>
             <TitleName>{skillName}</TitleName>
-            <ValueDisplay>lv {level}</ValueDisplay>
+            <ValueDisplay>lv {effectiveLevel}</ValueDisplay>
           </TitleNameContainer>
         )}
       </ProgressTitle>

package/src/stories/Character/skills/SkillsContainer.stories.tsx

@@ -1,3 +1,4 @@
+import { CharacterClass } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
@@ -21,6 +22,7 @@ const Template: Story<ISkillContainerProps> = args => (
     <SkillsContainer
       {...args}
       skill={skillMock}
+      characterClass={CharacterClass.Warrior}
       onCloseButton={() => console.log('close skill container')}
       atlasIMG={atlasIMG}
       atlasJSON={atlasJSON}
@@ -32,4 +34,5 @@ export const Default = Template.bind([]);
 
 Default.args = {
   skill: skillMock,
+  characterClass: CharacterClass.Warrior,
 };