@rpg-engine/long-bow 0.8.140 → 0.8.145

package/src/components/Marketplace/MarketplaceRows.tsx

@@ -3,16 +3,19 @@ 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 { SimpleTooltip } from '../shared/SimpleTooltip';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 export interface IMarketPlaceRowsPropos {
@@ -46,7 +49,7 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
 
   return (
     <MarketplaceWrapper>
-      <ItemIconContainer>
+      <ItemSection>
         <SpriteContainer>
           <ItemInfoWrapper
             item={item}
@@ -73,7 +76,6 @@ export const MarketplaceRows: React.FC<IMarketPlaceRowsPropos> = ({
                 imgClassname="sprite-from-atlas-img--item"
               />
             </RarityContainer>
-
             <QuantityContainer>
               {item.stackQty &&
                 item.stackQty > 1 &&
@@ -81,120 +83,312 @@ 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>
+                <SimpleTooltip content="Gold Coin" direction="top">
+                  <SpriteFromAtlas
+                    atlasIMG={atlasIMG}
+                    atlasJSON={atlasJSON}
+                    spriteKey="others/gold-coin-qty-5.png"
+                    imgScale={1}
+                  />
+                </SimpleTooltip>
+              </GoldIcon>
+              <GoldPrice>{itemPrice}</GoldPrice>
+            </GoldPriceRow>
+            {dcEquivalentPrice !== undefined && (
+              <DCPriceRow>
+                <DCCoinWrapper>
+                  <SimpleTooltip content="Definya Coin" direction="top">
+                    <SpriteFromAtlas
+                      atlasIMG={atlasIMG}
+                      atlasJSON={atlasJSON}
+                      spriteKey="others/definya-coin.png"
+                      imgScale={1}
+                    />
+                  </SimpleTooltip>
+                </DCCoinWrapper>
+                <DCPrice>{formatDCAmount(dcEquivalentPrice)}</DCPrice>
+              </DCPriceRow>
+            )}
+          </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};
+    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);
   }
+`;
 
-  p {
-    font-size: 0.8rem;
-  }
+const ItemSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
 `;
 
-const QuantityContainer = styled.p`
-  position: absolute;
-  display: block;
-  top: 15px;
-  left: 25px;
-  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 GemContainer = styled.p`
-  position: absolute;
-  display: block;
-  top: -5px;
-  left: -10px;
-  font-size: ${uiFonts.size.xsmall} !important;
+const ItemDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+  margin-left: 1rem;
+`;
+
+const ItemName = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.65rem;
+  color: #ffffff;
 `;
 
-const Flex = styled.div`
+const PriceRow = styled.div`
   display: flex;
-  gap: 24px;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.2rem;
 `;
 
-const ItemIconContainer = styled.div`
+const GoldPriceRow = styled.div`
   display: flex;
-  justify-content: flex-start;
   align-items: center;
+  gap: 0.3rem;
 `;
 
-const GoldContainer = styled.div`
+const GoldIcon = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
-  top: -0.5rem;
-  left: 0.5rem;
+  top: -0.6rem;
+  left: -0.5rem;
 `;
-const SpriteContainer = styled.div`
+
+const GoldPrice = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem !important;
+  color: #fef08a;
+  line-height: 1;
+`;
+
+const DCPriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+  margin-left: 0.5rem;
+`;
+
+const DCCoinWrapper = 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;
-  color: #fef08a;
-  font-size: 0.65rem;
+const DCPrice = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem !important;
+  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 QuantityContainer = styled.p`
+  position: absolute;
+  display: block;
+  top: 15px;
+  left: -8px;
+  font-size: ${uiFonts.size.xsmall} !important;
 `;
 
-const ButtonContainer = styled.div`
-  margin: auto;
+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,128 @@
+import { MarketplaceAcceptedCurrency } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+
+export { MarketplaceAcceptedCurrency };
+
+export interface IMarketplaceSettingsPanelProps {
+  acceptedCurrency: MarketplaceAcceptedCurrency;
+  onAcceptedCurrencyChange: (value: MarketplaceAcceptedCurrency) => void;
+}
+
+const CURRENCY_OPTIONS: { value: MarketplaceAcceptedCurrency; label: string; description: string }[] = [
+  {
+    value: MarketplaceAcceptedCurrency.GoldOrDc,
+    label: 'Gold or DC',
+    description: 'Accept both Gold and Definya Coin as payment',
+  },
+  {
+    value: MarketplaceAcceptedCurrency.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/Store/CartView.tsx

@@ -61,6 +61,11 @@ export const CartView: React.FC<ICartViewProps> = ({
     0
   );
 
+  const dcTotal = cartItems.reduce(
+    (sum, ci) => sum + (ci.item.dcPrice ?? 0) * ci.quantity,
+    0
+  );
+
   const formatPrice = (price: number) => price.toFixed(2);
 
   const handlePurchase = async () => {
@@ -154,6 +159,12 @@ export const CartView: React.FC<ICartViewProps> = ({
             <span>Total:</span>
             <span>${formatPrice(total)}</span>
           </TotalRow>
+          {dcTotal > 0 && (
+            <TotalRow>
+              <span>DC:</span>
+              <span>{dcTotal.toLocaleString()} DC</span>
+            </TotalRow>
+          )}
           {error && <ErrorMessage>{error}</ErrorMessage>}
         </TotalInfo>
         <CTAButton

package/src/components/Store/PaymentMethodModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
 import styled from 'styled-components';
 import ModalPortal from '../Abstractions/ModalPortal';
@@ -6,6 +6,7 @@ import { Button, ButtonTypes } from '../Button';
 
 export interface IPaymentMethodModalProps {
   dcBalance: number;
+  dcRequired?: number;
   onPayWithDC: () => void;
   onPayWithCard: () => void;
   onClose: () => void;
@@ -15,12 +16,21 @@ type PaymentMethod = 'dc' | 'card';
 
 export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   dcBalance,
+  dcRequired,
   onPayWithDC,
   onPayWithCard,
   onClose,
 }) => {
   const [selected, setSelected] = useState<PaymentMethod>('card');
 
+  const dcDisabled = dcRequired !== undefined && dcBalance < dcRequired;
+
+  useEffect(() => {
+    if (dcDisabled && selected === 'dc') {
+      setSelected('card');
+    }
+  }, [dcDisabled, selected]);
+
   const stopPropagation = useCallback(
     (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
       e.stopPropagation();
@@ -29,12 +39,17 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
   );
 
   const handleConfirm = useCallback(() => {
-    if (selected === 'dc') {
+    if (selected === 'dc' && !dcDisabled) {
       onPayWithDC();
     } else {
       onPayWithCard();
     }
-  }, [selected, onPayWithDC, onPayWithCard]);
+  }, [selected, dcDisabled, onPayWithDC, onPayWithCard]);
+
+  const dcSubText =
+    dcRequired !== undefined
+      ? `${dcBalance.toLocaleString()} DC available · ${dcRequired.toLocaleString()} DC needed`
+      : `${dcBalance.toLocaleString()} DC available`;
 
   return (
     <ModalPortal>
@@ -66,12 +81,13 @@ export const PaymentMethodModal: React.FC<IPaymentMethodModalProps> = ({
 
             <RadioOption
               $selected={selected === 'dc'}
-              onPointerDown={() => setSelected('dc')}
+              $disabled={dcDisabled}
+              onPointerDown={dcDisabled ? undefined : () => setSelected('dc')}
             >
               <RadioCircle $selected={selected === 'dc'} />
               <OptionText>
                 <OptionLabel>Definya Coin</OptionLabel>
-                <OptionSub>{dcBalance.toLocaleString()} DC available</OptionSub>
+                <OptionSub>{dcSubText}</OptionSub>
               </OptionText>
             </RadioOption>
           </Options>
@@ -157,7 +173,7 @@ const Options = styled.div`
   gap: 8px;
 `;
 
-const RadioOption = styled.div<{ $selected: boolean }>`
+const RadioOption = styled.div<{ $selected: boolean; $disabled?: boolean }>`
   display: flex;
   align-items: center;
   gap: 12px;
@@ -165,11 +181,12 @@ const RadioOption = styled.div<{ $selected: boolean }>`
   border: 1px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.15)')};
   border-radius: 6px;
   background: ${({ $selected }) => ($selected ? 'rgba(245,158,11,0.1)' : 'transparent')};
-  cursor: pointer;
-  transition: border-color 0.15s, background 0.15s;
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.4 : 1)};
+  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
 
   &:hover {
-    border-color: #f59e0b;
+    border-color: ${({ $disabled }) => ($disabled ? 'rgba(255,255,255,0.15)' : '#f59e0b')};
   }
 `;