@rpg-engine/long-bow 0.1.71 → 0.1.74

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

@@ -13,8 +13,8 @@ var Draggable = _interopDefault(require('react-draggable'));
 var uuid = require('uuid');
 require('rpgui/rpgui.min.css');
 require('rpgui/rpgui.min.js');
-var mobxReact = require('mobx-react');
 var shared = require('@rpg-engine/shared');
+var mobxReact = require('mobx-react');
 var mobx = require('mobx');
 
 function _extends() {
@@ -354,8 +354,10 @@ var DraggableContainer = function DraggableContainer(_ref) {
       document.removeEventListener('clickOutside', function (_e) {});
     };
   }, []);
-  return React__default.createElement("div", {
-    ref: draggableRef
+  return React__default.createElement(DraggableRef, {
+    ref: draggableRef,
+    width: width,
+    height: height || 'auto'
   }, React__default.createElement(Draggable, {
     cancel: ".container-close," + cancelDrag,
     onDrag: function onDrag(_e, data) {
@@ -381,30 +383,39 @@ var DraggableContainer = function DraggableContainer(_ref) {
     onTouchStart: onCloseButton
   }, "X"), children)));
 };
-var Container$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "DraggableContainer__Container",
+var DraggableRef = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DraggableContainer__DraggableRef",
   componentId: "sc-184mpyl-0"
-})(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;&.rpgui-container{padding-top:1.5rem;}"], function (props) {
+})(["height:", ";width:", ";"], function (props) {
   return props.height;
 }, function (_ref2) {
   var width = _ref2.width;
   return width;
 });
+var Container$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DraggableContainer__Container",
+  componentId: "sc-184mpyl-1"
+})(["height:", ";width:", ";display:flex;flex-wrap:wrap;image-rendering:pixelated;&.rpgui-container{padding-top:1.5rem;}"], function (props) {
+  return props.height;
+}, function (_ref3) {
+  var width = _ref3.width;
+  return width;
+});
 var CloseButton$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggableContainer__CloseButton",
-  componentId: "sc-184mpyl-1"
+  componentId: "sc-184mpyl-2"
 })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
 var TitleContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "DraggableContainer__TitleContainer",
-  componentId: "sc-184mpyl-2"
+  componentId: "sc-184mpyl-3"
 })(["width:100%;height:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;"]);
 var Title = /*#__PURE__*/styled.h1.withConfig({
   displayName: "DraggableContainer__Title",
-  componentId: "sc-184mpyl-3"
+  componentId: "sc-184mpyl-4"
 })(["color:white;z-index:22;font-size:0.6rem;"]);
 var Icon = /*#__PURE__*/styled.img.withConfig({
   displayName: "DraggableContainer__Icon",
-  componentId: "sc-184mpyl-4"
+  componentId: "sc-184mpyl-5"
 })(["color:white;z-index:22;font-size:10px;width:", ";margin-right:0.5rem;"], function (props) {
   return props.width;
 });
@@ -456,152 +467,23 @@ var Dropdown = function Dropdown(_ref) {
   }));
 };
 
-var SlotsContainer = function SlotsContainer(_ref) {
-  var children = _ref.children,
-      title = _ref.title,
-      onClose = _ref.onClose,
-      _onPositionChange = _ref.onPositionChange,
-      onOutsideClick = _ref.onOutsideClick;
-  return React__default.createElement(DraggableContainer, {
-    title: title,
-    type: exports.RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) {
-        onClose();
-      }
-    },
-    width: "330px",
-    cancelDrag: ".item-container-body",
-    onPositionChange: function onPositionChange(_ref2) {
-      var x = _ref2.x,
-          y = _ref2.y;
-
-      if (_onPositionChange) {
-        _onPositionChange({
-          x: x,
-          y: y
-        });
-      }
-    },
-    onOutsideClick: onOutsideClick
-  }, children);
-};
-
-var ListMenu = function ListMenu(_ref) {
-  var options = _ref.options,
-      onSelected = _ref.onSelected,
+var ItemCard = function ItemCard(_ref) {
+  var item = _ref.item,
       x = _ref.x,
-      y = _ref.y,
-      _ref$fontSize = _ref.fontSize,
-      fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
+      y = _ref.y;
   return React__default.createElement(Container$3, {
     x: x,
-    y: y,
-    fontSize: fontSize
-  }, React__default.createElement("ul", {
-    className: "rpgui-list-imp",
-    style: {
-      overflow: 'hidden'
-    }
-  }, options.map(function (params) {
-    return React__default.createElement(ListElement, {
-      key: params == null ? void 0 : params.id,
-      onClick: function onClick() {
-        onSelected(params == null ? void 0 : params.id);
-      }
-    }, (params == null ? void 0 : params.text) || 'No text');
-  })));
+    y: y
+  }, item == null ? void 0 : item.name);
 };
 var Container$3 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ListMenu__Container",
