@rpg-engine/long-bow 0.6.54 → 0.6.56

package/dist/long-bow.esm.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, Component, useRef, useContext, createContex
 import { BeatLoader } from 'react-spinners';
 import styled, { css, keyframes } from 'styled-components';
 import { v4 } from 'uuid';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemRarities, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane, RxMagnifyingGlass, RxCross2 } from 'react-icons/rx';
@@ -32124,11 +32124,17 @@ var ProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
   return props.margin;
 });
 
+var Tooltip = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Tooltip",
+  componentId: "sc-m78j13-0"
+})(["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;top:-20px;left:50%;transform:translateX(-50%);"]);
+
 var SkillProgressBar = function SkillProgressBar(_ref) {
   var bgColor = _ref.bgColor,
     skillName = _ref.skillName,
     level = _ref.level,
     currentSkillPoints = _ref.skillPoints,
+    skillPointsToNextLevel = _ref.skillPointsToNextLevel,
     texturePath = _ref.texturePath,
     _ref$showSkillPoints = _ref.showSkillPoints,
     showSkillPoints = _ref$showSkillPoints === void 0 ? true : _ref$showSkillPoints,
@@ -32136,13 +32142,11 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
     atlasJSON = _ref.atlasJSON,
     buffAndDebuff = _ref.buffAndDebuff;
   // Base skill points for the previous level (0 for level 1)
-  var baseSkillPointsPrevLevel = level > 1 ? getSPForLevel(level - 1) : 0;
-  // Total skill points needed for the next level
-  var nextLevelSkillPoints = getSPForLevel(level + 1);
+  var baseSkillPointsPrevLevel = level === 1 ? 0 : getSPForLevel(level);
   // Calculate excess skill points above the previous level
   var excessSkillPoints = Math.max(currentSkillPoints - baseSkillPointsPrevLevel, 0);
   // Calculate progress percentage towards the next level
-  var progress = Math.min(100, Math.max(0, excessSkillPoints / nextLevelSkillPoints * 100));
+  var progress = Math.min(100, Math.max(0, excessSkillPoints / skillPointsToNextLevel * 100));
   var skillsBuffsCalc = function skillsBuffsCalc(level, buffAndDebuff) {
     var result = level * (buffAndDebuff / 100);
     return result > 0 ? "+" + result.toFixed(2) : "" + result.toFixed(2);
@@ -32154,15 +32158,15 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
     imgScale: 1,
     grayScale: true,
     opacity: 0.5
-  }))) : React.createElement(React.Fragment, null)), React.createElement(ProgressBarContainer$1, null, React.createElement(SimpleProgressBar, {
+  }))) : React.createElement(React.Fragment, null)), React.createElement(ProgressBarWrapper, null, React.createElement(SimpleProgressBar, {
     value: progress,
     bgColor: bgColor
-  }))), showSkillPoints && React.createElement(SkillDisplayContainer, null, React.createElement(SkillPointsDisplay, null, progress.toFixed(2), "%")));
+  }), React.createElement(Tooltip, null, "SP: ", currentSkillPoints))), showSkillPoints && React.createElement(SkillDisplayContainer, null, React.createElement(SkillPointsDisplay, null, progress.toFixed(2), "%")));
 };
-var ProgressBarContainer$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SkillProgressBar__ProgressBarContainer",
+var ProgressBarWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__ProgressBarWrapper",
   componentId: "sc-5vuroc-0"
-})(["position:relative;top:8px;width:100%;height:auto;"]);
+})(["position:relative;&:hover ", ",&:active ", "{visibility:visible;}width:100%;height:auto;top:8px;"], Tooltip, Tooltip);
 var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__SpriteContainer",
   componentId: "sc-5vuroc-1"
@@ -32303,6 +32307,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
         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,
@@ -32327,6 +32332,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
     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