@rpg-engine/long-bow 0.2.90 → 0.2.92

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/components/Abstractions/SlotsContainer.d.ts +1 -0
  2. package/dist/components/DraggableContainer.d.ts +1 -0
  3. package/dist/components/Equipment/EquipmentSet.d.ts +6 -0
  4. package/dist/components/Input.d.ts +1 -0
  5. package/dist/components/Item/Inventory/ItemContainer.d.ts +10 -0
  6. package/dist/components/Item/Inventory/ItemQuantitySelector.d.ts +7 -0
  7. package/dist/components/Item/Inventory/ItemSlot.d.ts +7 -0
  8. package/dist/components/RangeSlider.d.ts +1 -0
  9. package/dist/index.d.ts +4 -5
  10. package/dist/long-bow.cjs.development.js +523 -220
  11. package/dist/long-bow.cjs.development.js.map +1 -1
  12. package/dist/long-bow.cjs.production.min.js +1 -1
  13. package/dist/long-bow.cjs.production.min.js.map +1 -1
  14. package/dist/long-bow.esm.js +524 -220
  15. package/dist/long-bow.esm.js.map +1 -1
  16. package/dist/stories/ItemQuantitySelector.stories.d.ts +5 -0
  17. package/package.json +1 -1
  18. package/src/components/Abstractions/SlotsContainer.tsx +3 -0
  19. package/src/components/CraftBook/CraftBook.tsx +82 -92
  20. package/src/components/CraftBook/MockItems.ts +23 -20
  21. package/src/components/DraggableContainer.tsx +3 -0
  22. package/src/components/Equipment/EquipmentSet.tsx +40 -0
  23. package/src/components/Input.tsx +6 -2
  24. package/src/components/Item/Inventory/ItemContainer.tsx +98 -6
  25. package/src/components/Item/Inventory/ItemQuantitySelector.tsx +142 -0
  26. package/src/components/Item/Inventory/ItemSlot.tsx +171 -24
  27. package/src/components/RangeSlider.tsx +37 -14
  28. package/src/index.tsx +4 -5
  29. package/src/mocks/itemContainer.mocks.ts +1 -1
  30. package/src/stories/EquipmentSet.stories.tsx +10 -0
  31. package/src/stories/ItemContainer.stories.tsx +83 -15
  32. package/src/stories/ItemQuantitySelector.stories.tsx +26 -0
  33. package/src/stories/RangeSlider.stories.tsx +10 -9
  34. package/src/.DS_Store +0 -0
  35. package/src/components/NPCDialog/.DS_Store +0 -0
  36. package/src/components/NPCDialog/img/.DS_Store +0 -0
  37. package/src/mocks/.DS_Store +0 -0
  38. package/src/mocks/atlas/.DS_Store +0 -0
@@ -12,10 +12,10 @@ var dayjs = _interopDefault(require('dayjs'));
12
12
  var reactErrorBoundary = require('react-error-boundary');
13
13
  var Draggable = _interopDefault(require('react-draggable'));
14
14
  var uuid = require('uuid');
15
- require('rpgui/rpgui.min.css');
16
- require('rpgui/rpgui.min.js');
17
15
  var mobxReactLite = require('mobx-react-lite');
18
16
  var isMobile = _interopDefault(require('is-mobile'));
17
+ require('rpgui/rpgui.min.css');
18
+ require('rpgui/rpgui.min.js');
19
19
  var _ = _interopDefault(require('lodash'));
20
20
  var capitalize = _interopDefault(require('lodash/capitalize'));
21
21
 
@@ -32724,9 +32724,13 @@ var uiColors = {
32724
32724
  brownGreen: '#346524'
32725
32725
  };
32726
32726
 
32727
+ var _excluded$2 = ["innerRef"];
32727
32728
  var Input = function Input(_ref) {
32728
32729
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
32729
- return React__default.createElement("input", Object.assign({}, props));
32730
+ var rest = _objectWithoutPropertiesLoose(props, _excluded$2);
32731
+ return React__default.createElement("input", Object.assign({}, rest, {
32732
+ ref: props.innerRef
32733
+ }));
32730
32734
  };
32731
32735
 
