@rpg-engine/long-bow 0.8.160 → 0.8.162

package/src/components/Marketplace/BuyPanel.tsx

@@ -14,7 +14,7 @@ import { Dropdown } from '../Dropdown';
 import { Input } from '../Input';
 import { SegmentedToggle } from '../shared/SegmentedToggle';
 import { Pager } from '../Pager';
-import { BuyOrderRow } from './BuyOrderRows';
+import { GroupedBuyOrderRow } from './BuyOrderRows';
 import { MarketplaceBuyModal, MarketplacePaymentMethod } from './MarketplaceBuyModal';
 import { GroupedMarketplaceRow } from './MarketplaceRows';
 import { itemRarityOptions, itemTypeOptions, orderByOptions } from './filters';
@@ -173,11 +173,29 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
     });
   }, [name, openBuyOrders, price, selectedRarity]);
 
+  const groupedBuyOrders = useMemo(() => {
+    const groups = new Map<string, IMarketplaceBuyOrderItem[]>();
+    for (const order of visibleBuyOrders) {
+      const key = order.itemBlueprintKey;
+      if (!groups.has(key)) groups.set(key, []);
+      groups.get(key)!.push(order);
+    }
+    return Array.from(groups.values())
+      .map(group => {
+        const sorted = [...group].sort((a, b) => b.maxPrice - a.maxPrice);
+        return { bestOrder: sorted[0], otherOrders: sorted.slice(1) };
+      })
+      .sort((a, b) => {
+        const totalGold = (g: typeof a) => [g.bestOrder, ...g.otherOrders].reduce((sum, o) => sum + o.maxPrice, 0);
+        return totalGold(b) - totalGold(a);
+      });
+  }, [visibleBuyOrders]);
+
   const showSellSection = browseMode === 'sell';
   const showBuySection = browseMode === 'buy';
   const hasVisibleContent =
     (showSellSection && groupedItems.length > 0) ||
