@rpg-engine/long-bow 0.2.90 → 0.2.91

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 +522 -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 +523 -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 +169 -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,115 @@ 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
+ var isOutsideDrop = classes.some(function (elm) {
33655
+ //elm matches ItemContainer string
33656
+ return elm.includes('rpgui-content');
33657
+ });
33658
+ if (isOutsideDrop) {
33659
+ setDropPosition({
33660
+ x: data.x,
33661
+ y: data.y
33662
+ });
33663
+ }
33664
+ setWasDragged(false);
33665
+ var target = dragContainer.current;
33666
+ if (!target || !wasDragged) return;
33667
+ var style = window.getComputedStyle(target);
33668
+ var matrix = new DOMMatrixReadOnly(style.transform);
33669
+ var x = matrix.m41;
33670
+ var y = matrix.m42;
33671
+ setDragPosition({
33672
+ x: x,
33673
+ y: y
33674
+ });
33675
+ setTimeout(function () {
33676
+ if (checkIfItemCanBeMoved()) {
33677
+ if (item.stackQty && item.stackQty !== 1 && openQuantitySelector) openQuantitySelector(item.stackQty, onSuccesfulDrag);else onSuccesfulDrag(item.stackQty);
33678
+ } else {
33679
+ resetItem();
33680
+ setDragPosition({
33681
+ x: 0,
33682
+ y: 0
33683
+ });
33684
+ }
33685
+ }, 100);
33686
+ } else if (item) {
33687
+ if (!isContextMenuDisabled) setIsContextMenuVisible(!isContextMenuVisible);
33688
+ onClick(item.type, containerType, item);
33689
+ }
33690
+ },
33691
+ onStart: function onStart() {
33692
+ if (!item) {
33693
+ return;
33694
+ }
33695
+ if (onDragStart) {
33696
+ onDragStart(item, slotIndex, containerType);
33697
+ }
33698
+ },
33699
+ onDrag: function onDrag() {
33700
+ setWasDragged(true);
33701
+ setIsFocused(true);
33702
+ },
33703
+ position: dragPosition,
33704
+ cancel: ".empty-slot"
33705
+ }, React__default.createElement(ItemContainer, {
33706
+ ref: dragContainer,
33707
+ isFocused: isFocused,
33611
33708
  onMouseOver: function onMouseOver(event) {
33612
- return _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
33709
+ _onMouseOver(event, slotIndex, item, event.clientX, event.clientY);
33613
33710
  },
33614
33711
  onMouseOut: function onMouseOut() {
33615
33712
  if (_onMouseOut) _onMouseOut();
33616
33713
  },
33617
33714
  onMouseEnter: function onMouseEnter() {
33618
- return setTooltipVisible(true);
33715
+ setTooltipVisible(true);
33619
33716
  },
33620
33717
  onMouseLeave: function onMouseLeave() {
33621
- return setTooltipVisible(false);
33622
- },
33623
- onClick: function onClick() {
33624
33718
  setTooltipVisible(false);
33625
- if (item) {
33626
- if (!isContextMenuDisabled) {
33627
- setIsContextMenuVisible(!isContextMenuVisible);
33628
- }
33629
- _onClick(item.type, containerType, item);
33630
- }
33631
33719
  }
33632
- }, !isContextMenuDisabled && isContextMenuVisible && contextActions && React__default.createElement(RelativeListMenu, {
33720
+ }, onRenderSlot(item))), isTooltipVisible && item && React__default.createElement(ItemTooltip, {
33721
+ label: item.name
33722
+ }), !isContextMenuDisabled && isContextMenuVisible && contextActions && React__default.createElement(RelativeListMenu, {
33633
33723
  options: contextActions,
33634
33724
  onSelected: function onSelected(optionId) {
33635
33725
  setIsContextMenuVisible(false);
@@ -33640,21 +33730,25 @@ var ItemSlot = /*#__PURE__*/mobxReactLite.observer(function (_ref) {
33640
33730
  onOutsideClick: function onOutsideClick() {
33641
33731
  setIsContextMenuVisible(false);
33642
33732
  }
33643
- }), isTooltipVisible && item && React__default.createElement(ItemTooltip, {
33644
- label: item.name
33645
- }), onRenderSlot(item));
33733
+ }));
33646
33734
  });
33647
33735
  var Container$a = /*#__PURE__*/styled.div.withConfig({
33648
33736
  displayName: "ItemSlot__Container",
33649
33737
  componentId: "sc-l2j5ef-0"
33650
33738
  })(["margin:0.1rem;.sprite-from-atlas-img{position:relative;top:1.5rem;left:1.5rem;}position:relative;"]);
