@rpg-engine/long-bow 0.5.12 → 0.5.13

package/dist/long-bow.esm.js

@@ -1,6 +1,6 @@
 import React, { Component, useState, useEffect, useRef, useMemo, Fragment } from 'react';
 import styled from 'styled-components';
-import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay, UserAccountTypes } from '@rpg-engine/shared';
+import { GRID_WIDTH, GRID_HEIGHT, ShortcutType, getItemTextureKeyPath, ItemContainerType, ItemType, DepotSocketEvents, ItemSocketEvents, ItemSocketEventsDisplayLabels, ActionsForInventory, ActionsForEquipmentSet, ActionsForLoot, ActionsForMapContainer, ItemRarities, ItemSubType, ItemSlotType, isMobileOrTablet, CharacterClass, getSPForLevel, getXPForLevel, PeriodOfDay } from '@rpg-engine/shared';
 import dayjs from 'dayjs';
 import { ErrorBoundary as ErrorBoundary$1 } from 'react-error-boundary';
 import { RxPaperPlane } from 'react-icons/rx';
@@ -15578,6 +15578,7 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     isDepotSystem = _ref.isDepotSystem,
     onPositionChangeEnd = _ref.onPositionChangeEnd,
     onPositionChangeStart = _ref.onPositionChangeStart;
