@rpg-engine/long-bow 0.5.12 → 0.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.8.81",
+    "@rpg-engine/shared": "^0.8.74",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/Item/Inventory/ItemContainer.tsx

@@ -13,6 +13,7 @@ import { ItemQuantitySelector } from './ItemQuantitySelector';
 
 import { IPosition } from '../../../types/eventTypes';
 import ModalPortal from '../../Abstractions/ModalPortal';
+import SelectArrow from '../../Arrow/SelectArrow';
 import { ShortcutsSetter } from '../../Shortcuts/ShortcutsSetter';
 import { ItemSlot } from './ItemSlot';
 
@@ -81,12 +82,15 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
   onPositionChangeEnd,
   onPositionChangeStart,
 }) => {
+  const MAX_SLOTS_PER_PAGE = 20;
   const [quantitySelect, setQuantitySelect] = useState({
     isOpen: false,
     maxQuantity: 1,
-    callback: (_quantity: number) => {},
+    callback: (_quantity: number) => { },
   });
   const [settingShortcutIndex, setSettingShortcutIndex] = useState(-1);
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(itemContainer.slotQty / MAX_SLOTS_PER_PAGE);
 
   const handleSetShortcut = (item: IItem, index: number) => {
     if (item.type === ItemType.Consumable || item.type === ItemType.Tool) {
@@ -96,8 +100,11 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
 
   const onRenderSlots = () => {
     const slots = [];
+    const start = (currentPage - 1) * MAX_SLOTS_PER_PAGE;
+    const end = start + MAX_SLOTS_PER_PAGE;
 
-    for (let i = 0; i < itemContainer.slotQty; i++) {
+    for (let i = start; i < end && i < itemContainer.slotQty; i++) {
+      console.log(itemContainer)
       slots.push(
         <ItemSlot
           isContextMenuDisabled={disableContextMenu}
@@ -156,6 +163,14 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
     return slots;
   };
 
+  const goToNextPage = () => {
+    setCurrentPage(current => Math.min(current + 1, totalPages));
+  };
+
+  const goToPreviousPage = () => {
+    setCurrentPage(current => Math.max(current - 1, 1));
+  };
+
   return (
     <>
       <SlotsContainer
@@ -181,6 +196,32 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
         <ItemsContainer className="item-container-body">
           {onRenderSlots()}
         </ItemsContainer>
+        {totalPages > 1 && (
+          <ArrowContainer>
+            {currentPage > 1 && (
+              <SelectArrow
+                className='arrow .arrow-up'
+                direction="left"
+                onPointerDown={() => {
+                  if (currentPage > 1) {
+                    goToPreviousPage();
+                  }
+                }}
+              />
+            )}
+            {currentPage < totalPages && (
+              <SelectArrow
+                className='arrow .arrow-down'
+                direction="right"
+                onPointerDown={() => {
+                  if (currentPage < totalPages) {
+                    goToNextPage();
+                  }
+                }}
+              />
+            )}
+          </ArrowContainer>
+        )}
       </SlotsContainer>
       {quantitySelect.isOpen && (
         <ModalPortal>
@@ -192,7 +233,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
                 setQuantitySelect({
                   isOpen: false,
                   maxQuantity: 1,
-                  callback: () => {},
+                  callback: () => { },
                 });
               }}
               onClose={() => {
@@ -200,7 +241,7 @@ export const ItemContainer: React.FC<IItemContainerProps> = ({
                 setQuantitySelect({
                   isOpen: false,
                   maxQuantity: 1,
-                  callback: () => {},
+                  callback: () => { },
                 });
               }}
             />
@@ -229,3 +270,17 @@ const QuantitySelectorContainer = styled.div`
   align-items: center;
   background-color: rgba(0, 0, 0, 0.5);
 `;
+
+const ArrowContainer = styled.div`
+  margin-top: 10px;
+  margin-bottom: 30px;
+  /* Aplica a margem ao primeiro span (seta para a esquerda) */
+  span:first-child {
+    margin-left: 20px;
+  }
+
+  /* Aplica a margem ao último span (seta para a direita) */
+  span:last-child {
+    margin-right: 20px;
+  }
+`;

package/src/components/TradingMenu/TradingItemRow.tsx

@@ -2,7 +2,6 @@ import {
   getItemTextureKeyPath,
   IEquipmentSet,
   ITradeResponseItem,
-  UserAccountTypes,
 } from '@rpg-engine/shared';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -24,7 +23,6 @@ export interface ITradeComponentProps {
   selectedQty: number;
   equipmentSet?: IEquipmentSet | null;
   scale?: number;
-  isBuy?: boolean;
 }
 
 const outerQty = 10;
@@ -37,7 +35,6 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   selectedQty,
   equipmentSet,
   scale,
-  isBuy,
 }) => {
   const onLeftClick = (qty = 1) => {
     onQuantityChange(traderItem, Math.max(0, selectedQty - qty));
@@ -50,40 +47,6 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
     );
   };
 
-  const renderAccountTypeIndicator = () => {
-    if (isBuy) {
-      switch (traderItem?.accountType) {
-        case UserAccountTypes.PremiumBronze:
-          return (
-            <div>
-              <SmallCircle color="#CD7F32" /> Account
-            </div>
-          );
-        case UserAccountTypes.PremiumSilver:
-          return (
-            <div>
-              <SmallCircle color="#C0C0C0" /> Account
-            </div>
-          );
-        case UserAccountTypes.PremiumGold:
-          return (
-            <div>
-              <SmallCircle color="#FFD700" /> Account
-            </div>
-          );
-        case UserAccountTypes.PremiumUltimate:
-          return (
-            <div>
-              <SmallCircle color="#002E99" /> Account
-            </div>
-          );
-        default:
-          return null;
-      }
-    }
-    return null;
-  };
-
   return (
     <ItemWrapper>
       <ItemIconContainer>
@@ -118,7 +81,6 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
           <p>
             <Ellipsis maxLines={1} maxWidth="250px">
               {capitalize(traderItem.name)}
-              {renderAccountTypeIndicator()}
             </Ellipsis>
           </p>
           <p>${traderItem.price}</p>
@@ -159,16 +121,6 @@ export const TradingItemRow: React.FC<ITradeComponentProps> = ({
   );
 };
 
-// Styled component for the small circle
-const SmallCircle = styled.span<{ color: string }>`
-  display: inline-block;
-  margin-left: 8px;
-  height: 10px;
-  width: 10px;
-  background-color: ${({ color }) => color};
-  border-radius: 50%;
-`;
-
 const StyledArrow = styled(SelectArrow)`
   margin: 40px;
 `;

package/src/components/TradingMenu/TradingMenu.tsx

@@ -110,7 +110,6 @@ export const TradingMenu: React.FC<ITradingMenu> = ({
                 selectedQty={qtyMap.get(tradeItem.key) ?? 0}
                 equipmentSet={equipmentSet}
                 scale={scale}
-                isBuy={isBuy()}
               />
             </ItemWrapper>
           ))}

package/src/mocks/itemContainer.mocks.ts

@@ -577,7 +577,7 @@ export const itemContainerMock: IItemContainer = {
   _id: '629ba0b6fe3f43002f58f23b',
   name: 'Item Container',
   owner: '629ba0b6fe3f43002f58f23b',
-  slotQty: 20,
+  slotQty: 60,
   slots: {
     0: items[0],
     1: items[1],
@@ -595,6 +595,7 @@ export const itemContainerMock: IItemContainer = {
     13: items[13],
     14: items[14],
     15: items[15],
+    21: items[15],
     //remaining slots are considered null by default
   },
   allowedItemTypes: [],