32732
32736
  (function (RPGUIContainerTypes) {
@@ -32965,7 +32969,12 @@ var DraggableContainer = function DraggableContainer(_ref) {
32965
32969
  imgWidth = _ref$imgWidth === void 0 ? '20px' : _ref$imgWidth,
32966
32970
  cancelDrag = _ref.cancelDrag,
32967
32971
  onPositionChange = _ref.onPositionChange,
32968
- onOutsideClick = _ref.onOutsideClick;
32972
+ onOutsideClick = _ref.onOutsideClick,
32973
+ _ref$initialPosition = _ref.initialPosition,
32974
+ initialPosition = _ref$initialPosition === void 0 ? {
32975
+ x: 0,
32976
+ y: 0
32977
+ } : _ref$initialPosition;
32969
32978
  var draggableRef = React.useRef(null);
32970
32979
  useOutsideClick(draggableRef, 'item-container');
32971
32980
  React.useEffect(function () {
@@ -32990,7 +32999,8 @@ var DraggableContainer = function DraggableContainer(_ref) {
32990
32999
  y: data.y
32991
33000
  });
32992
33001
  }
32993
- }
33002
+ },
33003
+ defaultPosition: initialPosition
32994
33004
  }, React__default.createElement(Container$6, {
32995
33005
  ref: draggableRef,
32996
33006
  width: width,
@@ -33105,41 +33115,6 @@ var DropdownOptions = /*#__PURE__*/styled.ul.withConfig({
33105
33115
  return props.opened ? 'block' : 'none';
33106
33116
  });
33107
33117
 
33108
- //@ts-ignore
33109
- var _RPGUI = RPGUI;
33110
- var RPGUIRoot = function RPGUIRoot(_ref) {
33111
- var children = _ref.children;
33112
- return React__default.createElement("div", {
33113
- className: "rpgui-content"
33114
- }, children);
33115
- };
33116
-
33117
- var RPGUIForceRenderStart = function RPGUIForceRenderStart(_ref) {
33118
- var children = _ref.children,
33119
- elementDOMId = _ref.elementDOMId,
33120
- elementRenderedDOMKey = _ref.elementRenderedDOMKey,
33121
- RPGUICreateFunction = _ref.RPGUICreateFunction;
33122
- var _useState = React.useState(false),
33123
- isRendered = _useState[0],
33124
- setIsRendered = _useState[1];
33125
- React.useEffect(function () {
33126
- if (_RPGUI) {
33127
- var element = document.getElementById(elementDOMId);
33128
- // create an interval to wait for the element to be rendered
33129
- // if it's not, trigger the rendering forcefully
33130
- var interval = setInterval(function () {
33131
- var dropdown = document.querySelector(elementRenderedDOMKey);
33132
- if (!dropdown && !isRendered) {
33133
- _RPGUI.__create_funcs[RPGUICreateFunction](element);
33134
- setIsRendered(true);
33135
- clearInterval(interval);
33136
- }
33137
- }, 10);
33138
- }
33139
- }, []);
33140
- return React__default.createElement(React__default.Fragment, null, children);
33141
- };
33142
-
33143
33118
  var CraftBook = function CraftBook(_ref) {
33144
33119
  var atlasIMG = _ref.atlasIMG,
33145
33120
  atlasJSON = _ref.atlasJSON,
@@ -33184,16 +33159,10 @@ var CraftBook = function CraftBook(_ref) {
33184
33159
  name = modifiedWords.join(' ');
33185
33160
  return name;
33186
33161
  };
33187
- var handleClick = function handleClick() {
33188
- var element = document.querySelector("input[name='test']:checked");
33189
- var elementValue = element.value;
33190
- setCraftItem(elementValue);
33162
+ var handleClick = function handleClick(value) {
33163
+ setCraftItem(value);
33191
33164
  };
33192
- return React__default.createElement(RPGUIForceRenderStart, {
33193
- elementDOMId: "radioInput",
33194
- elementRenderedDOMKey: "rpgui-radio",
33195
- RPGUICreateFunction: "radio"
33196
- }, React__default.createElement(DraggableContainer, {
33165
+ return React__default.createElement(DraggableContainer, {
33197
33166
  type: exports.RPGUIContainerTypes.Framed,
33198
33167
  width: "500px",
33199
33168
  cancelDrag: ".equipment-container-body .arrow-selector",
@@ -33228,9 +33197,14 @@ var CraftBook = function CraftBook(_ref) {
33228
33197
  value: option.name,
33229
33198
  name: "test",
33230
33199
  disabled: !option.canCraft,
33231
- id: "radioInput"
33200
+ checked: craftItem === option.key,
33201
+ onChange: function onChange() {
33202
+ return handleClick(option.key);
33203
+ }
33232
33204
  }), React__default.createElement("label", {
33233
- onClick: handleClick,
33205
+ onClick: function onClick() {
33206
+ return handleClick(option.key);
33207
+ },
33234
33208
  style: {
33235
33209
  display: 'flex',
33236
33210
  alignItems: 'center'
@@ -33265,7 +33239,7 @@ var CraftBook = function CraftBook(_ref) {
33265
33239
  onClick: function onClick() {
33266
33240
  return onCraftItem(craftItem);
33267
33241
  }
33268
- }, "Craft"))));
33242
+ }, "Craft")));
33269
33243
  };
33270
33244
  var StyledItem = /*#__PURE__*/styled.div.withConfig({
33271
33245
  displayName: "CraftBook__StyledItem",
@@ -33499,26 +33473,57 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
33499
33473
  slotSpriteMask = _ref.slotSpriteMask,
33500
33474
  _onMouseOver = _ref.onMouseOver,
33501
33475
  _onMouseOut = _ref.onMouseOut,
33502
- _onClick = _ref.onClick,
33476
+ onClick = _ref.onClick,
33503
33477
  _onSelected = _ref.onSelected,
33504
33478
  atlasJSON = _ref.atlasJSON,
33505
33479
  atlasIMG = _ref.atlasIMG,
33506
33480
  _ref$isContextMenuDis = _ref.isContextMenuDisabled,
33507
- isContextMenuDisabled = _ref$isContextMenuDis === void 0 ? false : _ref$isContextMenuDis;
33481
+ isContextMenuDisabled = _ref$isContextMenuDis === void 0 ? false : _ref$isContextMenuDis,
33482
+ onDragEnd = _ref.onDragEnd,
33483
+ onDragStart = _ref.onDragStart,
33484
+ onPlaceDrop = _ref.onPlaceDrop,
33485
+ onDrop = _ref.onOutsideDrop,
33486
+ checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
33487
+ openQuantitySelector = _ref.openQuantitySelector;
33508
33488
  var _useState = React.useState(false),
33509
33489
  isTooltipVisible = _useState[0],
33510
33490
  setTooltipVisible = _useState[1];
33511
33491
  var _useState2 = React.useState(false),
33512
33492
  isContextMenuVisible = _useState2[0],
33513
33493
  setIsContextMenuVisible = _useState2[1];
33514
- var _useState3 = React.useState([]),
33515
- contextActions = _useState3[0],
33516
- setContextActions = _useState3[1];
33494
+ var _useState3 = React.useState(false),
33495
+ isFocused = _useState3[0],
33496
+ setIsFocused = _useState3[1];
33497
+ var _useState4 = React.useState(false),
33498
+ wasDragged = _useState4[0],
33499
+ setWasDragged = _useState4[1];
33500
+ var _useState5 = React.useState({
33501
+ x: 0,
33502
+ y: 0
33503
+ }),
33504
+ dragPosition = _useState5[0],
33505
+ setDragPosition = _useState5[1];
33506
+ var _useState6 = React.useState(null),
33507
+ dropPosition = _useState6[0],
33508
+ setDropPosition = _useState6[1];
33509
+ var dragContainer = React.useRef(null);
33510
+ var _useState7 = React.useState([]),
33511
+ contextActions = _useState7[0],
33512
+ setContextActions = _useState7[1];
33517
33513
  React.useEffect(function () {
33514
+ setDragPosition({
33515
+ x: 0,
33516
+ y: 0
33517
+ });
33518
33518
  if (item) {
33519
33519
  setContextActions(generateContextMenu(item, containerType));
33520
33520
  }
33521
33521
  }, [item]);
33522
+ React.useEffect(function () {
33523
+ if (onDrop && item && dropPosition) {
33524
+ onDrop(item, dropPosition);
33525
+ }
33526
+ }, [dropPosition]);
33522
33527
  var getStackInfo = function getStackInfo(itemId, stackQty) {
33523
33528
  // if (itemToRender?.isStackable && itemToRender?.stackQty) {
33524
33529
  var isFractionalStackQty = stackQty % 1 !== 0;
@@ -33606,30 +33611,116 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
33606
33611
  return renderItem(itemToRender);
33607
33612
  }
33608
33613
  };
33614
+ var resetItem = function resetItem() {
33615
+ setTooltipVisible(false);
33616
+ setIsFocused(false);
33617
+ setWasDragged(false);
33618
+ };
33619
+ var onSuccesfulDrag = function onSuccesfulDrag(quantity) {
33620
+ resetItem();
33621
+ if (quantity === -1) setDragPosition({
33622
+ x: 0,
33623
+ y: 0
33624
+ });else if (item) {
33625
+ onDragEnd(quantity);
33626
+ resetItem();
33627
+ }
33628
+ };
33609
33629
  return React__default.createElement(Container$a, {
33610
33630
  className: "rpgui-icon empty-slot",
33631
+ onMouseUp: function onMouseUp() {
33632
+ var data = item ? item : null;
33633
+ if (onPlaceDrop) onPlaceDrop(data, slotIndex, containerType);
33634
+ },
33635
+ onTouchEnd: function onTouchEnd(e) {
33636
+ var _document$elementFrom;
33637
+ var _e$changedTouches$ = e.changedTouches[0],
33638
+ clientX = _e$changedTouches$.clientX,
33639
+ clientY = _e$changedTouches$.clientY;
33640
+ var simulatedEvent = new MouseEvent('mouseup', {
33641
+ clientX: clientX,
33642
+ clientY: clientY,
33643
+ bubbles: true
33644
+ });
33645
+ (_document$elementFrom = document.elementFromPoint(clientX, clientY)) == null ? void 0 : _document$elementFrom.dispatchEvent(simulatedEvent);
33646
+ }
33647
+ }, React__default.createElement(Draggable, {
33648
+ defaultClassName: item ? 'draggable' : 'empty-slot',
33649
+ onStop: function onStop(e, data) {
33650
+ if (wasDragged && item) {
33651
+ var _e$target;
33652
+ //@ts-ignore
33653
+ var classes = Array.from((_e$target = e.target) == null ? void 0 : _e$target.classList);
33654
+ console.log(classes);
33655
+ var isOutsideDrop = classes.some(function (elm) {
33656
+ //elm matches ItemContainer string
33657
+ return elm.includes('rpgui-content');
33658
+ });
33659
+ if (isOutsideDrop) {
33660
+ setDropPosition({
33661
+ x: data.x,
33662
+ y: data.y
33663
+ });
33664
+ }
33665
+ setWasDragged(false);
33666
+ var target = dragContainer.current;
33667
+ if (!target || !wasDragged) return;
33668
+ var style = window.getComputedStyle(target);
33669
+ var matrix = new DOMMatrixReadOnly(style.transform);
33670
+ var x = matrix.m41;
33671
+ var y = matrix.m42;
33672
+ setDragPosition({
33673
+ x: x,
33674
+ y: y
33675
+ });
33676
+ setTimeout(function () {
33677
+ if (checkIfItemCanBeMoved()) {
33678
+ if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccesfulDrag);else onSuccesfulDrag(item.stackQty);
33679
+ } else {
33680
+ resetItem();
33681
+ setDragPosition({
33682
+ x: 0,
33683
+ y: 0
33684
+ });
33685
+ }
33686
+ }, 100);
33687
+ } else if (item) {
33688
+ if (!isContextMenuDisabled) setIsContextMenuVisible(!isContextMenuVisible);
33689
+ onClick(item.type, containerType, item);
33690
+ }
33691
+ },
33692
+ onStart: function onStart() {
33693
+ if (!item) {
33694
+ return;
33695
+ }
33696
+ if (onDragStart) {
33697
+ onDragStart(item, slotIndex, containerType);
33698
+ }
33699
+ },
33700
+ onDrag: function onDrag() {
33701
+ setWasDragged(true);
33702
+ setIsFocused(true);
33703
+ },
33704
+ position: dragPosition,
33705
+ cancel: ".empty-slot"
33706
+ }, React__default.createElement(ItemContainer, {
33707
+ ref: dragContainer,
33708
+ isFocused: isFocused,
33611
33709
  onMouseOver: function onMouseOver(event) {
33612
- return _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
33710
+ _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
33613
33711
  },
33614
33712
  onMouseOut: function onMouseOut() {
33615
33713
  if (_onMouseOut) _onMouseOut();
33616
33714
  },
33617
33715
  onMouseEnter: function onMouseEnter() {
33618
- return setTooltipVisible(true);
33716
+ setTooltipVisible(true);
33619
33717
  },
33620
33718
  onMouseLeave: function onMouseLeave() {
33621
- return setTooltipVisible(false);
33622
- },
33623
- onClick: function onClick() {
33624
33719
  setTooltipVisible(false);
33625
- if (item) {
33626
- if (!isContextMenuDisabled) {
33627
- setIsContextMenuVisible(!isContextMenuVisible);
33628
- }
33629
- _onClick(item.type, containerType, item);
33630
- }
33631
33720
  }
33632
- }, !isContextMenuDisabled && isContextMenuVisible && contextActions && React__default.createElement(RelativeListMenu, {
33721
+ }, onRenderSlot(item))), isTooltipVisible && item && React__default.createElement(ItemTooltip, {
33722
+ label: item.name
33723
+ }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React__default.createElement(RelativeListMenu, {
33633
33724
  options: contextActions,
33634
33725
  onSelected: function onSelected(optionId) {
33635
33726
  setIsContextMenuVisible(false);
@@ -33640,21 +33731,25 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
33640
33731
  onOutsideClick: function onOutsideClick() {
33641
33732
  setIsContextMenuVisible(false);
33642
33733
  }
33643
- }), isTooltipVisible && item && React__default.createElement(ItemTooltip, {
33644
- label: item.name
33645
- }), onRenderSlot(item));
33734
+ }));
33646
33735
  });
