@rpg-engine/long-bow 0.8.160 → 0.8.161

package/dist/components/Pager.d.ts

@@ -4,6 +4,7 @@ interface PagerProps {
     currentPage: number;
     itemsPerPage: number;
     onPageChange: (page: number) => void;
+    compact?: boolean;
 }
 export declare const Pager: React.FC<PagerProps>;
 export {};

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

@@ -29,11 +29,11 @@ var ShoppingBag = require('pixelarticons/react/ShoppingBag');
 var ShoppingCart = require('pixelarticons/react/ShoppingCart');
 var Store$1 = require('pixelarticons/react/Store');
 var Wallet = require('pixelarticons/react/Wallet');
+var SortVertical = require('pixelarticons/react/SortVertical');
 var Search = require('pixelarticons/react/Search');
 var Delete = require('pixelarticons/react/Delete');
 require('rpgui/rpgui.css');
 require('rpgui/rpgui.min.js');
-var SortVertical = require('pixelarticons/react/SortVertical');
 var Coins = require('pixelarticons/react/Coins');
 var capitalize = _interopDefault(require('lodash/capitalize'));
 
@@ -44504,9 +44504,13 @@ var Pager = function Pager(_ref) {
   var totalItems = _ref.totalItems,
     currentPage = _ref.currentPage,
     itemsPerPage = _ref.itemsPerPage,
-    onPageChange = _ref.onPageChange;
+    onPageChange = _ref.onPageChange,
+    _ref$compact = _ref.compact,
+    compact = _ref$compact === void 0 ? false : _ref$compact;
   var totalPages = Math.ceil(totalItems / itemsPerPage);
-  return React__default.createElement(Container$A, null, React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, null, React__default.createElement("button", {
+  return React__default.createElement(Container$A, null, !compact && React__default.createElement("p", null, "Total items: ", totalItems), React__default.createElement(PagerContainer, {
+    "$compact": compact
+  }, React__default.createElement("button", {
     disabled: currentPage === 1,
     onPointerDown: function onPointerDown() {
       return onPageChange(Math.max(currentPage - 1, 1));
@@ -44527,7 +44531,19 @@ var Container$A = /*#__PURE__*/styled__default.div.withConfig({
 var PagerContainer = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Pager__PagerContainer",
   componentId: "sc-1ekmf50-1"
-})(["display:flex;justify-content:center;align-items:center;gap:5px;p{margin:0;}div{color:white;}button{width:40px;height:40px;background-color:", ";border:none;border-radius:5px;color:white;:hover{background-color:", ";}:disabled{opacity:0.5;}&.active{background-color:", ";font-weight:bold;color:black;}}"], uiColors.darkGray, uiColors.lightGray, uiColors.orange);
+})(["display:flex;justify-content:center;align-items:center;gap:5px;p{margin:0;}div{color:white;", "}button{width:", " !important;height:", " !important;font-size:", " !important;background-color:", ";border:none;border-radius:5px;color:white;:hover{background-color:", ";}:disabled{opacity:0.5;}&.active{background-color:", ";font-weight:bold;color:black;}}"], function (_ref2) {
+  var $compact = _ref2.$compact;
+  return $compact && "\n      font-size: 0.55rem !important;\n      padding: 2px 6px !important;\n      min-width: unset !important;\n    ";
+}, function (_ref3) {
+  var $compact = _ref3.$compact;
+  return $compact ? '24px' : '40px';
+}, function (_ref4) {
+  var $compact = _ref4.$compact;
+  return $compact ? '24px' : '40px';
+}, function (_ref5) {
+  var $compact = _ref5.$compact;
+  return $compact ? '0.55rem' : 'inherit';
+}, uiColors.darkGray, uiColors.lightGray, uiColors.orange);
 
 var Tabs = function Tabs(_ref) {
   var options = _ref.options,
@@ -44583,24 +44599,25 @@ var BlueprintTable = function BlueprintTable(_ref) {
       atlasJSON: atlasJSON,
       atlasIMG: atlasIMG,
       spriteKey: blueprint.texturePath || blueprint.key,
-      width: 32,
-      height: 32,
-      imgScale: 2,
+      width: 24,
+      height: 24,
+      imgScale: 1.5,
       centered: true
     })), React__default.createElement(ColName, null, React__default.createElement(BlueprintName, null, blueprint.name), (blueprint.type || blueprint.subType) && React__default.createElement(BlueprintMeta, null, [blueprint.type, blueprint.subType].filter(Boolean).filter(function (v, i, arr) {
       return arr.indexOf(v) === i;
     }).join(' · '))), React__default.createElement(ColType, null, React__default.createElement(TypeText, null, blueprint.type), blueprint.subType && blueprint.subType !== blueprint.type && React__default.createElement(SubTypeText, null, blueprint.subType)), React__default.createElement(ColTier, null, "T", blueprint.tier));
   }));
 };
-var tableRowBase = "\n  display: grid;\n  grid-template-columns: 40px 1fr 120px 50px;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 12px;\n";
+var tableRowBase = "\n  display: grid;\n  grid-template-columns: 28px 1fr 100px 40px;\n  align-items: center;\n  gap: 6px;\n  padding: 3px 8px;\n";
+var mobileRowOverride = "\n  @media (max-width: 600px) {\n    padding: 1px 6px;\n    gap: 4px;\n  }\n";
 var ResultsHeader = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintTable__ResultsHeader",
   componentId: "sc-1ysxhx2-0"
-})(["", " background:rgba(0,0,0,0.4);border-bottom:1px solid rgba(255,255,255,0.1);position:sticky;top:0;z-index:1;> *{font-size:0.45rem;color:#888;text-transform:uppercase;letter-spacing:1px;}"], tableRowBase);
+})(["", " ", " background:rgba(0,0,0,0.4);border-bottom:1px solid rgba(255,255,255,0.1);position:sticky;top:0;z-index:1;&& > *{font-size:0.48rem !important;color:#555 !important;text-transform:uppercase;letter-spacing:1px;}"], tableRowBase, mobileRowOverride);
 var ResultRow = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintTable__ResultRow",
   componentId: "sc-1ysxhx2-1"