33739
+ var ItemContainer = /*#__PURE__*/styled.div.withConfig({
33740
+ displayName: "ItemSlot__ItemContainer",
33741
+ componentId: "sc-l2j5ef-1"
33742
+ })(["width:100%;height:100%;position:relative;", ""], function (props) {
33743
+ return props.isFocused && 'z-index: 100; pointer-events: none;';
33744
+ });
33651
33745
  var ItemQtyContainer = /*#__PURE__*/styled.div.withConfig({
33652
33746
  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;"]);
33747
+ componentId: "sc-l2j5ef-2"
33748
+ })(["position:relative;width:85%;height:16px;top:25px;left:2px;pointer-events:none;display:flex;justify-content:flex-end;"]);
33655
33749
  var ItemQty = /*#__PURE__*/styled.span.withConfig({
33656
33750
  displayName: "ItemSlot__ItemQty",
33657
- componentId: "sc-l2j5ef-2"
33751
+ componentId: "sc-l2j5ef-3"
33658
33752
  })(["&.regular{font-size:", ";}&.small{font-size:", ";}"], uiFonts.size.small, uiFonts.size.xsmall);
33659
33753
 
33660
33754
  var EquipmentSet = function EquipmentSet(_ref) {
@@ -33664,7 +33758,12 @@ var EquipmentSet = function EquipmentSet(_ref) {
33664
33758
  _onSelected = _ref.onSelected,
33665
33759
  onItemClick = _ref.onItemClick,
33666
33760
  atlasIMG = _ref.atlasIMG,
33667
- atlasJSON = _ref.atlasJSON;
33761
+ atlasJSON = _ref.atlasJSON,
33762
+ onItemDragEnd = _ref.onItemDragEnd,
33763
+ onItemDragStart = _ref.onItemDragStart,
33764
+ onItemPlaceDrop = _ref.onItemPlaceDrop,
33765
+ onItemOutsideDrop = _ref.onItemOutsideDrop,
33766
+ checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved;
33668
33767
  var neck = equipmentSet.neck,
33669
33768
  leftHand = equipmentSet.leftHand,
33670
33769
  ring = equipmentSet.ring,
@@ -33700,6 +33799,22 @@ var EquipmentSet = function EquipmentSet(_ref) {
33700
33799
  onSelected: function onSelected(optionId) {
33701
33800
  if (_onSelected) _onSelected(optionId);
33702
33801
  },
33802
+ onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
33803
+ if (!item) {
33804
+ return;
33805
+ }
33806
+ if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
33807
+ },
33808
+ onDragEnd: function onDragEnd(quantity) {
33809
+ if (onItemDragEnd) onItemDragEnd(quantity);
33810
+ },
33811
+ checkIfItemCanBeMoved: checkIfItemCanBeMoved,
33812
+ onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
33813
+ if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
33814
+ },
33815
+ onOutsideDrop: function onOutsideDrop(item, position) {
33816
+ if (onItemOutsideDrop) onItemOutsideDrop(item, position);
33817
+ },
33703
33818
  atlasIMG: atlasIMG,
33704
33819
  atlasJSON: atlasJSON
33705
33820
  });
@@ -33720,11 +33835,11 @@ var EquipmentSet = function EquipmentSet(_ref) {
33720
33835
  var EquipmentSetContainer = /*#__PURE__*/styled.div.withConfig({
33721
33836
  displayName: "EquipmentSet__EquipmentSetContainer",
33722
33837
  componentId: "sc-1wuddg2-0"
33723
- })(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;"]);
33838
+ })(["width:inherit;display:flex;justify-content:center;flex-wrap:wrap;flex-direction:row;touch-action:none;"]);
33724
33839
  var EquipmentColumn = /*#__PURE__*/styled.div.withConfig({
33725
33840
  displayName: "EquipmentSet__EquipmentColumn",
33726
33841
  componentId: "sc-1wuddg2-1"
33727
- })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;"]);
33842
+ })(["display:flex;justify-content:center;flex-wrap:wrap;flex-direction:column;touch-action:none;"]);
33728
33843
 
33729
33844
  var IS_MOBILE_OR_TABLET = /*#__PURE__*/isMobile({
33730
33845
  tablet: true
@@ -34271,7 +34386,8 @@ var SlotsContainer = function SlotsContainer(_ref) {
34271
34386
  title = _ref.title,
34272
34387
  onClose = _ref.onClose,
34273
34388
  _onPositionChange = _ref.onPositionChange,
34274
- onOutsideClick = _ref.onOutsideClick;
34389
+ onOutsideClick = _ref.onOutsideClick,
34390
+ initialPosition = _ref.initialPosition;
34275
34391
  return React__default.createElement(DraggableContainer, {
34276
34392
  title: title,
34277
34393
  type: exports.RPGUIContainerTypes.Framed,
@@ -34292,11 +34408,167 @@ var SlotsContainer = function SlotsContainer(_ref) {
34292
34408
  });
34293
34409
  }
34294
34410
  },
34295
- onOutsideClick: onOutsideClick
34411
+ onOutsideClick: onOutsideClick,
34412
+ initialPosition: initialPosition
34296
34413
  }, children);