33647
33736
  var Container$a = /*#__PURE__*/styled.div.withConfig({
33648
33737
  displayName: "ItemSlot__Container",
33649
33738
  componentId: "sc-l2j5ef-0"
33650
33739
  })(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;}position:relative;"]);
33740
+ var ItemContainer = /*#__PURE__*/styled.div.withConfig({
33741
+ displayName: "ItemSlot__ItemContainer",
33742
+ componentId: "sc-l2j5ef-1"
33743
+ })(["width:100%;height:100%;position:relative;", ""], function (props) {
33744
+ return props.isFocused && 'z-index: 100; pointer-events: none;';
33745
+ });
33651
33746
  var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
33652
33747
  displayName: "ItemSlot__ItemQtyContainer",
33653
- componentId: "sc-l2j5ef-1"
33654
- })(["position:relative;width:85%;height:16px;top:25px;left:2px;display:flex;justify-content:flex-end;"]);
33748
+ componentId: "sc-l2j5ef-2"
33749
+ })(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
33655
33750
  var ItemQty = /*#__PURE__*/styled.span.withConfig({
33656
33751
  displayName: "ItemSlot__ItemQty",
33657
- componentId: "sc-l2j5ef-2"
33752
+ componentId: "sc-l2j5ef-3"
33658
33753
  })(["&.regular{font-size:", ";}&.small{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall);
33659
33754
 
33660
33755
  var EquipmentSet = function EquipmentSet(_ref) {
@@ -33664,7 +33759,12 @@ var EquipmentSet = function EquipmentSet(_ref) {
33664
33759
  _onSelected = _ref.onSelected,
33665
33760
  onItemClick = _ref.onItemClick,
33666
33761
  atlasIMG = _ref.atlasIMG,
33667
- atlasJSON = _ref.atlasJSON;
33762
+ atlasJSON = _ref.atlasJSON,
33763
+ onItemDragEnd = _ref.onItemDragEnd,
33764
+ onItemDragStart = _ref.onItemDragStart,
33765
+ onItemPlaceDrop = _ref.onItemPlaceDrop,
33766
+ onItemOutsideDrop = _ref.onItemOutsideDrop,
33767
+ checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved;
33668
33768
  var neck = equipmentSet.neck,
33669
33769
  leftHand = equipmentSet.leftHand,
33670
33770
  ring = equipmentSet.ring,
@@ -33700,6 +33800,22 @@ var EquipmentSet = function EquipmentSet(_ref) {
33700
33800
  onSelected: function onSelected(optionId) {
33701
33801
  if (_onSelected) _onSelected(optionId);
33702
33802
  },
33803
+ onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
33804
+ if (!item) {
33805
+ return;
33806
+ }
33807
+ if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
33808
+ },
33809
+ onDragEnd: function onDragEnd(quantity) {
33810
+ if (onItemDragEnd) onItemDragEnd(quantity);
33811
+ },
33812
+ checkIfItemCanBeMoved: checkIfItemCanBeMoved,
33813
+ onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
33814
+ if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
33815
+ },
33816
+ onOutsideDrop: function onOutsideDrop(item, position) {
33817
+ if (onItemOutsideDrop) onItemOutsideDrop(item, position);
33818
+ },
33703
33819
  atlasIMG: atlasIMG,
33704
33820
  atlasJSON: atlasJSON
33705
33821
  });
@@ -33720,11 +33836,11 @@ var EquipmentSet = function EquipmentSet(_ref) {
33720
33836
  var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
33721
33837
  displayName: "EquipmentSet__EquipmentSetContainer",
33722
33838
  componentId: "sc-1wuddg2-0"
33723
- })(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;"]);
33839
+ })(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;touch-action:none;"]);
33724
33840
  var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
33725
33841
  displayName: "EquipmentSet__EquipmentColumn",
33726
33842
  componentId: "sc-1wuddg2-1"
33727
- })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;"]);
33843
+ })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
33728
33844
 