-})(["", " border-bottom:1px solid rgba(255,255,255,0.04);cursor:", ";transition:background 0.1s;&:hover{background:", ";}&:last-child{border-bottom:none;}"], tableRowBase, function (p) {
+})(["", " ", " border-bottom:1px solid rgba(255,255,255,0.04);cursor:", ";transition:background 0.1s;&:hover{background:", ";}&:last-child{border-bottom:none;}"], tableRowBase, mobileRowOverride, function (p) {
   return p.$selectable ? 'pointer' : 'default';
 }, function (p) {
   return p.$selectable ? 'rgba(245, 158, 11, 0.08)' : 'none';
@@ -44608,7 +44625,7 @@ var ResultRow = /*#__PURE__*/styled__default.div.withConfig({
 var SpriteWrapper$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintTable__SpriteWrapper",
   componentId: "sc-1ysxhx2-2"
-})(["display:flex;align-items:center;justify-content:center;width:40px;height:32px;"]);
+})(["display:flex;align-items:center;justify-content:center;width:28px;height:24px;"]);
 var ColName = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintTable__ColName",
   componentId: "sc-1ysxhx2-3"
@@ -44616,11 +44633,11 @@ var ColName = /*#__PURE__*/styled__default.div.withConfig({
 var BlueprintName = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "BlueprintTable__BlueprintName",
   componentId: "sc-1ysxhx2-4"
-})(["font-size:0.5rem;color:#ddd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+})(["font-size:0.6rem !important;color:#e5e7eb !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 var BlueprintMeta = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "BlueprintTable__BlueprintMeta",
   componentId: "sc-1ysxhx2-5"
-})(["font-size:0.4rem;color:#666;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
+})(["font-size:0.5rem !important;color:#f59e0b !important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"]);
 var ColType = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintTable__ColType",
   componentId: "sc-1ysxhx2-6"
