@rpg-engine/long-bow 0.6.55 → 0.6.56

package/package.json

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

package/src/components/SkillProgressBar.tsx

@@ -3,8 +3,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../constants/uiColors';
 import { ErrorBoundary } from './Item/Inventory/ErrorBoundary';
-import { SimpleProgressBar } from './SimpleProgressBar';
 import { SpriteFromAtlas } from './shared/SpriteFromAtlas';
+import { SimpleProgressBar } from './SimpleProgressBar';
+import { Tooltip } from './Tooltip/Tooltip';
 
 export interface ISkillProgressBarProps {
   skillName: string;
@@ -32,10 +33,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   buffAndDebuff,
 }) => {
   // Base skill points for the previous level (0 for level 1)
-  const baseSkillPointsPrevLevel = level > 1 ? getSPForLevel(level - 1) : 0;
-
-  // Total skill points needed for the next level
-  const nextLevelSkillPoints = skillPointsToNextLevel;
+  const baseSkillPointsPrevLevel = level === 1 ? 0 : getSPForLevel(level);
 
   // Calculate excess skill points above the previous level
   const excessSkillPoints = Math.max(
@@ -46,7 +44,7 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   // Calculate progress percentage towards the next level
   const progress = Math.min(
     100,
-    Math.max(0, (excessSkillPoints / nextLevelSkillPoints) * 100)
+    Math.max(0, (excessSkillPoints / skillPointsToNextLevel) * 100)
   );
 
   const skillsBuffsCalc = (level: number, buffAndDebuff: number): string => {
@@ -117,9 +115,10 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
           )}
         </ProgressIconContainer>
 
-        <ProgressBarContainer>
+        <ProgressBarWrapper>
           <SimpleProgressBar value={progress} bgColor={bgColor} />
-        </ProgressBarContainer>
+          <Tooltip>SP: {currentSkillPoints}</Tooltip>
+        </ProgressBarWrapper>
       </ProgressBody>
       {showSkillPoints && (
         <SkillDisplayContainer>
@@ -130,11 +129,15 @@ export const SkillProgressBar: React.FC<ISkillProgressBarProps> = ({
   );
 };
 
-const ProgressBarContainer = styled.div`
+const ProgressBarWrapper = styled.div`
   position: relative;
-  top: 8px;
+
+  &:hover ${Tooltip}, &:active ${Tooltip} {
+    visibility: visible;
+  }
   width: 100%;
   height: auto;
+  top: 8px;
 `;
 
 const SpriteContainer = styled.div`

package/src/components/SkillsContainer.tsx

@@ -1,7 +1,7 @@
 import {
   ISkill,
   ISkillDetails,
-  calculateSPToNextLevel,
+  getSPForLevel,
   getXPForLevel,
 } from '@rpg-engine/shared';
 import React from 'react';
@@ -110,11 +110,6 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
         continue;
       }
 
-      const skillPointsToNextLevel = calculateSPToNextLevel(
-        skillDetails.skillPoints,
-        skillDetails.level
-      );
-
       output.push(
         <SkillProgressBar
           key={key}
@@ -122,7 +117,9 @@ export const SkillsContainer: React.FC<ISkillContainerProps> = ({
           bgColor={skillCategoryColor}
           level={skillDetails.level || 0}
           skillPoints={Math.round(skillDetails.skillPoints) || 0}
-          skillPointsToNextLevel={skillPointsToNextLevel}
+          skillPointsToNextLevel={
+            Math.round(getSPForLevel(skillDetails.level + 1)) || 0
+          }
           texturePath={value}
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,19 @@
+import styled from 'styled-components';
+
+export const Tooltip = styled.div`
+  visibility: hidden;
+  position: absolute;
+  background-color: black;
+  color: white;
+  text-align: center;
+  border-radius: 4px;
+  padding: 5px;
+  z-index: 1;
+  font-size: 0.5rem;
+  white-space: nowrap;
+
+  /* Positioning */
+  top: -20px; /* Adjust based on where you want the tooltip to appear */
+  left: 50%;
+  transform: translateX(-50%);
+`;

package/src/mocks/skills.mocks.ts

@@ -1,6 +1,6 @@
 import { ISkill, SkillType, getSPForLevel } from '@rpg-engine/shared';
 
-for (let level = 60; level <= 70; level++) {
+for (let level = 2; level <= 20; level++) {
   console.log(`SP for level ${level}: ${getSPForLevel(level)}`);
 }
 
@@ -9,7 +9,7 @@ export const skillMock = {
   stamina: {
     type: SkillType.BasicAttributes,
     level: 1,
-    skillPoints: 5,
+    skillPoints: 10,
     skillPointsToNextLevel: getSPForLevel(2),
   },
   magic: {