@rpg-engine/long-bow 0.8.140 → 0.8.141

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -3,15 +3,17 @@ import {
   getItemTextureKeyPath,
   IEquipmentSet,
   IItem,
+  IMarketplaceItem,
 } from '@rpg-engine/shared';
-import React from 'react';
+import { Coins } from 'pixelarticons/react/Coins';
+import { Delete } from 'pixelarticons/react/Delete';
+import React, { useState } from 'react';
 import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
 import { uiFonts } from '../../constants/uiFonts';
-import { Button, ButtonTypes } from '../Button';
 import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
 import { onRenderGems } from '../Item/Inventory/ItemGem';
 import { rarityColor } from '../Item/Inventory/ItemSlotRarity';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
 import { Ellipsis } from '../shared/Ellipsis';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
@@ -46,7 +48,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
 
   return (
     <MarketplaceWrapper>
-      <ItemIconContainer>
+      <ItemSection>
         <SpriteContainer>
           <ItemInfoWrapper
             item={item}
@@ -73,7 +75,6 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
                 imgClassname="sprite-from-atlas-img--item"
               />
             </RarityContainer>
-
             <QuantityContainer>
               {item.stackQty &&
                 item.stackQty > 1 &&
@@ -81,120 +82,282 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
             </QuantityContainer>
           </ItemInfoWrapper>
         </SpriteContainer>
-        <PriceValue>
-          <p>
+
+        <ItemDetails>
+          <ItemName>
             <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
               {item.name}
             </Ellipsis>
-          </p>
-        </PriceValue>
-      </ItemIconContainer>
-
-      <Flex>
-        <ItemIconContainer>
-          <GoldContainer>
-            <SpriteFromAtlas
+          </ItemName>
+          <PriceRow>
+            <GoldPriceRow>
+              <GoldIcon>
+                <SpriteFromAtlas
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  spriteKey="others/gold-coin-qty-5.png"
+                  imgScale={1}
+                />
+              </GoldIcon>
+              <GoldPrice>{itemPrice}</GoldPrice>
+            </GoldPriceRow>
+            {dcEquivalentPrice !== undefined && (
+              <DCPrice>({formatDCAmount(dcEquivalentPrice)} DC)</DCPrice>
+            )}
+          </PriceRow>
+        </ItemDetails>
+      </ItemSection>
+
+      <ActionSection>
+        <CTAButton
+          icon={onMarketPlaceItemBuy ? <Coins width={18} height={18} /> : <Delete width={18} height={18} />}
+          label={onMarketPlaceItemBuy ? 'Buy' : 'Remove'}
+          disabled={disabled}
+          onClick={() => {
+            if (disabled) return;
+            onMarketPlaceItemBuy?.();
+            onMarketPlaceItemRemove?.();
+          }}
+          iconColor={onMarketPlaceItemBuy ? '#f59e0b' : '#ef4444'}
+        />
+      </ActionSection>
+    </MarketplaceWrapper>
+  );
+};
+
+export interface IGroupedMarketplaceRowProps {
+  bestListing: IMarketplaceItem;
+  otherListings: IMarketplaceItem[];
+  atlasJSON: any;
+  atlasIMG: any;
+  equipmentSet?: IEquipmentSet | null;
+  dcToGoldSwapRate?: number;
+  getDCEquivalentPrice: (goldPrice: number) => number;
+  characterId: string;
+  onBuy: (id: string) => void;
+}
+
+export const GroupedMarketplaceRow: React.FC<IGroupedMarketplaceRowProps> = ({
+  bestListing,
+  otherListings,
+  atlasJSON,
+  atlasIMG,
+  equipmentSet,
+  dcToGoldSwapRate = 0,
+  getDCEquivalentPrice,
+  characterId,
+  onBuy,
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const totalOffers = otherListings.length + 1;
+  const hasMultiple = otherListings.length > 0;
+
+  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)}
+          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}
-              spriteKey="others/gold-coin-qty-5.png"
-              imgScale={2}
+              item={listing.item}
+              itemPrice={listing.price}
+              dcEquivalentPrice={
+                dcToGoldSwapRate > 0
+                  ? getDCEquivalentPrice(listing.price)
+                  : undefined
+              }
+              equipmentSet={equipmentSet}
+              onMarketPlaceItemBuy={() => onBuy(listing._id)}
+              disabled={listing.owner === characterId}
             />