33729
33845
  var IS_MOBILE_OR_TABLET = /*#__PURE__*/isMobile({
33730
33846
  tablet: true
@@ -34271,7 +34387,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
34271
34387
  title = _ref.title,
34272
34388
  onClose = _ref.onClose,
34273
34389
  _onPositionChange = _ref.onPositionChange,
34274
- onOutsideClick = _ref.onOutsideClick;
34390
+ onOutsideClick = _ref.onOutsideClick,
34391
+ initialPosition = _ref.initialPosition;
34275
34392
  return React__default.createElement(DraggableContainer, {
34276
34393
  title: title,
34277
34394
  type: exports.RPGUIContainerTypes.Framed,
@@ -34292,11 +34409,167 @@ var SlotsContainer = function SlotsContainer(_ref) {
34292
34409
  });
34293
34410
  }
34294
34411
  },
34295
- onOutsideClick: onOutsideClick
34412
+ onOutsideClick: onOutsideClick,
34413
+ initialPosition: initialPosition
34296
34414
  }, children);
34297
34415
  };
34298
34416
 
34299
- var ItemContainer = function ItemContainer(_ref) {
34417
+ (function (RangeSliderType) {
34418
+ RangeSliderType["Slider"] = "rpgui-slider";
34419
+ RangeSliderType["GoldSlider"] = "rpgui-slider golden";
34420
+ })(exports.RangeSliderType || (exports.RangeSliderType = {}));
34421
+ var RangeSlider = function RangeSlider(_ref) {
34422
+ var type = _ref.type,
34423
+ valueMin = _ref.valueMin,
34424
+ valueMax = _ref.valueMax,
34425
+ width = _ref.width,
34426
+ _onChange = _ref.onChange,
34427
+ value = _ref.value;
34428
+ var sliderId = uuid.v4();
34429
+ var containerRef = React.useRef(null);
34430
+ var _useState = React.useState(0),
34431
+ left = _useState[0],
34432
+ setLeft = _useState[1];
34433
+ React.useEffect(function () {
34434
+ var _containerRef$current;
34435
+ var calculatedWidth = ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.clientWidth) || 0;
34436
+ setLeft(Math.max((value - valueMin) / (valueMax - valueMin) * (calculatedWidth - 35) + 10));
34437
+ }, [value, valueMin, valueMax]);
34438
+ var typeClass = type === exports.RangeSliderType.GoldSlider ? 'golden' : '';
34439
+ return React__default.createElement("div", {
34440
+ style: {
34441
+ width: width,
34442
+ position: 'relative'
34443
+ },
34444
+ className: "rpgui-slider-container " + typeClass,
34445
+ id: "rpgui-slider-" + sliderId,
34446
+ ref: containerRef
34447
+ }, React__default.createElement("div", {
34448
+ style: {
34449
+ pointerEvents: 'none'
34450
+ }
34451
+ }, React__default.createElement("div", {
34452
+ className: "rpgui-slider-track " + typeClass
34453
+ }), React__default.createElement("div", {
34454
+ className: "rpgui-slider-left-edge " + typeClass
34455
+ }), React__default.createElement("div", {
34456
+ className: "rpgui-slider-right-edge " + typeClass
34457
+ }), React__default.createElement("div", {
34458
+ className: "rpgui-slider-thumb " + typeClass,
34459
+ style: {
34460
+ left: left
34461
+ }
34462
+ })), React__default.createElement(Input$1, {
34463
+ type: "range",
34464
+ style: {
34465
+ width: width
34466
+ },
34467
+ min: valueMin,
34468
+ max: valueMax,
34469
+ onChange: function onChange(e) {
34470
+ return _onChange(Number(e.target.value));
34471
+ },
34472
+ value: value,
34473
+ className: "rpgui-cursor-point"
34474
+ }));
34475
+ };
34476
+ var Input$1 = /*#__PURE__*/styled.input.withConfig({
34477
+ displayName: "RangeSlider__Input",
34478
+ componentId: "sc-v8mte9-0"
34479
+ })(["opacity:0;position:absolute;width:100%;height:100%;top:0;left:0;margin-top:-5px;"]);
34480
+
34481
+ var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
34482
+ var quantity = _ref.quantity,
34483
+ onConfirm = _ref.onConfirm,
34484
+ onClose = _ref.onClose;
34485
+ var _useState = React.useState(quantity),
34486
+ value = _useState[0],
34487
+ setValue = _useState[1];
34488
+ var inputRef = React.useRef(null);
34489
+ React.useEffect(function () {
34490
+ if (inputRef.current) {
34491
+ inputRef.current.focus();
34492
+ inputRef.current.select();
34493
+ var closeSelector = function closeSelector(e) {
34494
+ if (e.key === 'Escape') {
34495
+ onClose();
34496
+ }
34497
+ };
34498
+ document.addEventListener('keydown', closeSelector);
34499
+ return function () {
34500
+ document.removeEventListener('keydown', closeSelector);
34501
+ };
34502
+ }
34503
+ return function () {};
34504
+ }, []);
34505
+ return React__default.createElement(StyledContainer, {
34506
+ type: exports.RPGUIContainerTypes.Framed,
34507
+ width: "25rem"
34508
+ }, React__default.createElement(CloseButton$2, {
34509
+ className: "container-close",
34510
+ onClick: onClose,
34511
+ onTouchStart: onClose
34512
+ }, "X"), React__default.createElement("h2", null, "Select quantity to move"), React__default.createElement(StyledForm, {
34513
+ style: {
34514
+ width: '100%'
34515
+ },
34516
+ onSubmit: function onSubmit(e) {
34517
+ e.preventDefault();
34518
+ var numberValue = Number(value);
34519
+ if (Number.isNaN(numberValue)) {
34520
+ return;
34521
+ }
34522
+ onConfirm(Math.max(1, Math.min(quantity, numberValue)));
34523
+ },
34524
+ noValidate: true
34525
+ }, React__default.createElement(StyledInput, {
34526
+ innerRef: inputRef,
34527
+ placeholder: "Enter quantity",
34528
+ type: "number",
34529
+ min: 1,
34530
+ max: quantity,
34531
+ value: value,
34532
+ onChange: function onChange(e) {
34533
+ if (Number(e.target.value) >= quantity) {
34534
+ setValue(quantity);
34535
+ return;
34536
+ }
34537
+ setValue(e.target.value);
34538
+ },
34539
+ onBlur: function onBlur(e) {
34540
+ var newValue = Math.max(1, Math.min(quantity, Number(e.target.value)));
34541
+ setValue(newValue);
34542
+ }
34543
+ }), React__default.createElement(RangeSlider, {
34544
+ type: exports.RangeSliderType.Slider,
34545
+ valueMin: 1,
34546
+ valueMax: quantity,
34547
+ width: "100%",
34548
+ onChange: setValue,
34549
+ value: value
34550
+ }), React__default.createElement(Button, {
34551
+ buttonType: exports.ButtonTypes.RPGUIButton,
34552
+ type: "submit"
34553
+ }, "Confirm")));
34554
+ };
34555
+ var StyledContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
34556
+ displayName: "ItemQuantitySelector__StyledContainer",
34557
+ componentId: "sc-yfdtpn-0"
34558
+ })(["display:flex;flex-direction:column;align-items:center;"]);
34559
+ var StyledForm = /*#__PURE__*/styled.form.withConfig({
34560
+ displayName: "ItemQuantitySelector__StyledForm",
34561
+ componentId: "sc-yfdtpn-1"
34562
+ })(["display:flex;flex-direction:column;align-items:center;width:100%;"]);
34563
+ var StyledInput = /*#__PURE__*/styled(Input).withConfig({
34564
+ displayName: "ItemQuantitySelector__StyledInput",
34565
+ componentId: "sc-yfdtpn-2"
34566
+ })(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
34567
+ var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
34568
+ displayName: "ItemQuantitySelector__CloseButton",
34569
+ componentId: "sc-yfdtpn-3"
34570
+ })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
34571
+
34572
+ var ItemContainer$1 = function ItemContainer(_ref) {
34300
34573
  var itemContainer = _ref.itemContainer,
34301
34574
  onClose = _ref.onClose,
34302
34575
  _onMouseOver = _ref.onMouseOver,
@@ -34306,7 +34579,20 @@ var ItemContainer = function ItemContainer(_ref) {
34306
34579
  atlasJSON = _ref.atlasJSON,
34307
34580
  atlasIMG = _ref.atlasIMG,
34308
34581
  _ref$disableContextMe = _ref.disableContextMenu,
34309
- disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe;
34582
+ disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe,
34583
+ onItemDragEnd = _ref.onItemDragEnd,
34584
+ onItemDragStart = _ref.onItemDragStart,
34585
+ onItemPlaceDrop = _ref.onItemPlaceDrop,
34586
+ _onOutsideDrop = _ref.onOutsideDrop,
34587
+ checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
34588
+ initialPosition = _ref.initialPosition;
34589
+ var _useState = React.useState({
34590
+ isOpen: false,
34591
+ maxQuantity: 1,
34592
+ callback: function callback(_quantity) {}
34593
+ }),
34594
+ quantitySelect = _useState[0],
34595
+ setQuantitySelect = _useState[1];
34310
34596
  var onRenderSlots = function onRenderSlots() {
34311
34597
  var slots = [];
34312
34598
  for (var i = 0; i < itemContainer.slotQty; i++) {
@@ -34326,109 +34612,66 @@ var ItemContainer = function ItemContainer(_ref) {
34326
34612
  onSelected: function onSelected(optionId, item) {
34327
34613
  if (_onSelected) _onSelected(optionId, item);
34328
34614
  },
34615
+ onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
34616
+ if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
34617
+ },
34618
+ onDragEnd: function onDragEnd(quantity) {
34619
+ if (onItemDragEnd) onItemDragEnd(quantity);
34620
+ },
34621
+ checkIfItemCanBeMoved: checkIfItemCanBeMoved,
34622
+ openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
34623
+ setQuantitySelect({
34624
+ isOpen: true,
34625
+ maxQuantity: maxQuantity,
34626
+ callback: callback
34627
+ });
34628
+ },
34629
+ onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
34630
+ if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
34631
+ },
34632
+ onOutsideDrop: function onOutsideDrop(item, position) {
34633
+ if (_onOutsideDrop) _onOutsideDrop(item, position);
34634
+ },
34329
34635
  atlasIMG: atlasIMG,
34330
34636
  atlasJSON: atlasJSON
34331
34637
  }));
