@rpg-engine/long-bow 0.1.85 → 0.1.88

package/dist/long-bow.esm.js

@@ -8,6 +8,7 @@ import 'rpgui/rpgui.min.css';
 import 'rpgui/rpgui.min.js';
 import { GRID_WIDTH, GRID_HEIGHT, ItemType, ItemSocketEventsDisplayLabels, ActionsByItemType, ItemSlotType, getSPForLevel } from '@rpg-engine/shared';
 import { observer } from 'mobx-react-lite';
+import _ from 'lodash-es';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -6767,53 +6768,13 @@ var Input$1 = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-v8mte9-0"
 })(["opacity:0;"]);
 
-var SpriteIcon = function SpriteIcon(_ref) {
-  var onClick = _ref.onClick,
-      spriteKey = _ref.spriteKey,
-      baseSpriteKey = _ref.baseSpriteKey,
-      imgStyle = _ref.imgStyle,
-      iconsAtlasJSON = _ref.iconsAtlasJSON,
-      iconsAtlasIMG = _ref.iconsAtlasIMG;
-  return React.createElement(Container$d, null, baseSpriteKey && React.createElement(Slot, null, React.createElement(SpriteFromAtlas, {
-    onClick: onClick,
-    atlasJSON: iconsAtlasJSON,
-    atlasIMG: iconsAtlasIMG,
-    spriteKey: baseSpriteKey,
-    width: 32,
-    height: 32,
-    containerStyle: {
-      zIndex: -1
-    }
-  })), React.createElement(Slot, null, React.createElement(SpriteFromAtlas, {
-    onClick: onClick,
-    atlasJSON: iconsAtlasJSON,
-    atlasIMG: iconsAtlasIMG,
-    spriteKey: spriteKey,
-    width: 28,
-    height: 28,
-    containerStyle: {
-      zIndex: 0
-    },
-    imgScale: baseSpriteKey ? 1.5 : 2,
-    imgStyle: imgStyle
-  })));
-};
-var Container$d = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SpriteIcon__Container",
-  componentId: "sc-vi5t1x-0"
-})(["position:relative;width:32px;height:32px;display:flex;justify-content:center;align-items:center;"]);
-var Slot = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SpriteIcon__Slot",
-  componentId: "sc-vi5t1x-1"
-})(["position:absolute;"]);
-
 var SimpleProgressBar = function SimpleProgressBar(_ref) {
   var value = _ref.value,
       _ref$bgColor = _ref.bgColor,
       bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
       _ref$margin = _ref.margin,
       margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React.createElement(Container$e, {
+  return React.createElement(Container$d, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -6822,7 +6783,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$e = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -6904,142 +6865,90 @@ var ProgressTitle = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-5vuroc-8"
 })(["width:100%;display:flex;flex-direction:row;justify-content:space-between;span{font-size:0.6rem;}margin-top:10px;"]);
 
+var skillProps = {
+  attributes: {
+    color: colors.cardinal,
+    values: {
+      stamina: 'spell-icons/regenerate.png',
+      magic: 'spell-icons/fireball.png',
+      magicResistance: 'spell-icons/freeze.png',
+      strength: 'spell-icons/enchanted-blow.png',
+      resistance: 'spell-icons/magic-shield.png',
+      dexterity: 'spell-icons/haste.png'
+    }
+  },
+  combat: {
+    color: colors.purple,
+    values: {
+      first: 'gloves/leather-gloves.png',
+      club: 'maces/club.png',
+      sword: 'swords/double-edged-sword.png',
+      axe: 'axes/double-axe.png',
+      distance: 'bows/horse-bow.png',
+      shielding: 'shields/studded-shield.png',
+      dagger: 'daggers/dagger.png'
+    }
+  },
+  crafting: {
+    color: colors.blue,
+    values: {
+      fishing: 'foods/fish.png',
+      mining: 'crafting-resources/iron-ingot.png',
+      lumberjacking: 'crafting-resources/greater-wood-log.png',
+      cooking: 'foods/chickens-meat.png',
+      alchemy: 'potions/greater-mana-potion.png'
+    }
+  }
+};
 var SkillsContainer = function SkillsContainer(_ref) {
-  var _skill$first, _skill$first2, _skill$first3, _skill$club, _skill$club2, _skill$club3, _skill$sword, _skill$sword2, _skill$sword3, _skill$axe, _skill$axe2, _skill$axe3, _skill$distance, _skill$distance2, _skill$distance3, _skill$shielding, _skill$shielding2, _skill$shielding3, _skill$fishing, _skill$fishing2, _skill$fishing3, _skill$mining, _skill$mining2, _skill$mining3, _skill$lumberjacking, _skill$lumberjacking2, _skill$lumberjacking3, _skill$cooking, _skill$cooking2, _skill$cooking3, _skill$alchemy, _skill$alchemy2, _skill$alchemy3, _skill$stamina, _skill$stamina2, _skill$stamina3, _skill$magic, _skill$magic2, _skill$magic3, _skill$magicResistanc, _skill$magicResistanc2, _skill$magicResistanc3, _skill$strength, _skill$strength2, _skill$strength3, _skill$resistance, _skill$resistance2, _skill$resistance3, _skill$dexterity, _skill$dexterity2, _skill$dexterity3;
-
   var onCloseButton = _ref.onCloseButton,
       skill = _ref.skill;
+
+  var onRenderSkillCategory = function onRenderSkillCategory(category) {
+    var skillCategory = skillProps[category];
+    var skillCategoryColor = skillCategory.color;
+    var output = [];
+
+    for (var _i = 0, _Object$entries = Object.entries(skillCategory.values); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i],
+          key = _Object$entries$_i[0],
+          value = _Object$entries$_i[1];
+      //@ts-ignore
+      var skillDetails = skill[key];
+      output.push(React.createElement(SkillProgressBar, {
+        skillName: _.capitalize(key),
+        bgColor: skillCategoryColor,
+        level: skillDetails.level || 0,
+        skillPoints: skillDetails.skillPoints || 0,
+        skillPointsToNextLevel: skillDetails.skillPointsToNextLevel || 0,
+        texturePath: value
+      }));
+    }
+
+    return output;
+  };
+
   return React.createElement(SkillsDraggableContainer, {
     title: "Skills"
   }, onCloseButton && React.createElement(CloseButton$2, {
     onClick: onCloseButton,
     onTouchStart: onCloseButton
-  }, "X"), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Combat Skills"), React.createElement("hr", {
+  }, "X"), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "General"), React.createElement("hr", {
     className: "golden"
-  })), React.createElement(SkillProgressBar, {
-    skillName: 'First',
-    bgColor: colors.cardinal,
-    level: (skill == null ? void 0 : (_skill$first = skill.first) == null ? void 0 : _skill$first.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$first2 = skill.first) == null ? void 0 : _skill$first2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$first3 = skill.first) == null ? void 0 : _skill$first3.skillPointsToNextLevel) || 0,
-    texturePath: 'gloves/leather-gloves.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Club',
-    bgColor: colors.cardinal,
-    level: (skill == null ? void 0 : (_skill$club = skill.club) == null ? void 0 : _skill$club.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$club2 = skill.club) == null ? void 0 : _skill$club2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$club3 = skill.club) == null ? void 0 : _skill$club3.skillPointsToNextLevel) || 0,
-    texturePath: 'maces/club.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Sword',
-    bgColor: colors.cardinal,
-    level: (skill == null ? void 0 : (_skill$sword = skill.sword) == null ? void 0 : _skill$sword.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$sword2 = skill.sword) == null ? void 0 : _skill$sword2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$sword3 = skill.sword) == null ? void 0 : _skill$sword3.skillPointsToNextLevel) || 0,
-    texturePath: 'swords/double-edged-sword.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Axe',
-    bgColor: colors.cardinal,
-    level: (skill == null ? void 0 : (_skill$axe = skill.axe) == null ? void 0 : _skill$axe.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$axe2 = skill.axe) == null ? void 0 : _skill$axe2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$axe3 = skill.axe) == null ? void 0 : _skill$axe3.skillPointsToNextLevel) || 0,
-    texturePath: 'axes/double-axe.png'
   }), React.createElement(SkillProgressBar, {
-    skillName: 'Distance',
-    bgColor: colors.cardinal,
-    level: (skill == null ? void 0 : (_skill$distance = skill.distance) == null ? void 0 : _skill$distance.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$distance2 = skill.distance) == null ? void 0 : _skill$distance2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$distance3 = skill.distance) == null ? void 0 : _skill$distance3.skillPointsToNextLevel) || 0,
-    texturePath: 'bows/horse-bow.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Shielding',
-    bgColor: colors.cardinal,
-    level: (skill == null ? void 0 : (_skill$shielding = skill.shielding) == null ? void 0 : _skill$shielding.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$shielding2 = skill.shielding) == null ? void 0 : _skill$shielding2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$shielding3 = skill.shielding) == null ? void 0 : _skill$shielding3.skillPointsToNextLevel) || 0,
-    texturePath: 'shields/studded-shield.png'
-  }), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Crafting Skills"), React.createElement("hr", {
+    skillName: 'Level',
+    bgColor: colors.navyBlue,
+    level: skill.level || 0,
+    skillPoints: skill.experience || 0,
+    skillPointsToNextLevel: skill.xpToNextLevel || 0,
+    texturePath: 'swords/broad-sword.png'
+  }), React.createElement("p", null, "Combat Skills"), React.createElement("hr", {
     className: "golden"
-  })), React.createElement(SkillProgressBar, {
-    skillName: 'Fishing',
-    bgColor: colors.blue,
-    level: (skill == null ? void 0 : (_skill$fishing = skill.fishing) == null ? void 0 : _skill$fishing.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$fishing2 = skill.fishing) == null ? void 0 : _skill$fishing2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$fishing3 = skill.fishing) == null ? void 0 : _skill$fishing3.skillPointsToNextLevel) || 0,
-    texturePath: 'foods/fish.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Mining',
-    bgColor: colors.blue,
-    level: (skill == null ? void 0 : (_skill$mining = skill.mining) == null ? void 0 : _skill$mining.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$mining2 = skill.mining) == null ? void 0 : _skill$mining2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$mining3 = skill.mining) == null ? void 0 : _skill$mining3.skillPointsToNextLevel) || 0,
-    texturePath: 'crafting-resources/iron-ingot.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Lumberjacking',
-    bgColor: colors.blue,
-    level: (skill == null ? void 0 : (_skill$lumberjacking = skill.lumberjacking) == null ? void 0 : _skill$lumberjacking.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$lumberjacking2 = skill.lumberjacking) == null ? void 0 : _skill$lumberjacking2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$lumberjacking3 = skill.lumberjacking) == null ? void 0 : _skill$lumberjacking3.skillPointsToNextLevel) || 0,
-    texturePath: 'crafting-resources/greater-wood-log.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Cooking',
-    bgColor: colors.blue,
-    level: (skill == null ? void 0 : (_skill$cooking = skill.cooking) == null ? void 0 : _skill$cooking.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$cooking2 = skill.cooking) == null ? void 0 : _skill$cooking2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$cooking3 = skill.cooking) == null ? void 0 : _skill$cooking3.skillPointsToNextLevel) || 0,
-    texturePath: 'foods/chickens-meat.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Alchemy',
-    bgColor: colors.blue,
-    level: (skill == null ? void 0 : (_skill$alchemy = skill.alchemy) == null ? void 0 : _skill$alchemy.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$alchemy2 = skill.alchemy) == null ? void 0 : _skill$alchemy2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$alchemy3 = skill.alchemy) == null ? void 0 : _skill$alchemy3.skillPointsToNextLevel) || 0,
-    texturePath: 'potions/greater-mana-potion.png'
-  }), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Basic Attributes"), React.createElement("hr", {
+  })), onRenderSkillCategory('combat'), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Crafting Skills"), React.createElement("hr", {
     className: "golden"
