@rpg-engine/long-bow 0.4.6 → 0.4.8

package/dist/long-bow.esm.js

@@ -9,6 +9,7 @@ import ReactDOM from 'react-dom';
 import { camelCase } from 'lodash-es';
 import { observer } from 'mobx-react-lite';
 import { v4 } from 'uuid';
+import { AiFillCaretRight } from 'react-icons/ai';
 import 'rpgui/rpgui.min.css';
 import 'rpgui/rpgui.min.js';
 import capitalize from 'lodash-es/capitalize';
@@ -12345,14 +12346,14 @@ var Ellipsis = function Ellipsis(_ref) {
     maxWidth: maxWidth,
     fontSize: fontSize,
     center: center
-  }, React.createElement("div", {
+  }, React.createElement("span", {
     className: "ellipsis-" + maxLines + "-lines"
   }, children));
 };
-var Container$1 = /*#__PURE__*/styled.div.withConfig({
+var Container$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "Ellipsis__Container",
   componentId: "sc-ysrlju-0"
-})([".ellipsis-1-lines{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";font-size:", ";", "}.ellipsis-2-lines{display:-webkit-box;max-width:", "px;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}.ellipsis-3-lines{display:-webkit-box;max-width:", "px;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}"], function (props) {
+})(["display:block;margin:0;.ellipsis-1-lines{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:", ";font-size:", ";", "}.ellipsis-2-lines{display:block;display:-webkit-box;max-width:", "px;height:25px;margin:0 auto;line-height:1;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}.ellipsis-3-lines{display:block;display:-webkit-box;max-width:", "px;height:43px;margin:0 auto;line-height:1;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;overflow:hidden;font-size:", ";}"], function (props) {
   return props.maxWidth;
 }, function (props) {
   return props.fontSize;
@@ -13051,7 +13052,9 @@ var DraggableContainer = function DraggableContainer(_ref) {
       x: 0,
       y: 0
     } : _ref$initialPosition,
-    scale = _ref.scale;
+    scale = _ref.scale,
+    _ref$dragDisabled = _ref.dragDisabled,
+    dragDisabled = _ref$dragDisabled === void 0 ? false : _ref$dragDisabled;
   var draggableRef = useRef(null);
   useOutsideClick(draggableRef, 'item-container');
   useEffect(function () {
@@ -13069,6 +13072,7 @@ var DraggableContainer = function DraggableContainer(_ref) {
   }, []);
   return React.createElement(Draggable, {
     cancel: ".container-close," + cancelDrag,
+    disabled: dragDisabled,
     onDrag: function onDrag(_e, data) {
       if (onPositionChange) {
         onPositionChange({
@@ -13493,7 +13497,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       y: 0
     });
     setIsFocused(false);
-    if (item) {
+    if (item && containerType) {
       setContextActions(generateContextMenu(item, containerType, isDepotSystem));
     }
   }, [item, isDepotSystem]);
@@ -13609,7 +13613,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       });
       setIsFocused(false);
     } else if (item) {
-      onDragEnd(quantity);
+      onDragEnd == null ? void 0 : onDragEnd(quantity);
     }
   };
   return React.createElement(Container$a, {
@@ -13617,7 +13621,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     className: "rpgui-icon empty-slot",
     onMouseUp: function onMouseUp() {
       var data = item ? item : null;
-      if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
+      if (onPlaceDrop && containerType) onPlaceDrop(data, slotIndex, containerType);
     },
     onTouchEnd: function onTouchEnd(e) {
       var _document$elementFrom;
@@ -13631,11 +13635,15 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
       });
       (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
     },
+    onPointerDown: onDragStart !== undefined && onDragEnd !== undefined ? undefined : function () {
+      if (item) onPointerDown(item.type, containerType != null ? containerType : null, item);
+    },
     isSelectingShortcut: isSelectingShortcut && ((item == null ? void 0 : item.type) === ItemType.Consumable || (item == null ? void 0 : item.type) === ItemType.Tool)
   }, React.createElement(Draggable, {
     axis: isSelectingShortcut ? 'none' : 'both',
     defaultClassName: item ? 'draggable' : 'empty-slot',
     scale: dragScale,
+    disabled: onDragStart === undefined || onDragEnd === undefined,
     onStop: function onStop(e, data) {
       var target = e.target;
       if (target != null && target.id.includes('shortcutSetter') && setItemShortcut && item) {
@@ -13669,7 +13677,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
           y: y
         });
         setTimeout(function () {
-          if (checkIfItemCanBeMoved()) {
+          if (checkIfItemCanBeMoved != null && checkIfItemCanBeMoved()) {
             if (checkIfItemShouldDragEnd && !checkIfItemShouldDragEnd()) return;
             if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccesfulDrag);else onSuccesfulDrag(item.stackQty);
           } else {
@@ -13697,14 +13705,14 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
             });
           }
         }
-        onPointerDown(item.type, containerType, item);
+        onPointerDown(item.type, containerType != null ? containerType : null, item);
       }
     },
     onStart: function onStart() {
       if (!item || isSelectingShortcut) {
         return;
       }
-      if (onDragStart) {
+      if (onDragStart && containerType) {
         onDragStart(item, slotIndex, containerType);
       }
     },
@@ -13720,7 +13728,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     ref: dragContainer,
     isFocused: isFocused,
     onMouseOver: function onMouseOver(event) {
-      _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
+      _onMouseOver == null ? void 0 : _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
     },
     onMouseOut: function onMouseOut() {
       if (_onMouseOut) _onMouseOut();
@@ -13749,7 +13757,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     onSelected: function onSelected(optionId) {
       setIsContextMenuVisible(false);
       if (item) {
-        _onSelected(optionId, item);
+        _onSelected == null ? void 0 : _onSelected(optionId, item);
       }
     }
   }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React.createElement(RelativeListMenu, {
@@ -13757,7 +13765,7 @@ var ItemSlot = /*#__PURE__*/observer(function (_ref) {
     onSelected: function onSelected(optionId) {
       setIsContextMenuVisible(false);
       if (item) {
-        _onSelected(optionId, item);
+        _onSelected == null ? void 0 : _onSelected(optionId, item);
       }
     },
     onOutsideClick: function onOutsideClick() {
@@ -14430,7 +14438,7 @@ var Dropdown = function Dropdown(_ref) {
   }, React.createElement(DropdownSelect, {
     id: "dropdown-" + dropdownId,
     className: "rpgui-dropdown-imp rpgui-dropdown-imp-header",
-    onPointerDown: function onPointerDown() {
+    onPointerUp: function onPointerUp() {
       return setOpened(function (prev) {
         return !prev;
       });
@@ -14441,7 +14449,7 @@ var Dropdown = function Dropdown(_ref) {
   }, options.map(function (option) {
     return React.createElement("li", {
       key: option.id,
-      onPointerDown: function onPointerDown() {
+      onPointerUp: function onPointerUp() {
         setSelectedValue(option.value);
         setSelectedOption(option.option);
         setOpened(false);
@@ -14458,11 +14466,11 @@ var Container$d = /*#__PURE__*/styled.div.withConfig({
 var DropdownSelect = /*#__PURE__*/styled.p.withConfig({
   displayName: "Dropdown__DropdownSelect",
   componentId: "sc-8arn65-1"
-})(["width:100%;box-sizing:border-box;"]);
+})(["width:100%;box-sizing:border-box;label{display:inline-block;transform:translateY(-2px);}"]);
 var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
   displayName: "Dropdown__DropdownOptions",
   componentId: "sc-8arn65-2"
-})(["position:absolute;width:100%;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
+})(["position:absolute;width:100%;max-height:300px;overflow-y:auto;display:", ";box-sizing:border-box;@media (max-width:768px){padding:8px 0;}"], function (props) {
   return props.opened ? 'block' : 'none';
 });
 
@@ -15129,6 +15137,75 @@ var ListElement$1 = /*#__PURE__*/styled.li.withConfig({
   componentId: "sc-i9097t-1"
 })(["margin-right:0.5rem;"]);
 
+var Pager = function Pager(_ref) {
+  var totalItems = _ref.totalItems,
+    currentPage = _ref.currentPage,
+    itemsPerPage = _ref.itemsPerPage,
+    onPageChange = _ref.onPageChange;
+  var totalPages = Math.ceil(totalItems / itemsPerPage);
+  return React.createElement(Container$g, null, React.createElement("p", null, "Total items: ", totalItems), React.createElement(PagerContainer, null, React.createElement("button", {
+    disabled: currentPage === 1,
+    onPointerDown: function onPointerDown() {
+      return onPageChange(Math.max(currentPage - 1, 1));
+    }
+  }, '<'), React.createElement("div", {
+    className: "rpgui-container framed-grey"
+  }, currentPage), React.createElement("button", {
+    disabled: currentPage === totalPages,
+    onPointerDown: function onPointerDown() {
+      return onPageChange(Math.min(currentPage + 1, totalPages));
+    }
+  }, '>')));
+};
+var Container$g = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Pager__Container",
+  componentId: "sc-1ekmf50-0"
+})(["display:flex;flex-direction:column;align-items:center;p{margin:0;font-size:", ";}"], uiFonts.size.xsmall);
+var PagerContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Pager__PagerContainer",
+  componentId: "sc-1ekmf50-1"
+})(["display:flex;justify-content:center;align-items:center;gap:5px;p{margin:0;}div{color:white;}button{width:40px;height:40px;background-color:", ";border:none;border-radius:5px;color:white;:hover{background-color:", ";}:disabled{opacity:0.5;}&.active{background-color:", ";font-weight:bold;color:black;}}"], uiColors.darkGray, uiColors.lightGray, uiColors.orange);
+
+var ConfirmModal = function ConfirmModal(_ref) {
+  var onConfirm = _ref.onConfirm,
+    onClose = _ref.onClose,
+    message = _ref.message;
+  return React.createElement(ModalPortal, null, React.createElement(Background, null), React.createElement(Container$h, {
+    onPointerDown: onClose
+  }, React.createElement(DraggableContainer, {
+    width: "auto",
+    dragDisabled: true
+  }, React.createElement(Wrapper$1, {
+    onPointerDown: function onPointerDown(e) {
+      return e.stopPropagation();
+    }
+  }, React.createElement("p", null, message != null ? message : 'Are you sure?'), React.createElement(ButtonsWrapper, null, React.createElement("div", {
+    className: "cancel-button"
+  }, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: onClose
+  }, "No")), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: onConfirm
+  }, "Yes"))))));
+};
+var Background = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__Background",
+  componentId: "sc-11qkyu1-0"
+})(["position:absolute;width:100%;height:100%;background-color:#000000;opacity:0.5;left:0;top:0;z-index:1000;"]);
+var Container$h = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__Container",
+  componentId: "sc-11qkyu1-1"
+})(["position:absolute;width:100%;height:100%;left:0;top:0;display:flex;justify-content:center;align-items:center;z-index:1001;"]);
+var Wrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__Wrapper",
+  componentId: "sc-11qkyu1-2"
+})(["p{margin:0;}"]);
+var ButtonsWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ConfirmModal__ButtonsWrapper",
+  componentId: "sc-11qkyu1-3"
+})(["display:flex;justify-content:flex-end;gap:5px;margin-top:5px;.cancel-button{filter:grayscale(0.7);}"]);
+
 var MarketplaceRows = function MarketplaceRows(_ref) {
   var atlasJSON = _ref.atlasJSON,
     atlasIMG = _ref.atlasIMG,
@@ -15136,14 +15213,16 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
     itemPrice = _ref.itemPrice,
     equipmentSet = _ref.equipmentSet,
     scale = _ref.scale,
-    onHandleClick = _ref.onHandleClick;
-  return React.createElement(MarketPlaceWrapper, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer, null, React.createElement(ItemInfoWrapper, {
+    onMarketPlaceItemBuy = _ref.onMarketPlaceItemBuy,
+    onMarketPlaceItemRemove = _ref.onMarketPlaceItemRemove,
+    disabled = _ref.disabled;
+  return React.createElement(MarketplaceWrapper, null, React.createElement(ItemInfoWrapper, {
     item: item,
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     equipmentSet: equipmentSet,
     scale: scale
-  }, React.createElement(SpriteFromAtlas, {
+  }, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer, null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: getItemTextureKeyPath({
@@ -15153,136 +15232,446 @@ var MarketplaceRows = function MarketplaceRows(_ref) {
       isStackable: item.isStackable
     }, atlasJSON),
     imgScale: 2
-  }))), React.createElement(PriceValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
+  }), React.createElement(QuantityContainer, null, item.stackQty && item.stackQty > 1 && "x" + Math.round(item.stackQty * 10) / 10)), React.createElement(PriceValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
     maxLines: 1,
-    maxWidth: "150px",
+    maxWidth: "200px",
     fontSize: "10px"
-  }, item.name)))), React.createElement(QuantityContainer, null, React.createElement(QuantityDisplay, null, React.createElement(TextOverlay$1, null, React.createElement(Item$1, null, React.createElement(Ellipsis, {
-    maxLines: 1,
-    maxWidth: "150px",
-    fontSize: "10px"
-  }, item.rarity))))), React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer, null, React.createElement(SpriteFromAtlas, {
+  }, item.name))))), React.createElement(Flex$1, null, React.createElement(ItemIconContainer, null, React.createElement(SpriteContainer, null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
-    spriteKey: 'others/gold-coin-qty-4.png',
+    spriteKey: "others/gold-coin-qty-5.png",
     imgScale: 2
   })), React.createElement(PriceValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
     maxLines: 1,
-    maxWidth: "150px",
+    maxWidth: "200px",
     fontSize: "10px"
   }, "$", itemPrice)))), React.createElement(ButtonContainer$1, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,
-    onClick: function onClick() {
-      return onHandleClick(item.name);
+    disabled: disabled,
+    onPointerDown: function onPointerDown() {
+      if (disabled) return;
+      onMarketPlaceItemBuy == null ? void 0 : onMarketPlaceItemBuy();
+      onMarketPlaceItemRemove == null ? void 0 : onMarketPlaceItemRemove();
     }
-  }, "Buy")));
+  }, onMarketPlaceItemBuy ? 'Buy' : 'Remove'))));
 };
