@rpg-engine/long-bow 0.8.181 → 0.8.184

package/src/components/Marketplace/GroupedRowContainer.tsx

@@ -39,16 +39,18 @@ export const GroupedRowContainer: React.FC<IGroupedRowContainerProps> = ({
 
 const GroupWrapper = styled.div`
   margin-bottom: 2px;
+  overflow: hidden;
 `;
 
 const GroupHeader = styled.div<{ $clickable: boolean }>`
   position: relative;
   cursor: ${({ $clickable }) => ($clickable ? 'pointer' : 'default')};
+  overflow-x: hidden;
 `;
 
 const GroupMeta = styled.div`
   position: absolute;
-  right: 180px;
+  right: 100px;
   top: 50%;
   transform: translateY(-50%);
   display: flex;

package/src/components/Marketplace/ManagmentPanel.tsx

@@ -342,6 +342,7 @@ const BalanceCurrencyLabel = styled.span`
 
 const ItemComponentScrollWrapper = styled.div`
   overflow-y: scroll;
+  overflow-x: hidden;
   height: 335px;
   width: 95%;
   margin: 1rem auto 0 auto;

package/src/components/Marketplace/Marketplace.tsx

@@ -1,4 +1,6 @@
 import {
+  ICharacter,
+  ICharacterListing,
   IEquipmentSet,
   IItem,
   IMarketplaceBlueprintSearchRequest,
@@ -12,6 +14,7 @@ import { Settings2 } from 'pixelarticons/react/Settings2';
 import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import { ShoppingCart } from 'pixelarticons/react/ShoppingCart';
 import { Store } from 'pixelarticons/react/Store';
+import { User } from 'pixelarticons/react/User';
 import { Wallet } from 'pixelarticons/react/Wallet';
 import React, { useState } from 'react';
 import styled from 'styled-components';
@@ -27,6 +30,9 @@ import { HistoryPanel } from './HistoryPanel';
 import { ManagmentPanel } from './ManagmentPanel';
 import { MarketplacePaymentMethod } from './MarketplaceBuyModal';
 import { MarketplaceAcceptedCurrency, MarketplaceSettingsPanel } from './MarketplaceSettingsPanel';
+import { CharacterMarketplacePanel } from './CharacterMarketplacePanel';
+import { MyCharacterListingsPanel } from './MyCharacterListingsPanel';
+import { CharacterListingForm } from './CharacterListingForm';
 
 export interface IMarketPlaceProps {
   items: IMarketplaceItem[];
@@ -110,9 +116,30 @@ export interface IMarketPlaceProps {
   // Wallet tab
   walletProps?: IDCWalletContentProps;
   showWalletTab?: boolean;
+
+  /** Entities atlas for character sprites (separate from the items atlasIMG/atlasJSON) */
+  characterAtlasIMG?: any;
+  characterAtlasJSON?: any;
+  // Character marketplace props
+  characterListings?: ICharacterListing[];
+  characterListingsTotal?: number;
+  characterListingsPage?: number;
+  characterListingsItemsPerPage?: number;
+  onCharacterListingsPageChange?: (page: number) => void;
+  onCharacterBuy?: (listingId: string) => void;
+  myCharacterListings?: ICharacterListing[];
+  myCharacterListingsTotal?: number;
+  myCharacterListingsPage?: number;
+  onMyCharacterListingsPageChange?: (page: number) => void;
+  onCharacterList?: (characterId: string, price: number) => void;
+  onCharacterDelist?: (listingId: string) => void;
+  accountCharacters?: ICharacter[];
+  characterListingsLoading?: boolean;
+  characterNameFilter?: string;
+  onCharacterNameFilterChange?: (name: string) => void;
 }
 
-type ActiveTab = 'marketplace' | 'sell' | 'buy-orders' | 'history' | 'wallet' | 'settings';
+type ActiveTab = 'marketplace' | 'characters' | 'sell' | 'buy-orders' | 'history' | 'wallet' | 'settings';
 
 export const Marketplace: React.FC<IMarketPlaceProps> = props => {
   const {
@@ -155,11 +182,31 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
     // Wallet
     walletProps,
     showWalletTab = true,
+    // Character marketplace
+    characterListings = [],
+    characterListingsTotal = 0,
+    characterListingsPage = 1,
+    characterListingsItemsPerPage = 8,
+    onCharacterListingsPageChange,
+    onCharacterBuy,
+    myCharacterListings = [],
+    myCharacterListingsTotal = 0,
+    myCharacterListingsPage = 1,
+    onMyCharacterListingsPageChange,
+    onCharacterDelist,
+    onCharacterList,
+    accountCharacters = [],
+    characterListingsLoading = false,
+    characterNameFilter = '',
+    onCharacterNameFilterChange,
+    characterAtlasIMG,
+    characterAtlasJSON,
   } = props;
 
   const [activeTab, setActiveTab] = useState<ActiveTab>('marketplace');
   const [acceptedCurrency, setAcceptedCurrency] = useState<MarketplaceAcceptedCurrency>(acceptedCurrencyProp ?? MarketplaceAcceptedCurrency.GoldOrDc);
   const [isBlueprintSearchOpen, setIsBlueprintSearchOpen] = useState(false);
+  const [characterSubTab, setCharacterSubTab] = useState<'browse' | 'my-listings' | 'list'>('browse');
 
   const handleCurrencyChange = (value: MarketplaceAcceptedCurrency) => {
     setAcceptedCurrency(value);
@@ -187,7 +234,7 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
       onCloseButton={() => {
         if (onClose) onClose();
       }}
-      width="800px"
+      width="920px"
       cancelDrag="#MarketContainer, .rpgui-dropdown-imp, input, .empty-slot, button"
       scale={scale}
     >
@@ -208,6 +255,11 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
             label: 'Buy',
             icon: <ShoppingCart width={18} height={18} />,
           },
+          {
+            id: 'characters',
+            label: 'Characters',
+            icon: <User width={18} height={18} />,
+          },
           {
             id: 'history',
             label: 'History',
@@ -236,6 +288,84 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
         <BuyPanel {...props} />
       )}
 
+      {activeTab === 'characters' && (
+        <>
+          <CharacterSubTabs>
+            <CharacterSubTab
+              $active={characterSubTab === 'browse'}
+              onClick={() => setCharacterSubTab('browse')}
+              type="button"
+            >
+              Browse
+            </CharacterSubTab>
+            <CharacterSubTab
+              $active={characterSubTab === 'my-listings'}
+              onClick={() => setCharacterSubTab('my-listings')}
+              type="button"
+            >
+              My Listings
+            </CharacterSubTab>
+            <CharacterSubTab
+              $active={characterSubTab === 'list'}
+              onClick={() => setCharacterSubTab('list')}
+              type="button"
+            >
+              List Character
+            </CharacterSubTab>
+          </CharacterSubTabs>
+
+          {characterSubTab === 'browse' && (
+            <CharacterMarketplacePanel
+              characterListings={characterListings ?? []}
+              totalCount={characterListingsTotal ?? 0}
+              currentPage={characterListingsPage ?? 1}
+              itemsPerPage={characterListingsItemsPerPage ?? 10}
+              onPageChange={onCharacterListingsPageChange ?? (() => {})}
+              onCharacterBuy={onCharacterBuy ?? (() => {})}
+              atlasJSON={props.atlasJSON}
+              atlasIMG={props.atlasIMG}
+              characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}
+              characterAtlasIMG={characterAtlasIMG ?? props.atlasIMG}
+              enableHotkeys={props.enableHotkeys}
+              disableHotkeys={props.disableHotkeys}
+              nameFilter={characterNameFilter}
+              onNameFilterChange={onCharacterNameFilterChange}
+              isLoading={characterListingsLoading}
+            />
+          )}
+
+          {characterSubTab === 'my-listings' && (
+            <MyCharacterListingsPanel
+              myCharacterListings={myCharacterListings ?? []}
+              totalCount={myCharacterListingsTotal ?? 0}
+              currentPage={myCharacterListingsPage ?? 1}
+              itemsPerPage={10}
+              onPageChange={onMyCharacterListingsPageChange ?? (() => {})}
+              onCharacterDelist={onCharacterDelist ?? (() => {})}
+              atlasJSON={props.atlasJSON}
+              atlasIMG={props.atlasIMG}
+              characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}
+              characterAtlasIMG={characterAtlasIMG ?? props.atlasIMG}
+              enableHotkeys={props.enableHotkeys}
+              disableHotkeys={props.disableHotkeys}
+            />
+          )}
+
+          {characterSubTab === 'list' && (
+            <CharacterListingForm
+              accountCharacters={accountCharacters ?? []}
+              onCharacterList={onCharacterList ?? (() => {})}
+              atlasJSON={props.atlasJSON}
+              atlasIMG={props.atlasIMG}
+              characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}
+              characterAtlasIMG={characterAtlasIMG ?? props.atlasIMG}
+              enableHotkeys={props.enableHotkeys}
+              disableHotkeys={props.disableHotkeys}
+            />
+          )}
+        </>
+      )}
+
       {activeTab === 'sell' && (
         <ManagmentPanel {...props} acceptedCurrency={acceptedCurrency} />
       )}
@@ -323,3 +453,34 @@ const PagerContainer = styled.div`
   margin: 6px auto 0 auto;
   padding: 4px 10px;
 `;
+
+const CharacterSubTabs = styled.div`
+  display: flex;
+  gap: 8px;
+  width: 95%;
+  margin: 10px auto 0 auto;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+`;
+
+const CharacterSubTab = styled.button<{ $active: boolean }>`
+  flex: 1;
+  padding: 8px 12px;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.45rem;
+  border-radius: 4px;
+  border: 1px solid ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.12)')};
+  background: ${({ $active }) => ($active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)')};
+  color: ${({ $active }) => ($active ? '#f59e0b' : '#777')};
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+
+  &:hover {
+    border-color: ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.3)')};
+    color: ${({ $active }) => ($active ? '#f59e0b' : '#bbb')};
+  }
+`;

package/src/components/Marketplace/MyCharacterListingsPanel.tsx

@@ -0,0 +1,327 @@
+import { formatDCAmount, ICharacterListing } from '@rpg-engine/shared';
+import { Delete } from 'pixelarticons/react/Delete';
+import { User } from 'pixelarticons/react/User';
+import React, { useEffect, useRef, useState } from 'react';
+import styled from 'styled-components';
+import { ConfirmModal } from '../ConfirmModal';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+
+export interface IMyCharacterListingsPanelProps {
+  myCharacterListings: ICharacterListing[];
+  totalCount: number;
+  currentPage: number;
+  itemsPerPage: number;
+  onPageChange: (page: number) => void;
+  onCharacterDelist: (listingId: string) => void;
+  /** Items atlas — for UI sprites like the DC coin */
+  atlasJSON: any;
+  atlasIMG: any;
+  /** Entities atlas — for character sprites */
+  characterAtlasJSON: any;
+  characterAtlasIMG: any;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
+}
+
+export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps> = ({
+  myCharacterListings,
+  totalCount,
+  currentPage,
+  itemsPerPage,
+  onPageChange,
+  onCharacterDelist,
+  atlasJSON,
+  atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
+  enableHotkeys,
+}) => {
+  const [delistingListingId, setDelistingListingId] = useState<string | null>(null);
+  const itemsContainer = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    itemsContainer.current?.scrollTo(0, 0);
+  }, [currentPage]);
+
+  const handleDelistClick = (listingId: string) => {
+    setDelistingListingId(listingId);
+  };
+
+  const handleDelistConfirm = () => {
+    if (delistingListingId) {
+      onCharacterDelist(delistingListingId);
+      setDelistingListingId(null);
+      enableHotkeys?.();
+    }
+  };
+
+
+  const getFormattedDate = (date: Date) => {
+    return new Date(date).toLocaleDateString();
+  };
+
+  return (
+    <>
+      {delistingListingId && (
+        <ConfirmModal
+          onClose={() => {
+            setDelistingListingId(null);
+            enableHotkeys?.();
+          }}
+          onConfirm={handleDelistConfirm}
+          message="Are you sure you want to delist this character?"
+        />
+      )}
+
+      <ListingsContainer id="MarketContainer" ref={itemsContainer}>
+        {myCharacterListings.length === 0 ? (
+          <EmptyState>
+            <User width={32} height={32} />
+            <EmptyText>You have no listed characters.</EmptyText>
+            <EmptySubtext>Use the "List Character" tab to list a character for sale.</EmptySubtext>
+          </EmptyState>
+        ) : (
+          <ListingsGrid>
+            {myCharacterListings.map((listing) => (
+              <CharacterListingCard key={listing._id}>
+                <CharacterSprite>
+                  <SpriteFromAtlas
+                    atlasIMG={characterAtlasIMG}
+                    atlasJSON={characterAtlasJSON}
+                    spriteKey={`${listing.characterSnapshot.textureKey}/down/standing/0.png`}
+                    imgScale={3}
+                    height={64}
+                    width={64}
+                  />
+                </CharacterSprite>
+                <CharacterInfo>
+                  <CharacterName>{listing.characterSnapshot.name || 'Unknown'}</CharacterName>
+                  <CharacterMeta>Level {listing.characterSnapshot.level}</CharacterMeta>
+                  <ListingPrice>
+                    <DCCoinWrapper>
+                      <SpriteFromAtlas
+                        atlasIMG={atlasIMG}
+                        atlasJSON={atlasJSON}
+                        spriteKey="others/definya-coin.png"
+                        imgScale={1}
+                      />
+                    </DCCoinWrapper>
+                    {formatDCAmount(listing.price)} DC
+                  </ListingPrice>
+                  <ListingMeta>Listed {getFormattedDate(listing.createdAt)}</ListingMeta>
+                  {listing.isBeingBought && (
+                    <ListingStatus $status="pending">Sale Pending</ListingStatus>
+                  )}
+                </CharacterInfo>
+                <ActionButton
+                  icon={<Delete width={16} height={16} />}
+                  label="Delist"
+                  onClick={() => handleDelistClick(listing._id)}
+                  iconColor="#ef4444"
+                  disabled={listing.isBeingBought}
+                />
+              </CharacterListingCard>
+            ))}
+          </ListingsGrid>
+        )}
+      </ListingsContainer>
+
+      {totalCount > itemsPerPage && (
+        <PagerFooter>
+          <Pagination>
+            {Array.from({ length: Math.ceil(totalCount / itemsPerPage) }, (_, i) => i + 1).map(page => (
+              <PageButton
+                key={page}
+                $active={currentPage === page}
+                type="button"
+                onClick={() => onPageChange(page)}
+              >
+                {page}
+              </PageButton>
+            ))}
+          </Pagination>
+        </PagerFooter>
+      )}
+    </>
+  );
+};
+
+const ListingsContainer = styled.div`
+  overflow-y: scroll;
+  overflow-x: hidden;
+  height: 390px;
+  width: 95%;
+  margin: 1rem auto 0 auto;
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+
+  @media (max-width: 950px) {
+    height: 250px;
+  }
+`;
+
+const ListingsGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+  padding: 12px;
+`;
+
+const CharacterListingCard = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
+  padding: 12px;
+`;
+
+const CharacterSprite = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  image-rendering: pixelated;
+`;
+
+const CharacterInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+`;
+
+const CharacterName = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem;
+  color: #f3f4f6;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const CharacterMeta = styled.span`
+  font-size: 0.45rem;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const ListingPrice = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  color: #fef08a;
+`;
+
+const DCCoinWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+const ListingMeta = styled.span`
+  font-size: 0.38rem;
+  color: #52525b;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const ListingStatus = styled.span<{ $status: 'pending' | 'sold' }>`
+  font-size: 0.38rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  ${({ $status }) =>
+    $status === 'pending'
+      ? `
+          background: rgba(239, 68, 68, 0.2);
+          border: 1px solid rgba(239, 68, 68, 0.4);
+          color: #ef4444;
+        `
+      : `
+          background: rgba(34, 197, 94, 0.2);
+          border: 1px solid rgba(34, 197, 94, 0.4);
+          color: #22c55e;
+        `}
+`;
+
+const ActionButton = styled(CTAButton)<{ disabled?: boolean }>`
+  padding: 6px 12px;
+  height: 28px;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+
+  span {
+    font-size: 0.5rem;
+  }
+
+  svg {
+    font-size: 1rem;
+  }
+`;
+
+const PagerFooter = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 0 4px;
+  min-height: 36px;
+  width: 95%;
+  margin: 0 auto;
+`;
+
+const Pagination = styled.div`
+  display: flex;
+  gap: 6px;
+`;
+
+const PageButton = styled.button<{ $active: boolean }>`
+  padding: 6px 10px;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.5rem;
+  border-radius: 4px;
+  border: 1px solid ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.12)')};
+  background: ${({ $active }) => ($active ? 'rgba(245,158,11,0.15)' : 'rgba(0,0,0,0.3)')};
+  color: ${({ $active }) => ($active ? '#f59e0b' : '#777')};
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, color 0.15s;
+
+  &:hover {
+    border-color: ${({ $active }) => ($active ? '#f59e0b' : 'rgba(255,255,255,0.3)')};
+    color: ${({ $active }) => ($active ? '#f59e0b' : '#bbb')};
+  }
+`;
+
+const EmptyState = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  height: 100%;
+  min-height: 200px;
+`;
+
+const EmptyText = styled.span`
+  font-size: 0.55rem;
+  color: #71717a;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+const EmptySubtext = styled.span`
+  font-size: 0.45rem;
+  color: #52525b;
+  text-transform: none;
+  letter-spacing: 0.5px;
+  text-align: center;
+  max-width: 280px;
+`;

package/src/components/shared/DCRateStrip.tsx

@@ -0,0 +1,67 @@
+import { DC_TO_GOLD_SWAP_RATE } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+
+/** 100 DC = $1 USD */
+const DC_TO_USD = 100;
+
+export const DCRateStrip: React.FC = () => (
+  <RateStrip>
+    <RateItem>
+      <RateNum>1 DC</RateNum>
+      <RateSep>=</RateSep>
+      <RateVal>{DC_TO_GOLD_SWAP_RATE.toLocaleString()} Gold</RateVal>
+    </RateItem>
+    <RateDivider />
+    <RateItem>
+      <RateNum>{DC_TO_USD} DC</RateNum>
+      <RateSep>=</RateSep>
+      <RateVal>1 USD</RateVal>
+    </RateItem>
+    <RateDivider />
+    <RateItem>
+      <RateNum>1 USD</RateNum>
+      <RateSep>=</RateSep>
+      <RateVal>{(DC_TO_USD * DC_TO_GOLD_SWAP_RATE / 1000).toFixed(0)}K Gold</RateVal>
+    </RateItem>
+  </RateStrip>
+);
+
+const RateStrip = styled.div`
+  display: flex;
+  align-items: center;
+  border-top: 1px solid rgba(245, 158, 11, 0.1);
+  padding-top: 8px;
+`;
+
+const RateItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  flex: 1;
+  justify-content: center;
+`;
+
+const RateDivider = styled.div`
+  width: 1px;
+  height: 12px;
+  background: rgba(245, 158, 11, 0.2);
+`;
+
+const RateNum = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 6px !important;
+  color: rgba(255, 255, 255, 0.5) !important;
+`;
+
+const RateSep = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 6px !important;
+  color: rgba(255, 255, 255, 0.2) !important;
+`;
+
+const RateVal = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 6px !important;
+  color: rgba(254, 240, 138, 0.6) !important;
+`;

package/src/components/shared/ItemRowWrapper.tsx

@@ -14,6 +14,8 @@ export const ItemRowWrapper = styled.div<{ $isHighlighted?: boolean }>`
   transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
   position: relative;
   overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
 
   /* Subtle inner glow for premium feel */
   &::before {
@@ -30,7 +32,7 @@ export const ItemRowWrapper = styled.div<{ $isHighlighted?: boolean }>`
     border-color: ${p => p.$isHighlighted ? 'rgba(255, 215, 0, 0.6)' : 'rgba(245, 158, 11, 0.3)'};
     border-left-color: ${p => p.$isHighlighted ? '#fcd34d' : '#f59e0b'};
     box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 4px 16px rgba(0, 0, 0, 0.4);
-    transform: scale(1.01) translateY(-1px);
+    transform: translateY(-1px);
     z-index: 10;
   }
 `;