@rpg-engine/long-bow 0.8.187 → 0.8.189

package/dist/stories/Features/marketplace/CharacterMarketplace.stories.d.ts

@@ -7,4 +7,5 @@ export declare const CharacterBrowseEmpty: Story;
 export declare const CharacterBrowseFiltered: Story;
 export declare const MyCharacterListings: Story;
 export declare const MyCharacterListingsEmpty: Story;
+export declare const MyCharacterListingsNoEligible: Story;
 export declare const CharacterListingPending: Story;

package/package.json

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

package/src/components/Marketplace/CharacterDetailModal.tsx

@@ -117,6 +117,7 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
                 imgScale={4}
                 height={96}
                 width={96}
+                centered
               />
             </SpriteContainer>
             <HeroInfo>
@@ -135,23 +136,22 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
 
           <Divider />
 
-          {topSkills.length > 0 && (
-            <Section>
-              <SectionTitle>Skills</SectionTitle>
-              <SkillsGrid>
-                {topSkills.map(([name, value]) => (
-                  <SkillRow key={name}>
-                    <SkillName>{name}</SkillName>
-                    <SkillValue>{value}</SkillValue>
-                  </SkillRow>
-                ))}
-              </SkillsGrid>
-            </Section>
-          )}
-
-          {snap.equipment?.length > 0 && (
-            <>
-              <Divider />
+          <MetaColumns>
+            {topSkills.length > 0 && (
+              <Section>
+                <SectionTitle>Skills</SectionTitle>
+                <SkillsList>
+                  {topSkills.map(([name, value]) => (
+                    <SkillRow key={name}>
+                      <SkillName>{name}</SkillName>
+                      <SkillValue>{value}</SkillValue>
+                    </SkillRow>
+                  ))}
+                </SkillsList>
+              </Section>
+            )}
+
+            {snap.equipment?.length > 0 && (
               <Section>
                 <SectionTitle>Equipment</SectionTitle>
                 <EquipmentList>
@@ -164,8 +164,8 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
                   ))}
                 </EquipmentList>
               </Section>
-            </>
-          )}
+            )}
+          </MetaColumns>
 
           <Divider />
 
@@ -179,6 +179,7 @@ export const CharacterDetailModal: React.FC<ICharacterDetailModalProps> = ({
                     atlasJSON={atlasJSON}
                     spriteKey="others/definya-coin.png"
                     imgScale={1}
+                    centered
                   />
                 </DCCoinWrapper>
                 <PriceAmount>{formatDCAmount(listing.price)} DC</PriceAmount>
@@ -227,8 +228,8 @@ const ModalContent = styled.div`
   border: 2px solid #f59e0b;
   border-radius: 8px;
   padding: 20px 24px;
-  width: 480px;
-  max-width: 94%;
+  width: 580px;
+  max-width: 96%;
   max-height: 85dvh;
   display: flex;
   flex-direction: column;
@@ -348,10 +349,17 @@ const SectionTitle = styled.span`
   letter-spacing: 1px;
 `;
 
-const SkillsGrid = styled.div`
+const MetaColumns = styled.div`
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 4px 12px;
+  grid-template-columns: 1fr 1fr;
+  gap: 16px;
+  align-items: start;
+`;
+
+const SkillsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
 `;
 
 const SkillRow = styled.div`

package/src/components/Marketplace/CharacterListingModal.tsx

@@ -173,6 +173,7 @@ export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
                     atlasJSON={atlasJSON}
                     spriteKey="others/definya-coin.png"
                     imgScale={1}
+                    centered
                   />
                 </DCCoinWrapper>
                 <PricePreviewAmount>{Number(price).toLocaleString()} DC</PricePreviewAmount>

package/src/components/Marketplace/CharacterMarketplacePanel.tsx

@@ -81,6 +81,7 @@ export const CharacterMarketplacePanel: React.FC<ICharacterMarketplacePanelProps
         imgScale={3}
         height={64}
         width={64}
+        centered
       />
     );
   };
@@ -147,6 +148,7 @@ export const CharacterMarketplacePanel: React.FC<ICharacterMarketplacePanelProps
                         atlasJSON={atlasJSON}
                         spriteKey="others/definya-coin.png"
                         imgScale={1}
+                        centered
                       />
                     </DCCoinWrapper>
                     {formatDCAmount(listing.price)} DC

package/src/components/Marketplace/Marketplace.tsx