-var MarketPlaceWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__MarketPlaceWrapper",
+var MarketplaceWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__MarketplaceWrapper",
   componentId: "sc-wmpr1o-0"
-})(["margin:auto;display:grid;grid-template-columns:35% 20% 20% 25%;&:hover{background-color:", ";}padding:0.5rem;p{font-size:0.8rem;}"], uiColors.darkGray);
+})(["margin:auto;display:flex;justify-content:space-between;padding:0.5rem;&:hover{background-color:", ";}p{font-size:0.8rem;}"], uiColors.darkGray);
+var QuantityContainer = /*#__PURE__*/styled.p.withConfig({
+  displayName: "MarketplaceRows__QuantityContainer",
+  componentId: "sc-wmpr1o-1"
+})(["position:absolute;display:block;top:15px;left:25px;font-size:", " !important;"], uiFonts.size.xsmall);
+var Flex$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "MarketplaceRows__Flex",
+  componentId: "sc-wmpr1o-2"
+})(["display:flex;gap:24px;"]);
 var ItemIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ItemIconContainer",
-  componentId: "sc-wmpr1o-1"
+  componentId: "sc-wmpr1o-3"
 })(["display:flex;justify-content:flex-start;align-items:center;"]);
 var SpriteContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__SpriteContainer",
