@rpg-engine/long-bow 0.6.53 → 0.6.54

package/package.json

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

package/src/components/SkillProgressBar.tsx

@@ -11,7 +11,6 @@ export interface ISkillProgressBarProps {
   bgColor: string;
   level: number;
   skillPoints: number;
-  skillPointsToNextLevel?: number;
   texturePath: string;
   showSkillPoints?: boolean;
   atlasJSON: any;
@@ -24,7 +23,6 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   skillName,
   level,
   skillPoints: currentSkillPoints,
-  skillPointsToNextLevel,
   texturePath,
   showSkillPoints = true,
   atlasIMG,
@@ -32,23 +30,27 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   buffAndDebuff,
 }) => {
   // Base skill points for the previous level (0 for level 1)
-  const baseSkillPointsPrevLevel = getSPForLevel(level);
+  const baseSkillPointsPrevLevel = level > 1 ? getSPForLevel(level - 1) : 0;
+
+  // Total skill points needed for the next level
+  const nextLevelSkillPoints = getSPForLevel(level + 1);
 
   // Calculate excess skill points above the previous level
-  const excessSkillPoints = currentSkillPoints - baseSkillPointsPrevLevel;
+  const excessSkillPoints = Math.max(
+    currentSkillPoints - baseSkillPointsPrevLevel,
+    0
+  );
 
   // Calculate progress percentage towards the next level
-
-  const progress = (excessSkillPoints / (skillPointsToNextLevel ?? 1)) * 100;
+  const progress = Math.min(
+    100,
+    Math.max(0, (excessSkillPoints / nextLevelSkillPoints) * 100)
+  );
 
   const skillsBuffsCalc = (level: number, buffAndDebuff: number): string => {
     const 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 (
@@ -119,9 +121,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
       </ProgressBody>
       {showSkillPoints && (
         <SkillDisplayContainer>
-          <SkillPointsDisplay>
-            {currentSkillPoints}/{skillPointsToNextLevel}
-          </SkillPointsDisplay>
+          <SkillPointsDisplay>{progress.toFixed(2)}%</SkillPointsDisplay>
         </SkillDisplayContainer>
       )}
     </>

package/src/components/SkillsContainer.tsx

@@ -1,9 +1,4 @@
-import {
-  ISkill,
-  ISkillDetails,
-  getSPForLevel,
-  getXPForLevel,
-} from '@rpg-engine/shared';
+import { ISkill, ISkillDetails } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../constants/uiColors';
@@ -117,9 +112,6 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
           bgColor={skillCategoryColor}
           level={skillDetails.level || 0}
           skillPoints={Math.round(skillDetails.skillPoints) || 0}
-          skillPointsToNextLevel={
-            Math.round(getSPForLevel(skillDetails.level + 1)) || 0
-          }
           texturePath={value}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
@@ -151,9 +143,6 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
             bgColor={uiColors.navyBlue}
             level={Math.round(skill.level) || 0}
             skillPoints={Math.round(skill.experience) || 0}
-            skillPointsToNextLevel={
-              Math.round(getXPForLevel(skill.level + 1)) || 0
-            }
             texturePath={'swords/broad-sword.png'}
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}

package/src/mocks/skills.mocks.ts

@@ -1,6 +1,6 @@
 import { ISkill, SkillType, getSPForLevel } from '@rpg-engine/shared';
 
-for (let level = 2; level <= 10; level++) {
+for (let level = 60; level <= 70; level++) {
   console.log(`SP for level ${level}: ${getSPForLevel(level)}`);
 }
 
@@ -47,7 +47,7 @@ export const skillMock = {
   first: {
     type: SkillType.Combat,
     level: 1,
-    skillPoints: 18,
+    skillPoints: 22,
     skillPointsToNextLevel: getSPForLevel(2),
   },
   club: {
@@ -64,27 +64,27 @@ export const skillMock = {
   },
   dagger: {
     type: SkillType.Combat,
-    level: 1,
-    skillPoints: 3,
-    skillPointsToNextLevel: 80,
+    level: 4,
+    skillPoints: 300,
+    skillPointsToNextLevel: getSPForLevel(5),
   },
   axe: {
     type: SkillType.Combat,
-    level: 1,
-    skillPoints: 45,
-    skillPointsToNextLevel: 80,
+    level: 5,
+    skillPoints: 400,
+    skillPointsToNextLevel: getSPForLevel(6),
   },
   distance: {
     type: SkillType.Combat,
-    level: 1,
-    skillPoints: 23,
-    skillPointsToNextLevel: 80,
+    level: 3,
+    skillPoints: 120,
+    skillPointsToNextLevel: getSPForLevel(4),
   },
   shielding: {
     type: SkillType.Combat,
-    level: 1,
-    skillPoints: 12,
-    skillPointsToNextLevel: 80,
+    level: 3,
+    skillPoints: 120,
+    skillPointsToNextLevel: getSPForLevel(4),
   },
   fishing: {
     type: SkillType.Gathering,