-          </GoldContainer>
-          <PriceValue>
-            <p>
-              <Ellipsis maxLines={1} maxWidth="120px" fontSize="10px">
-                ${itemPrice}
-              </Ellipsis>
-            </p>
-          </PriceValue>
-          {dcEquivalentPrice !== undefined && (
-            <DCPriceLabel>{formatDCAmount(dcEquivalentPrice)} DC</DCPriceLabel>
-          )}
-        </ItemIconContainer>
-        <ButtonContainer>
-          <Button
-            buttonType={ButtonTypes.RPGUIButton}
-            disabled={disabled}
-            onPointerDown={() => {
-              if (disabled) return;
-
-              onMarketPlaceItemBuy?.();
-              onMarketPlaceItemRemove?.();
-            }}
-          >
-            {onMarketPlaceItemBuy ? 'Buy' : 'Remove'}
-          </Button>
-        </ButtonContainer>
-      </Flex>
-    </MarketplaceWrapper>
+          ))}
+        </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);
+  }
+`;
+
 const MarketplaceWrapper = styled.div`
-  margin: auto;
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  padding: 0.5rem;
+  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-color: ${uiColors.darkGray};
-  }
-
-  p {
-    font-size: 0.8rem;
+    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 QuantityContainer = styled.p`
-  position: absolute;
-  display: block;
-  top: 15px;
-  left: 25px;
-  font-size: ${uiFonts.size.xsmall} !important;
+const ItemSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
 `;
 
-const GemContainer = styled.p`
-  position: absolute;
-  display: block;
-  top: -5px;
-  left: -10px;
-  font-size: ${uiFonts.size.xsmall} !important;
+const SpriteContainer = styled.div`
+  position: relative;
+  flex-shrink: 0;
+  min-width: 44px; /* Ensure wide stack quantities don't overlap ItemDetails */
 `;
 
-const Flex = styled.div`
+const ItemDetails = styled.div`
   display: flex;
-  gap: 24px;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+  margin-left: 1rem;
 `;
 
-const ItemIconContainer = styled.div`
+const ItemName = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+  color: #ffffff;
+`;
+
+const PriceRow = styled.div`
   display: flex;
-  justify-content: flex-start;
+  flex-direction: row;
   align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.2rem;
 `;
 
-const GoldContainer = styled.div`
-  position: relative;
-  top: -0.5rem;
-  left: 0.5rem;
+const GoldPriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
 `;
-const SpriteContainer = styled.div`
+
+const GoldIcon = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
-  left: 0.5rem;
+  top: -0.6rem;
+  left: -0.5rem;
 `;
 
-const DCPriceLabel = styled.span`
-  margin-left: 8px;
+const GoldPrice = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
   color: #fef08a;
-  font-size: 0.65rem;
+  line-height: 1;
+`;
+
+const DCPrice = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem;
+  color: rgba(254, 240, 138, 0.65);
   white-space: nowrap;
 `;
 
-const PriceValue = styled.div`
-  margin-left: 40px;
+const ActionSection = styled.div`
+  flex-shrink: 0;
+  margin-left: 0.75rem;
 `;
 
-const ButtonContainer = styled.div`
-  margin: auto;
+const QuantityContainer = styled.p`
+  position: absolute;
+  display: block;
+  top: 15px;
+  left: 25px;
+  font-size: ${uiFonts.size.xsmall} !important;
+`;
+
+const GemContainer = styled.p`
+  position: absolute;
+  display: block;
+  top: -5px;
+  left: -10px;
+  font-size: ${uiFonts.size.xsmall} !important;
 `;
 
 const RarityContainer = styled.div<{ item: IItem }>`

package/src/components/Marketplace/MarketplaceSettingsPanel.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export type MarketplaceAcceptedCurrency = 'gold' | 'gold_or_dc';
+
+export interface IMarketplaceSettingsPanelProps {
+  acceptedCurrency: MarketplaceAcceptedCurrency;
+  onAcceptedCurrencyChange: (value: MarketplaceAcceptedCurrency) => void;
+}
+
+const CURRENCY_OPTIONS: { value: MarketplaceAcceptedCurrency; label: string; description: string }[] = [
+  {
+    value: 'gold_or_dc',
+    label: 'Gold or DC',
+    description: 'Accept both Gold and Definya Coin as payment',
+  },
+  {
+    value: 'gold',
+    label: 'Gold only',
+    description: 'Only accept Gold as payment',
+  },
+];
+
+export const MarketplaceSettingsPanel: React.FC<IMarketplaceSettingsPanelProps> = ({
+  acceptedCurrency,
+  onAcceptedCurrencyChange,
+}) => {
+  return (
+    <Wrapper>
+      <Section>
+        <SectionLabel>Accepted Currency</SectionLabel>
+        <OptionsGrid>
+          {CURRENCY_OPTIONS.map(option => (
+            <OptionCard
+              key={option.value}
+              $active={acceptedCurrency === option.value}
+              onClick={() => onAcceptedCurrencyChange(option.value)}
+            >
+              <OptionLabel $active={acceptedCurrency === option.value}>{option.label}</OptionLabel>
+              <OptionDescription>{option.description}</OptionDescription>
+              {acceptedCurrency === option.value && <ActiveBadge>Active</ActiveBadge>}
+            </OptionCard>
+          ))}
+        </OptionsGrid>
+        <Hint>Buyers will only be able to pay using the currency you accept.</Hint>
+      </Section>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 95%;
+  margin: 0 auto;
+  padding-top: 4px;
+`;
+
+const Section = styled.div`
+  background: rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 16px 18px;
+`;
+
+const SectionLabel = styled.p`
+  margin: 0 0 14px 0;
+  font-size: 0.65rem;
+  color: #aaa;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+const OptionsGrid = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+`;
+
+const OptionCard = styled.button<{ $active: boolean }>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 14px 16px;
+  background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.12)' : 'rgba(0, 0, 0, 0.25)')};
+  border: 2px solid ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.08)')};
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover {
+    border-color: ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.25)')};
+    background: ${({ $active }) => ($active ? 'rgba(245, 158, 11, 0.15)' : 'rgba(255,255,255,0.04)')};
+  }
+`;
+
+const OptionLabel = styled.span<{ $active: boolean }>`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
+  color: ${({ $active }) => ($active ? '#f59e0b' : '#cccccc')};
+  letter-spacing: 0.5px;
+`;
+
+const OptionDescription = styled.span`
+  font-size: 0.5rem;
+  color: #888;
+  line-height: 1.5;
+`;
+
+const ActiveBadge = styled.span`
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 0.45rem;
+  color: #f59e0b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  opacity: 0.8;
+`;
+
+const Hint = styled.p`
+  margin: 14px 0 0 0;
+  font-size: 0.48rem;
+  color: #666;
+  line-height: 1.6;
+`;

package/src/components/shared/Tabs/Tabs.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface ITabOption {
+  id: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+export interface ITabsProps {
+  options: ITabOption[];
+  activeTabId: string;
+  onTabChange: (tabId: string) => void;
+  className?: string;
+}
+
+export const Tabs: React.FC<ITabsProps> = ({ options, activeTabId, onTabChange, className }) => {
+  return (
+    <TabsContainer className={className}>
+      {options.map((option) => (
+        <TabButton
+          key={option.id}
+          $active={option.id === activeTabId}
+          onClick={() => onTabChange(option.id)}
+        >
+          {option.icon && option.icon} {option.label}
+        </TabButton>
+      ))}
+    </TabsContainer>
+  );
+};
+
+const TabsContainer = styled.div`
+  display: flex;
+  gap: 15px;
+  width: 95%;
+  margin: 0 auto 15px auto;
+  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 10px;
+`;
+
+const TabButton = styled.button<{ $active: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  border-bottom: ${({ $active }) => ($active ? '3px solid #f59e0b' : '3px solid transparent')};
+  color: ${({ $active }) => ($active ? '#ffffff' : '#888888')};
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.70rem;
+  letter-spacing: 1px;
+  cursor: pointer;
+  padding: 5px 10px 10px 10px;
+  transition: color 0.2s, border-bottom 0.2s;
+  
+  &:hover {
+    color: #ffffff;
+  }
+`;

package/src/components/shared/Tabs/index.ts

@@ -0,0 +1 @@
+export * from './Tabs';

package/src/index.tsx

@@ -37,6 +37,7 @@ export * from './components/ListMenu';
 export * from './components/Marketplace/Marketplace';
 export * from './components/Marketplace/MarketplaceBuyModal';
 export * from './components/Marketplace/MarketplaceRows';
+export * from './components/Marketplace/MarketplaceSettingsPanel';
 export * from './components/Multitab/TabBody';
 export * from './components/Multitab/TabsContainer';
 export * from './components/NPCDialog/NPCDialog';

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

@@ -45,6 +45,8 @@ const Template: Story = () => {
         onAddItemToMarketplace={() => console.log('add')}
         characterId="1"
         onMoneyWithdraw={() => console.log('withdraw')}
+        dcBalance={50}
+        dcToGoldSwapRate={5500}
         totalItems={100}
         currentPage={page}
         itemsPerPage={30}