-    (showBuySection && visibleBuyOrders.length > 0);
+    (showBuySection && groupedBuyOrders.length > 0);
 
   return (
     <>
@@ -254,12 +272,14 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
 
       {showFilters && (
         <OptionsWrapper showFilters={showFilters}>
-            <WrapperContainer>
-              <StyledDropdown
-                options={itemTypeOptions}
-                onChange={onChangeType}
-                width="100%"
-              />
+            <WrapperContainer $sell={showSellSection}>
+              {showSellSection && (
+                <StyledDropdown
+                  options={itemTypeOptions}
+                  onChange={onChangeType}
+                  width="100%"
+                />
+              )}
               <StyledDropdown
                 options={itemRarityOptions}
                 onChange={value => {
@@ -268,107 +288,113 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
                 }}
                 width="100%"
               />
-              <StyledDropdown
-                options={orderByOptions}
-                onChange={onChangeOrder}
-                width="100%"
-              />
+              {showSellSection && (
+                <StyledDropdown
+                  options={orderByOptions}
+                  onChange={onChangeOrder}
+                  width="100%"
+                />
+              )}
             </WrapperContainer>
 
             <FilterInputsWrapper>
+              {showSellSection && (
+                <div>
+                  <p>Main level</p>
+                  <div className="input-group">
+                    <Input
+                      onChange={e => {
+                        setMainLevel([Number(e.target.value), mainLevel[1]]);
+                        onChangeMainLevelInput([Number(e.target.value), mainLevel[1]]);
+                      }}
+                      placeholder="Min"
+                      type="number"
+                      min={0}
+                      onBlur={enableHotkeys}
+                      onFocus={disableHotkeys}
+                    />
+                    <AiFillCaretRight className="separator-icon" />
+                    <Input
+                      onChange={e => {
+                        setMainLevel([mainLevel[0], Number(e.target.value)]);
+                        onChangeMainLevelInput([mainLevel[0], Number(e.target.value)]);
+                      }}
+                      placeholder="Max"
+                      type="number"
+                      min={0}
+                      onBlur={enableHotkeys}
+                      onFocus={disableHotkeys}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {showSellSection && (
+                <div>
+                  <p>Secondary level</p>
+                  <div className="input-group">
+                    <Input
+                      onChange={e => {
+                        setSecondaryLevel([Number(e.target.value), secondaryLevel[1]]);
+                        onChangeSecondaryLevelInput([
+                          Number(e.target.value),
+                          secondaryLevel[1],
+                        ]);
+                      }}
+                      placeholder="Min"
+                      type="number"
+                      min={0}
+                      onBlur={enableHotkeys}
+                      onFocus={disableHotkeys}
+                    />
+                    <AiFillCaretRight className="separator-icon" />
+                    <Input
+                      onChange={e => {
+                        setSecondaryLevel([secondaryLevel[0], Number(e.target.value)]);
+                        onChangeSecondaryLevelInput([
+                          secondaryLevel[0],
+                          Number(e.target.value),
+                        ]);
+                      }}
+                      placeholder="Max"
+                      type="number"
+                      min={0}
+                      onBlur={enableHotkeys}
+                      onFocus={disableHotkeys}
+                    />
+                  </div>
+                </div>
+              )}
+
               <div>
-                <p>Main level</p>
-              <div className="input-group">
-                <Input
-                  onChange={e => {
-                    setMainLevel([Number(e.target.value), mainLevel[1]]);
-                    onChangeMainLevelInput([Number(e.target.value), mainLevel[1]]);
-                  }}
-                  placeholder="Min"
-                  type="number"
-                  min={0}
-                  onBlur={enableHotkeys}
-                  onFocus={disableHotkeys}
-                />
-                <AiFillCaretRight className="separator-icon" />
-                <Input
-                  onChange={e => {
-                    setMainLevel([mainLevel[0], Number(e.target.value)]);
-                    onChangeMainLevelInput([mainLevel[0], Number(e.target.value)]);
-                  }}
-                  placeholder="Max"
-                  type="number"
-                  min={0}
-                  onBlur={enableHotkeys}
-                  onFocus={disableHotkeys}
-                />
-              </div>
-            </div>
-
-            <div>
-              <p>Secondary level</p>
-              <div className="input-group">
-                <Input
-                  onChange={e => {
-                    setSecondaryLevel([Number(e.target.value), secondaryLevel[1]]);
-                    onChangeSecondaryLevelInput([
-                      Number(e.target.value),
-                      secondaryLevel[1],
-                    ]);
-                  }}
-                  placeholder="Min"
-                  type="number"
-                  min={0}
-                  onBlur={enableHotkeys}
-                  onFocus={disableHotkeys}
-                />
-                <AiFillCaretRight className="separator-icon" />
-                <Input
-                  onChange={e => {
-                    setSecondaryLevel([secondaryLevel[0], Number(e.target.value)]);
-                    onChangeSecondaryLevelInput([
-                      secondaryLevel[0],
-                      Number(e.target.value),
-                    ]);
-                  }}
-                  placeholder="Max"
-                  type="number"
-                  min={0}
-                  onBlur={enableHotkeys}
-                  onFocus={disableHotkeys}
-                />
-              </div>
-            </div>
-
-            <div>
-              <p>Price</p>
-              <div className="input-group">
-                <Input
-                  onChange={e => {
-                    setPrice([Number(e.target.value), price[1]]);
-                    onChangePriceInput([Number(e.target.value), price[1]]);
-                  }}
-                  placeholder="Min"
-                  type="number"
-                  min={0}
-                  onBlur={enableHotkeys}
-                  onFocus={disableHotkeys}
-                />
-                <AiFillCaretRight className="separator-icon" />
-                <Input
-                  onChange={e => {
-                    setPrice([price[0], Number(e.target.value)]);
-                    onChangePriceInput([price[0], Number(e.target.value)]);
-                  }}
-                  placeholder="Max"
-                  type="number"
-                  min={0}
-                  onBlur={enableHotkeys}
-                  onFocus={disableHotkeys}
-                />
+                <p>Price</p>
+                <div className="input-group">
+                  <Input
+                    onChange={e => {
+                      setPrice([Number(e.target.value), price[1]]);
+                      onChangePriceInput([Number(e.target.value), price[1]]);
+                    }}
+                    placeholder="Min"
+                    type="number"
+                    min={0}
+                    onBlur={enableHotkeys}
+                    onFocus={disableHotkeys}
+                  />
+                  <AiFillCaretRight className="separator-icon" />
+                  <Input
+                    onChange={e => {
+                      setPrice([price[0], Number(e.target.value)]);
+                      onChangePriceInput([price[0], Number(e.target.value)]);
+                    }}
+                    placeholder="Max"
+                    type="number"
+                    min={0}
+                    onBlur={enableHotkeys}
+                    onFocus={disableHotkeys}
+                  />
+                </div>
               </div>
-            </div>
-          </FilterInputsWrapper>
+            </FilterInputsWrapper>
         </OptionsWrapper>
       )}
 
@@ -416,19 +442,19 @@ export const BuyPanel: React.FC<IBuyPanelProps> = ({
               <MarketSection>
                 <SectionHeader>
                   <SectionTitle>Buy Requests</SectionTitle>
-                  <SectionMeta>{visibleBuyOrders.length} visible</SectionMeta>
+                  <SectionMeta>{groupedBuyOrders.length} groups</SectionMeta>
                 </SectionHeader>
-                {visibleBuyOrders.length === 0 ? (
+                {groupedBuyOrders.length === 0 ? (
                   <SectionEmpty>No public buy requests found.</SectionEmpty>
                 ) : (
-                  visibleBuyOrders.map(order => (
-                    <BuyOrderRow
-                      key={order._id}
-                      buyOrder={order}
+                  groupedBuyOrders.map(({ bestOrder, otherOrders }) => (
+                    <GroupedBuyOrderRow
+                      key={bestOrder._id}
+                      bestOrder={bestOrder}
+                      otherOrders={otherOrders}
                       atlasJSON={atlasJSON}
                       atlasIMG={atlasIMG}
                       onFulfill={setFulfillingBuyOrderId}
-                      showRequestTag
                     />
                   ))
                 )}
@@ -532,7 +558,7 @@ const OptionsWrapper = styled.div<{ showFilters: boolean }>`
 
 const FilterInputsWrapper = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 15px;
   color: white;
 
@@ -567,9 +593,9 @@ const FilterInputsWrapper = styled.div`
   }
 `;
 
-const WrapperContainer = styled.div`
+const WrapperContainer = styled.div<{ $sell: boolean }>`
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: ${({ $sell }) => $sell ? 'repeat(3, 1fr)' : 'minmax(0, 200px)'};
   gap: 15px;
 
   .rpgui-content .rpgui-dropdown-imp-header {

package/src/components/Marketplace/GroupedRowContainer.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+export interface IGroupedRowContainerProps {
+  mainRow: React.ReactNode;
+  subRows: React.ReactNode[];
+  badgeLabel?: string;
+}
+
+export const GroupedRowContainer: React.FC<IGroupedRowContainerProps> = ({
+  mainRow,
+  subRows,
+  badgeLabel = 'offers',
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const hasMultiple = subRows.length > 0;
+  const totalCount = subRows.length + 1;
+
+  return (
+    <GroupWrapper>
+      <GroupHeader $clickable={hasMultiple} onClick={hasMultiple ? () => setExpanded(e => !e) : undefined}>
+        {mainRow}
+        {hasMultiple && (
+          <GroupMeta>
+            <OfferBadge>{totalCount} {badgeLabel}</OfferBadge>
+            <Chevron $expanded={expanded}>&#9656;</Chevron>
+          </GroupMeta>
+        )}
+      </GroupHeader>
+
+      {expanded && (
+        <SubRows>
+          {subRows}
+        </SubRows>
+      )}
+    </GroupWrapper>
+  );
+};
+
+const GroupWrapper = styled.div`
+  margin-bottom: 2px;
+`;
+
+const GroupHeader = styled.div<{ $clickable: boolean }>`
+  position: relative;
+  cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
+`;
+
+const GroupMeta = styled.div`
+  position: absolute;
+  right: 180px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  pointer-events: none;
+`;
+
+const OfferBadge = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: rgba(255, 255, 255, 0.5);
+  background: rgba(255, 255, 255, 0.08);
+  padding: 2px 6px;
+  border-radius: 8px;
+  white-space: nowrap;
+`;
+
+const Chevron = styled.span<{ $expanded: boolean }>`
+  display: inline-block;
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.4);
+  transition: transform 0.2s ease;
+  transform: rotate(${({ $expanded }) => ($expanded ? '90deg' : '0deg')});
+`;
+
+const SubRows = styled.div`
+  margin-left: 12px;
+  padding-left: 8px;
+  border-left: 2px solid rgba(245, 158, 11, 0.25);
+
+  > div > div {
+    background: rgba(0, 0, 0, 0.4);
+  }
+`;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -7,8 +7,10 @@ import {
 } from '@rpg-engine/shared';
 import { Coins } from 'pixelarticons/react/Coins';
 import { Delete } from 'pixelarticons/react/Delete';
-import React, { useState } from 'react';
+import React from 'react';
 import styled from 'styled-components';
+import { GroupedRowContainer } from './GroupedRowContainer';
+import { ItemRowWrapper } from '../shared/ItemRowWrapper';
 import { uiFonts } from '../../constants/uiFonts';
 import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
 import { onRenderGems } from '../Item/Inventory/ItemGem';
@@ -50,7 +52,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
   };
 
   return (
-    <MarketplaceWrapper>
+    <ItemRowWrapper>
       <ItemSection>
         <SpriteContainer>
           <ItemInfoWrapper
@@ -138,7 +140,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
           iconColor={onMarketPlaceItemBuy ? '#f59e0b' : '#ef4444'}
         />
       </ActionSection>
-    </MarketplaceWrapper>
+    </ItemRowWrapper>
   );
 };
 
@@ -167,133 +169,30 @@ export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
   onBuy,
   onDCCoinClick,
 }) => {
-  const [expanded, setExpanded] = useState(false);
-  const totalOffers = otherListings.length + 1;
-  const hasMultiple = otherListings.length > 0;
+  const makeRow = (listing: IMarketplaceItem) => (
+    <MarketplaceRows
+      key={listing._id}
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      item={listing.item}
+      itemPrice={listing.price}
+      dcEquivalentPrice={dcToGoldSwapRate > 0 ? getDCEquivalentPrice(listing.price) : undefined}
+      equipmentSet={equipmentSet}
+      onMarketPlaceItemBuy={() => onBuy(listing._id)}
+      onDCCoinClick={onDCCoinClick}
+      disabled={listing.owner === characterId}
+    />
+  );
 
   return (
-    <GroupWrapper>
-      <GroupHeader
-        onClick={hasMultiple ? () => setExpanded(!expanded) : undefined}
-        clickable={hasMultiple}
-      >
-        <MarketplaceRows
-          atlasIMG={atlasIMG}
-          atlasJSON={atlasJSON}
-          item={bestListing.item}
-          itemPrice={bestListing.price}
-          dcEquivalentPrice={
-            dcToGoldSwapRate > 0
-              ? getDCEquivalentPrice(bestListing.price)
-              : undefined
-          }
-          equipmentSet={equipmentSet}
-          onMarketPlaceItemBuy={() => onBuy(bestListing._id)}
-          onDCCoinClick={onDCCoinClick}
-          disabled={bestListing.owner === characterId}
-        />
-        {hasMultiple && (
-          <GroupMeta>
-            <OfferBadge>{totalOffers} offers</OfferBadge>
-            <Chevron expanded={expanded}>&#9656;</Chevron>
-          </GroupMeta>
-        )}
-      </GroupHeader>
-
-      {expanded && (
-        <SubRows>
-          {otherListings.map((listing) => (
-            <MarketplaceRows
-              key={listing._id}
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
-              item={listing.item}
-              itemPrice={listing.price}
-              dcEquivalentPrice={
-                dcToGoldSwapRate > 0
-                  ? getDCEquivalentPrice(listing.price)
-                  : undefined
-              }
-              equipmentSet={equipmentSet}
-              onMarketPlaceItemBuy={() => onBuy(listing._id)}
-              onDCCoinClick={onDCCoinClick}
-              disabled={listing.owner === characterId}
-            />
-          ))}
-        </SubRows>
-      )}
-    </GroupWrapper>
+    <GroupedRowContainer
+      mainRow={makeRow(bestListing)}
+      subRows={otherListings.map(makeRow)}
+      badgeLabel="offers"
+    />
   );
 };
 
-const GroupWrapper = styled.div`
-  margin-bottom: 2px;
-`;
-
-const GroupHeader = styled.div<{ clickable: boolean }>`
-  position: relative;
-  cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
-`;
-
-const GroupMeta = styled.div`
-  position: absolute;
-  right: 180px;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  pointer-events: none;
-`;
-
-const OfferBadge = styled.span`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.5rem;
-  color: rgba(255, 255, 255, 0.5);
-  background: rgba(255, 255, 255, 0.08);
-  padding: 2px 6px;
-  border-radius: 8px;
-  white-space: nowrap;
-`;
-
-const Chevron = styled.span<{ expanded: boolean }>`
-  display: inline-block;
-  font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.4);
-  transition: transform 0.2s ease;
-  transform: rotate(${({ expanded }) => (expanded ? '90deg' : '0deg')});
-`;
-
-const SubRows = styled.div`
-  margin-left: 12px;
-  padding-left: 8px;
-  border-left: 2px solid rgba(245, 158, 11, 0.25);
-
-  > div > div {
-    background: rgba(0, 0, 0, 0.4);
-  }
-`;
-
-const MarketplaceWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.6rem 1rem;
-  margin-bottom: 4px;
-  background: rgba(0, 0, 0, 0.25);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  border-radius: 6px;
-  border-left: 4px solid transparent;
-  transition: all 0.2s ease-in-out;
-
-  &:hover {
-    background: rgba(245, 158, 11, 0.08);
-    border-color: rgba(245, 158, 11, 0.2);
-    border-left-color: #f59e0b;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    transform: translateY(-1px);
-  }
-`;
 
 const ItemSection = styled.div`
   display: flex;

package/src/components/Pager.tsx

@@ -8,6 +8,7 @@ interface PagerProps {
   currentPage: number;
   itemsPerPage: number;
   onPageChange: (page: number) => void;
+  compact?: boolean;
 }
 
 export const Pager: React.FC<PagerProps> = ({
@@ -15,13 +16,14 @@ export const Pager: React.FC<PagerProps> = ({
   currentPage,
   itemsPerPage,
   onPageChange,
+  compact = false,
 }) => {
   const totalPages = Math.ceil(totalItems / itemsPerPage);
 
   return (
     <Container>
-      <p>Total items: {totalItems}</p>
-      <PagerContainer>
+      {!compact && <p>Total items: {totalItems}</p>}
+      <PagerContainer $compact={compact}>
         <button
           disabled={currentPage === 1}
           onPointerDown={() => onPageChange(Math.max(currentPage - 1, 1))}
@@ -55,7 +57,7 @@ const Container = styled.div`
   }
 `;
 
-const PagerContainer = styled.div`
+const PagerContainer = styled.div<{ $compact: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -67,11 +69,17 @@ const PagerContainer = styled.div`
 
   div {
     color: white;
+    ${({ $compact }) => $compact && `
+      font-size: 0.55rem !important;
+      padding: 2px 6px !important;
+      min-width: unset !important;
+    `}
   }
 
   button {
-    width: 40px;
-    height: 40px;
+    width: ${({ $compact }) => ($compact ? '24px' : '40px')} !important;
+    height: ${({ $compact }) => ($compact ? '24px' : '40px')} !important;
+    font-size: ${({ $compact }) => ($compact ? '0.55rem' : 'inherit')} !important;
     background-color: ${uiColors.darkGray};
     border: none;
     border-radius: 5px;