34332
34638
  }
34333
34639
  return slots;
34334
34640
  };
34335
- return React__default.createElement(SlotsContainer, {
34641
+ return React__default.createElement(React__default.Fragment, null, React__default.createElement(SlotsContainer, {
34336
34642
  title: itemContainer.name || 'Container',
34337
- onClose: onClose
34643
+ onClose: onClose,
34644
+ initialPosition: initialPosition
34338
34645
  }, React__default.createElement(ItemsContainer, {
34339
34646
  className: "item-container-body"
34340
- }, onRenderSlots()));
34647
+ }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
34648
+ quantity: quantitySelect.maxQuantity,
34649
+ onConfirm: function onConfirm(quantity) {
34650
+ quantitySelect.callback(quantity);
34651
+ setQuantitySelect({
34652
+ isOpen: false,
34653
+ maxQuantity: 1,
34654
+ callback: function callback() {}
34655
+ });
34656
+ },
34657
+ onClose: function onClose() {
34658
+ quantitySelect.callback(-1);
34659
+ setQuantitySelect({
34660
+ isOpen: false,
34661
+ maxQuantity: 1,
34662
+ callback: function callback() {}
34663
+ });
34664
+ }
34665
+ })));
34341
34666
  };
34342
34667
  var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
34343
34668
  displayName: "ItemContainer__ItemsContainer",