-  componentId: "sc-i9097t-0"
-})(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", "em;}"], function (props) {
+  displayName: "ItemCard__Container",
+  componentId: "sc-170rits-0"
+})(["position:absolute;top:", "px;left:", "px;font-size:0.5rem;color:white;background-color:black;border-radius:5px;padding:0.5rem;min-width:20px;opacity:0.5;"], function (props) {
   return props.y || 0;
 }, function (props) {
   return props.x || 0;
-}, function (props) {
-  return props.fontSize;
 });
-var ListElement = /*#__PURE__*/styled.li.withConfig({
-  displayName: "ListMenu__ListElement",
-  componentId: "sc-i9097t-1"
-})(["margin-right:0.5rem;"]);
-
-var ContainerType;
-
-(function (ContainerType) {
-  ContainerType["INVENTORY"] = "Inventory";
-  ContainerType["EQUIPMENT_SET"] = "EquipmentSet";
-})(ContainerType || (ContainerType = {})); // TODO: Refactor this file
-
-
-var generateContextList = function generateContextList(actionsByTypeList) {
-  var contextMenu = actionsByTypeList.map(function (action) {
-    return {
-      id: action,
-      text: shared.ItemSocketEventsDisplayLabels[action]
-    };
-  });
-  return contextMenu;
-};
-
-var handleContextMenuList = function handleContextMenuList(itemType) {
-  var contextActionMenu = [];
-
-  switch (itemType) {
-    case shared.ItemType.Weapon:
-    case shared.ItemType.Armor:
-    case shared.ItemType.Accessory:
-    case shared.ItemType.Jewelry:
-    case shared.ItemType.Tool:
-      contextActionMenu = generateContextList(shared.ActionsByItemType.Equipment);
-      break;
-
-    case shared.ItemType.Consumable:
-      contextActionMenu = generateContextList(shared.ActionsByItemType.Consumable);
-      break;
-
-    case shared.ItemType.CraftMaterial:
-      contextActionMenu = generateContextList(shared.ActionsByItemType.CraftMaterial);
-      break;
-
-    case shared.ItemType.Other:
-    case shared.ItemType.Information:
-    case shared.ItemType.Quest:
-    case shared.ItemType.Container:
-      contextActionMenu = generateContextList(shared.ActionsByItemType.Other);
-      break;
-
-    default:
-      contextActionMenu = generateContextList(shared.ActionsByItemType.Other);
-      break;
-  }
-
-  return contextActionMenu;
-};
-var handleEquipmentContextMenuList = function handleEquipmentContextMenuList(itemType) {
-  var contextActionMenu = [];
-
-  switch (itemType) {
-    case shared.ItemType.Weapon:
-    case shared.ItemType.Armor:
-    case shared.ItemType.Accessory:
-    case shared.ItemType.Jewelry:
-    case shared.ItemType.Tool:
-      contextActionMenu = generateContextList(shared.ActionsByItemType.EquipmenSetItems);
-      break;
-
-    case shared.ItemType.Container:
-      contextActionMenu = generateContextList(shared.ActionsByItemType.EquipmenSetContainer);
-      break;
-
-    default:
-      contextActionMenu = generateContextList(shared.ActionsByItemType.EquipmenSetItems);
-      break;
-  }
-
-  return contextActionMenu;
-};
 
 var frames = {
 	"helmets/berserkers-helmet.png": {
@@ -6799,8 +6681,11 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
       width = _ref$width === void 0 ? shared.GRID_WIDTH : _ref$width,
       _ref$height = _ref.height,
       height = _ref$height === void 0 ? shared.GRID_HEIGHT : _ref$height,
-      _ref$scale = _ref.scale,
-      scale = _ref$scale === void 0 ? 2 : _ref$scale,
+      _ref$imgScale = _ref.imgScale,
+      imgScale = _ref$imgScale === void 0 ? 2 : _ref$imgScale,
+      imgStyle = _ref.imgStyle,
+      onClick = _ref.onClick,
+      containerStyle = _ref.containerStyle,
       _ref$grayScale = _ref.grayScale,
       grayScale = _ref$grayScale === void 0 ? false : _ref$grayScale,
       _ref$opacity = _ref.opacity,
@@ -6811,19 +6696,22 @@ var SpriteFromAtlas = function SpriteFromAtlas(_ref) {
   return React__default.createElement(Container$4, {
     width: width,
     height: height,
-    hasHover: grayScale
+    hasHover: grayScale,
+    onClick: onClick,
+    style: containerStyle
   }, React__default.createElement(ImgSprite, {
     className: "sprite-from-atlas-img",
     atlasIMG: atlasIMG,
     frame: spriteData.frame,
-    scale: scale,
+    scale: imgScale,
     grayScale: grayScale,
-    opacity: opacity
+    opacity: opacity,
+    style: imgStyle
   }));
 };
 var Container$4 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpriteFromAtlas__Container",
-  componentId: "sc-v74jf1-0"
+  componentId: "sc-1lpani8-0"
 })(["width:", "px;height:", "px;", ""], function (props) {
   return props.width;
 }, function (props) {
@@ -6833,7 +6721,7 @@ var Container$4 = /*#__PURE__*/styled.div.withConfig({
 });
 var ImgSprite = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpriteFromAtlas__ImgSprite",
-  componentId: "sc-v74jf1-1"
+  componentId: "sc-1lpani8-1"
 })(["width:", "px;height:", "px;background-image:url(", ");background-position:-", "px -", "px;transform:scale(", ");position:relative;top:8px;left:8px;filter:", ";opacity:", ";"], function (props) {
   return props.frame.w;
 }, function (props) {
@@ -6892,7 +6780,7 @@ var ItemSlot = function ItemSlot(_ref) {
         atlasIMG: img,
         atlasJSON: atlasJSON,
         spriteKey: itemToRender.texturePath,
-        scale: 3
+        imgScale: 3
       }));
     }
 
