@rpg-engine/long-bow 0.1.84 → 0.1.87

package/dist/index.d.ts

@@ -17,7 +17,6 @@ export * from './components/RangeSlider';
 export * from './components/RPGUIContainer';
 export * from './components/RPGUIRoot';
 export * from './components/shared/SpriteFromAtlas';
-export * from './components/shared/SpriteIcon';
 export * from './components/SkillProgressBar';
 export * from './components/SkillsContainer';
 export * from './components/TextArea';

package/dist/long-bow.cjs.development.js

@@ -15,6 +15,7 @@ require('rpgui/rpgui.min.css');
 require('rpgui/rpgui.min.js');
 var shared = require('@rpg-engine/shared');
 var mobxReactLite = require('mobx-react-lite');
+var _ = _interopDefault(require('lodash'));
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -6767,359 +6768,13 @@ var Input$1 = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-v8mte9-0"
 })(["opacity:0;"]);
 
-var frames$1 = {
-	"metamask-large.png": {
-		frame: {
-			x: 0,
-			y: 0,
-			w: 33,
-			h: 30
-		},
-		rotated: false,
-		trimmed: false,
-		spriteSourceSize: {
-			x: 0,
-			y: 0,
-			w: 33,
-			h: 30
-		},
-		sourceSize: {
-			w: 33,
-			h: 30
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"chat-large.png": {
-		frame: {
-			x: 0,
-			y: 30,
-			w: 31,
-			h: 29
-		},
-		rotated: false,
-		trimmed: true,
-		spriteSourceSize: {
-			x: 1,
-			y: 3,
-			w: 31,
-			h: 29
-		},
-		sourceSize: {
-			w: 32,
-			h: 32
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"equipment.png": {
-		frame: {
-			x: 33,
-			y: 0,
-			w: 17,
-			h: 16
-		},
-		rotated: false,
-		trimmed: false,
-		spriteSourceSize: {
-			x: 0,
-			y: 0,
-			w: 17,
-			h: 16
-		},
-		sourceSize: {
-			w: 17,
-			h: 16
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"inventory.png": {
-		frame: {
-			x: 33,
-			y: 16,
-			w: 17,
-			h: 16
-		},
-		rotated: false,
-		trimmed: false,
-		spriteSourceSize: {
-			x: 0,
-			y: 0,
-			w: 17,
-			h: 16
-		},
-		sourceSize: {
-			w: 17,
-			h: 16
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"icon-base-blue.png": {
-		frame: {
-			x: 31,
-			y: 32,
-			w: 16,
-			h: 16
-		},
-		rotated: false,
-		trimmed: false,
-		spriteSourceSize: {
-			x: 0,
-			y: 0,
-			w: 16,
-			h: 16
-		},
-		sourceSize: {
-			w: 16,
-			h: 16
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"icon-base-brown.png": {
-		frame: {
-			x: 50,
-			y: 0,
-			w: 16,
-			h: 16
-		},
-		rotated: false,
-		trimmed: false,
-		spriteSourceSize: {
-			x: 0,
-			y: 0,
-			w: 16,
-			h: 16
-		},
-		sourceSize: {
-			w: 16,
-			h: 16
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"chat-small.png": {
-		frame: {
-			x: 50,
-			y: 16,
-			w: 16,
-			h: 16
-		},
-		rotated: false,
-		trimmed: true,
-		spriteSourceSize: {
-			x: 1,
-			y: 0,
-			w: 16,
-			h: 16
-		},
-		sourceSize: {
-			w: 17,
-			h: 16
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"icon-base-gold.png": {
-		frame: {
-			x: 47,
-			y: 32,
-			w: 16,
-			h: 16
-		},
-		rotated: false,
-		trimmed: false,
-		spriteSourceSize: {
-			x: 0,
-			y: 0,
-			w: 16,
-			h: 16
-		},
-		sourceSize: {
-			w: 16,
-			h: 16
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"equipment-raw.png": {
-		frame: {
-			x: 0,
-			y: 59,
-			w: 15,
-			h: 13
-		},
-		rotated: false,
-		trimmed: true,
-		spriteSourceSize: {
-			x: 0,
-			y: 0,
-			w: 15,
-			h: 13
-		},
-		sourceSize: {
-			w: 16,
-			h: 13
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"metamask-small.png": {
-		frame: {
-			x: 31,
-			y: 48,
-			w: 15,
-			h: 15
-		},
-		rotated: false,
-		trimmed: true,
-		spriteSourceSize: {
-			x: 1,
-			y: 0,
-			w: 15,
-			h: 15
-		},
-		sourceSize: {
-			w: 16,
-			h: 16
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"settings.png": {
-		frame: {
-			x: 46,
-			y: 48,
-			w: 14,
-			h: 14
-		},
-		rotated: false,
-		trimmed: true,
-		spriteSourceSize: {
-			x: 1,
-			y: 1,
-			w: 14,
-			h: 14
-		},
-		sourceSize: {
-			w: 16,
-			h: 16
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	},
-	"inventory-raw.png": {
-		frame: {
-			x: 15,
-			y: 59,
-			w: 13,
-			h: 13
-		},
-		rotated: false,
-		trimmed: true,
-		spriteSourceSize: {
-			x: 1,
-			y: 2,
-			w: 13,
-			h: 13
-		},
-		sourceSize: {
-			w: 16,
-			h: 16
-		},
-		pivot: {
-			x: 0.5,
-			y: 0.5
-		}
-	}
-};
-var meta$1 = {
-	app: "http://free-tex-packer.com",
-	version: "0.6.7",
-	image: "icons.png",
-	format: "RGBA8888",
-	size: {
-		w: 66,
-		h: 72
-	},
-	scale: 1
-};
-var iconsAtlasJSON = {
-	frames: frames$1,
-	meta: meta$1
-};
-
-var img$7 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABICAMAAAB1EdO8AAAAkFBMVEUAAADtgCT////1hB92PhridiXX19dVPioVFRXQt0W2nSuIdWScgxFuW0mpfFInt+iGmqJ7UTEUpNXEmWxUanQBZolmZmLj+P/MYiguIhhtZWVOMRxNLRWWlpG7vrq6vbmoqKjArJ3VwLQWFhZ7eXl6ZlTq7OzutCkhM0eqfVHBrZ6/q5z/5HjKYSj83SDxgSCOHfTqAAAAAnRSTlMADpEr4D8AAAN0SURBVFjDrdcBW9owEAbgGyNtF2m1CDhBtDIR1Dn//7/b3TXtl6SUtTz7HmlusrxPEgqcRN+oP/rsLAxRGoQkU2PoVIyZEgs/wszSqyCpCFM2zAnA8DNM2B+r1UomyyhEHhIiwIgECRN2tX1aifC0rYm8Q6gRIkYEEE9iyNUReUTA+N5EBRcm1KgFR+Qe4QQYEEA4QwVH5D6BgHAACLcXj8hjAgYEEBsWamMDIgfhxxHTkNiUG3cWXIHIGyI0lAh+Q7KKggXZS4FVSEB0NxITZbGxIpUgNB3CNIRvkG6Ef9wgBFIT1AIggBDNZLrVVVhhhEBAyERHoHIET0XcKhAlSKZ1CQ3RsDc75pmoVCKNp2RBvEX8lGipVbuM9CpMmlWJlyoDYZqJdQGCj6yUpOn9vRJJMmmTJJkIzvg6Hh1xPH6pIGEiLwuNGEpMvIBoHH1oQOzL4va2uK2NLgEhJJCUhTogXqqJewwn/vwOiZeJewhhJHqWnwbSp56oJt3vy/JwkPPs2YhneB85ECjd80kcDrd8HP8gjEza/ZLs9B8+wekhkoAwu11N8GjOEZXOxa0F48MjPlqhS1AmQnCDN/+X3p93zxy+vnu/TvOiUKAAwQIFwZfQc53gibS5OfUWvxIiFrJzUSIvJSrkuRCxUCX9qdTofD6EApOcyakknIyWQeIPIEdM+pNky+s7L9fLWdRsDCHurr3cLWf2AmIeEfYCYh4R9gJiHhF2NMGJCHuCSNbrdXcEMY8I2yVeqqRa87gORxDziLBdIpkkOjUaQcwjwo5chSYi7Miz0ESEHfWKuESEHU4gEWEHEvPobWb9DCD+y5udpmjNzdQViwUhAwgxnDCtpy9ubhZgQPR8akUNrU5vHi2BL5ZuKiHUUEGJNiAyFqqsJ9Q2xXVBaiwWENTQrybqSdsUG6OE7uD1VfcSEtQbXoEQepF9iED0qsVAgqR9Y0JaOeojzguygKORB1fUs5HzgoaJugiPEwYNJ7ovqob/gPXHtk1t/tpsG1qucWuFxPZxJcPjVga0qTB20reIcPIG17li6FUJtKk10XYdQnTeZjAg1AHhWpemRrqGChS0qTQsMEiDNnUE8cCCGlxR0KYOFsoHdxZcERrEUat4c6/I2wNdSpQ8V6QSxOiN8E8zBG3qcIEvUmjttakj9hHWpWSU8BfjYZgnq0kqDAAAAABJRU5ErkJggg==';
-
-var SpriteIcon = function SpriteIcon(_ref) {
-  var onClick = _ref.onClick,
-      spriteKey = _ref.spriteKey,
-      baseSpriteKey = _ref.baseSpriteKey,
-      imgStyle = _ref.imgStyle;
-  return React__default.createElement(Container$d, null, baseSpriteKey && React__default.createElement(Slot, null, React__default.createElement(SpriteFromAtlas, {
-    onClick: onClick,
-    atlasJSON: iconsAtlasJSON,
-    atlasIMG: img$7,
-    spriteKey: baseSpriteKey,
-    width: 32,
-    height: 32,
-    containerStyle: {
-      zIndex: -1
-    }
-  })), React__default.createElement(Slot, null, React__default.createElement(SpriteFromAtlas, {
-    onClick: onClick,
-    atlasJSON: iconsAtlasJSON,
-    atlasIMG: img$7,
-    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__default.createElement(Container$e, {
+  return React__default.createElement(Container$d, {
     className: "simple-progress-bar"
   }, React__default.createElement(ProgressBarContainer, {
     margin: margin
@@ -7128,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%;"]);
@@ -7210,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__default.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__default.createElement(SkillsDraggableContainer, {
     title: "Skills"
   }, onCloseButton && React__default.createElement(CloseButton$2, {
     onClick: onCloseButton,
     onTouchStart: onCloseButton
-  }, "X"), React__default.createElement(SkillSplitDiv, null, React__default.createElement("p", null, "Combat Skills"), React__default.createElement("hr", {
+  }, "X"), React__default.createElement(SkillSplitDiv, null, React__default.createElement("p", null, "General"), React__default.createElement("hr", {
     className: "golden"
-  })), React__default.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__default.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__default.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__default.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__default.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__default.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__default.createElement(SkillSplitDiv, null, React__default.createElement("p", null, "Crafting Skills"), React__default.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__default.createElement("p", null, "Combat Skills"), React__default.createElement("hr", {
     className: "golden"
-  })), React__default.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__default.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__default.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__default.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__default.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__default.createElement(SkillSplitDiv, null, React__default.createElement("p", null, "Basic Attributes"), React__default.createElement("hr", {
+  })), onRenderSkillCategory('combat'), React__default.createElement(SkillSplitDiv, null, React__default.createElement("p", null, "Crafting Skills"), React__default.createElement("hr", {
     className: "golden"
-  })), React__default.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__default.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__default.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__default.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__default.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__default.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__default.createElement(SkillSplitDiv, null, React__default.createElement("p", null, "Basic Attributes"), React__default.createElement("hr", {
+    className: "golden"
+  })), onRenderSkillCategory('attributes'));
 };
 var SkillsDraggableContainer = /*#__PURE__*/styled(DraggableContainer).withConfig({
   displayName: "SkillsContainer__SkillsDraggableContainer",
@@ -7371,11 +6974,11 @@ var Truncate = function Truncate(_ref) {
   var _ref$maxLines = _ref.maxLines,
       maxLines = _ref$maxLines === void 0 ? 1 : _ref$maxLines,
       children = _ref.children;
-  return React__default.createElement(Container$f, {
+  return React__default.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) {
@@ -7404,7 +7007,6 @@ exports.RangeSlider = RangeSlider;
 exports.SkillProgressBar = SkillProgressBar;
 exports.SkillsContainer = SkillsContainer;
 exports.SpriteFromAtlas = SpriteFromAtlas;
-exports.SpriteIcon = SpriteIcon;
 exports.TextArea = TextArea;
 exports.Truncate = Truncate;
 exports._RPGUI = _RPGUI;