-  componentId: "sc-wmpr1o-2"
-})(["position:relative;top:-0.5rem;left:0.5rem;"]);
-var Item$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "MarketplaceRows__Item",
-  componentId: "sc-wmpr1o-3"
-})(["color:white;text-align:center;z-index:1;width:100%;"]);
-var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__TextOverlay",
   componentId: "sc-wmpr1o-4"
-})(["width:100%;position:relative;"]);
-var QuantityContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__QuantityContainer",
-  componentId: "sc-wmpr1o-5"
-})(["position:relative;display:flex;min-width:100px;justify-content:center;align-items:center;"]);
-var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "MarketplaceRows__QuantityDisplay",
-  componentId: "sc-wmpr1o-6"
-})(["font-size:", ";"], uiFonts.size.small);
+})(["position:relative;top:-0.5rem;left:0.5rem;"]);
 var PriceValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__PriceValue",
-  componentId: "sc-wmpr1o-7"
+  componentId: "sc-wmpr1o-5"
 })(["margin-left:40px;"]);
 var ButtonContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "MarketplaceRows__ButtonContainer",
-  componentId: "sc-wmpr1o-8"
+  componentId: "sc-wmpr1o-6"
 })(["margin:auto;"]);
 
-var Marketplace = function Marketplace(_ref) {
+var OrderByType;
+(function (OrderByType) {
+  OrderByType["Name"] = "Name";
+  OrderByType["Price"] = "Price";
+})(OrderByType || (OrderByType = {}));
+var itemTypeOptions = /*#__PURE__*/['Type'].concat(Object.keys(ItemSubType)).filter(function (type) {
+  return type !== 'DeadBody';
+}).map(function (itemType, index) {
+  return {
+    id: index + 1,
+    value: itemType,
+    option: itemType
+  };
+});
+var itemRarityOptions = /*#__PURE__*/['Rarity'].concat(Object.values(ItemRarities)).map(function (itemRarity, index) {
+  return {
+    id: index + 1,
+    value: itemRarity,
+    option: itemRarity
+  };
+});
+var orderByOptions = /*#__PURE__*/Object.values(OrderByType).flatMap(function (orderBy, index) {
+  return [{
+    id: index * 2 + 1,
+    value: orderBy.toLowerCase(),
+    option: React.createElement(React.Fragment, null, orderBy, ' ', React.createElement("span", {
+      style: {
+        transform: 'translateY(-2px)',
+        display: 'inline-block'
+      }
+    }, "\u2193"))
+  }, {
+    id: index * 2 + 2,
+    value: '-' + orderBy.toLowerCase(),
+    option: React.createElement(React.Fragment, null, orderBy, ' ', React.createElement("span", {
+      style: {
+        transform: 'translateY(-2px)',
+        display: 'inline-block'
+      }
+    }, "\u2191"))
+  }];
+});
+
+var BuyPanel = function BuyPanel(_ref) {
   var items = _ref.items,
     atlasIMG = _ref.atlasIMG,
     atlasJSON = _ref.atlasJSON,
-    onClose = _ref.onClose,
-    optionsType = _ref.optionsType,
-    optionsRarity = _ref.optionsRarity,
-    optionsPrice = _ref.optionsPrice,
     onChangeType = _ref.onChangeType,
     onChangeRarity = _ref.onChangeRarity,
     onChangeOrder = _ref.onChangeOrder,
     onChangeNameInput = _ref.onChangeNameInput,
-    scale = _ref.scale,
+    onChangeMainLevelInput = _ref.onChangeMainLevelInput,
+    onChangeSecondaryLevelInput = _ref.onChangeSecondaryLevelInput,
+    onChangePriceInput = _ref.onChangePriceInput,
     equipmentSet = _ref.equipmentSet,
-    onHandleClick = _ref.onHandleClick;
-  return React.createElement(DraggableContainer, {
-    type: RPGUIContainerTypes.Framed,
-    onCloseButton: function onCloseButton() {
-      if (onClose) onClose();
+    onMarketPlaceItemBuy = _ref.onMarketPlaceItemBuy,
+    characterId = _ref.characterId,
+    enableHotkeys = _ref.enableHotkeys,
+    disableHotkeys = _ref.disableHotkeys;
+  var _useState = useState(''),
+    name = _useState[0],
+    setName = _useState[1];
+  var _useState2 = useState([undefined, undefined]),
+    mainLevel = _useState2[0],
+    setMainLevel = _useState2[1];
+  var _useState3 = useState([undefined, undefined]),
+    secondaryLevel = _useState3[0],
+    setSecondaryLevel = _useState3[1];
+  var _useState4 = useState([undefined, undefined]),
+    price = _useState4[0],
+    setPrice = _useState4[1];
+  var _useState5 = useState(null),
+    buyingItemId = _useState5[0],
+    setBuyingItemId = _useState5[1];
+  return React.createElement(React.Fragment, null, buyingItemId && React.createElement(ConfirmModal, {
+    onClose: setBuyingItemId.bind(null, null),
+    onConfirm: function onConfirm() {
+      onMarketPlaceItemBuy == null ? void 0 : onMarketPlaceItemBuy(buyingItemId);
+      setBuyingItemId(null);
+      enableHotkeys == null ? void 0 : enableHotkeys();
     },
-    width: "800px",
-    cancelDrag: "#MarketContainer",
-    scale: scale
-  }, React.createElement(React.Fragment, null, React.createElement(InputWrapper, null, React.createElement("p", null, " Search By Name"), React.createElement(Input, {
-    onChange: onChangeNameInput,
-    placeholder: 'Search...'
-  })), React.createElement(WrapperContainer, null, React.createElement(StyledDropdown, {
-    options: optionsType,
+    message: "Are you sure to buy this item?"
+  }), React.createElement(InputWrapper, null, React.createElement("p", null, "Search By Name"), React.createElement(Input, {
+    onChange: function onChange(e) {
+      setName(e.target.value);
+      onChangeNameInput(e.target.value);
+    },
+    value: name,
+    placeholder: "Enter name...",
+    onBlur: enableHotkeys,
+    onFocus: disableHotkeys
+  })), React.createElement(OptionsWrapper, null, React.createElement(FilterInputsWrapper, null, React.createElement("div", null, React.createElement("p", null, "Main level"), React.createElement(Input, {
+    onChange: function onChange(e) {
+      setMainLevel([Number(e.target.value), mainLevel[1]]);
+      onChangeMainLevelInput([Number(e.target.value), mainLevel[1]]);
+    },
+    placeholder: "Min",
+    type: "number",
+    min: 0,
+    onBlur: enableHotkeys,
+    onFocus: disableHotkeys
+  }), React.createElement(AiFillCaretRight, null), React.createElement(Input, {
+    onChange: function onChange(e) {
+      setMainLevel([mainLevel[0], Number(e.target.value)]);
+      onChangeMainLevelInput([mainLevel[0], Number(e.target.value)]);
+    },
+    placeholder: "Max",
+    type: "number",
+    min: 0,
+    onBlur: enableHotkeys,
+    onFocus: disableHotkeys
+  })), React.createElement("div", null, React.createElement("p", null, "Secondary level"), React.createElement(Input, {
+    onChange: function onChange(e) {
+      setSecondaryLevel([Number(e.target.value), secondaryLevel[1]]);
+      onChangeSecondaryLevelInput([Number(e.target.value), secondaryLevel[1]]);
+    },
+    placeholder: "Min",
+    type: "number",
+    min: 0,
+    onBlur: enableHotkeys,
+    onFocus: disableHotkeys
+  }), React.createElement(AiFillCaretRight, null), React.createElement(Input, {
+    onChange: function onChange(e) {
+      setSecondaryLevel([secondaryLevel[0], Number(e.target.value)]);
+      onChangeSecondaryLevelInput([secondaryLevel[0], Number(e.target.value)]);
+    },
+    placeholder: "Max",
+    type: "number",
+    min: 0,
+    onBlur: enableHotkeys,
+    onFocus: disableHotkeys
+  })), React.createElement("div", null, React.createElement("p", null, "Price"), React.createElement(Input, {
+    onChange: function onChange(e) {
+      setPrice([Number(e.target.value), price[1]]);
+      onChangePriceInput([Number(e.target.value), price[1]]);
+    },
+    placeholder: "Min",
+    type: "number",
+    min: 0,
+    className: "big-input",
+    onBlur: enableHotkeys,
+    onFocus: disableHotkeys
+  }), React.createElement(AiFillCaretRight, null), React.createElement(Input, {
+    onChange: function onChange(e) {
+      setPrice([price[0], Number(e.target.value)]);
+      onChangePriceInput([price[0], Number(e.target.value)]);
+    },
+    placeholder: "Max",
+    type: "number",
+    min: 0,
+    className: "big-input",
+    onBlur: enableHotkeys,
+    onFocus: disableHotkeys
+  }))), React.createElement(WrapperContainer, null, React.createElement(StyledDropdown, {
+    options: itemTypeOptions,
     onChange: onChangeType,
-    width: '220px'
+    width: "95%"
   }), React.createElement(StyledDropdown, {
-    options: optionsRarity,
+    options: itemRarityOptions,
     onChange: onChangeRarity,
-    width: '220px'
+    width: "95%"
   }), React.createElement(StyledDropdown, {
-    options: optionsPrice,
+    options: orderByOptions,
     onChange: onChangeOrder,
-    width: '220px'
-  })), React.createElement(ItemComponentScrollWrapper, {
+    width: "100%"
+  }))), React.createElement(ItemComponentScrollWrapper, {
     id: "MarketContainer"
-  }, items == null ? void 0 : items.map(function (item, index) {
+  }, items == null ? void 0 : items.map(function (_ref2, index) {
+    var item = _ref2.item,
+      price = _ref2.price,
+      _id = _ref2._id,
+      owner = _ref2.owner;
     return React.createElement(MarketplaceRows, {
       key: item.key + "_" + index,
       atlasIMG: atlasIMG,
       atlasJSON: atlasJSON,
       item: item,
-      itemPrice: 10,
+      itemPrice: price,
       equipmentSet: equipmentSet,
-      onHandleClick: onHandleClick
+      onMarketPlaceItemBuy: setBuyingItemId.bind(null, _id),
+      disabled: owner === characterId
     });
-  }))));
+  })));
 };
 var InputWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Marketplace__InputWrapper",
-  componentId: "sc-h904b1-0"
-})(["width:95%;display:flex;justify-content:flex-start;align-items:center;margin:auto;margin-bottom:10px;p{width:auto;margin-right:20px;}input{width:68%;height:10px;}"]);
+  displayName: "BuyPanel__InputWrapper",
+  componentId: "sc-1si8t7i-0"
+})(["width:95%;display:flex !important;justify-content:flex-start;align-items:center;margin:auto;p{width:auto;margin-right:20px;}input{width:68%;height:10px;}"]);
+var OptionsWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BuyPanel__OptionsWrapper",
+  componentId: "sc-1si8t7i-1"
+})(["width:100%;height:100px;"]);
+var FilterInputsWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BuyPanel__FilterInputsWrapper",
+  componentId: "sc-1si8t7i-2"
+})(["width:95%;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;margin-left:10px;gap:5px;color:white;flex-wrap:wrap;p{width:auto;margin:0;}input{width:75px;height:10px;}.big-input{width:130px;}"]);
 var WrapperContainer = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Marketplace__WrapperContainer",
