@rpg-engine/long-bow 0.8.154 → 0.8.156

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.154",
+  "version": "0.8.156",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Marketplace/BuyPanel.tsx

@@ -19,7 +19,7 @@ import { MarketplaceBuyModal, MarketplacePaymentMethod } from './MarketplaceBuyM
 import { GroupedMarketplaceRow } from './MarketplaceRows';
 import { itemRarityOptions, itemTypeOptions, orderByOptions } from './filters';
 
-type MarketplaceBrowseMode = 'all' | 'sell' | 'buy';
+type MarketplaceBrowseMode = 'sell' | 'buy';
 
 const BUY_REQUESTS_PER_PAGE = 5;
 
@@ -48,6 +48,7 @@ export interface IBuyPanelProps {
   equipmentSet?: IEquipmentSet | null;
   onMarketPlaceItemBuy?: (marketPlaceItemId: string, paymentMethod?: MarketplacePaymentMethod) => void;
   onFulfillBuyOrder?: (buyOrderId: string) => void;
+  onDCCoinClick?: () => void;
   characterId: string;
   enableHotkeys?: () => void;
   disableHotkeys?: () => void;
@@ -78,6 +79,7 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   equipmentSet,
   onMarketPlaceItemBuy,
   onFulfillBuyOrder,
+  onDCCoinClick,
   characterId,
   enableHotkeys,
   disableHotkeys,
@@ -91,11 +93,12 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
   openBuyOrdersTotal = 0,
   openBuyOrdersPage = 1,
   onOpenBuyOrdersPageChange,
+  isLoading = false,
 
 }) => {
   const [name, setName] = useState('');
   const [showFilters, setShowFilters] = useState(false);
-  const [browseMode, setBrowseMode] = useState<MarketplaceBrowseMode>('all');
+  const [browseMode, setBrowseMode] = useState<MarketplaceBrowseMode>('sell');
   const [selectedRarity, setSelectedRarity] = useState('');
   const [mainLevel, setMainLevel] = useState<
     [number | undefined, number | undefined]
@@ -170,8 +173,8 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
     });
   }, [name, openBuyOrders, price, selectedRarity]);
 
-  const showSellSection = browseMode === 'all' || browseMode === 'sell';
-  const showBuySection = browseMode === 'all' || browseMode === 'buy';
+  const showSellSection = browseMode === 'sell';
+  const showBuySection = browseMode === 'buy';
   const hasVisibleContent =
     (showSellSection && groupedItems.length > 0) ||
     (showBuySection && visibleBuyOrders.length > 0);
@@ -219,7 +222,6 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
             activeId={browseMode}
             onChange={value => setBrowseMode(value as MarketplaceBrowseMode)}
             options={[
-              { id: 'all', label: 'All' },
               { id: 'sell', label: 'Sell Offers' },
               { id: 'buy', label: 'Buy Requests' },
             ]}
@@ -371,11 +373,15 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
       )}
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {!hasVisibleContent ? (
+        {isLoading ? (
           <LoadingState>
             <Spinner />
             <LoadingText>Loading marketplace...</LoadingText>
           </LoadingState>
+        ) : !hasVisibleContent ? (
+          <LoadingState>
+            <LoadingText>No items listed.</LoadingText>
+          </LoadingState>
         ) : (
           <>
             {showSellSection && (
@@ -399,19 +405,10 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
                       getDCEquivalentPrice={getDCEquivalentPrice}
                       characterId={characterId}
                       onBuy={setBuyingItemId}
+                      onDCCoinClick={onDCCoinClick}
                     />
                   ))
                 )}
-                {totalItems > itemsPerPage && (
-                  <SectionPager>
-                    <Pager
-                      totalItems={totalItems}
-                      currentPage={currentPage}
-                      itemsPerPage={itemsPerPage}
-                      onPageChange={onPageChange}
-                    />
-                  </SectionPager>
-                )}
               </MarketSection>
             )}
 
@@ -435,21 +432,30 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
                     />
                   ))
                 )}
