@rpg-engine/long-bow 0.4.83 → 0.4.85

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.4.83",
+  "version": "0.4.85",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.8.15",
+    "@rpg-engine/shared": "^0.8.28",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/SkillProgressBar.tsx

@@ -17,6 +17,7 @@ export interface ISkillProgressBarProps {
   atlasJSON: any;
   atlasIMG: any;
   buffAndDebuff?: number;
+  ratio: number;
 }
 
 export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
@@ -30,15 +31,12 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   atlasIMG,
   atlasJSON,
   buffAndDebuff,
+  ratio,
 }) => {
   if (!skillPointsToNextLevel) {
     skillPointsToNextLevel = getSPForLevel(level + 1);
   }
 
-  const nextLevelSPWillbe = skillPoints + skillPointsToNextLevel;
-
-  const ratio = (skillPoints / nextLevelSPWillbe) * 100;
-
   const skillsBuffsCalc = () => {
     if (buffAndDebuff) {
       return 1 + buffAndDebuff / 100;
@@ -115,7 +113,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
       {showSkillPoints && (
         <SkillDisplayContainer>
           <SkillPointsDisplay>
-            {skillPoints}/{nextLevelSPWillbe}
+            {skillPoints}/{skillPointsToNextLevel}
           </SkillPointsDisplay>
         </SkillDisplayContainer>
       )}

package/src/components/SkillsContainer.tsx

@@ -1,4 +1,9 @@
-import { ISkill, ISkillDetails } from '@rpg-engine/shared';
+import {
+  ISkill,
+  ISkillDetails,
+  getSPForLevel,
+  getXPForLevel,
+} from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../constants/uiColors';
@@ -83,6 +88,26 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
   atlasJSON,
   scale,
 }) => {
+  const SPRatio = (level: number, skillPoints: number) => {
+    const SPLevelActual = getSPForLevel(level + 1);
+    const SPLevelBefore = getSPForLevel(level);
+    const SPCalc = SPLevelActual - SPLevelBefore;
+    if (level === 1) {
+      return (skillPoints / SPLevelActual) * 100;
+    }
+    return ((skillPoints - SPLevelBefore) / SPCalc) * 100;
+  };
+
+  const XPRatio = (level: number, skillPoints: number) => {
+    const XPLevelActual = getXPForLevel(level + 1);
+    const XPLevelBefore = getXPForLevel(level);
+    const XPCalc = XPLevelActual - XPLevelBefore;
+    if (level === 1) {
+      return (skillPoints / XPLevelActual) * 100;
+    }
+    return ((skillPoints - XPLevelBefore) / XPCalc) * 100;
+  };
+
   const onRenderSkillCategory = (
     category: 'attributes' | 'combat' | 'crafting'
   ) => {
@@ -107,12 +132,13 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
           level={skillDetails.level || 0}
           skillPoints={Math.round(skillDetails.skillPoints) || 0}
           skillPointsToNextLevel={
-            Math.round(skillDetails.skillPointsToNextLevel) || 0
+            Math.round(getSPForLevel(skillDetails.level + 1)) || 0
           }
           texturePath={value}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
           buffAndDebuff={skillDetails.buffAndDebuff}
+          ratio={SPRatio(skillDetails.level, skillDetails.skillPoints)}
         />
       );
     }
@@ -140,10 +166,13 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
             bgColor={uiColors.navyBlue}
             level={Math.round(skill.level) || 0}
             skillPoints={Math.round(skill.experience) || 0}
-            skillPointsToNextLevel={Math.round(skill.xpToNextLevel) || 0}
+            skillPointsToNextLevel={
+              Math.round(getXPForLevel(skill.level + 1)) || 0
+            }
             texturePath={'swords/broad-sword.png'}
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}
+            ratio={XPRatio(skill.level, skill.experience)}
           />
 
           <p>Combat Skills</p>

package/src/mocks/skills.mocks.ts

@@ -1,18 +1,18 @@
-import { ISkill, SkillType } from '@rpg-engine/shared';
+import { ISkill, SkillType, getSPForLevel } from '@rpg-engine/shared';
 
 export const skillMock = {
   _id: '62aebda8785a9f0089a4f757',
   stamina: {
     type: SkillType.BasicAttributes,
-    level: 1,
-    skillPoints: 50,
-    skillPointsToNextLevel: 100,
+    level: 2,
+    skillPoints: 50.03,
+    skillPointsToNextLevel: getSPForLevel(2),
   },
   magic: {
     type: SkillType.BasicAttributes,
-    level: 1,
+    level: 2,
     skillPoints: 22,
-    skillPointsToNextLevel: 80,
+    skillPointsToNextLevel: getSPForLevel(2.4),
     buffAndDebuff: -10
   },
   magicResistance: {