+  var MAX_SLOTS_PER_PAGE = 20;
   var _useState = useState({
       isOpen: false,
       maxQuantity: 1,
@@ -15588,6 +15589,10 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   var _useState2 = useState(-1),
     settingShortcutIndex = _useState2[0],
     setSettingShortcutIndex = _useState2[1];
+  var _useState3 = useState(1),
+    currentPage = _useState3[0],
+    setCurrentPage = _useState3[1];
+  var totalPages = Math.ceil(itemContainer.slotQty / MAX_SLOTS_PER_PAGE);
   var handleSetShortcut = function handleSetShortcut(item, index) {
     if (item.type === ItemType.Consumable || item.type === ItemType.Tool) {
       setItemShortcut == null ? void 0 : setItemShortcut(item.key, index);
@@ -15595,8 +15600,11 @@ var ItemContainer$1 = function ItemContainer(_ref) {
   };
   var onRenderSlots = function onRenderSlots() {
     var slots = [];
-    for (var i = 0; i < itemContainer.slotQty; i++) {
+    var start = (currentPage - 1) * MAX_SLOTS_PER_PAGE;
+    var end = start + MAX_SLOTS_PER_PAGE;
+    for (var i = start; i < end && i < itemContainer.slotQty; i++) {
       var _itemContainer$slots;
+      console.log(itemContainer);
       slots.push(React.createElement(ItemSlot, {
         isContextMenuDisabled: disableContextMenu,
         key: i,
@@ -15647,6 +15655,16 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     }
     return slots;
   };
+  var goToNextPage = function goToNextPage() {
+    setCurrentPage(function (current) {
+      return Math.min(current + 1, totalPages);
+    });
+  };
+  var goToPreviousPage = function goToPreviousPage() {
+    setCurrentPage(function (current) {
+      return Math.max(current - 1, 1);
+    });
+  };
   return React.createElement(React.Fragment, null, React.createElement(SlotsContainer, {
     title: itemContainer.name || 'Container',
     onClose: onClose,
@@ -15663,7 +15681,23 @@ var ItemContainer$1 = function ItemContainer(_ref) {
     atlasJSON: atlasJSON
   }), React.createElement(ItemsContainer, {
     className: "item-container-body"
-  }, onRenderSlots())), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
+  }, onRenderSlots()), totalPages > 1 && React.createElement(ArrowContainer$1, null, currentPage > 1 && React.createElement(SelectArrow, {
+    className: 'arrow .arrow-up',
+    direction: "left",
+    onPointerDown: function onPointerDown() {
+      if (currentPage > 1) {
+        goToPreviousPage();
+      }
+    }
+  }), currentPage < totalPages && React.createElement(SelectArrow, {
+    className: 'arrow .arrow-down',
+    direction: "right",
+    onPointerDown: function onPointerDown() {
+      if (currentPage < totalPages) {
+        goToNextPage();
+      }
+    }
+  }))), quantitySelect.isOpen && React.createElement(ModalPortal, null, React.createElement(QuantitySelectorContainer, null, React.createElement(ItemQuantitySelector, {
     quantity: quantitySelect.maxQuantity,
     onConfirm: function onConfirm(quantity) {
       quantitySelect.callback(quantity);
@@ -15691,6 +15725,10 @@ var QuantitySelectorContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ItemContainer__QuantitySelectorContainer",
   componentId: "sc-15y5p9l-1"
 })(["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);"]);
+var ArrowContainer$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ItemContainer__ArrowContainer",
+  componentId: "sc-15y5p9l-2"
+})(["margin-top:10px;margin-bottom:30px;span:first-child{margin-left:20px;}span:last-child{margin-right:20px;}"]);
 
 var LeaderboardTable = function LeaderboardTable(props) {
   var items = props.items,
@@ -17961,8 +17999,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
     traderItem = _ref.traderItem,
     selectedQty = _ref.selectedQty,
     equipmentSet = _ref.equipmentSet,
-    scale = _ref.scale,
-    isBuy = _ref.isBuy;
+    scale = _ref.scale;
   var onLeftClick = function onLeftClick(qty) {
     if (qty === void 0) {
       qty = 1;
@@ -17976,31 +18013,6 @@ var TradingItemRow = function TradingItemRow(_ref) {
     }
     onQuantityChange(traderItem, Math.min((_traderItem$stackQty = traderItem.stackQty) != null ? _traderItem$stackQty : 999, selectedQty + qty));
   };
-  var renderAccountTypeIndicator = function renderAccountTypeIndicator() {
-    if (isBuy) {
-      switch (traderItem == null ? void 0 : traderItem.accountType) {
-        case UserAccountTypes.PremiumBronze:
-          return React.createElement("div", null, React.createElement(SmallCircle, {
-            color: "#CD7F32"
-          }), " Account");
-        case UserAccountTypes.PremiumSilver:
-          return React.createElement("div", null, React.createElement(SmallCircle, {
-            color: "#C0C0C0"
-          }), " Account");
-        case UserAccountTypes.PremiumGold:
-          return React.createElement("div", null, React.createElement(SmallCircle, {
-            color: "#FFD700"
-          }), " Account");
-        case UserAccountTypes.PremiumUltimate:
-          return React.createElement("div", null, React.createElement(SmallCircle, {
-            color: "#002E99"
-          }), " Account");
-        default:
-          return null;
-      }
-    }
-    return null;
-  };
   return React.createElement(ItemWrapper, null, React.createElement(ItemIconContainer$1, null, React.createElement(SpriteContainer$2, null, React.createElement(ItemInfoWrapper, {
     atlasIMG: atlasIMG,
     atlasJSON: atlasJSON,
@@ -18020,7 +18032,7 @@ var TradingItemRow = function TradingItemRow(_ref) {
   })))), React.createElement(ItemNameContainer, null, React.createElement(NameValue, null, React.createElement("p", null, React.createElement(Ellipsis, {
     maxLines: 1,
     maxWidth: "250px"
-  }, capitalize(traderItem.name), renderAccountTypeIndicator())), React.createElement("p", null, "$", traderItem.price))), React.createElement(QuantityContainer$1, null, React.createElement(SelectArrow, {
+  }, capitalize(traderItem.name))), React.createElement("p", null, "$", traderItem.price))), React.createElement(QuantityContainer$1, null, React.createElement(SelectArrow, {
     size: 32,
     className: "arrow-selector",
     direction: "left",
@@ -18042,53 +18054,45 @@ var TradingItemRow = function TradingItemRow(_ref) {
     onPointerDown: onRightClick.bind(null, outerQty)
   })));
 };
-// Styled component for the small circle
-var SmallCircle = /*#__PURE__*/styled.span.withConfig({
-  displayName: "TradingItemRow__SmallCircle",
-  componentId: "sc-mja0b5-0"
-})(["display:inline-block;margin-left:8px;height:10px;width:10px;background-color:", ";border-radius:50%;"], function (_ref2) {
-  var color = _ref2.color;
-  return color;
-});
 var StyledArrow = /*#__PURE__*/styled(SelectArrow).withConfig({
   displayName: "TradingItemRow__StyledArrow",
-  componentId: "sc-mja0b5-1"
+  componentId: "sc-mja0b5-0"
 })(["margin:40px;"]);
 var ItemWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemWrapper",
-  componentId: "sc-mja0b5-2"
+  componentId: "sc-mja0b5-1"
 })(["width:100%;margin:auto;display:flex;justify-content:space-between;margin-bottom:1rem;&:hover{background-color:", ";}padding:0.5rem;"], uiColors.darkGray);
 var ItemNameContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemNameContainer",
-  componentId: "sc-mja0b5-3"
+  componentId: "sc-mja0b5-2"
 })(["flex:60%;"]);
 var ItemIconContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__ItemIconContainer",
-  componentId: "sc-mja0b5-4"
+  componentId: "sc-mja0b5-3"
 })(["display:flex;justify-content:flex-start;align-items:center;flex:0 0 58px;"]);
 var SpriteContainer$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__SpriteContainer",
-  componentId: "sc-mja0b5-5"
+  componentId: "sc-mja0b5-4"
 })(["position:relative;top:-0.5rem;left:0.5rem;"]);
 var NameValue = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__NameValue",