@@ -6913,14 +6801,14 @@ var ItemSlot = function ItemSlot(_ref) {
         atlasIMG: img,
         atlasJSON: atlasJSON,
         spriteKey: itemToRender.texturePath,
-        scale: 3
+        imgScale: 3
       });
     } else {
       return React__default.createElement(SpriteFromAtlas, {
         atlasIMG: img,
         atlasJSON: atlasJSON,
         spriteKey: EquipmentSlotSpriteByType[slotSpriteMask],
-        scale: 3,
+        imgScale: 3,
         grayScale: true,
         opacity: 0.4
       });
@@ -6960,45 +6848,161 @@ var ItemQty = /*#__PURE__*/styled.span.withConfig({
   return props.left;
 });
 
-var initialState = {
-  visible: false,
-  posX: 0,
-  posY: 0,
-  contextActions: [],
-  slotItem: null
-};
-var initialHoverState = {
-  visible: false,
-  posX: 0,
-  posY: 0,
-  item: null
+var ListMenu = function ListMenu(_ref) {
+  var options = _ref.options,
+      onSelected = _ref.onSelected,
+      x = _ref.x,
+      y = _ref.y,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? 0.8 : _ref$fontSize;
+  return React__default.createElement(Container$6, {
+    x: x,
+    y: y,
+    fontSize: fontSize
+  }, React__default.createElement("ul", {
+    className: "rpgui-list-imp",
+    style: {
+      overflow: 'hidden'
+    }
+  }, options.map(function (params, index) {
+    return React__default.createElement(ListElement, {
+      key: (params == null ? void 0 : params.id) || index,
+      onClick: function onClick() {
+        onSelected(params == null ? void 0 : params.id);
+      }
+    }, (params == null ? void 0 : params.text) || 'No text');
+  })));
 };
+var Container$6 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ListMenu__Container",
+  componentId: "sc-i9097t-0"
+})(["display:flex;flex-direction:column;width:100%;justify-content:start;align-items:flex-start;position:absolute;top:", "px;left:", "px;li{font-size:", "em;}"], function (props) {
+  return props.y || 0;
+}, function (props) {
+  return props.x || 0;
+}, function (props) {
+  return props.fontSize;
+});
+var ListElement = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ListMenu__ListElement",
+  componentId: "sc-i9097t-1"
+})(["margin-right:0.5rem;"]);
 