@@ -44628,15 +44645,15 @@ var ColType = /*#__PURE__*/styled__default.div.withConfig({
 var TypeText = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "BlueprintTable__TypeText",
   componentId: "sc-1ysxhx2-7"
-})(["font-size:0.45rem;color:#aaa;"]);
+})(["font-size:0.52rem !important;color:#9ca3af !important;"]);
 var SubTypeText = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "BlueprintTable__SubTypeText",
   componentId: "sc-1ysxhx2-8"
-})(["font-size:0.4rem;color:#666;"]);
+})(["font-size:0.46rem !important;color:#f59e0b !important;"]);
 var ColTier = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintTable__ColTier",
   componentId: "sc-1ysxhx2-9"
-})(["font-size:0.5rem;color:#f59e0b;text-align:center;"]);
+})(["font-size:0.6rem !important;color:#f59e0b !important;text-align:center;"]);
 
 var BLUEPRINTS_PER_PAGE = 10;
 var scaleIn = /*#__PURE__*/styled.keyframes(["from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}"]);
@@ -44688,6 +44705,9 @@ var BlueprintSearchModal = function BlueprintSearchModal(_ref) {
   var _useState3 = React.useState(''),
     selectedSubType = _useState3[0],
     setSelectedSubType = _useState3[1];
+  var _useState4 = React.useState(false),
+    showFilters = _useState4[0],
+    setShowFilters = _useState4[1];
   var searchNameRef = React.useRef(searchName);
   var selectedTypeRef = React.useRef(selectedType);
   var selectedSubTypeRef = React.useRef(selectedSubType);
@@ -44764,7 +44784,19 @@ var BlueprintSearchModal = function BlueprintSearchModal(_ref) {
     placeholder: "Search by name...",
     onFocus: disableHotkeys,
     onBlur: enableHotkeys
-  })), React__default.createElement(FiltersRow, null, React__default.createElement(StyledDropdown$3, {
+  }), React__default.createElement(FilterButton$1, {
+    type: "button",
+    "$active": showFilters,
+    onPointerDown: function onPointerDown() {
+      return setShowFilters(function (v) {
+        return !v;
+      });
+    },
+    "aria-label": "Toggle filters"
+  }, React__default.createElement(SortVertical.SortVertical, {
+    width: 16,
+    height: 16
+  }))), showFilters && React__default.createElement(FiltersRow, null, React__default.createElement(StyledDropdown$3, {
     key: "type-" + selectedType,
     options: typeOptions,
     onChange: handleTypeChange,
@@ -44781,12 +44813,13 @@ var BlueprintSearchModal = function BlueprintSearchModal(_ref) {
     atlasJSON: atlasJSON,
     atlasIMG: atlasIMG,
     onSelect: onSelect
-  })), isLoading && React__default.createElement(LoadingOverlay, null, React__default.createElement(LoadingText, null, "Loading..."))), React__default.createElement(PagerContainer$1, null, React__default.createElement(Pager, {
+  })), isLoading && React__default.createElement(LoadingOverlay, null, React__default.createElement(LoadingText, null, "Loading..."))), React__default.createElement(Pager, {
+    compact: true,
     totalItems: totalCount,
     currentPage: currentPage,
     itemsPerPage: BLUEPRINTS_PER_PAGE,
     onPageChange: handlePageChange
-  })))));
+  }))));
 };
 var Overlay$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__Overlay",
@@ -44799,7 +44832,7 @@ var ModalContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
 var ModalContent$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__ModalContent",
   componentId: "sc-i7bssq-2"
