@rpg-engine/long-bow 0.8.182 → 0.8.184

package/src/components/Marketplace/CharacterListingModal.tsx

@@ -0,0 +1,404 @@
+import { ICharacter } from '@rpg-engine/shared';
+import { ShoppingBag } from 'pixelarticons/react/ShoppingBag';
+import React, { useCallback, useState } from 'react';
+import { FaTimes } from 'react-icons/fa';
+import styled, { keyframes } from 'styled-components';
+import ModalPortal from '../Abstractions/ModalPortal';
+import { ConfirmModal } from '../ConfirmModal';
+import { Input } from '../Input';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { DCRateStrip } from '../shared/DCRateStrip';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface ICharacterListingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  accountCharacters: ICharacter[];
+  /** Items atlas — for UI sprites like the DC coin */
+  atlasJSON: any;
+  atlasIMG: any;
+  /** Entities atlas — for character sprites */
+  characterAtlasJSON: any;
+  characterAtlasIMG: any;
+  onCharacterList: (characterId: string, price: number) => void;
+  enableHotkeys?: () => void;
+  disableHotkeys?: () => void;
+}
+
+export const CharacterListingModal: React.FC<ICharacterListingModalProps> = ({
+  isOpen,
+  onClose,
+  accountCharacters,
+  atlasJSON,
+  atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
+  onCharacterList,
+  enableHotkeys,
+  disableHotkeys,
+}) => {
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [price, setPrice] = useState('');
+  const [isConfirming, setIsConfirming] = useState(false);
+
+  if (!isOpen) return null;
+
+  const eligibleCharacters = accountCharacters.filter(
+    c => !c.isListedForSale && !c.tradedAt
+  );
+
+  const canList = !!selectedId && Number(price) > 0;
+
+  const handleClose = () => {
+    setSelectedId(null);
+    setPrice('');
+    enableHotkeys?.();
+    onClose();
+  };
+
+  const handleListClick = () => {
+    if (canList) setIsConfirming(true);
+  };
+
+  const handleConfirm = () => {
+    if (!selectedId || !canList) return;
+    onCharacterList(selectedId, Number(price));
+    setSelectedId(null);
+    setPrice('');
+    setIsConfirming(false);
+    enableHotkeys?.();
+    onClose();
+  };
+
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent | React.TouchEvent | React.PointerEvent) => {
+      e.stopPropagation();
+    },
+    []
+  );
+
+  const getLevel = (c: ICharacter) => c.skills?.level || 1;
+
+  return (
+    <ModalPortal>
+      {isConfirming && (
+        <ConfirmModal
+          onConfirm={handleConfirm}
+          onClose={() => { setIsConfirming(false); enableHotkeys?.(); }}
+          message="Are you sure you want to list this character for sale?"
+        />
+      )}
+
+      <Overlay onPointerDown={handleClose} />
+      <ModalContainer>
+        <ModalContent
+          onClick={stopPropagation as React.MouseEventHandler}
+          onTouchStart={stopPropagation as React.TouchEventHandler}
+          onPointerDown={stopPropagation as React.PointerEventHandler}
+        >
+          <Header>
+            <Title>List Character for Sale</Title>
+            <CloseButton onPointerDown={handleClose} aria-label="Close" type="button">
+              <FaTimes />
+            </CloseButton>
+          </Header>
+
+          <CharacterList>
+            {eligibleCharacters.length === 0 ? (
+              <EmptyState>No eligible characters to list.</EmptyState>
+            ) : (
+              eligibleCharacters.map(character => {
+                const isSelected = selectedId === character._id;
+                return (
+                  <CharacterRow
+                    key={character._id}
+                    $selected={isSelected}
+                    onPointerDown={() => setSelectedId(character._id!)}
+                    role="radio"
+                    aria-checked={isSelected}
+                    tabIndex={0}
+                    onKeyDown={e => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setSelectedId(character._id!);
+                      }
+                    }}
+                  >
+                    <RadioCircle $selected={isSelected} />
+                    <SpriteWrapper>
+                      <SpriteFromAtlas
+                        atlasIMG={characterAtlasIMG}
+                        atlasJSON={characterAtlasJSON}
+                        spriteKey={`${character.textureKey}/down/standing/0.png`}
+                        imgScale={2}
+                        height={40}
+                        width={40}
+                      />
+                    </SpriteWrapper>
+                    <CharacterInfo>
+                      <CharacterName>{character.name || 'Unknown'}</CharacterName>
+                      <CharacterMeta>Level {getLevel(character)}</CharacterMeta>
+                    </CharacterInfo>
+                  </CharacterRow>
+                );
+              })
+            )}
+          </CharacterList>
+
+          <PriceSection>
+            <PriceLabel>Set Price (DC)</PriceLabel>
+            <PriceRow>
+              <Input
+                onChange={e => setPrice(e.target.value)}
+                value={price}
+                placeholder="Amount..."
+                type="number"
+                disabled={eligibleCharacters.length === 0}
+                onFocus={disableHotkeys}
+                onBlur={enableHotkeys}
+                className="price-input"
+              />
+              <ListBtn
+                icon={<ShoppingBag width={18} height={18} />}
+                label="List"
+                disabled={!canList}
+                onClick={handleListClick}
+              />
+            </PriceRow>
+            {price && Number(price) > 0 && (
+              <PricePreview>
+                <DCCoinWrapper>
+                  <SpriteFromAtlas
+                    atlasIMG={atlasIMG}
+                    atlasJSON={atlasJSON}
+                    spriteKey="others/definya-coin.png"
+                    imgScale={1}
+                  />
+                </DCCoinWrapper>
+                <PricePreviewAmount>{Number(price).toLocaleString()} DC</PricePreviewAmount>
+              </PricePreview>
+            )}
+            <DCRateStrip />
+          </PriceSection>
+        </ModalContent>
+      </ModalContainer>
+    </ModalPortal>
+  );
+};
+
+const scaleIn = keyframes`
+  from { transform: scale(0.85); opacity: 0; }
+  to   { transform: scale(1);    opacity: 1; }
+`;
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+`;
+
+const ModalContainer = styled.div`
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1001;
+  pointer-events: none;
+`;
+
+const ModalContent = styled.div`
+  background: #1a1a2e;
+  border: 2px solid #f59e0b;
+  border-radius: 8px;
+  padding: 20px 24px;
+  width: 440px;
+  max-width: 92%;
+  max-height: 80dvh;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  overflow: hidden;
+  pointer-events: auto;
+  animation: ${scaleIn} 0.15s ease-out;
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const Title = styled.h3`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.65rem !important;
+  color: #fef08a !important;
+`;
+
+const CloseButton = styled.button`
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  pointer-events: auto;
+
+  &:hover { color: #ffffff; }
+`;
+
+const CharacterList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  overflow-y: auto;
+  max-height: 260px;
+  padding: 2px;
+
+  &::-webkit-scrollbar { width: 6px; }
+  &::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
+  &::-webkit-scrollbar-thumb { background: rgba(245,158,11,0.3); border-radius: 4px; }
+`;
+
+const CharacterRow = styled.div<{ $selected: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.08)')};
+  border-radius: 6px;
+  background: ${({ $selected }) => ($selected ? 'rgba(245,158,11,0.1)' : 'rgba(255,255,255,0.02)')};
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+
+  &:hover {
+    border-color: ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(245,158,11,0.4)')};
+    background: ${({ $selected }) => ($selected ? 'rgba(245,158,11,0.1)' : 'rgba(245,158,11,0.05)')};
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgba(245,158,11,0.6);
+    outline-offset: 2px;
+  }
+`;
+
+const RadioCircle = styled.div<{ $selected: boolean }>`
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 2px solid ${({ $selected }) => ($selected ? '#f59e0b' : 'rgba(255,255,255,0.4)')};
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::after {
+    content: '';
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #f59e0b;
+    opacity: ${({ $selected }) => ($selected ? 1 : 0)};
+    transition: opacity 0.15s;
+  }
+`;
+
+const SpriteWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  image-rendering: pixelated;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+`;
+
+const CharacterInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  flex: 1;
+`;
+
+const CharacterName = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.5rem !important;
+  color: #f3f4f6 !important;
+`;
+
+const CharacterMeta = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.4rem !important;
+  color: #888 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const PricePreview = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`;
+
+const DCCoinWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+const PricePreviewAmount = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.55rem !important;
+  color: #fef08a !important;
+`;
+
+const PriceSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid rgba(255,255,255,0.06);
+  padding-top: 12px;
+`;
+
+const PriceLabel = styled.p`
+  margin: 0;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.55rem !important;
+  color: #888 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const PriceRow = styled.div`
+  display: flex;
+  gap: 8px;
+  align-items: center;
+
+  .price-input { flex: 1; height: 12px; }
+`;
+
+const ListBtn = styled(CTAButton)`
+  flex-shrink: 0;
+  padding: 10px 16px;
+  height: 32px;
+
+  span { font-size: 0.6rem; }
+  svg  { font-size: 1.1rem; }
+`;
+
+const EmptyState = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 16px;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.5rem !important;
+  color: #666 !important;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;

package/src/components/Marketplace/CharacterMarketplacePanel.tsx

@@ -1,10 +1,11 @@
-import { ICharacterListing, ICharacterListingSnapshot } from '@rpg-engine/shared';
+import { formatDCAmount, ICharacterListing, ICharacterListingSnapshot } from '@rpg-engine/shared';
 import { User } from 'pixelarticons/react/User';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled, { keyframes } from 'styled-components';
 import { Input } from '../Input';
-import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { ConfirmModal } from '../ConfirmModal';
+import { Pagination } from '../shared/Pagination/Pagination';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 
 export interface ICharacterMarketplacePanelProps {
   characterListings: ICharacterListing[];
@@ -13,8 +14,12 @@ export interface ICharacterMarketplacePanelProps {
   itemsPerPage: number;
   onPageChange: (page: number) => void;
   onCharacterBuy: (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;
   nameFilter?: string;
@@ -31,6 +36,8 @@ export const CharacterMarketplacePanel: React.FC<ICharacterMarketplacePanelProps
   onCharacterBuy,
   atlasJSON,
   atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
   enableHotkeys,
   disableHotkeys,
   nameFilter = '',
@@ -76,15 +83,12 @@ export const CharacterMarketplacePanel: React.FC<ICharacterMarketplacePanelProps
     }
   };
 
-  const getListingPrice = (listing: ICharacterListing): string => {
-    return listing.price.toLocaleString();
-  };
 
   const renderCharacterSprite = (snapshot: ICharacterListingSnapshot) => {
     return (
       <SpriteFromAtlas
-        atlasIMG={atlasIMG}
-        atlasJSON={atlasJSON}
+        atlasIMG={characterAtlasIMG}
+        atlasJSON={characterAtlasJSON}
         spriteKey={`${snapshot.textureKey}/down/standing/0.png`}
         imgScale={3}
         height={64}
@@ -144,19 +148,34 @@ export const CharacterMarketplacePanel: React.FC<ICharacterMarketplacePanelProps
                 <CharacterInfo>
                   <CharacterName>{listing.characterSnapshot.name || 'Unknown'}</CharacterName>
                   <CharacterMeta>
-                    Level {listing.characterSnapshot.level} · {listing.characterSnapshot.class}
+                    Lv.{listing.characterSnapshot.level} · {listing.characterSnapshot.class}
                   </CharacterMeta>
+                  <CharacterDetails>
+                    {listing.characterSnapshot.race} · {listing.characterSnapshot.faction}
+                  </CharacterDetails>
+                  <ModeBadge $hardcore={listing.characterSnapshot.mode?.toLowerCase() === 'hardcore'}>
+                    {listing.characterSnapshot.mode || 'Standard'}
+                  </ModeBadge>
+                  {listing.characterSnapshot.equipment?.length > 0 && (
+                    <EquipmentRow>
+                      {listing.characterSnapshot.equipment.slice(0, 3).map((eq, i) => (
+                        <EquipBadge key={i} $rarity={eq.rarity}>
+                          {eq.rarity || 'Common'}
+                        </EquipBadge>
+                      ))}
+                    </EquipmentRow>
+                  )}
                   <SellerInfo>by {listing.listedByCharacterName}</SellerInfo>
                   <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>
                 </CharacterInfo>
                 {listing.isBeingBought && (
@@ -170,18 +189,11 @@ export const CharacterMarketplacePanel: React.FC<ICharacterMarketplacePanelProps
 
       {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>
       )}
     </>
@@ -261,6 +273,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`
@@ -269,26 +284,74 @@ 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;
+`;
+
+const CharacterDetails = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.38rem !important;
+  color: #9ca3af !important;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 `;
 