-var UIStore = /*#__PURE__*/function () {
-  function UIStore() {
-    var _this = this;
+var ContainerType;
 
-    this.contextMenu = initialState;
-    this.onHoverDetail = initialHoverState;
+(function (ContainerType) {
+  ContainerType["INVENTORY"] = "Inventory";
+  ContainerType["EQUIPMENT_SET"] = "EquipmentSet";
+})(ContainerType || (ContainerType = {})); // TODO: Refactor this file
 
-    this.handleOnItemClick = function (item, posX, posY, slotContainerType) {
-      var _this$contextMenu;
 
-      if (!item || JSON.stringify((_this$contextMenu = _this.contextMenu) == null ? void 0 : _this$contextMenu.slotItem) === JSON.stringify(item)) {
-        _this.clearContextMenu();
+var generateContextList = function generateContextList(actionsByTypeList) {
+  var contextMenu = actionsByTypeList.map(function (action) {
+    return {
+      id: action,
+      text: shared.ItemSocketEventsDisplayLabels[action]
+    };
+  });
+  return contextMenu;
+};
 
-        _this.clearItemHoverDetail();
+var handleContextMenuList = function handleContextMenuList(itemType) {
+  var contextActionMenu = [];
 
-        return;
-      }
+  switch (itemType) {
+    case shared.ItemType.Weapon:
+    case shared.ItemType.Armor:
+    case shared.ItemType.Accessory:
+    case shared.ItemType.Jewelry:
+    case shared.ItemType.Tool:
+      contextActionMenu = generateContextList(shared.ActionsByItemType.Equipment);
+      break;
 
-      switch (slotContainerType) {
-        case exports.SlotContainerType.EQUIPMENT_SET:
-          _this.setEquipContextMenu({
-            visible: true,
-            posX: posX,
-            posY: posY,
-            slotItem: item
+    case shared.ItemType.Consumable:
+      contextActionMenu = generateContextList(shared.ActionsByItemType.Consumable);
+      break;
+
+    case shared.ItemType.CraftMaterial:
+      contextActionMenu = generateContextList(shared.ActionsByItemType.CraftMaterial);
+      break;
+
+    case shared.ItemType.Other:
+    case shared.ItemType.Information:
+    case shared.ItemType.Quest:
+    case shared.ItemType.Container:
+      contextActionMenu = generateContextList(shared.ActionsByItemType.Other);
+      break;
+
+    default:
+      contextActionMenu = generateContextList(shared.ActionsByItemType.Other);
+      break;
+  }
+
+  return contextActionMenu;
+};
+var handleEquipmentContextMenuList = function handleEquipmentContextMenuList(itemType) {
+  var contextActionMenu = [];
+
+  switch (itemType) {
+    case shared.ItemType.Weapon:
+    case shared.ItemType.Armor:
+    case shared.ItemType.Accessory:
+    case shared.ItemType.Jewelry:
+    case shared.ItemType.Tool:
+      contextActionMenu = generateContextList(shared.ActionsByItemType.EquipmenSetItems);
+      break;
+
+    case shared.ItemType.Container:
+      contextActionMenu = generateContextList(shared.ActionsByItemType.EquipmenSetContainer);
+      break;
+
+    default:
+      contextActionMenu = generateContextList(shared.ActionsByItemType.EquipmenSetItems);
+      break;
+  }
+
+  return contextActionMenu;
+};
+
+var initialState = {
+  visible: false,
+  posX: 0,
+  posY: 0,
+  contextActions: [],
+  slotItem: null
+};
+var initialHoverState = {
+  visible: false,
+  posX: 0,
+  posY: 0,
+  item: null
+};
+
+var UIStore = /*#__PURE__*/function () {
+  function UIStore() {
+    var _this = this;
+
+    this.contextMenu = initialState;
+    this.onHoverDetail = initialHoverState;
+
+    this.handleOnItemClick = function (item, posX, posY, slotContainerType) {
+      var _this$contextMenu;
+
+      if (!item || JSON.stringify((_this$contextMenu = _this.contextMenu) == null ? void 0 : _this$contextMenu.slotItem) === JSON.stringify(item)) {
+        _this.clearContextMenu();
+
+        _this.clearItemHoverDetail();
+
+        return;
+      }
+
+      switch (slotContainerType) {
+        case exports.SlotContainerType.EQUIPMENT_SET:
+          _this.setEquipContextMenu({
+            visible: true,
+            posX: posX,
+            posY: posY,
+            slotItem: item
           }, item.type, item.isItemContainer);
 
           break;
@@ -7099,23 +7103,142 @@ var UIStore = /*#__PURE__*/function () {
 
 var uiStore = /*#__PURE__*/new UIStore();
 
-var ItemCard = function ItemCard(_ref) {
-  var item = _ref.item,
-      x = _ref.x,
-      y = _ref.y;
-  return React__default.createElement(Container$6, {
-    x: x,
-    y: y
-  }, item == null ? void 0 : item.name);
-};
-var Container$6 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "ItemCard__Container",
-  componentId: "sc-170rits-0"
-})(["position:absolute;top:", "px;left:", "px;font-size:0.5rem;color:white;background-color:black;border-radius:5px;padding:0.5rem;min-width:20px;opacity:0.5;"], function (props) {
-  return props.y || 0;
-}, function (props) {
-  return props.x || 0;
+var EquipmentSet = /*#__PURE__*/mobxReact.observer(function (_ref) {
+  var _uiStore$contextMenu, _uiStore$onHoverDetai;
+
+  var equipmentSet = _ref.equipmentSet,
+      onClose = _ref.onClose,
+      onMouseOver = _ref.onMouseOver,
+      onActionSelected = _ref.onActionSelected,
+      _ref$initialPosition = _ref.initialPosition,
+      initialPosition = _ref$initialPosition === void 0 ? {
+    x: 0,
+    y: 0
+  } : _ref$initialPosition;
+  var neck = equipmentSet.neck,
+      leftHand = equipmentSet.leftHand,
+      ring = equipmentSet.ring,
+      head = equipmentSet.head,
+      armor = equipmentSet.armor,
+      legs = equipmentSet.legs,
+      boot = equipmentSet.boot,
+      inventory = equipmentSet.inventory,
+      rightHand = equipmentSet.rightHand,
+      accessory = equipmentSet.accessory;
+  var equipmentData = [neck, leftHand, ring, head, armor, legs, boot, inventory, rightHand, accessory];
+  var equipmentMaskSlots = [shared.ItemSlotType.Neck, shared.ItemSlotType.LeftHand, shared.ItemSlotType.Ring, shared.ItemSlotType.Head, shared.ItemSlotType.Torso, shared.ItemSlotType.Legs, shared.ItemSlotType.Feet, shared.ItemSlotType.Inventory, shared.ItemSlotType.RightHand, shared.ItemSlotType.Accessory]; // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)
+
+  var _useState = React.useState(initialPosition),
+      draggablePosition = _useState[0],
+      setDraggablePosition = _useState[1];
+
+  var handleOnMouseHover = function handleOnMouseHover(event, slotIndex, item, x, y) {
+    uiStore.handleOnMouseHover(event, slotIndex, item, x, y, onMouseOver);
+  };
+
+  var onSelected = function onSelected(selectedActionId) {
+    uiStore.onSelected(selectedActionId, onActionSelected);
+  };
+
+  var onRenderEquipmentSlotRange = function onRenderEquipmentSlotRange(start, end) {
+    var equipmentRange = equipmentData.slice(start, end);
+    var slotMaksRange = equipmentMaskSlots.slice(start, end);
+    return equipmentRange.map(function (data, i) {
+      var _ref2;
+
+      var item = data;
+      var itemContainer = (_ref2 = item && item.itemContainer) != null ? _ref2 : null;
+      return React__default.createElement(ItemSlot, {
+        key: i,
+        slotIndex: i,
+        item: item,
+        itemContainer: itemContainer,
+        slotContainerType: exports.SlotContainerType.EQUIPMENT_SET,
+        slotSpriteMask: slotMaksRange[i],
+        onMouseOver: handleOnMouseHover,
+        onMouseOut: function onMouseOut() {
+          uiStore.clearItemHoverDetail();
+        },
+        onClick: uiStore.handleOnItemClick,
+        onCancelContextMenu: function onCancelContextMenu() {
+          uiStore.clearContextMenu();
+        }
+      });
+    });
+  };
+
+  return React__default.createElement(DraggableContainer, {
+    title: 'Equipments',
+    type: exports.RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) onClose();
+    },
+    width: "330px",
+    cancelDrag: ".equipment-container-body",
+    onPositionChange: function onPositionChange(_ref3) {
+      var x = _ref3.x,
+          y = _ref3.y;
+      setDraggablePosition({
+        x: x,
+        y: y
+      });
+    },
+    onOutsideClick: function onOutsideClick() {
+      uiStore.clearContextMenu();
+      uiStore.clearItemHoverDetail();
+    }
+  }, React__default.createElement(EquipmentSetContainer, {
+    className: "equipment-container-body"
+  }, React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10))), (_uiStore$contextMenu = uiStore.contextMenu) != null && _uiStore$contextMenu.visible ? React__default.createElement(ListMenu, {
+    x: uiStore.contextMenu.posX - draggablePosition.x,
+    y: uiStore.contextMenu.posY - draggablePosition.y,
+    options: uiStore.contextMenu.contextActions,
+    onSelected: onSelected
+  }) : null, (_uiStore$onHoverDetai = uiStore.onHoverDetail) != null && _uiStore$onHoverDetai.visible ? React__default.createElement(ItemCard, {
+    item: uiStore.onHoverDetail.item,
+    x: uiStore.onHoverDetail.posX - draggablePosition.x,
+    y: uiStore.onHoverDetail.posY - draggablePosition.y
+  }) : null);
 });
+var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "EquipmentSet__EquipmentSetContainer",
+  componentId: "sc-1wuddg2-0"
+})(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;"]);
+var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
+  displayName: "EquipmentSet__EquipmentColumn",
+  componentId: "sc-1wuddg2-1"
+})(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;"]);
+
+var SlotsContainer = function SlotsContainer(_ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      onClose = _ref.onClose,
+      _onPositionChange = _ref.onPositionChange,
+      onOutsideClick = _ref.onOutsideClick;
+  return React__default.createElement(DraggableContainer, {
+    title: title,
+    type: exports.RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) {
+        onClose();
+      }
+    },
+    width: "330px",
+    cancelDrag: ".item-container-body",
+    onPositionChange: function onPositionChange(_ref2) {
+      var x = _ref2.x,
+          y = _ref2.y;
+
+      if (_onPositionChange) {
+        _onPositionChange({
+          x: x,
+          y: y
+        });
+      }
+    },
+    onOutsideClick: onOutsideClick
+  }, children);
+};
 
 var ItemContainer = /*#__PURE__*/mobxReact.observer(function (_ref) {
   var _uiStore$contextMenu, _uiStore$onHoverDetai;
@@ -7192,8 +7315,8 @@ var ItemContainer = /*#__PURE__*/mobxReact.observer(function (_ref) {
     onSelected: onSelected
   }) : null, (_uiStore$onHoverDetai = uiStore.onHoverDetail) != null && _uiStore$onHoverDetai.visible ? React__default.createElement(ItemCard, {
     item: uiStore.onHoverDetail.item,
-    x: uiStore.onHoverDetail.posX,
-    y: uiStore.onHoverDetail.posY
+    x: uiStore.onHoverDetail.posX - draggablePosition.x,
+    y: uiStore.onHoverDetail.posY - draggablePosition.y
   }) : null);
 });
 var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
@@ -7732,25 +7855,371 @@ var Input$1 = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-v8mte9-0"
 })(["opacity:0;"]);
 