34344
34669
  componentId: "sc-15y5p9l-0"
34345
34670
  })(["max-width:280px;display:flex;justify-content:center;flex-wrap:wrap;"]);
34346
-
34347
- var ItemSelector = function ItemSelector(_ref) {
34348
- var atlasIMG = _ref.atlasIMG,
34349
- atlasJSON = _ref.atlasJSON,
34350
- options = _ref.options,
34351
- onClose = _ref.onClose,
34352
- onSelect = _ref.onSelect;
34353
- var _useState = React.useState(),
34354
- selectedValue = _useState[0],
34355
- setSelectedValue = _useState[1];
34356
- var handleClick = function handleClick() {
34357
- var element = document.querySelector("input[name='test']:checked");
34358
- var elementValue = element.value;
34359
- setSelectedValue(elementValue);
34360
- };
34361
- React.useEffect(function () {
34362
- if (selectedValue) {
34363
- onSelect(selectedValue);
34364
- }
34365
- }, [selectedValue]);
34366
- return React__default.createElement(DraggableContainer, {
34367
- type: exports.RPGUIContainerTypes.Framed,
34368
- width: "500px",
34369
- cancelDrag: ".equipment-container-body .arrow-selector",
34370
- onCloseButton: function onCloseButton() {
34371
- if (onClose) {
34372
- onClose();
34373
- }
34374
- }
34375
- }, React__default.createElement("div", {
34376
- style: {
34377
- width: '100%'
34378
- }
34379
- }, React__default.createElement(Title$2, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
34380
- className: "golden"
34381
- })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
34382
- return React__default.createElement(RadioOptionsWrapper$1, {
34383
- key: index
34384
- }, React__default.createElement(SpriteAtlasWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
34385
- atlasIMG: atlasIMG,
34386
- atlasJSON: atlasJSON,
34387
- spriteKey: option.imageKey,
34388
- imgScale: 3
34389
- })), React__default.createElement("div", null, React__default.createElement("input", {
34390
- className: "rpgui-radio",
34391
- type: "radio",
34392
- value: option.name,
34393
- name: "test"
34394
- }), React__default.createElement("label", {
34395
- onClick: handleClick,
34396
- style: {
34397
- display: 'flex',
34398
- alignItems: 'center'
34399
- }
34400
- }, option.name, " ", React__default.createElement("br", null), option.description)));
34401
- })), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
34402
- buttonType: exports.ButtonTypes.RPGUIButton,
34403
- onClick: onClose
34404
- }, "Cancel"), React__default.createElement(Button, {
34405
- buttonType: exports.ButtonTypes.RPGUIButton
34406
- }, "Select")));
34407
- };
34408
- var Title$2 = /*#__PURE__*/styled.h1.withConfig({
34409
- displayName: "ItemSelector__Title",
34410
- componentId: "sc-gptoxp-0"
34411
- })(["font-size:0.6rem;color:yellow !important;"]);
34412
- var Subtitle$1 = /*#__PURE__*/styled.h1.withConfig({
34413
- displayName: "ItemSelector__Subtitle",
34414
- componentId: "sc-gptoxp-1"
34415
- })(["font-size:0.4rem;color:yellow !important;"]);
34416
- var RadioInputScroller$1 = /*#__PURE__*/styled.div.withConfig({
34417
- displayName: "ItemSelector__RadioInputScroller",
34418
- componentId: "sc-gptoxp-2"
34419
- })(["padding-left:15px;padding-top:10px;width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
34420
- var SpriteAtlasWrapper$1 = /*#__PURE__*/styled.div.withConfig({
34421
- displayName: "ItemSelector__SpriteAtlasWrapper",
34422
- componentId: "sc-gptoxp-3"
34423
- })(["margin-right:40px;"]);
34424
- var RadioOptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
34425
- displayName: "ItemSelector__RadioOptionsWrapper",
34426
- componentId: "sc-gptoxp-4"
34427
- })(["display:flex;align-items:stretch;margin-bottom:40px;"]);
34428
- var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
34429
- displayName: "ItemSelector__ButtonWrapper",
34430
- componentId: "sc-gptoxp-5"
34431
- })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
34671
+ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
34672
+ displayName: "ItemContainer__QuantitySelectorContainer",
34673
+ componentId: "sc-15y5p9l-1"
34674
+ })(["position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:100;display:flex;justify-content:center;align-items:center;background-color:rgba(0,0,0,0.5);"]);
34432
34675
 
