@rpg-engine/long-bow 0.8.81 → 0.8.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.81",
+  "version": "0.8.83",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "0.10.32",
+    "@rpg-engine/shared": "^0.10.32",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/SkillProgressBar.tsx

@@ -1,3 +1,10 @@
+import {
+  CharacterClass,
+  getLevelFromSP,
+  getSPForLevel,
+  getSPForLevelExponential,
+  getSkillConstants,
+} from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../constants/uiColors';
@@ -8,13 +15,14 @@ import { Tooltip } from './Tooltip/Tooltip';
 
 export interface ISkillProgressBarProps {
   skillName: string;
+  skillKey?: string;
+  characterClass?: CharacterClass;
   bgColor: string;
   level: number;
   skillPoints: number;
   texturePath: string;
   showSkillPoints?: boolean;
   skillPointsToNextLevel: number;
-  skillPointsForCurrentLevel: number;
   atlasJSON: any;
   atlasIMG: any;
   buffAndDebuff?: number;
@@ -23,10 +31,11 @@ export interface ISkillProgressBarProps {
 export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   bgColor,
   skillName,
+  skillKey,
+  characterClass,
   level,
   skillPoints: currentSkillPoints,
-  skillPointsToNextLevel,
-  skillPointsForCurrentLevel,
+
   texturePath,
   showSkillPoints = true,
   atlasIMG,
@@ -34,19 +43,44 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
 
   buffAndDebuff,
 }) => {
-  // Skill points needed to start the current level (passed from parent, calculated with correct formula)
-  const baseSkillPoints = skillPointsForCurrentLevel;
+  // 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
+    }
+
+    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();
@@ -70,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>
@@ -84,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>
@@ -101,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/components/SkillsContainer.tsx

@@ -1,9 +1,10 @@
 import {
-  CharacterClass,
   ISkill,
   ISkillDetails,
+  getSPForLevel,
   getSPForLevelExponential,
   getSkillConstants,
+  CharacterClass,
   getXPForLevel,
 } from '@rpg-engine/shared';
 import React from 'react';
@@ -14,7 +15,7 @@ import { SkillProgressBar } from './SkillProgressBar';
 
 export interface ISkillContainerProps {
   skill: ISkill;
-  characterClass: CharacterClass;
+  characterClass?: CharacterClass;
   onCloseButton: () => void;
   atlasJSON: any;
   atlasIMG: any;
@@ -114,22 +115,25 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
         continue;
       }
 
-      // Get the skill constants for this skill and character class
-      const { A, b, c } = getSkillConstants(key, characterClass);
-
-      // Calculate SP thresholds using exponential formula
-      const skillPointsForCurrentLevel = getSPForLevelExponential(skillDetails.level, A, b, c);
-      const skillPointsToNextLevel = getSPForLevelExponential(skillDetails.level + 1, A, b, c);
+      // Calculate skillPointsToNextLevel using exponential formula if characterClass available
+      const calcSkillPointsToNextLevel = (): number => {
+        if (characterClass) {
+          const { A, b, c } = getSkillConstants(key, characterClass);
+          return Math.round(getSPForLevelExponential(skillDetails.level + 1, A, b, c));
+        }
+        return Math.round(getSPForLevel(skillDetails.level + 1));
+      };
 
       output.push(
         <SkillProgressBar
           key={key}
           skillName={skillNameMap[key]}
+          skillKey={key}
+          characterClass={characterClass}
           bgColor={skillCategoryColor}
           level={skillDetails.level || 0}
           skillPoints={Math.round(skillDetails.skillPoints) || 0}
-          skillPointsToNextLevel={skillPointsToNextLevel}
-          skillPointsForCurrentLevel={skillPointsForCurrentLevel}
+          skillPointsToNextLevel={calcSkillPointsToNextLevel()}
           texturePath={value}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
@@ -164,9 +168,6 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
             skillPointsToNextLevel={
               Math.round(getXPForLevel(skill.level + 1)) || 0
             }
-            skillPointsForCurrentLevel={
-              Math.round(getXPForLevel(skill.level)) || 0
-            }
             texturePath={'swords/broad-sword.png'}
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}

package/src/mocks/skills.mocks.ts

@@ -2,16 +2,28 @@ import {
   ISkill,
   SkillType,
   getSPForLevel,
+  getSPForLevelExponential,
+  getSkillConstants,
+  CharacterClass,
   getXPForLevel,
 } from '@rpg-engine/shared';
 
+// Use Warrior as default character class for mock data
+const mockCharacterClass = CharacterClass.Warrior;
+
+// Helper function to get SP for next level using exponential formula
+const getMockSPForNextLevel = (skillKey: string, level: number): number => {
+  const { A, b, c } = getSkillConstants(skillKey, mockCharacterClass);
+  return Math.round(getSPForLevelExponential(level, A, b, c));
+};
+
 export const skillMock = {
   _id: '62aebda8785a9f0089a4f757',
   stamina: {
     type: SkillType.BasicAttributes,
     level: 1,
     skillPoints: 10,
-    skillPointsToNextLevel: getSPForLevel(2),
+    skillPointsToNextLevel: getMockSPForNextLevel('stamina', 2),
   },
   magic: {
     type: SkillType.BasicAttributes,
@@ -43,49 +55,49 @@ export const skillMock = {
     type: SkillType.BasicAttributes,
     level: 2,
     skillPoints: 70,
-    skillPointsToNextLevel: getSPForLevel(3),
+    skillPointsToNextLevel: getMockSPForNextLevel('dexterity', 3),
   },
   first: {
     type: SkillType.Combat,
     level: 1,
     skillPoints: 22,
-    skillPointsToNextLevel: getSPForLevel(2),
+    skillPointsToNextLevel: getMockSPForNextLevel('first', 2),
   },
   club: {
     type: SkillType.Combat,
     level: 2,
     skillPoints: 22,
-    skillPointsToNextLevel: getSPForLevel(3),
+    skillPointsToNextLevel: getMockSPForNextLevel('club', 3),
   },
   sword: {
     type: SkillType.Combat,
     level: 4,
     skillPoints: 273,
-    skillPointsToNextLevel: getSPForLevel(5),
+    skillPointsToNextLevel: getMockSPForNextLevel('sword', 5),
   },
   dagger: {
     type: SkillType.Combat,
     level: 4,
     skillPoints: 300,
-    skillPointsToNextLevel: getSPForLevel(5),
+    skillPointsToNextLevel: getMockSPForNextLevel('dagger', 5),
   },
   axe: {
     type: SkillType.Combat,
     level: 5,
     skillPoints: 400,
-    skillPointsToNextLevel: getSPForLevel(6),
+    skillPointsToNextLevel: getMockSPForNextLevel('axe', 6),
   },
   distance: {
     type: SkillType.Combat,
     level: 4,
     skillPoints: 76,
-    skillPointsToNextLevel: getSPForLevel(5),
+    skillPointsToNextLevel: getMockSPForNextLevel('distance', 5),
   },
   shielding: {
     type: SkillType.Combat,
     level: 3,
     skillPoints: 120,
-    skillPointsToNextLevel: getSPForLevel(4),
+    skillPointsToNextLevel: getMockSPForNextLevel('shielding', 4),
   },
   fishing: {
     type: SkillType.Gathering,

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,
 };