@rpg-engine/long-bow 0.8.182 → 0.8.184

package/src/components/Marketplace/CharacterMarketplaceRows.tsx

@@ -1,4 +1,4 @@
-import { ICharacterListing } from '@rpg-engine/shared';
+import { formatDCAmount, ICharacterListing } from '@rpg-engine/shared';
 import { Coins } from 'pixelarticons/react/Coins';
 import React from 'react';
 import styled from 'styled-components';
@@ -9,8 +9,12 @@ import { Ellipsis } from '../shared/Ellipsis';
 
 export interface ICharacterMarketplaceRowsProps {
   listing: ICharacterListing;
+  /** Items atlas — for UI sprites like the DC coin */
   atlasJSON: any;
   atlasIMG: any;
+  /** Entities atlas — for character sprites */
+  characterAtlasJSON: any;
+  characterAtlasIMG: any;
   onCharacterBuy?: () => void;
   onCharacterDelist?: () => void;
   disabled?: boolean;
@@ -20,6 +24,8 @@ export const CharacterMarketplaceRows: React.FC<ICharacterMarketplaceRowsProps>
   listing,
   atlasJSON,
   atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
   onCharacterBuy,
   onCharacterDelist,
   disabled,
@@ -32,8 +38,8 @@ export const CharacterMarketplaceRows: React.FC<ICharacterMarketplaceRowsProps>
         <SpriteContainer>
           <CharacterSprite>
             <SpriteFromAtlas
-              atlasIMG={atlasIMG}
-              atlasJSON={atlasJSON}
+              atlasIMG={characterAtlasIMG}
+              atlasJSON={characterAtlasJSON}
               spriteKey={`${characterSnapshot.textureKey}/down/standing/0.png`}
               imgScale={2.5}
               height={56}
@@ -53,15 +59,15 @@ export const CharacterMarketplaceRows: React.FC<ICharacterMarketplaceRowsProps>
             <CharacterClass>{characterSnapshot.class}</CharacterClass>
           )}
           <PriceRow>
-            <GoldIcon>
+            <DCCoinWrapper>
               <SpriteFromAtlas
                 atlasIMG={atlasIMG}
                 atlasJSON={atlasJSON}
-                spriteKey="others/gold-coin-qty-5.png"
+                spriteKey="others/definya-coin.png"
                 imgScale={1}
               />