34433
34676
  var ListMenu = function ListMenu(_ref) {
34434
34677
  var options = _ref.options,
@@ -34565,7 +34808,7 @@ var QuestInfo = function QuestInfo(_ref) {
34565
34808
  onTouchStart: onRightClick
34566
34809
  }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
34567
34810
  className: "drag-handler"
34568
- }, React__default.createElement(Title$3, null, React__default.createElement(Thumbnail, {
34811
+ }, React__default.createElement(Title$2, null, React__default.createElement(Thumbnail, {
34569
34812
  src: quests[currentIndex].thumbnail || img$9
34570
34813
  }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
34571
34814
  className: "golden"
@@ -34584,7 +34827,7 @@ var QuestInfo = function QuestInfo(_ref) {
34584
34827
  }, button.title);
34585
34828
  })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
34586
34829
  className: "drag-handler"
34587
- }, React__default.createElement(Title$3, null, React__default.createElement(Thumbnail, {
34830
+ }, React__default.createElement(Title$2, null, React__default.createElement(Thumbnail, {
34588
34831
  src: quests[0].thumbnail || img$9
34589
34832
  }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
34590
34833
  className: "golden"
@@ -34631,7 +34874,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
34631
34874
  displayName: "QuestInfo__TitleContainer",
34632
34875
  componentId: "sc-15s2boc-6"
34633
34876
  })(["width:100%;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;margin-top:1rem;"]);
34634
- var Title$3 = /*#__PURE__*/styled.h1.withConfig({
34877
+ var Title$2 = /*#__PURE__*/styled.h1.withConfig({
34635
34878
  displayName: "QuestInfo__Title",
34636
34879
  componentId: "sc-15s2boc-7"
34637
34880
  })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -34653,7 +34896,7 @@ var QuestList = function QuestList(_ref) {
34653
34896
  style: {
34654
34897
  width: '100%'
34655
34898
  }
34656
- }, React__default.createElement(Title$4, null, "Quests"), React__default.createElement("hr", {
34899
+ }, React__default.createElement(Title$3, null, "Quests"), React__default.createElement("hr", {
34657
34900
  className: "golden"
34658
34901
  }), React__default.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
34659
34902
  return React__default.createElement("div", {
@@ -34674,7 +34917,7 @@ var QuestDraggableContainer$1 = /*#__PURE__*/styled(DraggableContainer).withConf
34674
34917
  displayName: "QuestList__QuestDraggableContainer",
34675
34918
  componentId: "sc-1a2vx6q-0"
34676
34919
  })([".container-close{top:10px;right:10px;}.quest-title{text-align:left;margin-left:44px;margin-top:20px;color:yellow;}.quest-desc{margin-top:12px;margin-left:44px;}.rpgui-progress{min-width:80%;margin:0 auto;}"]);
34677
- var Title$4 = /*#__PURE__*/styled.h1.withConfig({
34920
+ var Title$3 = /*#__PURE__*/styled.h1.withConfig({
34678
34921
  displayName: "QuestList__Title",
34679
34922
  componentId: "sc-1a2vx6q-1"
34680
34923
  })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -34687,6 +34930,15 @@ var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
34687
34930
  componentId: "sc-1a2vx6q-3"
34688
34931
  })(["text-align:center;p{margin-top:5px;}"]);
34689
34932
 
34933
+ //@ts-ignore
34934
+ var _RPGUI = RPGUI;
34935
+ var RPGUIRoot = function RPGUIRoot(_ref) {
34936
+ var children = _ref.children;
34937
+ return React__default.createElement("div", {
34938
+ className: "rpgui-content"
34939
+ }, children);
34940
+ };
34941
+
34690
34942
  var InputRadio = function InputRadio(_ref) {
34691
34943
  var name = _ref.name,
34692
34944
  items = _ref.items,
@@ -34719,40 +34971,6 @@ var InputRadio = function InputRadio(_ref) {
34719
34971
  }));
34720
34972
  };
34721
34973
 
34722
- (function (RangeSliderType) {
34723
- RangeSliderType["Slider"] = "rpgui-slider";
34724
- RangeSliderType["GoldSlider"] = "rpgui-slider golden";
34725
- })(exports.RangeSliderType || (exports.RangeSliderType = {}));
34726
- var RangeSlider = function RangeSlider(_ref) {
34727
- var type = _ref.type,
34728
- valueMin = _ref.valueMin,
34729
- valueMax = _ref.valueMax,
34730
- width = _ref.width,
34731
- onChange = _ref.onChange;
34732
- var sliderId = uuid.v4();
34733
- var onHandleMouseUp = function onHandleMouseUp() {
34734
- var rpguiSlider = document.getElementById("rpgui-slider-" + sliderId);
34735
- var value = _RPGUI.get_value(rpguiSlider);
34736
- onChange(Number(value));
34737
- };
34738
- return React__default.createElement("div", {
34739
- onMouseUp: onHandleMouseUp
34740
- }, React__default.createElement(Input$1, {
34741
- className: type === exports.RangeSliderType.Slider ? exports.RangeSliderType.Slider : exports.RangeSliderType.GoldSlider,
34742
- type: "range",
34743
- style: {
34744
- width: width
34745
- },
34746
- min: valueMin,
34747
- max: valueMax,
34748
- id: "rpgui-slider-" + sliderId
34749
- }));
34750
- };
34751
- var Input$1 = /*#__PURE__*/styled.input.withConfig({
34752
- displayName: "RangeSlider__Input",
34753
- componentId: "sc-v8mte9-0"
34754
- })(["opacity:0;"]);
34755
-
34756
34974
  var SimpleProgressBar = function SimpleProgressBar(_ref) {
34757
34975
  var value = _ref.value,
34758
34976
  _ref$bgColor = _ref.bgColor,
@@ -34922,7 +35140,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
34922
35140
  };
34923
35141
  return React__default.createElement(SkillsDraggableContainer, {
34924
35142
  title: "Skills"
34925
- }, onCloseButton && React__default.createElement(CloseButton$2, {
35143
+ }, onCloseButton && React__default.createElement(CloseButton$3, {
34926
35144
  onClick: onCloseButton,
34927
35145
  onTouchStart: onCloseButton
34928
35146
  }, "X"), React__default.createElement(SkillSplitDiv, null, React__default.createElement("p", null, "General"), React__default.createElement("hr", {
@@ -34952,7 +35170,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
34952
35170
  displayName: "SkillsContainer__SkillSplitDiv",
34953
35171
  componentId: "sc-1g0c67q-1"
34954
35172
  })(["width:100%;font-size:11px;hr{margin:0;margin-bottom:1rem;padding:0px;}p{margin-bottom:0px;}"]);
34955
- var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
35173
+ var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
34956
35174
  displayName: "SkillsContainer__CloseButton",
34957
35175
  componentId: "sc-1g0c67q-2"
34958
35176
  })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:0.7rem;"]);
@@ -34987,7 +35205,7 @@ var TimeWidget = function TimeWidget(_ref) {
34987
35205
  var onClose = _ref.onClose,
34988
35206
  TimeClock = _ref.TimeClock,
34989
35207
  periodOfDay = _ref.periodOfDay;
34990
- return React__default.createElement(Draggable, null, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$3, {
35208
+ return React__default.createElement(Draggable, null, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$4, {
34991
35209
  onClick: onClose
34992
35210
  }, "X"), React__default.createElement(DayNightContainer, null, React__default.createElement(DayNightPeriod, {
34993
35211
  periodOfDay: periodOfDay
@@ -35001,7 +35219,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
35001
35219
  displayName: "TimeWidget__Time",
35002
35220
  componentId: "sc-1ja236h-1"
35003
35221
  })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
35004
- var CloseButton$3 = /*#__PURE__*/styled.p.withConfig({
35222
+ var CloseButton$4 = /*#__PURE__*/styled.p.withConfig({
35005
35223
  displayName: "TimeWidget__CloseButton",
35006
35224
  componentId: "sc-1ja236h-2"
35007
35225
  })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -35157,7 +35375,7 @@ var TradingMenu = function TradingMenu(_ref) {
35157
35375
  style: {
35158
35376
  width: '100%'
35159
35377
  }
35160
- }, React__default.createElement(Title$5, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
35378
+ }, React__default.createElement(Title$4, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
35161
35379
  className: "golden"
35162
35380
  })), React__default.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem, index) {
35163
35381
  var _qtyMap$get;
@@ -35170,7 +35388,7 @@ var TradingMenu = function TradingMenu(_ref) {
35170
35388
  traderItem: tradeItem,
35171
35389
  selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0
35172
35390
  }));
35173
- })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold)), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold())), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
35391
+ })), React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Available Gold:"), React__default.createElement("p", null, "$", characterAvailableGold)), React__default.createElement(TotalWrapper, null, React__default.createElement("p", null, "Total:"), React__default.createElement("p", null, "$", sum)), !hasGoldForSale() ? React__default.createElement(AlertWrapper, null, React__default.createElement("p", null, " Sorry, not enough money.")) : React__default.createElement(GoldWrapper, null, React__default.createElement("p", null, "Final Gold:"), React__default.createElement("p", null, "$", getFinalGold())), React__default.createElement(ButtonWrapper$1, null, React__default.createElement(Button, {
35174
35392
  buttonType: exports.ButtonTypes.RPGUIButton,
35175
35393
  disabled: !hasGoldForSale(),
