@rpg-engine/long-bow 0.8.168 → 0.8.170

package/package.json

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

package/src/components/Marketplace/ManagmentPanel.tsx

@@ -1,4 +1,4 @@
-import { IEquipmentSet, IItem, IMarketplaceItem, MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
+import { formatDCAmount, goldToDC, IEquipmentSet, IItem, IMarketplaceItem, MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
 import { Coins } from 'pixelarticons/react/Coins';
 import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import React, { useEffect, useRef, useState } from 'react';
@@ -27,6 +27,7 @@ export interface IManagmentPanelProps {
   disableHotkeys?: () => void;
   onMoneyWithdraw: () => void;
   currentPage: number;
+  dcToGoldSwapRate?: number;
 }
 
 const LISTING_CURRENCY_OPTIONS: { value: MarketplaceAcceptedCurrency; label: string }[] = [
@@ -51,6 +52,7 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
   disableHotkeys,
   onMoneyWithdraw,
   currentPage,
+  dcToGoldSwapRate = 0,
 }) => {
   const [price, setPrice] = useState('');
   const [isCreatingOffer, setIsCreatingOffer] = useState(false);
@@ -145,6 +147,9 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
                     {opt.label}
                   </CurrencyToggleButton>
                 ))}
+                {listingCurrency !== MarketplaceAcceptedCurrency.Gold && price && Number(price) > 0 && (
+                  <DCPreview>{formatDCAmount(goldToDC(Number(price)))} DC</DCPreview>
+                )}
               </CurrencyToggleRow>
             </PriceInputWrapper>
           </Flex>
@@ -191,18 +196,25 @@ export const ManagmentPanel: React.FC<IManagmentPanelProps> = ({
       </OptionsWrapper>
 
       <ItemComponentScrollWrapper id="MarketContainer" ref={itemsContainer}>
-        {items?.map(({ item, price, _id, acceptedCurrency: listingCurrency }: IMarketplaceItem, index: number) => (
-          <MarketplaceRows
-            key={`${item.key}_${index}`}
-            atlasIMG={atlasIMG}
-            atlasJSON={atlasJSON}
-            item={item}
-            itemPrice={price}
-            acceptedCurrency={listingCurrency}
-            equipmentSet={equipmentSet}
-            onMarketPlaceItemRemove={setRemovingItemId.bind(null, _id)}
-          />
-        ))}
+        {items?.map(({ item, price, _id, acceptedCurrency: itemCurrency }: IMarketplaceItem, index: number) => {
+          const currency = itemCurrency || MarketplaceAcceptedCurrency.GoldOrDc;
+          const isDcOnly = currency === MarketplaceAcceptedCurrency.Dc;
+          const showDcPrice = isDcOnly || (dcToGoldSwapRate > 0 && currency !== MarketplaceAcceptedCurrency.Gold);
+
+          return (
+            <MarketplaceRows
+              key={`${item.key}_${index}`}
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              item={item}
+              itemPrice={price}
+              dcEquivalentPrice={showDcPrice ? goldToDC(price) : undefined}
+              acceptedCurrency={currency}
+              equipmentSet={equipmentSet}
+              onMarketPlaceItemRemove={setRemovingItemId.bind(null, _id)}
+            />
+          );
+        })}
       </ItemComponentScrollWrapper>
     </>
   );
@@ -386,3 +398,11 @@ const CurrencyToggleButton = styled.button<{ $active: boolean }>`
     color: ${({ $active }) => ($active ? '#f59e0b' : '#ddd')} !important;
   }
 `;
+
+const DCPreview = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.4rem !important;
+  color: rgba(167, 139, 250, 0.8) !important;
+  white-space: nowrap;
+  margin-left: auto;
+`;

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -96,12 +96,6 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
             <Ellipsis maxLines={1} maxWidth="200px" fontSize="10px">
               {item.name}
             </Ellipsis>
-            {acceptedCurrency === MarketplaceAcceptedCurrency.Dc && (
-              <CurrencyBadge $color="#a78bfa">DC only</CurrencyBadge>
-            )}
-            {acceptedCurrency === MarketplaceAcceptedCurrency.Gold && (
-              <CurrencyBadge $color="#fef08a">Gold only</CurrencyBadge>
-            )}
           </ItemName>
           <PriceRow>
             {acceptedCurrency !== MarketplaceAcceptedCurrency.Dc && (
@@ -321,21 +315,6 @@ const GemContainer = styled.p`
   font-size: ${uiFonts.size.xsmall} !important;
 `;
 
-const CurrencyBadge = styled.span<{ $color: string }>`
-  display: inline-block;
-  margin-left: 6px;
-  padding: 1px 4px;
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.38rem;
-  color: ${({ $color }) => $color};
-  border: 1px solid ${({ $color }) => $color};
-  border-radius: 3px;
-  opacity: 0.85;
-  vertical-align: middle;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-`;
-
 const RarityContainer = styled.div<{ item: IItem }>`
   border-color: ${({ item }) => rarityColor(item)};
   box-shadow: ${({ item }) => `0 0 5px 8px ${rarityColor(item)}`} inset,

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

@@ -82,6 +82,13 @@ const mockTransactions: IMarketplaceTransaction[] = [
   { owner: 'player-1', type: MarketplaceTransactionType.BuyOrderCancelled, goldAmount: 300, itemKey: 'items/leather-armor', itemName: 'Leather Armor', createdAt: daysAgo(10), updatedAt: daysAgo(10) },
 ];
 
+const currencyForIndex = (i: number): MarketplaceAcceptedCurrency | undefined => {
+  if (i === 1) return MarketplaceAcceptedCurrency.Dc;
+  if (i === 3) return MarketplaceAcceptedCurrency.Gold;
+  if (i === 5) return MarketplaceAcceptedCurrency.Dc;
+  return undefined; // defaults to GoldOrDc
+};
+
 const dcOnlyItem: IMarketplaceItem = {
   _id: 'dc-only-listing-1',
   owner: 'player-99',
@@ -146,11 +153,12 @@ const Template: Story = () => {
         atlasJSON={atlasJSON}
         onClose={() => console.log('close')}
         items={[
-          ...items.map(item => ({
+          ...items.map((item, i) => ({
             item,
             price: Math.round(Math.random() * 1000),
             _id: Math.random().toString(),
             owner: Math.random().toString(),
+            ...(currencyForIndex(i) && { acceptedCurrency: currencyForIndex(i) }),
           })),
           dcOnlyItem,
         ]}