-  componentId: "sc-h904b1-1"
-})(["display:grid;grid-template-columns:30% 30% 30%;justify-content:space-between;width:90%;margin-left:10px;.rpgui-content .rpgui-dropdown-imp-header{padding:0px 10px 0 !important;}"]);
+  displayName: "BuyPanel__WrapperContainer",
+  componentId: "sc-1si8t7i-3"
+})(["display:grid;grid-template-columns:40% 30% 30%;justify-content:space-between;width:calc(100% - 40px);margin-left:10px;.rpgui-content .rpgui-dropdown-imp-header{padding:0px 10px 0 !important;}"]);
 var ItemComponentScrollWrapper = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Marketplace__ItemComponentScrollWrapper",
-  componentId: "sc-h904b1-2"
-})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;"]);
+  displayName: "BuyPanel__ItemComponentScrollWrapper",
+  componentId: "sc-1si8t7i-4"
+})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;@media (max-width:950px){height:250px;}"]);
 var StyledDropdown = /*#__PURE__*/styled(Dropdown).withConfig({
-  displayName: "Marketplace__StyledDropdown",
-  componentId: "sc-h904b1-3"
+  displayName: "BuyPanel__StyledDropdown",
+  componentId: "sc-1si8t7i-5"
 })(["margin:3px !important;width:170px !important;"]);
 