34297
34414
  };
34298
34415
 
34299
- var ItemContainer = function ItemContainer(_ref) {
34416
+ (function (RangeSliderType) {
34417
+ RangeSliderType["Slider"] = "rpgui-slider";
34418
+ RangeSliderType["GoldSlider"] = "rpgui-slider golden";
34419
+ })(exports.RangeSliderType || (exports.RangeSliderType = {}));
34420
+ var RangeSlider = function RangeSlider(_ref) {
34421
+ var type = _ref.type,
34422
+ valueMin = _ref.valueMin,
34423
+ valueMax = _ref.valueMax,
34424
+ width = _ref.width,
34425
+ _onChange = _ref.onChange,
34426
+ value = _ref.value;
34427
+ var sliderId = uuid.v4();
34428
+ var containerRef = React.useRef(null);
34429
+ var _useState = React.useState(0),
34430
+ left = _useState[0],
34431
+ setLeft = _useState[1];
34432
+ React.useEffect(function () {
34433
+ var _containerRef$current;
34434
+ var calculatedWidth = ((_containerRef$current = containerRef.current) == null ? void 0 : _containerRef$current.clientWidth) || 0;
34435
+ setLeft(Math.max((value - valueMin) / (valueMax - valueMin) * (calculatedWidth - 35) + 10));
34436
+ }, [value, valueMin, valueMax]);
34437
+ var typeClass = type === exports.RangeSliderType.GoldSlider ? 'golden' : '';
34438
+ return React__default.createElement("div", {
34439
+ style: {
34440
+ width: width,
34441
+ position: 'relative'
34442
+ },
34443
+ className: "rpgui-slider-container " + typeClass,
34444
+ id: "rpgui-slider-" + sliderId,
34445
+ ref: containerRef
34446
+ }, React__default.createElement("div", {
34447
+ style: {
34448
+ pointerEvents: 'none'
34449
+ }
34450
+ }, React__default.createElement("div", {
34451
+ className: "rpgui-slider-track " + typeClass
34452
+ }), React__default.createElement("div", {
34453
+ className: "rpgui-slider-left-edge " + typeClass
34454
+ }), React__default.createElement("div", {
34455
+ className: "rpgui-slider-right-edge " + typeClass
34456
+ }), React__default.createElement("div", {
34457
+ className: "rpgui-slider-thumb " + typeClass,
34458
+ style: {
34459
+ left: left
34460
+ }
34461
+ })), React__default.createElement(Input$1, {
34462
+ type: "range",
34463
+ style: {
34464
+ width: width
34465
+ },
34466
+ min: valueMin,
34467
+ max: valueMax,
34468
+ onChange: function onChange(e) {
34469
+ return _onChange(Number(e.target.value));
34470
+ },
34471
+ value: value,
34472
+ className: "rpgui-cursor-point"
34473
+ }));
34474
+ };
34475
+ var Input$1 = /*#__PURE__*/styled.input.withConfig({
34476
+ displayName: "RangeSlider__Input",
34477
+ componentId: "sc-v8mte9-0"
34478
+ })(["opacity:0;position:absolute;width:100%;height:100%;top:0;left:0;margin-top:-5px;"]);
34479
+
34480
+ var ItemQuantitySelector = function ItemQuantitySelector(_ref) {
34481
+ var quantity = _ref.quantity,
34482
+ onConfirm = _ref.onConfirm,
34483
+ onClose = _ref.onClose;
34484
+ var _useState = React.useState(quantity),
34485
+ value = _useState[0],
34486
+ setValue = _useState[1];
34487
+ var inputRef = React.useRef(null);
34488
+ React.useEffect(function () {
34489
+ if (inputRef.current) {
34490
+ inputRef.current.focus();
34491
+ inputRef.current.select();
34492
+ var closeSelector = function closeSelector(e) {
34493
+ if (e.key === 'Escape') {
34494
+ onClose();
34495
+ }
34496
+ };
34497
+ document.addEventListener('keydown', closeSelector);
34498
+ return function () {
34499
+ document.removeEventListener('keydown', closeSelector);
34500
+ };
34501
+ }
34502
+ return function () {};
34503
+ }, []);
34504
+ return React__default.createElement(StyledContainer, {
34505
+ type: exports.RPGUIContainerTypes.Framed,
34506
+ width: "25rem"
34507
+ }, React__default.createElement(CloseButton$2, {
34508
+ className: "container-close",
34509
+ onClick: onClose,
34510
+ onTouchStart: onClose
34511
+ }, "X"), React__default.createElement("h2", null, "Select quantity to move"), React__default.createElement(StyledForm, {
34512
+ style: {
34513
+ width: '100%'
34514
+ },
34515
+ onSubmit: function onSubmit(e) {
34516
+ e.preventDefault();
34517
+ var numberValue = Number(value);
34518
+ if (Number.isNaN(numberValue)) {
34519
+ return;
34520
+ }
34521
+ onConfirm(Math.max(1, Math.min(quantity, numberValue)));
34522
+ },
34523
+ noValidate: true
34524
+ }, React__default.createElement(StyledInput, {
34525
+ innerRef: inputRef,
34526
+ placeholder: "Enter quantity",
34527
+ type: "number",
34528
+ min: 1,
34529
+ max: quantity,
34530
+ value: value,
34531
+ onChange: function onChange(e) {
34532
+ if (Number(e.target.value) >= quantity) {
34533
+ setValue(quantity);
34534
+ return;
34535
+ }
34536
+ setValue(e.target.value);
34537
+ },
34538
+ onBlur: function onBlur(e) {
34539
+ var newValue = Math.max(1, Math.min(quantity, Number(e.target.value)));
34540
+ setValue(newValue);
34541
+ }
34542
+ }), React__default.createElement(RangeSlider, {
34543
+ type: exports.RangeSliderType.Slider,
34544
+ valueMin: 1,
34545
+ valueMax: quantity,
34546
+ width: "100%",
34547
+ onChange: setValue,
34548
+ value: value
34549
+ }), React__default.createElement(Button, {
34550
+ buttonType: exports.ButtonTypes.RPGUIButton,
34551
+ type: "submit"
34552
+ }, "Confirm")));
34553
+ };
34554
+ var StyledContainer = /*#__PURE__*/styled(RPGUIContainer).withConfig({
34555
+ displayName: "ItemQuantitySelector__StyledContainer",
34556
+ componentId: "sc-yfdtpn-0"
34557
+ })(["display:flex;flex-direction:column;align-items:center;"]);
34558
+ var StyledForm = /*#__PURE__*/styled.form.withConfig({
34559
+ displayName: "ItemQuantitySelector__StyledForm",
34560
+ componentId: "sc-yfdtpn-1"
34561
+ })(["display:flex;flex-direction:column;align-items:center;width:100%;"]);
34562
+ var StyledInput = /*#__PURE__*/styled(Input).withConfig({
34563
+ displayName: "ItemQuantitySelector__StyledInput",
34564
+ componentId: "sc-yfdtpn-2"
34565
+ })(["text-align:center;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&[type='number']{-moz-appearance:textfield;}"]);
34566
+ var CloseButton$2 = /*#__PURE__*/styled.div.withConfig({
34567
+ displayName: "ItemQuantitySelector__CloseButton",
34568
+ componentId: "sc-yfdtpn-3"
34569
+ })(["position:absolute;top:3px;right:0px;color:white;z-index:22;font-size:0.8rem;"]);
34570
+
34571
+ var ItemContainer$1 = function ItemContainer(_ref) {
34300
34572
  var itemContainer = _ref.itemContainer,
34301
34573
  onClose = _ref.onClose,
34302
34574
  _onMouseOver = _ref.onMouseOver,
@@ -34306,7 +34578,20 @@ var ItemContainer = function ItemContainer(_ref) {
34306
34578
  atlasJSON = _ref.atlasJSON,
34307
34579
  atlasIMG = _ref.atlasIMG,
34308
34580
  _ref$disableContextMe = _ref.disableContextMenu,
34309
- disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe;
34581
+ disableContextMenu = _ref$disableContextMe === void 0 ? false : _ref$disableContextMe,
34582
+ onItemDragEnd = _ref.onItemDragEnd,
34583
+ onItemDragStart = _ref.onItemDragStart,
34584
+ onItemPlaceDrop = _ref.onItemPlaceDrop,
34585
+ _onOutsideDrop = _ref.onOutsideDrop,
34586
+ checkIfItemCanBeMoved = _ref.checkIfItemCanBeMoved,
34587
+ initialPosition = _ref.initialPosition;
34588
+ var _useState = React.useState({
34589
+ isOpen: false,
34590
+ maxQuantity: 1,
34591
+ callback: function callback(_quantity) {}
34592
+ }),
34593
+ quantitySelect = _useState[0],
34594
+ setQuantitySelect = _useState[1];
34310
34595
  var onRenderSlots = function onRenderSlots() {
34311
34596
  var slots = [];
34312
34597
  for (var i = 0; i < itemContainer.slotQty; i++) {
@@ -34326,109 +34611,66 @@ var ItemContainer = function ItemContainer(_ref) {
34326
34611
  onSelected: function onSelected(optionId, item) {
34327
34612
  if (_onSelected) _onSelected(optionId, item);
34328
34613
  },
34614
+ onDragStart: function onDragStart(item, slotIndex, itemContainerType) {
34615
+ if (onItemDragStart) onItemDragStart(item, slotIndex, itemContainerType);
34616
+ },
34617
+ onDragEnd: function onDragEnd(quantity) {
34618
+ if (onItemDragEnd) onItemDragEnd(quantity);
34619
+ },
34620
+ checkIfItemCanBeMoved: checkIfItemCanBeMoved,
34621
+ openQuantitySelector: function openQuantitySelector(maxQuantity, callback) {
34622
+ setQuantitySelect({
34623
+ isOpen: true,
34624
+ maxQuantity: maxQuantity,
34625
+ callback: callback
34626
+ });
34627
+ },
34628
+ onPlaceDrop: function onPlaceDrop(item, slotIndex, itemContainerType) {
34629
+ if (onItemPlaceDrop) onItemPlaceDrop(item, slotIndex, itemContainerType);
34630
+ },
34631
+ onOutsideDrop: function onOutsideDrop(item, position) {
34632
+ if (_onOutsideDrop) _onOutsideDrop(item, position);
34633
+ },
34329
34634
  atlasIMG: atlasIMG,
34330
34635
  atlasJSON: atlasJSON
34331
34636
  }));
34332
34637
  }
34333
34638
  return slots;
34334
34639
  };
34335
- return React__default.createElement(SlotsContainer, {
34640
+ return React__default.createElement(React__default.Fragment, null, React__default.createElement(SlotsContainer, {
34336
34641
  title: itemContainer.name || 'Container',
34337
- onClose: onClose
34642
+ onClose: onClose,
34643
+ initialPosition: initialPosition
34338
34644
  }, React__default.createElement(ItemsContainer, {
34339
34645
  className: "item-container-body"
34340
- }, onRenderSlots()));
34646
+ }, onRenderSlots())), quantitySelect.isOpen && React__default.createElement(QuantitySelectorContainer, null, React__default.createElement(ItemQuantitySelector, {
34647
+ quantity: quantitySelect.maxQuantity,
34648
+ onConfirm: function onConfirm(quantity) {
34649
+ quantitySelect.callback(quantity);
34650
+ setQuantitySelect({
34651
+ isOpen: false,
34652
+ maxQuantity: 1,
34653
+ callback: function callback() {}
34654
+ });
34655
+ },
34656
+ onClose: function onClose() {
34657
+ quantitySelect.callback(-1);
34658
+ setQuantitySelect({
34659
+ isOpen: false,
34660
+ maxQuantity: 1,
34661
+ callback: function callback() {}
34662
+ });
34663
+ }
34664
+ })));
34341
34665
  };