-})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px;width:600px;max-width:90%;display:flex;flex-direction:column;gap:12px;pointer-events:auto;animation:", " 0.15s ease-out;"], scaleIn);
+})(["background:#1a1a2e;border:2px solid #f59e0b;border-radius:8px;padding:20px 24px;width:600px;max-width:90%;max-height:90dvh;display:flex;flex-direction:column;gap:12px;overflow:hidden;pointer-events:auto;animation:", " 0.15s ease-out;@media (max-width:950px){max-width:96%;max-height:95dvh;min-height:75dvh;padding:14px 16px;gap:8px;}"], scaleIn);
 var Header$8 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__Header",
   componentId: "sc-i7bssq-3"
@@ -44820,40 +44853,49 @@ var StyledInput$2 = /*#__PURE__*/styled__default(Input).withConfig({
   displayName: "BlueprintSearchModal__StyledInput",
   componentId: "sc-i7bssq-7"
 })(["flex:1;"]);
+var FilterButton$1 = /*#__PURE__*/styled__default.button.withConfig({
+  displayName: "BlueprintSearchModal__FilterButton",
+  componentId: "sc-i7bssq-8"
+})(["flex-shrink:0;width:28px;height:28px;border-radius:6px;border:1px solid ", ";background:", ";color:", ";cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color 0.15s,border-color 0.15s,background 0.15s;&:hover{color:#f59e0b;border-color:rgba(245,158,11,0.45);}"], function (_ref2) {
+  var $active = _ref2.$active;
+  return $active ? 'rgba(245, 158, 11, 0.55)' : 'rgba(255, 255, 255, 0.08)';
+}, function (_ref3) {
+  var $active = _ref3.$active;
+  return $active ? 'rgba(245, 158, 11, 0.14)' : 'rgba(255, 255, 255, 0.03)';
+}, function (_ref4) {
+  var $active = _ref4.$active;
+  return $active ? '#f59e0b' : '#ccc';
+});
 var FiltersRow = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__FiltersRow",
-  componentId: "sc-i7bssq-8"
+  componentId: "sc-i7bssq-9"
 })(["display:grid;grid-template-columns:1fr 1fr;gap:8px;"]);
 var StyledDropdown$3 = /*#__PURE__*/styled__default(Dropdown).withConfig({
   displayName: "BlueprintSearchModal__StyledDropdown",
-  componentId: "sc-i7bssq-9"
+  componentId: "sc-i7bssq-10"
 })(["margin:0px !important;width:100% !important;"]);
 var ResultsWrapper = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__ResultsWrapper",
-  componentId: "sc-i7bssq-10"
-})(["position:relative;overflow-y:auto;height:320px;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.05);border-radius:4px;"]);
+  componentId: "sc-i7bssq-11"
+})(["position:relative;overflow-y:auto;flex:1;min-height:80px;display:flex;flex-direction:column;background:rgba(0,0,0,0.2);border:1px solid rgba(255,255,255,0.05);border-radius:4px;"]);
 var ResultsContent = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__ResultsContent",
-  componentId: "sc-i7bssq-11"
+  componentId: "sc-i7bssq-12"
 })(["opacity:", ";transition:opacity 0.15s ease;"], function (p) {
   return p.$dimmed ? 0.4 : 1;
 });
 var LoadingOverlay = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__LoadingOverlay",
-  componentId: "sc-i7bssq-12"
+  componentId: "sc-i7bssq-13"
 })(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;"]);
 var LoadingText = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "BlueprintSearchModal__LoadingText",
-  componentId: "sc-i7bssq-13"
+  componentId: "sc-i7bssq-14"
 })(["font-size:0.55rem;color:#f59e0b;text-transform:uppercase;letter-spacing:1px;"]);
 var EmptyState$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BlueprintSearchModal__EmptyState",
-  componentId: "sc-i7bssq-14"
-})(["display:flex;align-items:center;justify-content:center;height:100%;font-size:0.55rem;color:#666;text-transform:uppercase;letter-spacing:1px;"]);
-var PagerContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
-  displayName: "BlueprintSearchModal__PagerContainer",
   componentId: "sc-i7bssq-15"
