@rpg-engine/long-bow 0.7.16 → 0.7.17

package/dist/long-bow.esm.js

@@ -25903,20 +25903,24 @@ var img$3 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0A
 
 var img$4 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAS5JREFUWIXtl7Fqw0AMhv8LLmTI4KFk8pJAtkKJpzRDCoasHZvnyJP0OZqx3Y90KZ3OdM7qKfHgIUNpAu1U+TA654YGUXr/JGRx/vmEdDbw36UA4P4upYTW2y+ucJzG6ifOTXXy4HJfeBnoeFWdUeIGFABc9hLC/vqWsYXTiT55mE+bmq0RJyBuIGp7+PFoKNbLmOLuIuXKMZ1odoKyrE+t0VYny30hT0DcgAKA+eyKErmpCKON3UctraHYbsfqycgTEDcQAX673Uf21Niyl1tjUpQ4AXEDEQBcJ/U+ei+Ov/4S9xSERcRcx67l85y3XhsAgId1yeZvRxeE/WVzoHy4CwDmOnahduG1lcQ16qKqUTex2xInIG5AAcDNYEiJze6T/apx4XUp/BcE/Rl9A77uW6caXAGtAAAAAElFTkSuQmCC';
 
-var _excluded$1 = ["direction", "size", "onPointerDown"];
+var _excluded$1 = ["direction", "size", "scale", "onPointerDown"];
 var SelectArrow = function SelectArrow(_ref) {
   var _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'left' : _ref$direction,
     size = _ref.size,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 1 : _ref$scale,
     _onPointerDown = _ref.onPointerDown,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   return React.createElement(React.Fragment, null, direction === 'left' ? React.createElement(LeftArrow, Object.assign({
     size: size,
+    scale: scale,
     onPointerDown: function onPointerDown() {
       return _onPointerDown();
     }
   }, props)) : React.createElement(RightArrow, Object.assign({
     size: size,
+    scale: scale,
     onPointerDown: function onPointerDown() {
       return _onPointerDown();
     }
@@ -25925,18 +25929,22 @@ var SelectArrow = function SelectArrow(_ref) {
 var LeftArrow = /*#__PURE__*/styled.span.withConfig({
   displayName: "SelectArrow__LeftArrow",
   componentId: "sc-1h7cpoe-0"
-})(["background-image:url(", ");background-size:100% 100%;left:0;position:absolute;width:", "px;height:", "px;:active{background-image:url(", ");}z-index:2;"], img$2, function (props) {
+})(["background-image:url(", ");background-size:100% 100%;left:0;position:absolute;width:", "px;height:", "px;transform:scale(", ");:active{background-image:url(", ");}z-index:2;"], img$2, function (props) {
   return props.size || 40;
 }, function (props) {
   return props.size || 42;
+}, function (props) {
+  return props.scale || 1;
 }, img$1);
 var RightArrow = /*#__PURE__*/styled.span.withConfig({
   displayName: "SelectArrow__RightArrow",
   componentId: "sc-1h7cpoe-1"
-})(["background-image:url(", ");right:0;position:absolute;width:", "px;height:", "px;background-size:100% 100%;:active{background-image:url(", ");}z-index:2;"], img$4, function (props) {
+})(["background-image:url(", ");right:0;position:absolute;width:", "px;height:", "px;background-size:100% 100%;transform:scale(", ");:active{background-image:url(", ");}z-index:2;"], img$4, function (props) {
   return props.size || 40;
 }, function (props) {
   return props.size || 42;
+}, function (props) {
+  return props.scale || 1;
 }, img$3);
 
 var Ellipsis = function Ellipsis(_ref) {
@@ -33151,6 +33159,26 @@ var TradingItemRow = function TradingItemRow(_ref) {
     equipmentSet = _ref.equipmentSet,
     scale = _ref.scale,
     isBuy = _ref.isBuy;
+  var _useState = useState(selectedQty.toString()),
+    inputQty = _useState[0],
+    setInputQty = _useState[1];
+  useEffect(function () {
+    setInputQty(selectedQty.toString());
+  }, [selectedQty]);
+  var handleQuantityChange = function handleQuantityChange(e) {
+    var newQty = parseInt(e.target.value, 10);
+    if (!isNaN(newQty)) {
+      var _traderItem$stackQty;
+      setInputQty(e.target.value);
+      onQuantityChange(traderItem, Math.max(0, Math.min(newQty, (_traderItem$stackQty = traderItem.stackQty) != null ? _traderItem$stackQty : 999)));
+    }
+  };
+  var handleBlur = function handleBlur() {
+    var newQty = parseInt(inputQty, 10);
+    if (isNaN(newQty)) {
+      setInputQty(selectedQty.toString());
+    }
+  };
   var onLeftClick = function onLeftClick(qty) {
     if (qty === void 0) {
       qty = 1;
@@ -33158,11 +33186,11 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onQuantityChange(traderItem, Math.max(0, selectedQty - qty));
   };
   var onRightClick = function onRightClick(qty) {
-    var _traderItem$stackQty;
+    var _traderItem$stackQty2;
     if (qty === void 0) {
       qty = 1;
     }
-    onQuantityChange(traderItem, Math.min((_traderItem$stackQty = traderItem.stackQty) != null ? _traderItem$stackQty : 999, selectedQty + qty));
+    onQuantityChange(traderItem, Math.min((_traderItem$stackQty2 = traderItem.stackQty) != null ? _traderItem$stackQty2 : 999, selectedQty + qty));
   };
   var renderAccountTypeIndicator = function renderAccountTypeIndicator() {
     if (isBuy && traderItem.canBePurchasedOnlyByPremiumPlans) {
@@ -33220,13 +33248,19 @@ var TradingItemRow = function TradingItemRow(_ref) {
     size: 32,
     className: "arrow-selector",
     direction: "left",
-    onPointerDown: onLeftClick.bind(null, outerQty)
+    onPointerDown: onLeftClick.bind(null, outerQty),
+    scale: 0.8
   }), React.createElement(StyledArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",
     onPointerDown: onLeftClick
-  }), React.createElement(QuantityDisplay, null, React.createElement(TextOverlay$2, null, React.createElement(Item$1, null, selectedQty))), React.createElement(StyledArrow, {
+  }), React.createElement(QuantityInput, {
+    type: "text",
+    value: inputQty,
+    onChange: handleQuantityChange,
+    onBlur: handleBlur
+  }), React.createElement(StyledArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "right",
@@ -33235,7 +33269,8 @@ var TradingItemRow = function TradingItemRow(_ref) {
     size: 32,
     className: "arrow-selector",
     direction: "right",
-    onPointerDown: onRightClick.bind(null, outerQty)
+    onPointerDown: onRightClick.bind(null, outerQty),
+    scale: 0.8
   })));
 };
 var PremiumLabel = /*#__PURE__*/styled.span.withConfig({
@@ -33272,22 +33307,14 @@ var NameValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__NameValue",
   componentId: "sc-mja0b5-6"
 })(["p{font-size:0.75rem;margin:0;}"]);
-var Item$1 = /*#__PURE__*/styled.span.withConfig({
-  displayName: "TradingItemRow__Item",
-  componentId: "sc-mja0b5-7"
-})(["color:white;text-align:center;z-index:1;width:100%;"]);
-var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TradingItemRow__TextOverlay",
-  componentId: "sc-mja0b5-8"
-})(["width:100%;position:relative;"]);
 var QuantityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
-  componentId: "sc-mja0b5-9"
+  componentId: "sc-mja0b5-7"
 })(["position:relative;display:flex;min-width:100px;width:40%;justify-content:center;align-items:center;flex:40%;"]);
-var QuantityDisplay = /*#__PURE__*/styled.div.withConfig({
-  displayName: "TradingItemRow__QuantityDisplay",
-  componentId: "sc-mja0b5-10"
-})(["font-size:", ";"], uiFonts.size.small);
+var QuantityInput = /*#__PURE__*/styled.input.withConfig({
+  displayName: "TradingItemRow__QuantityInput",
+  componentId: "sc-mja0b5-8"
+})(["width:40px;text-align:center;background-color:", ";color:white;border:1px solid ", ";padding:2px;font-size:", ";border:none;"], uiColors.darkGray, uiColors.lightGray, uiFonts.size.small);
 
 var TradingMenu = function TradingMenu(_ref) {
   var traderItems = _ref.traderItems,