-  })), React.createElement(SkillProgressBar, {
-    skillName: 'Stamina',
-    bgColor: colors.darkYellow,
-    level: (skill == null ? void 0 : (_skill$stamina = skill.stamina) == null ? void 0 : _skill$stamina.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$stamina2 = skill.stamina) == null ? void 0 : _skill$stamina2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$stamina3 = skill.stamina) == null ? void 0 : _skill$stamina3.skillPointsToNextLevel) || 0,
-    texturePath: 'spell-icons/regenerate.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Magic',
-    bgColor: colors.purple,
-    level: (skill == null ? void 0 : (_skill$magic = skill.magic) == null ? void 0 : _skill$magic.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$magic2 = skill.magic) == null ? void 0 : _skill$magic2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$magic3 = skill.magic) == null ? void 0 : _skill$magic3.skillPointsToNextLevel) || 0,
-    texturePath: 'spell-icons/fireball.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Magic Resistance',
-    bgColor: colors.navyBlue,
-    level: (skill == null ? void 0 : (_skill$magicResistanc = skill.magicResistance) == null ? void 0 : _skill$magicResistanc.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$magicResistanc2 = skill.magicResistance) == null ? void 0 : _skill$magicResistanc2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$magicResistanc3 = skill.magicResistance) == null ? void 0 : _skill$magicResistanc3.skillPointsToNextLevel) || 0,
-    texturePath: 'spell-icons/freeze.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Strength',
-    bgColor: colors.cardinal,
-    level: (skill == null ? void 0 : (_skill$strength = skill.strength) == null ? void 0 : _skill$strength.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$strength2 = skill.strength) == null ? void 0 : _skill$strength2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$strength3 = skill.strength) == null ? void 0 : _skill$strength3.skillPointsToNextLevel) || 0,
-    texturePath: 'spell-icons/enchanted-blow.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Resistance',
-    bgColor: colors.raisinBlack,
-    level: (skill == null ? void 0 : (_skill$resistance = skill.resistance) == null ? void 0 : _skill$resistance.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$resistance2 = skill.resistance) == null ? void 0 : _skill$resistance2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$resistance3 = skill.resistance) == null ? void 0 : _skill$resistance3.skillPointsToNextLevel) || 0,
-    texturePath: 'spell-icons/magic-shield.png'
-  }), React.createElement(SkillProgressBar, {
-    skillName: 'Dexterity',
-    bgColor: colors.blue,
-    level: (skill == null ? void 0 : (_skill$dexterity = skill.dexterity) == null ? void 0 : _skill$dexterity.level) || 0,
-    skillPoints: (skill == null ? void 0 : (_skill$dexterity2 = skill.dexterity) == null ? void 0 : _skill$dexterity2.skillPoints) || 0,
-    skillPointsToNextLevel: (skill == null ? void 0 : (_skill$dexterity3 = skill.dexterity) == null ? void 0 : _skill$dexterity3.skillPointsToNextLevel) || 0,
-    texturePath: 'spell-icons/haste.png'
-  }));
+  })), onRenderSkillCategory('crafting'), React.createElement(SkillSplitDiv, null, React.createElement("p", null, "Basic Attributes"), React.createElement("hr", {
+    className: "golden"
+  })), onRenderSkillCategory('attributes'));
 };
 var SkillsDraggableContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
   displayName: "SkillsContainer__SkillsDraggableContainer",