35176
35394
  onClick: function onClick() {
@@ -35183,7 +35401,7 @@ var TradingMenu = function TradingMenu(_ref) {
35183
35401
  }
35184
35402
  }, "Cancel"))));
35185
35403
  };
35186
- var Title$5 = /*#__PURE__*/styled.h1.withConfig({
35404
+ var Title$4 = /*#__PURE__*/styled.h1.withConfig({
35187
35405
  displayName: "TradingMenu__Title",
35188
35406
  componentId: "sc-1wjsz1l-0"
35189
35407
  })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -35207,7 +35425,7 @@ var AlertWrapper = /*#__PURE__*/styled.div.withConfig({
35207
35425
  displayName: "TradingMenu__AlertWrapper",
35208
35426
  componentId: "sc-1wjsz1l-5"
35209
35427
  })(["margin-top:1rem;display:flex;width:100%;justify-content:center;height:20px;p{color:red !important;}"]);
35210
- var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
35428
+ var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
35211
35429
  displayName: "TradingMenu__ButtonWrapper",
35212
35430
  componentId: "sc-1wjsz1l-6"
35213
35431
  })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;margin-top:1rem;"]);
@@ -35228,6 +35446,92 @@ var Container$i = /*#__PURE__*/styled.div.withConfig({
35228
35446
  return props.maxLines;
35229
35447
  });
35230
35448
 
35449
+ var ItemSelector = function ItemSelector(_ref) {
35450
+ var atlasIMG = _ref.atlasIMG,
35451
+ atlasJSON = _ref.atlasJSON,
35452
+ options = _ref.options,
35453
+ onClose = _ref.onClose,
35454
+ onSelect = _ref.onSelect;
35455
+ var _useState = React.useState(),
35456
+ selectedValue = _useState[0],
35457
+ setSelectedValue = _useState[1];
35458
+ var handleClick = function handleClick() {
35459
+ var element = document.querySelector("input[name='test']:checked");
35460
+ var elementValue = element.value;
35461
+ setSelectedValue(elementValue);
35462
+ };
35463
+ React.useEffect(function () {
35464
+ if (selectedValue) {
35465
+ onSelect(selectedValue);
35466
+ }
35467
+ }, [selectedValue]);
35468
+ return React__default.createElement(DraggableContainer, {
35469
+ type: exports.RPGUIContainerTypes.Framed,
35470
+ width: "500px",
35471
+ cancelDrag: ".equipment-container-body .arrow-selector",
35472
+ onCloseButton: function onCloseButton() {
35473
+ if (onClose) {
35474
+ onClose();
35475
+ }
35476
+ }
35477
+ }, React__default.createElement("div", {
35478
+ style: {
35479
+ width: '100%'
35480
+ }
35481
+ }, React__default.createElement(Title$5, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
35482
+ className: "golden"
35483
+ })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
35484
+ return React__default.createElement(RadioOptionsWrapper$1, {
35485
+ key: index
35486
+ }, React__default.createElement(SpriteAtlasWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
35487
+ atlasIMG: atlasIMG,
35488
+ atlasJSON: atlasJSON,
35489
+ spriteKey: option.imageKey,
35490
+ imgScale: 3
35491
+ })), React__default.createElement("div", null, React__default.createElement("input", {
35492
+ className: "rpgui-radio",
35493
+ type: "radio",
35494
+ value: option.name,
35495
+ name: "test"
35496
+ }), React__default.createElement("label", {
35497
+ onClick: handleClick,
35498
+ style: {
35499
+ display: 'flex',
35500
+ alignItems: 'center'
35501
+ }
35502
+ }, option.name, " ", React__default.createElement("br", null), option.description)));
35503
+ })), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
35504
+ buttonType: exports.ButtonTypes.RPGUIButton,
35505
+ onClick: onClose
35506
+ }, "Cancel"), React__default.createElement(Button, {
35507
+ buttonType: exports.ButtonTypes.RPGUIButton
35508
+ }, "Select")));
35509
+ };
35510
+ var Title$5 = /*#__PURE__*/styled.h1.withConfig({
35511
+ displayName: "ItemSelector__Title",
35512
+ componentId: "sc-gptoxp-0"
35513
+ })(["font-size:0.6rem;color:yellow !important;"]);
35514
+ var Subtitle$1 = /*#__PURE__*/styled.h1.withConfig({
35515
+ displayName: "ItemSelector__Subtitle",
35516
+ componentId: "sc-gptoxp-1"
35517
+ })(["font-size:0.4rem;color:yellow !important;"]);
35518
+ var RadioInputScroller$1 = /*#__PURE__*/styled.div.withConfig({
35519
+ displayName: "ItemSelector__RadioInputScroller",
35520
+ componentId: "sc-gptoxp-2"
35521
+ })(["padding-left:15px;padding-top:10px;width:100%;margin-top:1rem;align-items:center;margin-left:20px;align-items:flex-start;overflow-y:scroll;height:360px;"]);
35522
+ var SpriteAtlasWrapper$1 = /*#__PURE__*/styled.div.withConfig({
35523
+ displayName: "ItemSelector__SpriteAtlasWrapper",
35524
+ componentId: "sc-gptoxp-3"
35525
+ })(["margin-right:40px;"]);
35526
+ var RadioOptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
35527
+ displayName: "ItemSelector__RadioOptionsWrapper",
35528
+ componentId: "sc-gptoxp-4"
35529
+ })(["display:flex;align-items:stretch;margin-bottom:40px;"]);
35530
+ var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
35531
+ displayName: "ItemSelector__ButtonWrapper",
35532
+ componentId: "sc-gptoxp-5"
35533
+ })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
35534
+
35231
35535
  exports.Button = Button;
35232
35536
  exports.CharacterSelection = CharacterSelection;
35233
35537
  exports.Chat = Chat;
@@ -35242,7 +35546,7 @@ exports.ErrorBoundary = ErrorBoundary;
35242
35546
  exports.HistoryDialog = HistoryDialog;
35243
35547
  exports.Input = Input;
35244
35548
  exports.InputRadio = InputRadio;
35245
- exports.ItemContainer = ItemContainer;
35549
+ exports.ItemContainer = ItemContainer$1;
35246
35550
  exports.ItemSelector = ItemSelector;
35247
35551
  exports.ItemSlot = ItemSlot;
35248
35552
  exports.ListMenu = ListMenu;
@@ -35254,7 +35558,6 @@ exports.QuestInfo = QuestInfo;
35254
35558
  exports.QuestList = QuestList;
35255
35559
  exports.QuestionDialog = QuestionDialog;
35256
35560
  exports.RPGUIContainer = RPGUIContainer;
35257
- exports.RPGUIForceRenderStart = RPGUIForceRenderStart;
35258
35561
  exports.RPGUIRoot = RPGUIRoot;
35259
35562
  exports.RangeSlider = RangeSlider;
35260
35563
  exports.SkillProgressBar = SkillProgressBar;