@@ -342,6 +342,8 @@ export const Marketplace: React.FC<IMarketPlaceProps> = props => {
               itemsPerPage={10}
               onPageChange={onMyCharacterListingsPageChange ?? (() => {})}
               onCharacterDelist={onCharacterDelist ?? (() => {})}
+              accountCharacters={accountCharacters ?? []}
+              onCharacterList={onCharacterList ?? (() => {})}
               atlasJSON={props.atlasJSON}
               atlasIMG={props.atlasIMG}
               characterAtlasJSON={characterAtlasJSON ?? props.atlasJSON}

package/src/components/Marketplace/MyCharacterListingsPanel.tsx

@@ -1,11 +1,14 @@
-import { formatDCAmount, ICharacterListing } from '@rpg-engine/shared';
+import { formatDCAmount, ICharacter, ICharacterListing } from '@rpg-engine/shared';
 import { Delete } from 'pixelarticons/react/Delete';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
 import { User } from 'pixelarticons/react/User';
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { ConfirmModal } from '../ConfirmModal';
+import { Pagination } from '../shared/Pagination/Pagination';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { CharacterListingModal } from './CharacterListingModal';
 
 export interface IMyCharacterListingsPanelProps {
   myCharacterListings: ICharacterListing[];
@@ -14,6 +17,9 @@ export interface IMyCharacterListingsPanelProps {
   itemsPerPage: number;
   onPageChange: (page: number) => void;
   onCharacterDelist: (listingId: string) => void;
+  /** Characters that can be listed (used for the List a Character modal) */
+  accountCharacters: ICharacter[];
+  onCharacterList: (characterId: string, price: number) => void;
   /** Items atlas — for UI sprites like the DC coin */
   atlasJSON: any;
   atlasIMG: any;
@@ -31,60 +37,81 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
   itemsPerPage,
   onPageChange,
   onCharacterDelist,
+  accountCharacters,
+  onCharacterList,
   atlasJSON,
   atlasIMG,
   characterAtlasJSON,
   characterAtlasIMG,
   enableHotkeys,
+  disableHotkeys,
 }) => {
-  const [delistingListingId, setDelistingListingId] = useState<string | null>(null);
+  const [delistingId, setDelistingId] = useState<string | null>(null);
+  const [isListingModalOpen, setIsListingModalOpen] = useState(false);
   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);
+    if (delistingId) {
+      onCharacterDelist(delistingId);
+      setDelistingId(null);
       enableHotkeys?.();
     }
   };
 