@@ -7065,16 +6974,16 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       children = _ref.children;
-  return React.createElement(Container$f, {
+  return React.createElement(Container$e, {
     maxLines: maxLines
   }, children);
 };
-var Container$f = /*#__PURE__*/styled.div.withConfig({
+var Container$e = /*#__PURE__*/styled.div.withConfig({
   displayName: "Truncate__Container",
   componentId: "sc-6x00qb-0"
 })(["display:-webkit-box;max-width:100%;max-height:100%;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;"], function (props) {
   return props.maxLines;
 });
 
-export { Button, ButtonTypes, Chat, CheckButton, DraggableContainer, Dropdown, DynamicText, EquipmentSet, Input, InputRadio, ItemContainer, ItemSlot, ListMenu, NPCDialog, NPCDialogType, ProgressBar, PropertySelect, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, SpriteIcon, TextArea, Truncate, _RPGUI, useEventListener };
+export { Button, ButtonTypes, Chat, CheckButton, DraggableContainer, Dropdown, DynamicText, EquipmentSet, Input, InputRadio, ItemContainer, ItemSlot, ListMenu, NPCDialog, NPCDialogType, ProgressBar, PropertySelect, QuestionDialog, RPGUIContainer, RPGUIContainerTypes, RPGUIRoot, RangeSlider, RangeSliderType, SkillProgressBar, SkillsContainer, SpriteFromAtlas, TextArea, Truncate, _RPGUI, useEventListener };
 //# sourceMappingURL=long-bow.esm.js.map