+var ManagmentPanel = function ManagmentPanel(_ref) {
+  var items = _ref.items,
+    atlasIMG = _ref.atlasIMG,
+    atlasJSON = _ref.atlasJSON,
+    onChangeNameInput = _ref.onChangeNameInput,
+    equipmentSet = _ref.equipmentSet,
+    availableGold = _ref.availableGold,
+    onMarketPlaceItemRemove = _ref.onMarketPlaceItemRemove,
+    selectedItemToSell = _ref.selectedItemToSell,
+    onSelectedItemToSellRemove = _ref.onSelectedItemToSellRemove,
+    onAddItemToMarketplace = _ref.onAddItemToMarketplace,
+    enableHotkeys = _ref.enableHotkeys,
+    disableHotkeys = _ref.disableHotkeys,
+    onMoneyWithdraw = _ref.onMoneyWithdraw;
+  var _useState = useState(''),
+    name = _useState[0],
+    setName = _useState[1];
+  var _useState2 = useState(''),
+    price = _useState2[0],
+    setPrice = _useState2[1];
+  var _useState3 = useState(false),
+    isCreatingOffer = _useState3[0],
+    setIsCreatingOffer = _useState3[1];
+  var _useState4 = useState(null),
+    removingItemId = _useState4[0],
+    setRemovingItemId = _useState4[1];
+  return React.createElement(React.Fragment, null, isCreatingOffer && React.createElement(ConfirmModal, {
+    onClose: setIsCreatingOffer.bind(null, false),
+    onConfirm: function onConfirm() {
+      if (selectedItemToSell && price && Number(price)) {
+        onAddItemToMarketplace(selectedItemToSell, Number(price));
+        setPrice('');
+        onSelectedItemToSellRemove(selectedItemToSell);
+        setIsCreatingOffer(false);
+        enableHotkeys == null ? void 0 : enableHotkeys();
+      }
+    },
+    message: "Are you sure to create this offer?"
+  }), removingItemId && React.createElement(ConfirmModal, {
+    onClose: setRemovingItemId.bind(null, null),
+    onConfirm: function onConfirm() {
+      onMarketPlaceItemRemove == null ? void 0 : onMarketPlaceItemRemove(removingItemId);
+      setRemovingItemId(null);
+      enableHotkeys == null ? void 0 : enableHotkeys();
+    },
+    message: "Are you sure to remove this item?"
+  }), React.createElement(InputWrapper$1, null, React.createElement("p", null, "Search By Name"), React.createElement(Input, {
+    onChange: function onChange(e) {
+      setName(e.target.value);
+      onChangeNameInput(e.target.value);
+    },
+    value: name,
+    placeholder: "Enter name...",
+    onBlur: enableHotkeys,
+    onFocus: disableHotkeys
+  })), React.createElement(OptionsWrapper$1, null, React.createElement(InnerOptionsWrapper, null, React.createElement(SellDescription, null, "Click on item in inventory to sell it"), React.createElement(Flex$2, null, React.createElement(ItemSlot, {
+    slotIndex: 0,
+    atlasIMG: atlasIMG,
+    atlasJSON: atlasJSON,
+    onPointerDown: function onPointerDown(_, __, item) {
+      return onSelectedItemToSellRemove(item);
+    },
+    item: selectedItemToSell
+  }), React.createElement(PriceInputWrapper, null, React.createElement("p", null, "Enter price"), React.createElement(Flex$2, null, React.createElement(Input, {
+    onChange: function onChange(e) {
+      setPrice(e.target.value);
+    },
+    value: price,
+    placeholder: "Enter price...",
+    type: "number",
+    disabled: !selectedItemToSell,
+    onBlur: enableHotkeys,
+    onFocus: disableHotkeys
+  }), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    disabled: !selectedItemToSell || !price,
+    onPointerDown: function onPointerDown() {
+      if (selectedItemToSell && price && Number(price)) {
+        setIsCreatingOffer(true);
+      }
+    }
+  }, "Create offer"))))), React.createElement(InnerOptionsWrapper, null, React.createElement(AvailableGold, {
+    "$disabled": availableGold === 0
+  }, React.createElement("p", null, "Available gold"), React.createElement("p", {
+    className: "center"
+  }, "$", availableGold), React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    disabled: availableGold === 0,
+    onPointerDown: function onPointerDown() {
+      return availableGold > 0 && onMoneyWithdraw();
+    }
+  }, "Withdraw")))), React.createElement(ItemComponentScrollWrapper$1, {
+    id: "MarketContainer"
+  }, items == null ? void 0 : items.map(function (_ref2, index) {
+    var item = _ref2.item,
+      price = _ref2.price,
+      _id = _ref2._id;
+    return React.createElement(MarketplaceRows, {
+      key: item.key + "_" + index,
+      atlasIMG: atlasIMG,
+      atlasJSON: atlasJSON,
+      item: item,
+      itemPrice: price,
+      equipmentSet: equipmentSet,
+      onMarketPlaceItemRemove: setRemovingItemId.bind(null, _id)
+    });
+  })));
+};
+var Flex$2 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ManagmentPanel__Flex",
+  componentId: "sc-1yyi6jn-0"
+})(["display:flex;gap:5px;align-items:center;"]);
+var InputWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ManagmentPanel__InputWrapper",
+  componentId: "sc-1yyi6jn-1"
+})(["width:95%;display:flex !important;justify-content:flex-start;align-items:center;margin:auto;p{width:auto;margin-right:20px;}input{width:68%;height:10px;}"]);
+var OptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ManagmentPanel__OptionsWrapper",
+  componentId: "sc-1yyi6jn-2"
+})(["width:100%;height:100px;display:flex;align-items:center;justify-content:space-around;"]);
+var InnerOptionsWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ManagmentPanel__InnerOptionsWrapper",
+  componentId: "sc-1yyi6jn-3"
+})(["display:flex;justify-content:space-between;flex-direction:column;height:100%;"]);
+var ItemComponentScrollWrapper$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ManagmentPanel__ItemComponentScrollWrapper",
+  componentId: "sc-1yyi6jn-4"
+})(["overflow-y:scroll;height:390px;width:100%;margin-top:1rem;@media (max-width:950px){height:250px;}"]);
+var PriceInputWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ManagmentPanel__PriceInputWrapper",
+  componentId: "sc-1yyi6jn-5"
+})(["p{margin:0;}input{width:200px;}"]);
+var SellDescription = /*#__PURE__*/styled.p.withConfig({
+  displayName: "ManagmentPanel__SellDescription",
+  componentId: "sc-1yyi6jn-6"
+})(["margin:0;font-size:", " !important;"], uiFonts.size.xsmall);
+var AvailableGold = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ManagmentPanel__AvailableGold",
+  componentId: "sc-1yyi6jn-7"
+})(["height:100%;display:flex;flex-direction:column;justify-content:space-between;p{margin:0;color:", " !important;}.center{text-align:center;font-size:", " !important;color:", " !important;}"], function (props) {
+  return props.$disabled ? uiColors.lightGray : 'white';
+}, uiFonts.size.large, function (props) {
+  return props.$disabled ? uiColors.lightGray : uiColors.lightGreen;
+});
+
+var Marketplace = function Marketplace(props) {
+  var onClose = props.onClose,
+    scale = props.scale,
+    onYourPanelToggle = props.onYourPanelToggle;
+  var _useState = useState(false),
+    isYourPanel = _useState[0],
+    setIsYourPanel = _useState[1];
+  return React.createElement(DraggableContainer, {
+    type: RPGUIContainerTypes.Framed,
+    onCloseButton: function onCloseButton() {
+      if (onClose) onClose();
+    },
+    width: "800px",
+    cancelDrag: "#MarketContainer, .rpgui-dropdown-imp, input, .empty-slot, button",
+    scale: scale
+  }, isYourPanel && React.createElement(React.Fragment, null, React.createElement(ManagmentPanel, Object.assign({}, props)), React.createElement(PagerContainer$1, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      onYourPanelToggle(false);
+      setIsYourPanel(false);
+    }
+  }, "Go to marketplace"), React.createElement(Pager, Object.assign({}, props)))), !isYourPanel && React.createElement(React.Fragment, null, React.createElement(BuyPanel, Object.assign({}, props)), React.createElement(PagerContainer$1, null, React.createElement(Button, {
+    buttonType: ButtonTypes.RPGUIButton,
+    onPointerDown: function onPointerDown() {
+      onYourPanelToggle(true);
+      setIsYourPanel(true);
+    }
+  }, "Go to your panel"), React.createElement(Pager, Object.assign({}, props)))));
+};
+var PagerContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Marketplace__PagerContainer",
+  componentId: "sc-h904b1-0"
+})(["display:flex;justify-content:space-between;align-items:center;width:calc(100% - 30px);"]);
+
 var img$5 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAP1BMVEUAAAA7FyVxQTsUEBPj5v////+5v/tCJDOOUlIiHBr1oJfptaO6dWr61rhzFy1bMTjoanMUNGQoXMQkn97+88DQ3IhAAAAAAXRSTlMAQObYZgAAAAFiS0dEBfhv6ccAAAAHdElNRQfmAw4VOBC7c5LYAAABM0lEQVQ4y3XRi5KDIAwFUAUkbrBgpP//rZsHVHQ009qZ3tPboNN0zmwzvcw8O5sX4y0NOg/Et3jRCXF+ziULorjkOQ9gE24dvuUAzq08DiCO4pe3WN7zCP56vmpubBReQYC11YPS86ySxxCsAABTSgjb5m4g8nfbxvFHBkH2OEEvAItVuCuIsgGgl+Gcr7kDXxhEAx55A2SQEEeQeZwUaIP8Tbo05B0RFPhItAjgj1w6cDnhLluDj+Egkh3pCCP4pKQAw1IPO0W9Nti5gW9RP2dKA3BZd2Dw+baYX+Nt4GM00O4S3kEpF6Alb2Bv4LeC3kkGfAW0/p0RPoJVKr63ghHsKuRh5DIUKOAlGOwrtt9fQekAEfmhZslHUDoglB0zjfkJigN7UnTQQ4GBWomoVhEN/AOPSBh38gy+fwAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAyMi0wMy0xNFQyMTo1NTo1MSswMDowMJcc0eEAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMjItMDMtMTRUMjE6NTU6NTErMDA6MDDmQWldAAAAAElFTkSuQmCC';
 
 var img$6 = 'data:image/gif;base64,R0lGODlhQAAgAPIAAAAAAA0NDRERESIiIigoKFlZWf///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtJbWFnZU1hZ2ljaw5nYW1tYT0wLjQ1NDU0NQAh+QQBFAAAACwAAAAAQAAgAAAD/wi63P4wykmrvTjrzbv/YAgIZGmeaKquakQWcCzPdG3fNukIeO//PQGDBywafcIF8chswpKKZcxApTqvNOiIZi0YsODncFaFlcNOrdTbJVff0/c3Lp/Xs2N37cy2ndt6ZnhKXHdsc4d7VnwyfIxqPWWOXXWLgHSGYoSNbZKVZp2WiJyjg1GFcaClqaqJhasyUAFrh3Cur3KqubWXBQIBAAEDtDeMaEEDAcLEx2gCycvN0jHPysPT09XR2M3a19zH3gTM4EYCBNDD4yzs7e4r48nB6gT19vf4+fr7/P3P8sKGvRtIkMUAeQoCHlzIsKHDhxAjSoTWQJnFixgzatzIsQWjRQYJAAAh/wtJbWFnZU1hZ2ljaw5nYW1tYT0wLjQ1NDU0NQAh+QQBFAAAACwAAAAAQAAgAAAD8Ai63P4wykmrvTjrzbv/YCiOlGCeaKqubMtGZiHPdG3feI6bjqD/wOBPwPAJj0ggcWFMOp+ypaI5M1it0KxNCqDKsAWDdhwt1q5fMPnJ9aJt17g4HafJ3/et+Tzn99V+aThqfTNtcHlhhIBVWG+BdDSHOmiPeHdij3aYhZONf46YkZGanzpSAV6KjaOIpqWtNwIBAAEDqqKKhZuJnHSwAgMBtqo5sGs5wcO3yM01ysTO0gXQzNPN1cXXUNnbyNna3kcmwrW3Lujp6ugD5bbn6/HyLe20Cu/t+fr7/P3+/wCF2VswrKDBgwgTKlzIsCCDBAA7';