-                {openBuyOrdersTotal > BUY_REQUESTS_PER_PAGE && (
-                  <SectionPager>
-                    <Pager
-                      totalItems={openBuyOrdersTotal}
-                      currentPage={openBuyOrdersPage}
-                      itemsPerPage={BUY_REQUESTS_PER_PAGE}
-                      onPageChange={onOpenBuyOrdersPageChange ?? (() => {})}
-                    />
-                  </SectionPager>
-                )}
               </MarketSection>
             )}
           </>
         )}
       </ItemComponentScrollWrapper>
+
+      <PagerFooter>
+        {showSellSection && totalItems > itemsPerPage && (
+          <Pager
+            totalItems={totalItems}
+            currentPage={currentPage}
+            itemsPerPage={itemsPerPage}
+            onPageChange={onPageChange}
+          />
+        )}
+        {showBuySection && openBuyOrdersTotal > BUY_REQUESTS_PER_PAGE && (
+          <Pager
+            totalItems={openBuyOrdersTotal}
+            currentPage={openBuyOrdersPage}
+            itemsPerPage={BUY_REQUESTS_PER_PAGE}
+            onPageChange={onOpenBuyOrdersPageChange ?? (() => {})}
+          />
+        )}
+      </PagerFooter>
     </>
   );
 };
@@ -632,10 +638,14 @@ const SectionEmpty = styled.div`
 `;
 
 
-const SectionPager = styled.div`
+const PagerFooter = styled.div`
   display: flex;
   justify-content: center;
-  margin-top: 10px;
+  align-items: center;
+  padding: 8px 0 4px;
+  min-height: 36px;
+  width: 95%;
+  margin: 0 auto;
 `;
 
 const StyledDropdown = styled(Dropdown)`

package/src/components/Marketplace/Marketplace.tsx

@@ -46,6 +46,7 @@ export interface IMarketPlaceProps {
   equipmentSet?: IEquipmentSet | null;
   onMarketPlaceItemBuy?: (marketPlaceItemId: string, paymentMethod?: MarketplacePaymentMethod) => void;
   onFulfillBuyOrder?: (buyOrderId: string) => void;
+  onDCCoinClick?: () => void;
   onMarketPlaceItemRemove?: (marketPlaceItemId: string) => void;
   availableGold: number;
   selectedItemToSell: IItem | null;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -28,6 +28,7 @@ export interface IMarketPlaceRowsPropos {
   scale?: number;
   onMarketPlaceItemBuy?: () => void;
   onMarketPlaceItemRemove?: () => void;
+  onDCCoinClick?: () => void;
   disabled?: boolean;
 }
 
@@ -41,6 +42,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   scale,
   onMarketPlaceItemBuy,
   onMarketPlaceItemRemove,
+  onDCCoinClick,
   disabled,
 }) => {
   const renderGems = (item: IItem) => {
@@ -105,9 +107,9 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
               <GoldPrice>{itemPrice}</GoldPrice>
             </GoldPriceRow>
             {dcEquivalentPrice !== undefined && (
-              <DCPriceRow>
+              <DCPriceRow $clickable={!!onDCCoinClick} onPointerDown={onDCCoinClick}>
                 <DCCoinWrapper>
-                  <SimpleTooltip content="Definya Coin" direction="top">
+                  <SimpleTooltip content={onDCCoinClick ? 'Buy Definya Coin' : 'Definya Coin'} direction="top">
                     <SpriteFromAtlas
                       atlasIMG={atlasIMG}
                       atlasJSON={atlasJSON}
@@ -150,6 +152,7 @@ export interface IGroupedMarketplaceRowProps {
   getDCEquivalentPrice: (goldPrice: number) => number;
   characterId: string;
   onBuy: (id: string) => void;
+  onDCCoinClick?: () => void;
 }
 
 export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
@@ -162,6 +165,7 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
   getDCEquivalentPrice,
   characterId,
   onBuy,
+  onDCCoinClick,
 }) => {
   const [expanded, setExpanded] = useState(false);
   const totalOffers = otherListings.length + 1;
@@ -185,6 +189,7 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
           }
           equipmentSet={equipmentSet}
           onMarketPlaceItemBuy={() => onBuy(bestListing._id)}
+          onDCCoinClick={onDCCoinClick}
           disabled={bestListing.owner === characterId}
         />
         {hasMultiple && (
@@ -211,6 +216,7 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
               }
               equipmentSet={equipmentSet}
               onMarketPlaceItemBuy={() => onBuy(listing._id)}
+              onDCCoinClick={onDCCoinClick}
               disabled={listing.owner === characterId}
             />
           ))}