-            </GoldIcon>
-            <GoldPrice>{price.toLocaleString()}</GoldPrice>
+            </DCCoinWrapper>
+            <DCPrice>{formatDCAmount(price)}</DCPrice>
           </PriceRow>
           {isBeingBought && (
             <PendingBadge>Sale Pending</PendingBadge>
@@ -142,7 +148,7 @@ const PriceRow = styled.div`
   margin-top: 0.2rem;
 `;
 
-const GoldIcon = styled.span`
+const DCCoinWrapper = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -151,7 +157,7 @@ const GoldIcon = styled.span`
   left: -0.4rem;
 `;
 
-const GoldPrice = styled.span`
+const DCPrice = styled.span`
   font-family: 'Press Start 2P', cursive;
   font-size: 0.55rem !important;
   color: #fef08a;
@@ -180,6 +186,8 @@ export interface IGroupedCharacterMarketplaceRowProps {
   otherListings: ICharacterListing[];
   atlasJSON: any;
   atlasIMG: any;
+  characterAtlasJSON: any;
+  characterAtlasIMG: any;
   onBuy: (id: string) => void;
   currentCharacterId?: string;
 }
@@ -189,6 +197,8 @@ export const GroupedCharacterMarketplaceRow: React.FC<IGroupedCharacterMarketpla
   otherListings,
   atlasJSON,
   atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
   onBuy,
   currentCharacterId,
 }) => {
@@ -201,6 +211,8 @@ export const GroupedCharacterMarketplaceRow: React.FC<IGroupedCharacterMarketpla
         listing={listing}
         atlasJSON={atlasJSON}
         atlasIMG={atlasIMG}
+        characterAtlasJSON={characterAtlasJSON}
+        characterAtlasIMG={characterAtlasIMG}
         onCharacterBuy={isOwnListing ? undefined : () => onBuy(listing._id)}
         disabled={isOwnListing}
       />

package/src/components/Marketplace/Marketplace.tsx

@@ -117,6 +117,9 @@ export interface IMarketPlaceProps {
   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;
@@ -131,8 +134,6 @@ export interface IMarketPlaceProps {
   onCharacterList?: (characterId: string, price: number) => void;
   onCharacterDelist?: (listingId: string) => void;
   accountCharacters?: ICharacter[];
-  onCharacterSelectToList?: (character: ICharacter) => void;
-  selectedCharacterToList?: ICharacter | null;
   characterListingsLoading?: boolean;
   characterNameFilter?: string;
   onCharacterNameFilterChange?: (name: string) => void;
@@ -195,11 +196,11 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
     onCharacterDelist,
     onCharacterList,
     accountCharacters = [],
-    onCharacterSelectToList,
-    selectedCharacterToList,
     characterListingsLoading = false,
     characterNameFilter = '',
     onCharacterNameFilterChange,
+    characterAtlasIMG,
+    characterAtlasJSON,
   } = props;
 
   const [activeTab, setActiveTab] = useState<ActiveTab>('marketplace');
@@ -323,6 +324,8 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
               onCharacterBuy={onCharacterBuy ?? (() => {})}
               atlasJSON={props.atlasJSON}
               atlasIMG={props.atlasIMG}
+              characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}
+              characterAtlasIMG={characterAtlasIMG ?? props.atlasIMG}
               enableHotkeys={props.enableHotkeys}
               disableHotkeys={props.disableHotkeys}
               nameFilter={characterNameFilter}
@@ -341,6 +344,8 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
               onCharacterDelist={onCharacterDelist ?? (() => {})}
               atlasJSON={props.atlasJSON}
               atlasIMG={props.atlasIMG}
+              characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}
+              characterAtlasIMG={characterAtlasIMG ?? props.atlasIMG}
               enableHotkeys={props.enableHotkeys}
               disableHotkeys={props.disableHotkeys}
             />
@@ -349,11 +354,11 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
           {characterSubTab === 'list' && (
             <CharacterListingForm
               accountCharacters={accountCharacters ?? []}
-              selectedCharacterToList={selectedCharacterToList ?? null}
-              onCharacterSelectToList={onCharacterSelectToList ?? (() => {})}
               onCharacterList={onCharacterList ?? (() => {})}
               atlasJSON={props.atlasJSON}
               atlasIMG={props.atlasIMG}
+              characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}
+              characterAtlasIMG={characterAtlasIMG ?? props.atlasIMG}
               enableHotkeys={props.enableHotkeys}
               disableHotkeys={props.disableHotkeys}
             />

package/src/components/Marketplace/MyCharacterListingsPanel.tsx

@@ -1,4 +1,4 @@
-import { ICharacterListing } from '@rpg-engine/shared';
+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';
@@ -14,8 +14,12 @@ export interface IMyCharacterListingsPanelProps {
   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;
 }
@@ -29,6 +33,8 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
   onCharacterDelist,
   atlasJSON,
   atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
   enableHotkeys,
 }) => {
   const [delistingListingId, setDelistingListingId] = useState<string | null>(null);
@@ -50,9 +56,6 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
     }
   };
 
-  const getListingPrice = (listing: ICharacterListing): string => {
-    return listing.price.toLocaleString();
-  };
 
   const getFormattedDate = (date: Date) => {
     return new Date(date).toLocaleDateString();
@@ -84,8 +87,8 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
               <CharacterListingCard key={listing._id}>
                 <CharacterSprite>
                   <SpriteFromAtlas
-                    atlasIMG={atlasIMG}
-                    atlasJSON={atlasJSON}
+                    atlasIMG={characterAtlasIMG}
+                    atlasJSON={characterAtlasJSON}
                     spriteKey={`${listing.characterSnapshot.textureKey}/down/standing/0.png`}
                     imgScale={3}
                     height={64}
@@ -96,15 +99,15 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
                   <CharacterName>{listing.characterSnapshot.name || 'Unknown'}</CharacterName>
                   <CharacterMeta>Level {listing.characterSnapshot.level}</CharacterMeta>
                   <ListingPrice>
-                    <GoldIcon>
+                    <DCCoinWrapper>
                       <SpriteFromAtlas
                         atlasIMG={atlasIMG}
                         atlasJSON={atlasJSON}
-                        spriteKey="others/gold-coin-qty-5.png"
+                        spriteKey="others/definya-coin.png"
                         imgScale={1}
                       />
-                    </GoldIcon>
-                    {getListingPrice(listing)} Gold
+                    </DCCoinWrapper>
+                    {formatDCAmount(listing.price)} DC
                   </ListingPrice>
                   <ListingMeta>Listed {getFormattedDate(listing.createdAt)}</ListingMeta>
                   {listing.isBeingBought && (
@@ -216,13 +219,11 @@ const ListingPrice = styled.div`
   color: #fef08a;
 `;
 
-const GoldIcon = styled.span`
+const DCCoinWrapper = styled.span`
   display: flex;
   align-items: center;
   justify-content: center;
-  position: relative;
-  top: -0.4rem;
-  left: -0.3rem;
+  flex-shrink: 0;
 `;
 
 const ListingMeta = styled.span`

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/RadioOption.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export interface IRadioOptionProps {
+  selected: boolean;
+  disabled?: boolean;
+  onSelect: () => void;
+  children: React.ReactNode;
+}
+
+/**
+ * A selectable row with an amber radio circle indicator.
+ * Used for single-select option lists throughout the Marketplace UI.
+ * Export `RadioCircle` separately so consumers can compose custom layouts.
+ */
+export const RadioOption: React.FC<IRadioOptionProps> = ({
+  selected,
+  disabled = false,
+  onSelect,
+  children,
+}) => {
+  const handleClick = () => {
+    if (!disabled) {
+      onSelect();
+    }
+  };
+
+  return (
+    <RadioOptionContainer
+      $selected={selected}
+      $disabled={disabled}
+      onClick={handleClick}
+      role="radio"
+      aria-checked={selected}
+      aria-disabled={disabled}
+    >
+      <RadioCircle $selected={selected} />
+      {children}
+    </RadioOptionContainer>
+  );
+};
+
+const RadioOptionContainer = styled.div<{ $selected: boolean; $disabled?: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  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: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover {
+    border-color: ${({ $disabled }) => ($disabled ? 'rgba(255,255,255,0.15)' : '#f59e0b')};
+  }
+`;
+
+export const RadioCircle = styled.div<{ $selected: boolean }>`
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.4)')};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  &::after {
+    content: '';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: #f59e0b;
+    opacity: ${({ $selected }) => ($selected ? 1 : 0)};
+    transition: opacity 0.15s;
+  }
+`;
+
+/** Convenience wrapper for option label text with RPGUI font override. */
+export const RadioOptionLabel = styled.span<{ $disabled?: boolean }>`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.65rem !important;
+  color: ${({ $disabled }) => ($disabled ? 'rgba(255,255,255,0.4)' : '#ffffff')} !important;
+`;
+
+/** Convenience wrapper for option sub-text with RPGUI font override. */
+export const RadioOptionSub = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.55rem !important;
+  color: rgba(255, 255, 255, 0.5) !important;
+`;

package/src/stories/Features/marketplace/CharacterListingModal.stories.tsx

@@ -0,0 +1,131 @@
+import { ICharacter } from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React, { useState } from 'react';
+import { CharacterListingModal, ICharacterListingModalProps } from '../../../components/Marketplace/CharacterListingModal';
+import { RPGUIRoot } from '../../..';
+import entitiesAtlasJSON from '../../../mocks/atlas/entities/entities.json';
+import entitiesAtlasIMG from '../../../mocks/atlas/entities/entities.png';
+import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
+import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
+
+const meta: Meta<ICharacterListingModalProps> = {
+  title: 'Features/Marketplace/CharacterListingModal',
+  component: CharacterListingModal,
+};
+
+export default meta;
+
+const mockCharacters: ICharacter[] = [
+  {
+    _id: 'char-1',
+    name: 'Sir Galahad',
+    textureKey: 'black-knight',
+    isListedForSale: false,
+    tradedAt: undefined,
+    skills: { level: 25 } as any,
+  } as ICharacter,
+  {
+    _id: 'char-2',
+    name: 'Merlin Jr.',
+    textureKey: 'pink-mage-1',
+    isListedForSale: false,
+    tradedAt: undefined,
+    skills: { level: 30 } as any,
+  } as ICharacter,
+  {
+    _id: 'char-3',
+    name: 'ShadowStep',
+    textureKey: 'redhair-girl-1',
+    isListedForSale: false,
+    tradedAt: undefined,
+    skills: { level: 18 } as any,
+  } as ICharacter,
+];
+
+const mockCharactersWithListed: ICharacter[] = [
+  ...mockCharacters,
+  {
+    _id: 'char-4',
+    name: 'AlreadyListed',
+    textureKey: 'dragon-knight',
+    isListedForSale: true,
+    tradedAt: undefined,
+    skills: { level: 40 } as any,
+  } as ICharacter,
+];
+
+const ModalWrapper: React.FC<Omit<ICharacterListingModalProps, 'isOpen' | 'onClose' | 'onCharacterList'>> = (props) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [lastListed, setLastListed] = useState<string | null>(null);
+
+  return (
+    <RPGUIRoot>
+      <div style={{ padding: '20px', fontFamily: 'monospace', fontSize: '12px', color: '#fff' }}>
+        {lastListed ? (
+          <p>✅ Listed: {lastListed}</p>
+        ) : (
+          <p>Click "List" to submit the form</p>
+        )}
+        <button
+          style={{ marginTop: 8, padding: '6px 12px', cursor: 'pointer' }}
+          onClick={() => setIsOpen(true)}
+        >
+          Reopen Modal
+        </button>
+      </div>
+      <CharacterListingModal
+        {...props}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onCharacterList={(id, price) => {
+          setLastListed(`ID=${id}, Price=${price} DC`);
+          setIsOpen(false);
+        }}
+      />
+    </RPGUIRoot>
+  );
+};
+
+export const WithMultipleCharacters: Story = () => (
+  <ModalWrapper
+    accountCharacters={mockCharacters}
+    atlasJSON={itemsAtlasJSON}
+    atlasIMG={itemsAtlasIMG}
+    characterAtlasJSON={entitiesAtlasJSON}
+    characterAtlasIMG={entitiesAtlasIMG}
+  />
+);
+WithMultipleCharacters.storyName = 'Multiple eligible characters';
+
+export const WithAlreadyListedFiltered: Story = () => (
+  <ModalWrapper
+    accountCharacters={mockCharactersWithListed}
+    atlasJSON={itemsAtlasJSON}
+    atlasIMG={itemsAtlasIMG}
+    characterAtlasJSON={entitiesAtlasJSON}
+    characterAtlasIMG={entitiesAtlasIMG}
+  />
+);
+WithAlreadyListedFiltered.storyName = 'Some characters already listed (filtered out)';
+
+export const NoEligibleCharacters: Story = () => (
+  <ModalWrapper
+    accountCharacters={[]}
+    atlasJSON={itemsAtlasJSON}
+    atlasIMG={itemsAtlasIMG}
+    characterAtlasJSON={entitiesAtlasJSON}
+    characterAtlasIMG={entitiesAtlasIMG}
+  />
+);
+NoEligibleCharacters.storyName = 'No eligible characters';
+
+export const SingleCharacter: Story = () => (
+  <ModalWrapper
+    accountCharacters={[mockCharacters[0]]}
+    atlasJSON={itemsAtlasJSON}
+    atlasIMG={itemsAtlasIMG}
+    characterAtlasJSON={entitiesAtlasJSON}
+    characterAtlasIMG={entitiesAtlasIMG}
+  />
+);
+SingleCharacter.storyName = 'Single eligible character';