-
-  const getFormattedDate = (date: Date) => {
-    return new Date(date).toLocaleDateString();
-  };
+  const eligibleCount = accountCharacters.filter(
+    c => !c.isListedForSale && !c.tradedAt
+  ).length;
 
   return (
     <>
-      {delistingListingId && (
+      {delistingId && (
         <ConfirmModal
-          onClose={() => {
-            setDelistingListingId(null);
-            enableHotkeys?.();
-          }}
+          onClose={() => { setDelistingId(null); enableHotkeys?.(); }}
           onConfirm={handleDelistConfirm}
           message="Are you sure you want to delist this character?"
         />
       )}
 
-      <ListingsContainer id="MarketContainer" ref={itemsContainer}>
+      <CharacterListingModal
+        isOpen={isListingModalOpen}
+        onClose={() => setIsListingModalOpen(false)}
+        accountCharacters={accountCharacters}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        characterAtlasJSON={characterAtlasJSON}
+        characterAtlasIMG={characterAtlasIMG}
+        onCharacterList={(id, price) => {
+          onCharacterList(id, price);
+          setIsListingModalOpen(false);
+        }}
+        enableHotkeys={enableHotkeys}
+        disableHotkeys={disableHotkeys}
+      />
+
+      <Toolbar>
+        <ListCharacterBtn
+          icon={<ShoppingBag width={16} height={16} />}
+          label={`List a Character${eligibleCount > 0 ? ` (${eligibleCount} eligible)` : ''}`}
+          onClick={() => setIsListingModalOpen(true)}
+          disabled={eligibleCount === 0}
+        />
+      </Toolbar>
+
+      <ListingsContainer 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>
+            <EmptyText>No listed characters.</EmptyText>
+            <EmptySubtext>Use the "List Character" tab to put a character up for sale.</EmptySubtext>
           </EmptyState>
         ) : (
           <ListingsGrid>
             {myCharacterListings.map((listing) => (
-              <CharacterListingCard key={listing._id}>
+              <CharacterListingCard key={listing._id} $isBeingBought={listing.isBeingBought}>
                 <CharacterSprite>
                   <SpriteFromAtlas
                     atlasIMG={characterAtlasIMG}
@@ -93,11 +120,14 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
                     imgScale={3}
                     height={64}
                     width={64}
+                    centered
                   />
                 </CharacterSprite>
                 <CharacterInfo>
                   <CharacterName>{listing.characterSnapshot.name || 'Unknown'}</CharacterName>
-                  <CharacterMeta>Level {listing.characterSnapshot.level}</CharacterMeta>
+                  <CharacterMeta>
+                    Lv.{listing.characterSnapshot.level} · {listing.characterSnapshot.class}
+                  </CharacterMeta>
                   <ListingPrice>
                     <DCCoinWrapper>
                       <SpriteFromAtlas
@@ -105,22 +135,24 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
                         atlasJSON={atlasJSON}
                         spriteKey="others/definya-coin.png"
                         imgScale={1}
+                        centered
                       />
                     </DCCoinWrapper>
                     {formatDCAmount(listing.price)} DC
                   </ListingPrice>
-                  <ListingMeta>Listed {getFormattedDate(listing.createdAt)}</ListingMeta>
-                  {listing.isBeingBought && (
-                    <ListingStatus $status="pending">Sale Pending</ListingStatus>
-                  )}
+                  <ListingDate>
+                    Listed {new Date(listing.createdAt).toLocaleDateString()}
+                  </ListingDate>
                 </CharacterInfo>
-                <ActionButton
-                  icon={<Delete width={16} height={16} />}
+                <DelistBtn
+                  icon={<Delete width={14} height={14} />}
                   label="Delist"
-                  onClick={() => handleDelistClick(listing._id)}
-                  iconColor="#ef4444"
+                  onClick={() => setDelistingId(listing._id)}
                   disabled={listing.isBeingBought}
                 />
+                {listing.isBeingBought && (
+                  <PendingBadge>Pending</PendingBadge>
+                )}
               </CharacterListingCard>
             ))}
           </ListingsGrid>
@@ -129,18 +161,11 @@ export const MyCharacterListingsPanel: React.FC<IMyCharacterListingsPanelProps>
 
       {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>
+          <Pagination
+            currentPage={currentPage}
+            totalPages={Math.ceil(totalCount / itemsPerPage)}
+            onPageChange={onPageChange}
+          />
         </PagerFooter>
       )}
     </>
@@ -169,15 +194,26 @@ const ListingsGrid = styled.div`
   padding: 12px;
 `;
 
-const CharacterListingCard = styled.div`
+const CharacterListingCard = styled.div<{ $isBeingBought?: boolean }>`
   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: 1px solid ${({ $isBeingBought }) =>
+    $isBeingBought ? 'rgba(239,68,68,0.3)' : 'rgba(255,255,255,0.08)'};
   border-radius: 8px;
   padding: 12px;
+  position: relative;
+  opacity: ${({ $isBeingBought }) => ($isBeingBought ? 0.7 : 1)};
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover {
+    border-color: ${({ $isBeingBought }) =>
+      $isBeingBought ? 'rgba(239,68,68,0.5)' : 'rgba(245,158,11,0.3)'};
+    background: ${({ $isBeingBought }) =>
+      $isBeingBought ? 'rgba(239,68,68,0.04)' : 'rgba(245,158,11,0.04)'};
+  }
 `;
 
 const CharacterSprite = styled.div`
@@ -185,6 +221,9 @@ const CharacterSprite = styled.div`
   align-items: center;
   justify-content: center;
   image-rendering: pixelated;
+  width: 64px;
+  height: 64px;
+  flex-shrink: 0;
 `;
 
 const CharacterInfo = styled.div`
@@ -193,19 +232,21 @@ const CharacterInfo = styled.div`
   align-items: center;
   gap: 4px;
   text-align: center;
+  width: 100%;
 `;
 
 const CharacterName = styled.span`
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.55rem;
-  color: #f3f4f6;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.55rem !important;
+  color: #f3f4f6 !important;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 `;
 
 const CharacterMeta = styled.span`
-  font-size: 0.45rem;
-  color: #888;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.45rem !important;
+  color: #888 !important;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 `;
@@ -213,10 +254,12 @@ const CharacterMeta = styled.span`
 const ListingPrice = styled.div`
   display: flex;
   align-items: center;
-  gap: 6px;
-  font-family: 'Press Start 2P', cursive;
-  font-size: 0.5rem;
-  color: #fef08a;
+  justify-content: center;
+  gap: 4px;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.5rem !important;
+  color: #fef08a !important;
+  line-height: 1;
 `;
 
 const DCCoinWrapper = styled.span`
@@ -224,48 +267,55 @@ const DCCoinWrapper = styled.span`
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
+  line-height: 0;
 `;
 
-const ListingMeta = styled.span`
-  font-size: 0.38rem;
-  color: #52525b;
+const ListingDate = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.35rem !important;
+  color: #52525b !important;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 `;
 
-const ListingStatus = styled.span<{ $status: 'pending' | 'sold' }>`
-  font-size: 0.38rem;
-  padding: 2px 6px;
+const DelistBtn = styled(CTAButton)`
+  width: 100%;
+  padding: 6px 10px;
+  height: 28px;
+  margin-top: 2px;
+
+  span { font-size: 0.48rem; }
+  svg  { font-size: 0.9rem; }
+`;
+
+const PendingBadge = styled.span`
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  background: rgba(239, 68, 68, 0.2);
+  border: 1px solid rgba(239, 68, 68, 0.4);
   border-radius: 4px;
+  padding: 2px 6px;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.35rem !important;
+  color: #ef4444 !important;
   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')};
+const Toolbar = styled.div`
+  width: 95%;
+  margin: 10px auto 0 auto;
+  display: flex;
+  justify-content: flex-end;
+`;
 
-  span {
-    font-size: 0.5rem;
-  }
+const ListCharacterBtn = styled(CTAButton)`
+  padding: 8px 16px;
+  height: 32px;
 
-  svg {
-    font-size: 1rem;
-  }
+  span { font-size: 0.5rem; }
+  svg  { font-size: 1rem; }
 `;
 
 const PagerFooter = styled.div`
@@ -278,28 +328,6 @@ const PagerFooter = styled.div`
   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;
@@ -311,17 +339,19 @@ const EmptyState = styled.div`
 `;
 
 const EmptyText = styled.span`
-  font-size: 0.55rem;
-  color: #71717a;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.48rem !important;
+  color: #71717a !important;
   text-transform: uppercase;
   letter-spacing: 1px;
 `;
 
 const EmptySubtext = styled.span`
-  font-size: 0.45rem;
-  color: #52525b;
-  text-transform: none;
-  letter-spacing: 0.5px;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.38rem !important;
+  color: #52525b !important;
   text-align: center;
-  max-width: 280px;
+  max-width: 260px;
+  line-height: 1.6;
 `;
+

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

@@ -1,4 +1,4 @@
-import { ICharacterListing } from '@rpg-engine/shared';
+import { ICharacter, ICharacterListing } from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../../..';
@@ -189,6 +189,25 @@ const mockMyCharacterListings: ICharacterListing[] = [
   },
 ];
 
+const mockAccountCharacters: ICharacter[] = [
+  {
+    _id: 'char-a1',
+    name: 'MyRogue',
+    textureKey: 'redhair-girl-1',
+    isListedForSale: false,
+    tradedAt: undefined,
+    skills: { level: 22 } as any,
+  } as ICharacter,
+  {
+    _id: 'char-a2',
+    name: 'MyPaladin',
+    textureKey: 'dragon-knight',
+    isListedForSale: false,
+    tradedAt: undefined,
+    skills: { level: 38 } as any,
+  } as ICharacter,
+];
+
 export const CharacterBrowse: Story = () => (
   <RPGUIRoot>
     <CharacterMarketplacePanel
@@ -288,6 +307,8 @@ export const MyCharacterListings: Story = () => (
       itemsPerPage={8}
       onPageChange={() => {}}
       onCharacterDelist={() => {}}
+      accountCharacters={mockAccountCharacters}
+      onCharacterList={() => {}}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}
       characterAtlasJSON={entitiesAtlasJSON}
@@ -307,6 +328,8 @@ export const MyCharacterListingsEmpty: Story = () => (
       itemsPerPage={8}
       onPageChange={() => {}}
       onCharacterDelist={() => {}}
+      accountCharacters={mockAccountCharacters}
+      onCharacterList={() => {}}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}
       characterAtlasJSON={entitiesAtlasJSON}
@@ -317,6 +340,27 @@ export const MyCharacterListingsEmpty: Story = () => (
 
 MyCharacterListingsEmpty.storyName = 'My Listings - Empty State';
 
+export const MyCharacterListingsNoEligible: Story = () => (
+  <RPGUIRoot>
+    <MyCharacterListingsPanel
+      myCharacterListings={mockMyCharacterListings}
+      totalCount={2}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterDelist={() => {}}
+      accountCharacters={[]}
+      onCharacterList={() => {}}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
+    />
+  </RPGUIRoot>
+);
+
+MyCharacterListingsNoEligible.storyName = 'My Listings - No eligible chars to list';
+
 export const CharacterListingPending: Story = () => (
   <RPGUIRoot>
     <CharacterMarketplacePanel