-  componentId: "sc-mja0b5-6"
+  componentId: "sc-mja0b5-5"
 })(["p{font-size:0.75rem;margin:0;}"]);
 var Item$1 = /*#__PURE__*/styled.span.withConfig({
   displayName: "TradingItemRow__Item",
-  componentId: "sc-mja0b5-7"
+  componentId: "sc-mja0b5-6"
 })(["color:white;text-align:center;z-index:1;width:100%;"]);
 var TextOverlay$2 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__TextOverlay",
-  componentId: "sc-mja0b5-8"
+  componentId: "sc-mja0b5-7"
 })(["width:100%;position:relative;"]);
 var QuantityContainer$1 = /*#__PURE__*/styled.div.withConfig({
   displayName: "TradingItemRow__QuantityContainer",
-  componentId: "sc-mja0b5-9"
+  componentId: "sc-mja0b5-8"
 })(["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"
+  componentId: "sc-mja0b5-9"
 })(["font-size:", ";"], uiFonts.size.small);
 
 var TradingMenu = function TradingMenu(_ref) {
@@ -18174,8 +18178,7 @@ var TradingMenu = function TradingMenu(_ref) {
       traderItem: tradeItem,
       selectedQty: (_qtyMap$get = qtyMap.get(tradeItem.key)) != null ? _qtyMap$get : 0,
       equipmentSet: equipmentSet,
-      scale: scale,
-      isBuy: isBuy()
+      scale: scale
     }));
   })), React.createElement(GoldWrapper, null, React.createElement("p", null, "Available Gold:"), React.createElement("p", null, "$", characterAvailableGold)), React.createElement(TotalWrapper, null, React.createElement("p", null, "Total:"), React.createElement("p", null, "$", sum)), !hasGoldForSale() ? React.createElement(AlertWrapper, null, React.createElement("p", null, " Sorry, not enough money.")) : React.createElement(GoldWrapper, null, React.createElement("p", null, "Final Gold:"), React.createElement("p", null, "$", getFinalGold())), React.createElement(ButtonWrapper$2, null, React.createElement(Button, {
     buttonType: ButtonTypes.RPGUIButton,