@@ -15324,7 +15713,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     type: RPGUIContainerTypes.FramedGold,
     width: '50%',
     height: '180px'
-  }, React.createElement(React.Fragment, null, React.createElement(Container$g, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer, {
+  }, React.createElement(React.Fragment, null, React.createElement(Container$i, null, ((_textAndTypeArray$sli = textAndTypeArray[slide]) == null ? void 0 : _textAndTypeArray$sli.imageSide) === 'right' && React.createElement(React.Fragment, null, React.createElement(TextContainer, {
     flex: '70%'
   }, React.createElement(NPCDialogText, {
     onStartStep: function onStartStep() {
@@ -15366,7 +15755,7 @@ var NPCMultiDialog = function NPCMultiDialog(_ref) {
     src: img$6
   }))), ")"));
 };
-var Container$g = /*#__PURE__*/styled.div.withConfig({
+var Container$i = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCMultiDialog__Container",
   componentId: "sc-rvu5wg-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);
@@ -15570,7 +15959,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
       return null;
     });
   };
-  return React.createElement(Container$h, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
+  return React.createElement(Container$j, null, React.createElement(QuestionContainer, null, React.createElement(DynamicText, {
     text: currentQuestion.text,
     onStart: function onStart() {
       return setCanShowAnswers(false);
@@ -15580,7 +15969,7 @@ var QuestionDialog = function QuestionDialog(_ref) {
     }
   })), canShowAnswers && React.createElement(AnswersContainer, null, onRenderCurrentAnswers()));
 };
-var Container$h = /*#__PURE__*/styled.div.withConfig({
+var Container$j = /*#__PURE__*/styled.div.withConfig({
   displayName: "QuestionDialog__Container",
   componentId: "sc-bxc5u0-0"
 })(["display:flex;word-break:break-all;box-sizing:border-box;justify-content:flex-start;align-items:flex-start;flex-wrap:wrap;"]);
@@ -15628,14 +16017,14 @@ var ProgressBar = function ProgressBar(_ref) {
     }
     return value * 100 / max;
   };
-  return React.createElement(Container$i, {
+  return React.createElement(Container$k, {
     className: "rpgui-progress",
     "data-value": calculatePercentageValue(max, value) / 100,
     "data-rpguitype": "progress",
     percentageWidth: percentageWidth,
     minWidth: minWidth,
     style: style
-  }, displayText && React.createElement(TextOverlay$2, null, React.createElement(ProgressBarText, null, value, "/", max)), React.createElement("div", {
+  }, displayText && React.createElement(TextOverlay$1, null, React.createElement(ProgressBarText, null, value, "/", max)), React.createElement("div", {
     className: " rpgui-progress-track"
   }, React.createElement("div", {
     className: "rpgui-progress-fill " + color + " ",
@@ -15653,11 +16042,11 @@ var ProgressBarText = /*#__PURE__*/styled.span.withConfig({
   displayName: "ProgressBar__ProgressBarText",
   componentId: "sc-qa6fzh-0"
 })(["font-size:", " !important;color:white;text-align:center;z-index:1;position:absolute;left:50%;transform:translateX(-50%);top:12px;"], uiFonts.size.small);
-var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
+var TextOverlay$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__TextOverlay",
   componentId: "sc-qa6fzh-1"
 })(["width:100%;position:relative;"]);
-var Container$i = /*#__PURE__*/styled.div.withConfig({
+var Container$k = /*#__PURE__*/styled.div.withConfig({
   displayName: "ProgressBar__Container",
   componentId: "sc-qa6fzh-2"
 })(["display:flex;flex-direction:column;min-width:", "px;width:", "%;justify-content:start;align-items:flex-start;", ""], function (props) {
@@ -15996,7 +16385,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor = _ref$bgColor === void 0 ? 'red' : _ref$bgColor,
     _ref$margin = _ref.margin,
     margin = _ref$margin === void 0 ? 20 : _ref$margin;
-  return React.createElement(Container$j, {
+  return React.createElement(Container$l, {
     className: "simple-progress-bar"
   }, React.createElement(ProgressBarContainer, {
     margin: margin
@@ -16005,7 +16394,7 @@ var SimpleProgressBar = function SimpleProgressBar(_ref) {
     bgColor: bgColor
   }))));
 };
-var Container$j = /*#__PURE__*/styled.div.withConfig({
+var Container$l = /*#__PURE__*/styled.div.withConfig({
   displayName: "SimpleProgressBar__Container",
   componentId: "sc-mbeil3-0"
 })(["display:flex;justify-content:center;align-items:center;width:100%;"]);
@@ -16038,13 +16427,20 @@ var SkillProgressBar = function SkillProgressBar(_ref) {
     _ref$showSkillPoints = _ref.showSkillPoints,
     showSkillPoints = _ref$showSkillPoints === void 0 ? true : _ref$showSkillPoints,
     atlasIMG = _ref.atlasIMG,
-    atlasJSON = _ref.atlasJSON;
+    atlasJSON = _ref.atlasJSON,
+    buffAndDebuff = _ref.buffAndDebuff;
   if (!skillPointsToNextLevel) {
     skillPointsToNextLevel = getSPForLevel(level + 1);
   }
   var nextLevelSPWillbe = skillPoints + skillPointsToNextLevel;
   var ratio = skillPoints / nextLevelSPWillbe * 100;
-  return React.createElement(React.Fragment, null, React.createElement(ProgressTitle, null, React.createElement(TitleName, null, skillName), React.createElement(ValueDisplay, null, "lv ", level)), React.createElement(ProgressBody, null, React.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React.createElement(SpriteContainer$1, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
+  var skillsBuffsCalc = function skillsBuffsCalc() {
+    if (buffAndDebuff) {
+      return 1 + buffAndDebuff / 100;
+    }
+    return;
+  };
+  return React.createElement(React.Fragment, null, React.createElement(ProgressTitle, null, buffAndDebuff !== undefined && React.createElement(React.Fragment, null, buffAndDebuff > 0 ? React.createElement(BuffAndDebuffContainer, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameBuff, null, skillName), React.createElement(TitleNameBuff, null, "lv ", level, " (", skillsBuffsCalc(), ")")), React.createElement(TitleNameBuffContainer, null, React.createElement(TitleNameBuff, null, "(+", buffAndDebuff, "%)"))) : buffAndDebuff < 0 ? React.createElement(React.Fragment, null, React.createElement(TitleNameContainer, null, React.createElement(TitleNameDebuff, null, skillName), React.createElement(TitleNameDebuff, null, "lv ", level, " (", skillsBuffsCalc(), ")")), React.createElement("div", null, React.createElement(TitleNameDebuff, null, "(", buffAndDebuff, "%)"))) : React.createElement(TitleName, null, skillName)), !buffAndDebuff && React.createElement(TitleNameContainer, null, React.createElement(TitleName, null, skillName), React.createElement(ValueDisplay, null, "lv ", level))), React.createElement(ProgressBody, null, React.createElement(ProgressIconContainer, null, atlasIMG && atlasJSON ? React.createElement(SpriteContainer$1, null, React.createElement(ErrorBoundary, null, React.createElement(SpriteFromAtlas, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
     spriteKey: texturePath,
@@ -16076,22 +16472,42 @@ var TitleName = /*#__PURE__*/styled.span.withConfig({
   displayName: "SkillProgressBar__TitleName",
   componentId: "sc-5vuroc-4"
 })(["margin-left:5px;"]);
+var TitleNameBuff = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SkillProgressBar__TitleNameBuff",
+  componentId: "sc-5vuroc-5"
+})(["margin-left:5px;color:", " !important;"], uiColors.lightGreen);
+var TitleNameDebuff = /*#__PURE__*/styled.span.withConfig({
+  displayName: "SkillProgressBar__TitleNameDebuff",
+  componentId: "sc-5vuroc-6"
+})(["margin-left:5px;color:", " !important;"], uiColors.red);
 var ValueDisplay = /*#__PURE__*/styled.span.withConfig({
   displayName: "SkillProgressBar__ValueDisplay",
-  componentId: "sc-5vuroc-5"
+  componentId: "sc-5vuroc-7"
 })([""]);
 var ProgressIconContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__ProgressIconContainer",
-  componentId: "sc-5vuroc-6"
+  componentId: "sc-5vuroc-8"
 })(["display:flex;justify-content:center;align-items:center;"]);
 var ProgressBody = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__ProgressBody",
-  componentId: "sc-5vuroc-7"
+  componentId: "sc-5vuroc-9"
 })(["display:flex;flex-direction:row;width:100%;"]);
 var ProgressTitle = /*#__PURE__*/styled.div.withConfig({
   displayName: "SkillProgressBar__ProgressTitle",
-  componentId: "sc-5vuroc-8"
-})(["width:100%;display:flex;flex-direction:row;justify-content:space-between;span{font-size:0.6rem;}"]);
+  componentId: "sc-5vuroc-10"
+})(["width:100%;display:flex;flex-direction:column;justify-content:space-between;span{font-size:0.6rem;}"]);
+var BuffAndDebuffContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__BuffAndDebuffContainer",
+  componentId: "sc-5vuroc-11"
+})([""]);
+var TitleNameBuffContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__TitleNameBuffContainer",
+  componentId: "sc-5vuroc-12"
+})([""]);
+var TitleNameContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SkillProgressBar__TitleNameContainer",
+  componentId: "sc-5vuroc-13"
+})(["display:flex;justify-content:space-between;"]);
 
 var skillProps = {
   attributes: {
@@ -16178,7 +16594,8 @@ var SkillsContainer = function SkillsContainer(_ref) {
         skillPointsToNextLevel: Math.round(skillDetails.skillPointsToNextLevel) || 0,
         texturePath: value,
         atlasIMG: atlasIMG,
-        atlasJSON: atlasJSON
+        atlasJSON: atlasJSON,
+        buffAndDebuff: skillDetails.buffAndDebuff
       }));
     }
     return output;
@@ -16245,7 +16662,7 @@ var SpellInfo = function SpellInfo(_ref) {
     castingType = spell.castingType,
     cooldown = spell.cooldown,
     maxDistanceGrid = spell.maxDistanceGrid;
-  return React.createElement(Container$k, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$6, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
+  return React.createElement(Container$m, null, React.createElement(Header$1, null, React.createElement("div", null, React.createElement(Title$6, null, name), React.createElement(Type$1, null, magicWords))), React.createElement(Statistic$1, null, React.createElement("div", {
     className: "label"
   }, "Casting Type:"), React.createElement("div", {
     className: "value"
@@ -16271,7 +16688,7 @@ var SpellInfo = function SpellInfo(_ref) {
     className: "value"
   }, requiredItem))), React.createElement(Description$1, null, description));
 };
-var Container$k = /*#__PURE__*/styled.div.withConfig({
+var Container$m = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfo__Container",
   componentId: "sc-4hbw3q-0"
 })(["color:white;background-color:#222;border-radius:5px;padding:0.5rem;font-size:", ";border:3px solid ", ";height:max-content;width:30rem;@media (max-width:580px){width:80vw;}"], uiFonts.size.small, uiColors.lightGray);
@@ -16299,13 +16716,13 @@ var Statistic$1 = /*#__PURE__*/styled.div.withConfig({
 var SpellInfoDisplay = function SpellInfoDisplay(_ref) {
   var spell = _ref.spell,
     isMobile = _ref.isMobile;
-  return React.createElement(Flex$1, {
+  return React.createElement(Flex$3, {
     "$isMobile": isMobile
   }, React.createElement(SpellInfo, {
     spell: spell
   }));
 };
-var Flex$1 = /*#__PURE__*/styled.div.withConfig({
+var Flex$3 = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellInfoDisplay__Flex",
   componentId: "sc-1htnsmm-0"
 })(["display:flex;gap:0.5rem;flex-direction:", ";@media (max-width:580px){flex-direction:column-reverse;align-items:center;}"], function (_ref2) {
@@ -16325,7 +16742,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     var _ref$current;
     (_ref$current = ref.current) == null ? void 0 : _ref$current.classList.add('fadeOut');
   };
-  return React.createElement(ModalPortal, null, React.createElement(Container$l, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$n, {
     ref: ref,
     onTouchEnd: function onTouchEnd() {
       handleFadeOut();
@@ -16350,7 +16767,7 @@ var MobileSpellTooltip = function MobileSpellTooltip(_ref) {
     }, option.text);
   }))));
 };
-var Container$l = /*#__PURE__*/styled.div.withConfig({
+var Container$n = /*#__PURE__*/styled.div.withConfig({
   displayName: "MobileSpellTooltip__Container",
   componentId: "sc-6p7uvr-0"
 })(["position:absolute;z-index:100;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0 0 0 / 0.5);display:flex;justify-content:center;align-items:center;gap:0.5rem;transition:opacity 0.08s;animation:fadeIn 0.1s forwards;@keyframes fadeIn{0%{opacity:0;}100%{opacity:0.92;}}@keyframes fadeOut{0%{opacity:0.92;}100%{opacity:0;}}&.fadeOut{animation:fadeOut 0.1s forwards;}@media (max-width:580px){flex-direction:column;}"]);
@@ -16391,13 +16808,13 @@ var MagicTooltip = function MagicTooltip(_ref) {
     }
     return;
   }, []);
-  return React.createElement(ModalPortal, null, React.createElement(Container$m, {
+  return React.createElement(ModalPortal, null, React.createElement(Container$o, {
     ref: ref
   }, React.createElement(SpellInfoDisplay, {
     spell: spell
   })));
 };
-var Container$m = /*#__PURE__*/styled.div.withConfig({
+var Container$o = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpellTooltip__Container",
   componentId: "sc-1go0gwg-0"
 })(["position:absolute;z-index:100;pointer-events:none;left:0;top:0;opacity:0;transition:opacity 0.08s;"]);
@@ -16449,8 +16866,7 @@ var Spell = function Spell(_ref) {
   var disabled = isSettingShortcut ? charMagicLevel < minMagicLevelRequired : manaCost > charMana || charMagicLevel < minMagicLevelRequired;
   return React.createElement(SpellInfoWrapper, {
     spell: spell
-  }, React.createElement(Container$n, {
-    disabled: disabled || (activeCooldown != null ? activeCooldown : 0) > 0,
+  }, React.createElement(Container$p, {
     onPointerUp: onPointerUp == null ? void 0 : onPointerUp.bind(null, spellKey),
     isSettingShortcut: isSettingShortcut && !disabled,
     className: "spell"
@@ -16464,7 +16880,7 @@ var Spell = function Spell(_ref) {
     className: "mana"
   }, manaCost))));
 };
-var Container$n = /*#__PURE__*/styled.button.withConfig({
+var Container$p = /*#__PURE__*/styled.button.withConfig({
   displayName: "Spell__Container",
   componentId: "sc-j96fa2-0"
 })(["display:block;background:none;border:2px solid transparent;border-radius:1rem;width:100%;display:flex;gap:1rem;align-items:center;padding:0 1rem;text-align:left;position:relative;animation:", ";@keyframes border-color-change{0%{border-color:", ";}50%{border-color:transparent;}100%{border-color:", ";}}&:hover,&:focus{background-color:", ";}&:active{background:none;}"], function (_ref2) {
@@ -16521,17 +16937,6 @@ var Spellbook = function Spellbook(_ref) {
   var _useState2 = useState(-1),
     settingShortcutIndex = _useState2[0],
     setSettingShortcutIndex = _useState2[1];
-  useEffect(function () {
-    var handleEscapeClose = function handleEscapeClose(e) {
-      if (e.key === 'Escape') {
-        onClose == null ? void 0 : onClose();
-      }
-    };
-    document.addEventListener('keydown', handleEscapeClose);
-    return function () {
-      document.removeEventListener('keydown', handleEscapeClose);
-    };
-  }, [onClose]);
   var spellsToDisplay = useMemo(function () {
     return spells.sort(function (a, b) {
       if (a.minMagicLevelRequired > b.minMagicLevelRequired) return 1;
@@ -16552,7 +16957,7 @@ var Spellbook = function Spellbook(_ref) {
     height: "inherit",
     cancelDrag: "#spellbook-search, #shortcuts_list, .spell",
     scale: scale
-  }, React.createElement(Container$o, null, React.createElement(Title$8, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
+  }, React.createElement(Container$q, null, React.createElement(Title$8, null, "Learned Spells"), React.createElement(ShortcutsSetter, {
     setSettingShortcutIndex: setSettingShortcutIndex,
     settingShortcutIndex: settingShortcutIndex,
     shortcuts: shortcuts,
@@ -16586,7 +16991,7 @@ var Title$8 = /*#__PURE__*/styled.h1.withConfig({
   displayName: "Spellbook__Title",
   componentId: "sc-r02nfq-0"
 })(["font-size:", " !important;margin-bottom:0 !important;"], uiFonts.size.large);
-var Container$o = /*#__PURE__*/styled.div.withConfig({
+var Container$q = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spellbook__Container",
   componentId: "sc-r02nfq-1"
 })(["width:100%;height:100%;color:white;display:flex;flex-direction:column;"]);
@@ -16702,7 +17107,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     className: "arrow-selector",
     direction: "left",
     onPointerDown: onLeftClick
-  }), React.createElement(QuantityDisplay$1, null, React.createElement(TextOverlay$3, null, React.createElement(Item$2, null, selectedQty))), React.createElement(StyledArrow, {
+  }), React.createElement(QuantityDisplay, null, React.createElement(TextOverlay$2, null, React.createElement(Item$1, null, selectedQty))), React.createElement(StyledArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "right",
@@ -16738,11 +17143,11 @@ var NameValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__NameValue",
   componentId: "sc-mja0b5-5"
 })(["p{font-size:0.75rem;margin:0;}"]);
-var Item$2 = /*#__PURE__*/styled.span.withConfig({
+var Item$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "TradingItemRow__Item",
   componentId: "sc-mja0b5-6"
 })(["color:white;text-align:center;z-index:1;width:100%;"]);
-var TextOverlay$3 = /*#__PURE__*/styled.div.withConfig({
+var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__TextOverlay",
   componentId: "sc-mja0b5-7"
 })(["width:100%;position:relative;"]);
@@ -16750,7 +17155,7 @@ var QuantityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
   componentId: "sc-mja0b5-8"
 })(["position:relative;display:flex;min-width:100px;width:40%;justify-content:center;align-items:center;flex:40%;"]);
-var QuantityDisplay$1 = /*#__PURE__*/styled.div.withConfig({
+var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityDisplay",
   componentId: "sc-mja0b5-9"
 })(["font-size:", ";"], uiFonts.size.small);
@@ -16887,11 +17292,11 @@ 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$p, {
+  return React.createElement(Container$r, {
     maxLines: maxLines
   }, children);
 };
-var Container$p = /*#__PURE__*/styled.div.withConfig({
+var Container$r = /*#__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) {
@@ -16954,7 +17359,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
   var _useState2 = useState(false),
     showGoNextIndicator = _useState2[0],
     setShowGoNextIndicator = _useState2[1];
-  return React.createElement(Container$q, null, React.createElement(DynamicText, {
+  return React.createElement(Container$s, null, React.createElement(DynamicText, {
     text: (textChunks == null ? void 0 : textChunks[chunkIndex]) || '',
     onFinish: function onFinish() {
       setShowGoNextIndicator(true);
@@ -16972,7 +17377,7 @@ var NPCDialogText = function NPCDialogText(_ref) {
     }
   }));
 };
-var Container$q = /*#__PURE__*/styled.div.withConfig({
+var Container$s = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialogText__Container",
   componentId: "sc-1cxkdh9-0"
 })([""]);
@@ -17014,7 +17419,7 @@ var NPCDialog = function NPCDialog(_ref) {
     }
   })), type === NPCDialogType.TextAndThumbnail && React.createElement(ThumbnailContainer$1, null, React.createElement(NPCThumbnail$1, {
     src: imagePath || img$5
-  }))) : React.createElement(React.Fragment, null, React.createElement(Container$r, null, React.createElement(TextContainer$2, {
+  }))) : React.createElement(React.Fragment, null, React.createElement(Container$t, null, React.createElement(TextContainer$2, {
     flex: type === NPCDialogType.TextAndThumbnail ? '70%' : '100%'
   }, React.createElement(NPCDialogText, {
     type: type,
@@ -17028,7 +17433,7 @@ var NPCDialog = function NPCDialog(_ref) {
     src: imagePath || img$5
   })))));
 };
-var Container$r = /*#__PURE__*/styled.div.withConfig({
+var Container$t = /*#__PURE__*/styled.div.withConfig({
   displayName: "NPCDialog__Container",
   componentId: "sc-1b4aw74-0"
 })(["display:flex;width:100%;height:100%;box-sizing:border-box;justify-content:center;align-items:flex-start;position:relative;"]);