-})(["display:flex;justify-content:center;align-items:center;"]);
+})(["display:flex;align-items:center;justify-content:center;flex:1;font-size:0.55rem;color:#666;text-transform:uppercase;letter-spacing:1px;"]);
 
 var SegmentedToggle = function SegmentedToggle(_ref) {
   var options = _ref.options,
@@ -46201,7 +46243,7 @@ var BuyPanel = function BuyPanel(_ref) {
     onBlur: enableHotkeys,
     onFocus: disableHotkeys,
     className: "search-input"
-  })), React__default.createElement(FilterButton$1, {
+  })), React__default.createElement(FilterButton$2, {
     type: "button",
     "$active": showFilters,
     onClick: function onClick() {
@@ -46348,7 +46390,7 @@ var SearchField = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "BuyPanel__SearchField",
   componentId: "sc-1si8t7i-1"
 })(["min-width:0;input.search-input{height:10px;width:100%;}"]);
-var FilterButton$1 = /*#__PURE__*/styled__default.button.withConfig({
+var FilterButton$2 = /*#__PURE__*/styled__default.button.withConfig({
   displayName: "BuyPanel__FilterButton",
   componentId: "sc-1si8t7i-2"
 })(["width:36px;height:36px;border-radius:8px;border:1px solid ", ";background:", ";color:", ";cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color 0.15s,border-color 0.15s,background 0.15s;&:hover{color:#f59e0b;border-color:rgba(245,158,11,0.45);}"], function (_ref3) {
@@ -46521,7 +46563,7 @@ var HistoryPanel = function HistoryPanel(_ref) {
     }))), React__default.createElement(GoldAmount, {
       "$type": tx.type
     }, getGoldSign(tx.type), tx.goldAmount, "g"))));
-  })), React__default.createElement(PagerContainer$2, null, React__default.createElement(Pager, {
+  })), React__default.createElement(PagerContainer$1, null, React__default.createElement(Pager, {
     totalItems: totalCount,
     currentPage: currentPage,
     itemsPerPage: itemsPerPage,
@@ -46629,7 +46671,7 @@ var EmptyState$4 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "HistoryPanel__EmptyState",
   componentId: "sc-74mioa-20"
 })(["display:flex;align-items:center;justify-content:center;height:45px;font-size:0.5rem;color:#555;text-transform:uppercase;letter-spacing:1px;background:rgba(0,0,0,0.15);border-radius:4px;"]);
-var PagerContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
+var PagerContainer$1 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "HistoryPanel__PagerContainer",
   componentId: "sc-74mioa-21"
 })(["display:flex;justify-content:center;margin-top:4px;"]);
@@ -47100,9 +47142,9 @@ var Marketplace = function Marketplace(props) {
   }), activeTab === 'wallet' && showWalletTab && walletProps && React__default.createElement(DCWalletContent, Object.assign({}, walletProps)), activeTab === 'settings' && React__default.createElement(MarketplaceSettingsPanel, {
     acceptedCurrency: acceptedCurrency,
     onAcceptedCurrencyChange: handleCurrencyChange
-  }), showSharedPager && React__default.createElement(PagerContainer$3, null, React__default.createElement(Pager, Object.assign({}, props))));
+  }), showSharedPager && React__default.createElement(PagerContainer$2, null, React__default.createElement(Pager, Object.assign({}, props))));
 };
-var PagerContainer$3 = /*#__PURE__*/styled__default.div.withConfig({
+var PagerContainer$2 = /*#__PURE__*/styled__default.div.withConfig({
   displayName: "Marketplace__PagerContainer",
   componentId: "sc-h904b1-0"
 })(["display:flex;justify-content:center;align-items:center;width:95%;margin:6px auto 0 auto;padding:4px 10px;"]);