-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$b, {
-    className: "simple-progress-bar"
-  }, React__default.createElement(ProgressBarContainer, {
-    margin: margin
-  }, React__default.createElement(BackgroundBar, null, React__default.createElement(Progress, {
-    value: value,
-    bgColor: bgColor
-  }))));
-};
-var Container$b = /*#__PURE__*/styled.div.withConfig({
-  displayName: "SimpleProgressBar__Container",
-  componentId: "sc-mbeil3-0"
-})(["display:flex;justify-content:center;align-items:center;width:100%;"]);
+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$3 = '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$b, null, baseSpriteKey && React__default.createElement(Slot, null, React__default.createElement(SpriteFromAtlas, {
+    onClick: onClick,
+    atlasJSON: iconsAtlasJSON,
+    atlasIMG: img$3,
+    spriteKey: baseSpriteKey,
+    width: 32,
+    height: 32,
+    containerStyle: {
+      zIndex: -1
+    }
+  })), React__default.createElement(Slot, null, React__default.createElement(SpriteFromAtlas, {
+    onClick: onClick,
+    atlasJSON: iconsAtlasJSON,
+    atlasIMG: img$3,
+    spriteKey: spriteKey,
+    width: 28,
+    height: 28,
+    containerStyle: {
+      zIndex: 0
+    },
+    imgScale: baseSpriteKey ? 1.5 : 2,
+    imgStyle: imgStyle
+  })));
+};
+var Container$b = /*#__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$c, {
+    className: "simple-progress-bar"
+  }, React__default.createElement(ProgressBarContainer, {
+    margin: margin
+  }, React__default.createElement(BackgroundBar, null, React__default.createElement(Progress, {
+    value: value,
+    bgColor: bgColor
+  }))));
+};
+var Container$c = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SimpleProgressBar__Container",
+  componentId: "sc-mbeil3-0"
+})(["display:flex;justify-content:center;align-items:center;width:100%;"]);
 var BackgroundBar = /*#__PURE__*/styled.span.withConfig({
   displayName: "SimpleProgressBar__BackgroundBar",
   componentId: "sc-mbeil3-1"
@@ -7784,7 +8253,7 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
     atlasIMG: img,
     atlasJSON: atlasJSON,
     spriteKey: texturePath,
-    scale: 1,
+    imgScale: 1,
     grayScale: true,
     opacity: 0.5
   })) : React__default.createElement(React__default.Fragment, null)), React__default.createElement(ProgressBarContainer$1, null, React__default.createElement(SimpleProgressBar, {
@@ -7840,123 +8309,17 @@ 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$c, {
+  return React__default.createElement(Container$d, {
     maxLines: maxLines
   }, children);
 };
-var Container$c = /*#__PURE__*/styled.div.withConfig({
+var Container$d = /*#__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;
 });
 
-var EquipmentSet = /*#__PURE__*/mobxReact.observer(function (_ref) {
-  var _uiStore$contextMenu, _uiStore$onHoverDetai;
-
-  var equipmentSet = _ref.equipmentSet,
-      onClose = _ref.onClose,
-      onMouseOver = _ref.onMouseOver,
-      onActionSelected = _ref.onActionSelected,
-      _ref$initialPosition = _ref.initialPosition,
-      initialPosition = _ref$initialPosition === void 0 ? {
-    x: 0,
-    y: 0
-  } : _ref$initialPosition;
-  var neck = equipmentSet.neck,
-      leftHand = equipmentSet.leftHand,
-      ring = equipmentSet.ring,
-      head = equipmentSet.head,
-      armor = equipmentSet.armor,
-      legs = equipmentSet.legs,
-      boot = equipmentSet.boot,
-      inventory = equipmentSet.inventory,
-      rightHand = equipmentSet.rightHand,
-      accessory = equipmentSet.accessory;
-  var equipmentData = [neck, leftHand, ring, head, armor, legs, boot, inventory, rightHand, accessory];
-  var equipmentMaskSlots = [shared.ItemSlotType.Neck, shared.ItemSlotType.LeftHand, shared.ItemSlotType.Ring, shared.ItemSlotType.Head, shared.ItemSlotType.Torso, shared.ItemSlotType.Legs, shared.ItemSlotType.Feet, shared.ItemSlotType.Inventory, shared.ItemSlotType.RightHand, shared.ItemSlotType.Accessory]; // we use this draggable position to offset the menu position, after the container is dragged (otherwise, it bugs!)
-
-  var _useState = React.useState(initialPosition),
-      draggablePosition = _useState[0],
-      setDraggablePosition = _useState[1];
-
-  var handleOnMouseHover = function handleOnMouseHover(event, slotIndex, item, x, y) {
-    uiStore.handleOnMouseHover(event, slotIndex, item, x, y, onMouseOver);
-  };
-
-  var onSelected = function onSelected(selectedActionId) {
-    uiStore.onSelected(selectedActionId, onActionSelected);
-  };
-
-  var onRenderEquipmentSlotRange = function onRenderEquipmentSlotRange(start, end) {
-    var equipmentRange = equipmentData.slice(start, end);
-    var slotMaksRange = equipmentMaskSlots.slice(start, end);
-    return equipmentRange.map(function (data, i) {
-      var _ref2;
-
-      var item = data;
-      var itemContainer = (_ref2 = item && item.itemContainer) != null ? _ref2 : null;
-      return React__default.createElement(ItemSlot, {
-        key: i,
-        slotIndex: i,
-        item: item,
-        itemContainer: itemContainer,
-        slotContainerType: exports.SlotContainerType.EQUIPMENT_SET,
-        slotSpriteMask: slotMaksRange[i],
-        onMouseOver: handleOnMouseHover,
-        onMouseOut: function onMouseOut() {
-          uiStore.clearItemHoverDetail();
-        },
-        onClick: uiStore.handleOnItemClick,
-        onCancelContextMenu: function onCancelContextMenu() {
-          uiStore.clearContextMenu();
-        }
-      });
-    });
-  };
-
-  return React__default.createElement(DraggableContainer, {
-    title: 'Equipments',
-    type: exports.RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
-    },
-    width: "330px",
-    cancelDrag: ".equipment-container-body",
-    onPositionChange: function onPositionChange(_ref3) {
-      var x = _ref3.x,
-          y = _ref3.y;
-      setDraggablePosition({
-        x: x,
-        y: y
-      });
-    },
-    onOutsideClick: function onOutsideClick() {
-      uiStore.clearContextMenu();
-      uiStore.clearItemHoverDetail();
-    }
-  }, React__default.createElement(EquipmentSetContainer, {
-    className: "equipment-container-body"
-  }, React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(0, 3)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(3, 7)), React__default.createElement(EquipmentColumn, null, onRenderEquipmentSlotRange(7, 10))), (_uiStore$contextMenu = uiStore.contextMenu) != null && _uiStore$contextMenu.visible ? React__default.createElement(ListMenu, {
-    x: uiStore.contextMenu.posX - draggablePosition.x,
-    y: uiStore.contextMenu.posY - draggablePosition.y,
-    options: uiStore.contextMenu.contextActions,
-    onSelected: onSelected
-  }) : null, (_uiStore$onHoverDetai = uiStore.onHoverDetail) != null && _uiStore$onHoverDetai.visible ? React__default.createElement(ItemCard, {
-    item: uiStore.onHoverDetail.item,
-    x: uiStore.onHoverDetail.posX - draggablePosition.x,
-    y: uiStore.onHoverDetail.posY - draggablePosition.y
-  }) : null);
-});
-var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "EquipmentSet__EquipmentSetContainer",
-  componentId: "sc-1wuddg2-0"
-})(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;"]);
-var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
-  displayName: "EquipmentSet__EquipmentColumn",
-  componentId: "sc-1wuddg2-1"
-})(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;"]);
-
 exports.Button = Button;
 exports.Chat = Chat;
 exports.CheckButton = CheckButton;
@@ -7977,6 +8340,7 @@ exports.RPGUIRoot = RPGUIRoot;
 exports.RangeSlider = RangeSlider;
 exports.SkillProgressBar = SkillProgressBar;
 exports.SpriteFromAtlas = SpriteFromAtlas;
+exports.SpriteIcon = SpriteIcon;
 exports.TextArea = TextArea;
 exports.Truncate = Truncate;
 exports._RPGUI = _RPGUI;