34342
34666
  var ItemsContainer = /*#__PURE__*/styled.div.withConfig({
34343
34667
  displayName: "ItemContainer__ItemsContainer",
34344
34668
  componentId: "sc-15y5p9l-0"
34345
34669
  })(["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%;"]);
34670
+ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
34671
+ displayName: "ItemContainer__QuantitySelectorContainer",
34672
+ componentId: "sc-15y5p9l-1"
34673
+ })(["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
34674
 
34433
34675
  var ListMenu = function ListMenu(_ref) {
34434
34676
  var options = _ref.options,
@@ -34565,7 +34807,7 @@ var QuestInfo = function QuestInfo(_ref) {
34565
34807
  onTouchStart: onRightClick
34566
34808
  }), React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
34567
34809
  className: "drag-handler"
34568
- }, React__default.createElement(Title$3, null, React__default.createElement(Thumbnail, {
34810
+ }, React__default.createElement(Title$2, null, React__default.createElement(Thumbnail, {
34569
34811
  src: quests[currentIndex].thumbnail || img$9
34570
34812
  }), quests[currentIndex].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
34571
34813
  className: "golden"
@@ -34584,7 +34826,7 @@ var QuestInfo = function QuestInfo(_ref) {
34584
34826
  }, button.title);
34585
34827
  })))) : React__default.createElement(QuestsContainer, null, React__default.createElement(QuestContainer, null, React__default.createElement(TitleContainer$1, {
34586
34828
  className: "drag-handler"
34587
- }, React__default.createElement(Title$3, null, React__default.createElement(Thumbnail, {
34829
+ }, React__default.createElement(Title$2, null, React__default.createElement(Thumbnail, {
34588
34830
  src: quests[0].thumbnail || img$9
34589
34831
  }), quests[0].title), React__default.createElement(QuestSplitDiv, null, React__default.createElement("hr", {
34590
34832
  className: "golden"
@@ -34631,7 +34873,7 @@ var TitleContainer$1 = /*#__PURE__*/styled.div.withConfig({
34631
34873
  displayName: "QuestInfo__TitleContainer",
34632
34874
  componentId: "sc-15s2boc-6"
34633
34875
  })(["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({
34876
+ var Title$2 = /*#__PURE__*/styled.h1.withConfig({
34635
34877
  displayName: "QuestInfo__Title",
34636
34878
  componentId: "sc-15s2boc-7"
34637
34879
  })(["color:white;z-index:22;font-size:", " !important;color:", " !important;"], uiFonts.size.medium, uiColors.yellow);
@@ -34653,7 +34895,7 @@ var QuestList = function QuestList(_ref) {
34653
34895
  style: {
34654
34896
  width: '100%'
34655
34897
  }
34656
- }, React__default.createElement(Title$4, null, "Quests"), React__default.createElement("hr", {
34898
+ }, React__default.createElement(Title$3, null, "Quests"), React__default.createElement("hr", {
34657
34899
  className: "golden"
34658
34900
  }), React__default.createElement(QuestListContainer, null, quests ? quests.map(function (quest, i) {
34659
34901
  return React__default.createElement("div", {
@@ -34674,7 +34916,7 @@ var QuestDraggableContainer$1 = /*#__PURE__*/styled(DraggableContainer).withConf
34674
34916
  displayName: "QuestList__QuestDraggableContainer",
34675
34917
  componentId: "sc-1a2vx6q-0"
34676
34918
  })([".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({
34919
+ var Title$3 = /*#__PURE__*/styled.h1.withConfig({
34678
34920
  displayName: "QuestList__Title",
34679
34921
  componentId: "sc-1a2vx6q-1"
34680
34922
  })(["z-index:22;font-size:", " !important;color:yellow !important;"], uiFonts.size.medium);
@@ -34687,6 +34929,15 @@ var NoQuestContainer = /*#__PURE__*/styled.div.withConfig({
34687
34929
  componentId: "sc-1a2vx6q-3"
34688
34930
  })(["text-align:center;p{margin-top:5px;}"]);
34689
34931
 
34932
+ //@ts-ignore
34933
+ var _RPGUI = RPGUI;
34934
+ var RPGUIRoot = function RPGUIRoot(_ref) {
34935
+ var children = _ref.children;
34936
+ return React__default.createElement("div", {
34937
+ className: "rpgui-content"
34938
+ }, children);
34939
+ };
34940
+
34690
34941
  var InputRadio = function InputRadio(_ref) {
34691
34942
  var name = _ref.name,
34692
34943
  items = _ref.items,
@@ -34719,40 +34970,6 @@ var InputRadio = function InputRadio(_ref) {
34719
34970
  }));
34720
34971
  };
34721
34972
 
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
34973
  var SimpleProgressBar = function SimpleProgressBar(_ref) {
34757
34974
  var value = _ref.value,
34758
34975
  _ref$bgColor = _ref.bgColor,
@@ -34922,7 +35139,7 @@ var SkillsContainer = function SkillsContainer(_ref) {
34922
35139
  };
34923
35140
  return React__default.createElement(SkillsDraggableContainer, {
34924
35141
  title: "Skills"
34925
- }, onCloseButton && React__default.createElement(CloseButton$2, {
35142
+ }, onCloseButton && React__default.createElement(CloseButton$3, {
34926
35143
  onClick: onCloseButton,
34927
35144
  onTouchStart: onCloseButton
34928
35145
  }, "X"), React__default.createElement(SkillSplitDiv, null, React__default.createElement("p", null, "General"), React__default.createElement("hr", {
@@ -34952,7 +35169,7 @@ var SkillSplitDiv = /*#__PURE__*/styled.div.withConfig({
34952
35169
  displayName: "SkillsContainer__SkillSplitDiv",
34953
35170
  componentId: "sc-1g0c67q-1"
34954
35171
  })(["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({
35172
+ var CloseButton$3 = /*#__PURE__*/styled.div.withConfig({
34956
35173
  displayName: "SkillsContainer__CloseButton",
34957
35174
  componentId: "sc-1g0c67q-2"
34958
35175
  })(["position:absolute;top:2px;right:2px;color:white;z-index:22;font-size:0.7rem;"]);
@@ -34987,7 +35204,7 @@ var TimeWidget = function TimeWidget(_ref) {
34987
35204
  var onClose = _ref.onClose,
34988
35205
  TimeClock = _ref.TimeClock,
34989
35206
  periodOfDay = _ref.periodOfDay;
34990
- return React__default.createElement(Draggable, null, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$3, {
35207
+ return React__default.createElement(Draggable, null, React__default.createElement(WidgetContainer, null, React__default.createElement(CloseButton$4, {
34991
35208
  onClick: onClose
34992
35209
  }, "X"), React__default.createElement(DayNightContainer, null, React__default.createElement(DayNightPeriod, {
34993
35210
  periodOfDay: periodOfDay
@@ -35001,7 +35218,7 @@ var Time = /*#__PURE__*/styled.div.withConfig({
35001
35218
  displayName: "TimeWidget__Time",
35002
35219
  componentId: "sc-1ja236h-1"
35003
35220
  })(["top:0.75rem;right:0.5rem;position:absolute;font-size:", ";color:white;"], uiFonts.size.small);
35004
- var CloseButton$3 = /*#__PURE__*/styled.p.withConfig({
35221
+ var CloseButton$4 = /*#__PURE__*/styled.p.withConfig({
35005
35222
  displayName: "TimeWidget__CloseButton",
35006
35223
  componentId: "sc-1ja236h-2"
35007
35224
  })(["position:absolute;top:-0.5rem;margin:0;right:-0.2rem;font-size:", " !important;z-index:1;"], uiFonts.size.small);
@@ -35157,7 +35374,7 @@ var TradingMenu = function TradingMenu(_ref) {
35157
35374
  style: {
35158
35375
  width: '100%'
35159
35376
  }
35160
- }, React__default.createElement(Title$5, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
35377
+ }, React__default.createElement(Title$4, null, Capitalize(type), " Menu"), React__default.createElement("hr", {
35161
35378
  className: "golden"
35162
35379
  })), React__default.createElement(TradingComponentScrollWrapper, null, traderItems.map(function (tradeItem, index) {
35163
35380
  var _qtyMap$get;
@@ -35170,7 +35387,7 @@ var TradingMenu = function TradingMenu(_ref) {
35170
35387
  traderItem: tradeItem,
35171
35388
  selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0
35172
35389
  }));
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, {
35390
+ })), 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
35391
  buttonType: exports.ButtonTypes.RPGUIButton,
35175
35392
  disabled: !hasGoldForSale(),
35176
35393
  onClick: function onClick() {
@@ -35183,7 +35400,7 @@ var TradingMenu = function TradingMenu(_ref) {
35183
35400
  }
35184
35401
  }, "Cancel"))));
35185
35402
  };
35186
- var Title$5 = /*#__PURE__*/styled.h1.withConfig({
35403
+ var Title$4 = /*#__PURE__*/styled.h1.withConfig({
35187
35404
  displayName: "TradingMenu__Title",
35188
35405
  componentId: "sc-1wjsz1l-0"
35189
35406
  })(["z-index:22;font-size:0.6rem;color:yellow !important;"]);
@@ -35207,7 +35424,7 @@ var AlertWrapper = /*#__PURE__*/styled.div.withConfig({
35207
35424
  displayName: "TradingMenu__AlertWrapper",
35208
35425
  componentId: "sc-1wjsz1l-5"
35209
35426
  })(["margin-top:1rem;display:flex;width:100%;justify-content:center;height:20px;p{color:red !important;}"]);
35210
- var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
35427
+ var ButtonWrapper$1 = /*#__PURE__*/styled.div.withConfig({
35211
35428
  displayName: "TradingMenu__ButtonWrapper",
35212
35429
  componentId: "sc-1wjsz1l-6"
35213
35430
  })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;margin-top:1rem;"]);
@@ -35228,6 +35445,92 @@ var Container$i = /*#__PURE__*/styled.div.withConfig({
35228
35445
  return props.maxLines;
35229
35446
  });
35230
35447
 
35448
+ var ItemSelector = function ItemSelector(_ref) {
35449
+ var atlasIMG = _ref.atlasIMG,
35450
+ atlasJSON = _ref.atlasJSON,
35451
+ options = _ref.options,
35452
+ onClose = _ref.onClose,
35453
+ onSelect = _ref.onSelect;
35454
+ var _useState = React.useState(),
35455
+ selectedValue = _useState[0],
35456
+ setSelectedValue = _useState[1];
35457
+ var handleClick = function handleClick() {
35458
+ var element = document.querySelector("input[name='test']:checked");
35459
+ var elementValue = element.value;
35460
+ setSelectedValue(elementValue);
35461
+ };
35462
+ React.useEffect(function () {
35463
+ if (selectedValue) {
35464
+ onSelect(selectedValue);
35465
+ }
35466
+ }, [selectedValue]);
35467
+ return React__default.createElement(DraggableContainer, {
35468
+ type: exports.RPGUIContainerTypes.Framed,
35469
+ width: "500px",
35470
+ cancelDrag: ".equipment-container-body .arrow-selector",
35471
+ onCloseButton: function onCloseButton() {
35472
+ if (onClose) {
35473
+ onClose();
35474
+ }
35475
+ }
35476
+ }, React__default.createElement("div", {
35477
+ style: {
35478
+ width: '100%'
35479
+ }
35480
+ }, React__default.createElement(Title$5, null, 'Harvesting instruments'), React__default.createElement(Subtitle$1, null, 'Use the tool, you need it'), React__default.createElement("hr", {
35481
+ className: "golden"
35482
+ })), React__default.createElement(RadioInputScroller$1, null, options == null ? void 0 : options.map(function (option, index) {
35483
+ return React__default.createElement(RadioOptionsWrapper$1, {
35484
+ key: index
35485
+ }, React__default.createElement(SpriteAtlasWrapper$1, null, React__default.createElement(SpriteFromAtlas, {
35486
+ atlasIMG: atlasIMG,
35487
+ atlasJSON: atlasJSON,
35488
+ spriteKey: option.imageKey,
35489
+ imgScale: 3
35490
+ })), React__default.createElement("div", null, React__default.createElement("input", {
35491
+ className: "rpgui-radio",
35492
+ type: "radio",
35493
+ value: option.name,
35494
+ name: "test"
35495
+ }), React__default.createElement("label", {
35496
+ onClick: handleClick,
35497
+ style: {
35498
+ display: 'flex',
35499
+ alignItems: 'center'
35500
+ }
35501
+ }, option.name, " ", React__default.createElement("br", null), option.description)));
35502
+ })), React__default.createElement(ButtonWrapper$2, null, React__default.createElement(Button, {
35503
+ buttonType: exports.ButtonTypes.RPGUIButton,
35504
+ onClick: onClose
35505
+ }, "Cancel"), React__default.createElement(Button, {
35506
+ buttonType: exports.ButtonTypes.RPGUIButton
35507
+ }, "Select")));
35508
+ };
35509
+ var Title$5 = /*#__PURE__*/styled.h1.withConfig({
35510
+ displayName: "ItemSelector__Title",
35511
+ componentId: "sc-gptoxp-0"
35512
+ })(["font-size:0.6rem;color:yellow !important;"]);
35513
+ var Subtitle$1 = /*#__PURE__*/styled.h1.withConfig({
35514
+ displayName: "ItemSelector__Subtitle",
35515
+ componentId: "sc-gptoxp-1"
35516
+ })(["font-size:0.4rem;color:yellow !important;"]);
35517
+ var RadioInputScroller$1 = /*#__PURE__*/styled.div.withConfig({
35518
+ displayName: "ItemSelector__RadioInputScroller",
35519
+ componentId: "sc-gptoxp-2"
35520
+ })(["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;"]);
35521
+ var SpriteAtlasWrapper$1 = /*#__PURE__*/styled.div.withConfig({
35522
+ displayName: "ItemSelector__SpriteAtlasWrapper",
35523
+ componentId: "sc-gptoxp-3"
35524
+ })(["margin-right:40px;"]);
35525
+ var RadioOptionsWrapper$1 = /*#__PURE__*/styled.div.withConfig({
35526
+ displayName: "ItemSelector__RadioOptionsWrapper",
35527
+ componentId: "sc-gptoxp-4"
35528
+ })(["display:flex;align-items:stretch;margin-bottom:40px;"]);
35529
+ var ButtonWrapper$2 = /*#__PURE__*/styled.div.withConfig({
35530
+ displayName: "ItemSelector__ButtonWrapper",
35531
+ componentId: "sc-gptoxp-5"
35532
+ })(["display:flex;justify-content:space-around;padding-top:20px;width:100%;"]);
35533
+
35231
35534
  exports.Button = Button;
35232
35535
  exports.CharacterSelection = CharacterSelection;
35233
35536
  exports.Chat = Chat;
@@ -35242,7 +35545,7 @@ exports.ErrorBoundary = ErrorBoundary;
35242
35545
  exports.HistoryDialog = HistoryDialog;
35243
35546
  exports.Input = Input;
35244
35547
  exports.InputRadio = InputRadio;
35245
- exports.ItemContainer = ItemContainer;
35548
+ exports.ItemContainer = ItemContainer$1;
35246
35549
  exports.ItemSelector = ItemSelector;
35247
35550
  exports.ItemSlot = ItemSlot;
35248
35551
  exports.ListMenu = ListMenu;
@@ -35254,7 +35557,6 @@ exports.QuestInfo = QuestInfo;
35254
35557
  exports.QuestList = QuestList;
35255
35558
  exports.QuestionDialog = QuestionDialog;
35256
35559
  exports.RPGUIContainer = RPGUIContainer;
35257
- exports.RPGUIForceRenderStart = RPGUIForceRenderStart;
35258
35560
  exports.RPGUIRoot = RPGUIRoot;
35259
35561
  exports.RangeSlider = RangeSlider;
35260
35562
  exports.SkillProgressBar = SkillProgressBar;