@@ -347,11 +353,18 @@ const GoldPrice = styled.span`
   line-height: 1;
 `;
 
-const DCPriceRow = styled.div`
+const DCPriceRow = styled.div<{ $clickable?: boolean }>`
   display: flex;
   align-items: center;
   gap: 0.3rem;
   margin-left: 0.5rem;
+  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
+  border-radius: 4px;
+  transition: opacity 0.15s;
+
+  &:hover {
+    opacity: ${({ $clickable }) => ($clickable ? '0.75' : '1')};
+  }
 `;
 
 const DCCoinWrapper = styled.span`

package/src/stories/Features/trading/Marketplace.stories.tsx

@@ -46,6 +46,11 @@ const mockOpenBuyOrders: IMarketplaceBuyOrderItem[] = [
   { _id: 'obo-1', owner: 'player-2', itemBlueprintKey: 'items/abyssal-tide-staff', itemRarity: 'Epic', maxPrice: 1500, escrowedGold: 1500, fee: 75, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
   { _id: 'obo-2', owner: 'player-3', itemBlueprintKey: 'items/wooden-shield', maxPrice: 200, escrowedGold: 200, fee: 10, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(5), updatedAt: daysAgo(5) },
   { _id: 'obo-3', owner: 'player-4', itemBlueprintKey: 'items/fire-wand', itemRarity: 'Rare', maxPrice: 800, escrowedGold: 800, fee: 40, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+  { _id: 'obo-4', owner: 'player-5', itemBlueprintKey: 'items/broad-sword', maxPrice: 350, escrowedGold: 350, fee: 17, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  { _id: 'obo-5', owner: 'player-6', itemBlueprintKey: 'items/barbarian-helmet', itemRarity: 'Uncommon', maxPrice: 600, escrowedGold: 600, fee: 30, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  { _id: 'obo-6', owner: 'player-7', itemBlueprintKey: 'items/leather-armor', maxPrice: 420, escrowedGold: 420, fee: 21, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
+  { _id: 'obo-7', owner: 'player-8', itemBlueprintKey: 'items/angelic-sword', itemRarity: 'Legendary', maxPrice: 5000, escrowedGold: 5000, fee: 250, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(6), updatedAt: daysAgo(6) },
+  { _id: 'obo-8', owner: 'player-9', itemBlueprintKey: 'items/greater-life-potion', maxPrice: 90, stackQty: 10, escrowedGold: 900, fee: 45, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
 ];
 
 const mockTransactions: IMarketplaceTransaction[] = [
@@ -111,6 +116,7 @@ const Template: Story = () => {
         }))}
         equipmentSet={equipmentSetMock}
         onMarketPlaceItemBuy={tradeId => console.log(tradeId)}
+        onDCCoinClick={() => console.log('open store: packs tab')}
         onFulfillBuyOrder={buyOrderId => console.log('fulfill buy order:', buyOrderId)}
         availableGold={0}
         selectedItemToSell={null}
@@ -163,7 +169,7 @@ const Template: Story = () => {
         onYourBuyOrdersPageChange={p => console.log('your orders page:', p)}
         onCancelBuyOrder={id => setYourBuyOrders(prev => prev.filter(o => o._id !== id))}
         openBuyOrders={mockOpenBuyOrders}
-        openBuyOrdersTotal={mockOpenBuyOrders.length}
+        openBuyOrdersTotal={mockOpenBuyOrders.length} // 8 items → pagination shows (page size = 5)
         openBuyOrdersPage={1}
         onOpenBuyOrdersPageChange={(p: number) => console.log('open orders page:', p)}
         // Blueprint Search props