+const RARITY_COLORS: Record<string, string> = {
+  legendary: '#f59e0b',
+  epic: '#a855f7',
+  rare: '#3b82f6',
+  uncommon: '#22c55e',
+  common: '#6b7280',
+};
+
+const ModeBadge = styled.span<{ $hardcore?: boolean }>`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.32rem !important;
+  color: ${({ $hardcore }) => ($hardcore ? '#ef4444' : '#6b7280')} !important;
+  border: 1px solid ${({ $hardcore }) => ($hardcore ? 'rgba(239,68,68,0.4)' : 'rgba(107,114,128,0.3)')};
+  border-radius: 3px;
+  padding: 1px 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const EquipmentRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  justify-content: center;
+`;
+
+const EquipBadge = styled.span<{ $rarity?: string }>`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.3rem !important;
+  color: ${({ $rarity }) => RARITY_COLORS[($rarity ?? '').toLowerCase()] ?? RARITY_COLORS.common} !important;
+  border: 1px solid ${({ $rarity }) => RARITY_COLORS[($rarity ?? '').toLowerCase()] ?? RARITY_COLORS.common}44;
+  border-radius: 2px;
+  padding: 1px 3px;
+  text-transform: uppercase;
+  letter-spacing: 0.3px;
+`;
+
 const SellerInfo = styled.span`
-  font-size: 0.4rem;
-  color: #666;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.4rem !important;
+  color: #666 !important;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 `;
@@ -296,19 +359,20 @@ const SellerInfo = 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 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;
+  line-height: 0;
 `;
 
 const BeingBoughtBadge = styled.span`
@@ -319,8 +383,9 @@ const BeingBoughtBadge = styled.span`
   border: 1px solid rgba(239, 68, 68, 0.4);
   border-radius: 4px;
   padding: 2px 6px;
-  font-size: 0.35rem;
-  color: #ef4444;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.35rem !important;
+  color: #ef4444 !important;
   text-transform: uppercase;
   letter-spacing: 0.5px;
 `;
@@ -335,28 +400,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 LoadingState = styled.div`
   display: flex;
   flex-direction: column;
@@ -381,8 +424,9 @@ const Spinner = styled.div`
 `;
 
 const LoadingText = styled.span`
-  font-size: 0.48rem;
-  color: #8a8a8a;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.48rem !important;
+  color: #8a8a8a !important;
   text-transform: uppercase;
   letter-spacing: 1px;
 `;
@@ -398,8 +442,9 @@ const EmptyState = styled.div`
 `;
 
 const EmptyText = styled.span`
-  font-size: 0.48rem;
-  color: #71717a;
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.48rem !important;
+  color: #71717a !important;
   text-transform: uppercase;
   letter-spacing: 1px;
 `;