@rpg-engine/long-bow 0.8.181 → 0.8.184

package/src/components/Marketplace/CharacterMarketplacePanel.tsx

@@ -0,0 +1,450 @@
+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 { ConfirmModal } from '../ConfirmModal';
+import { Pagination } from '../shared/Pagination/Pagination';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+export interface ICharacterMarketplacePanelProps {
+  characterListings: ICharacterListing[];
+  totalCount: number;
+  currentPage: number;
+  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;
+  onNameFilterChange?: (name: string) => void;
+  isLoading?: boolean;
+}
+
+export const CharacterMarketplacePanel: React.FC<ICharacterMarketplacePanelProps> = ({
+  characterListings,
+  totalCount,
+  currentPage,
+  itemsPerPage,
+  onPageChange,
+  onCharacterBuy,
+  atlasJSON,
+  atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
+  enableHotkeys,
+  disableHotkeys,
+  nameFilter = '',
+  onNameFilterChange,
+  isLoading = false,
+}) => {
+  const [buyingListingId, setBuyingListingId] = useState<string | null>(null);
+  const [localNameFilter, setLocalNameFilter] = useState(nameFilter);
+  const itemsContainer = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    itemsContainer.current?.scrollTo(0, 0);
+  }, [currentPage]);
+
+  useEffect(() => {
+    setLocalNameFilter(nameFilter);
+  }, [nameFilter]);
+
+  const filteredListings = useMemo(() => {
+    if (!localNameFilter.trim()) {
+      return characterListings;
+    }
+    const filter = localNameFilter.trim().toLowerCase();
+    return characterListings.filter(listing =>
+      listing.characterSnapshot.name?.toLowerCase().includes(filter)
+    );
+  }, [characterListings, localNameFilter]);
+
+  const handleNameFilterChange = (value: string) => {
+    setLocalNameFilter(value);
+    onNameFilterChange?.(value);
+  };
+
+  const handleBuyClick = (listingId: string) => {
+    setBuyingListingId(listingId);
+  };
+
+  const handleBuyConfirm = () => {
+    if (buyingListingId) {
+      onCharacterBuy(buyingListingId);
+      setBuyingListingId(null);
+      enableHotkeys?.();
+    }
+  };
+
+
+  const renderCharacterSprite = (snapshot: ICharacterListingSnapshot) => {
+    return (
+      <SpriteFromAtlas
+        atlasIMG={characterAtlasIMG}
+        atlasJSON={characterAtlasJSON}
+        spriteKey={`${snapshot.textureKey}/down/standing/0.png`}
+        imgScale={3}
+        height={64}
+        width={64}
+      />
+    );
+  };
+
+  return (
+    <>
+      {buyingListingId && (
+        <ConfirmModal
+          onClose={() => {
+            setBuyingListingId(null);
+            enableHotkeys?.();
+          }}
+          onConfirm={handleBuyConfirm}
+          message="Are you sure you want to buy this character?"
+        />
+      )}
+
+      <ToolbarRow>
+        <SearchField>
+          <Input
+            onChange={e => handleNameFilterChange(e.target.value)}
+            value={localNameFilter}
+            placeholder="Search characters..."
+            onBlur={enableHotkeys}
+            onFocus={disableHotkeys}
+            className="search-input"
+          />
+        </SearchField>
+      </ToolbarRow>
+
+      <ListingsContainer id="MarketContainer" ref={itemsContainer}>
+        {isLoading ? (
+          <LoadingState>
+            <Spinner />
+            <LoadingText>Loading character listings...</LoadingText>
+          </LoadingState>
+        ) : filteredListings.length === 0 ? (
+          <EmptyState>
+            <User width={32} height={32} />
+            <EmptyText>No character listings found.</EmptyText>
+          </EmptyState>
+        ) : (
+          <ListingsGrid>
+            {filteredListings.map((listing) => (
+              <CharacterListingCard
+                key={listing._id}
+                onClick={() => handleBuyClick(listing._id)}
+                $isBeingBought={listing.isBeingBought}
+              >
+                <CharacterSprite>
+                  {renderCharacterSprite(listing.characterSnapshot)}
+                </CharacterSprite>
+                <CharacterInfo>
+                  <CharacterName>{listing.characterSnapshot.name || 'Unknown'}</CharacterName>
+                  <CharacterMeta>
+                    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>
+                    <DCCoinWrapper>
+                      <SpriteFromAtlas
+                        atlasIMG={atlasIMG}
+                        atlasJSON={atlasJSON}
+                        spriteKey="others/definya-coin.png"
+                        imgScale={1}
+                      />
+                    </DCCoinWrapper>
+                    {formatDCAmount(listing.price)} DC
+                  </ListingPrice>
+                </CharacterInfo>
+                {listing.isBeingBought && (
+                  <BeingBoughtBadge>Pending</BeingBoughtBadge>
+                )}
+              </CharacterListingCard>
+            ))}
+          </ListingsGrid>
+        )}
+      </ListingsContainer>
+
+      {totalCount > itemsPerPage && (
+        <PagerFooter>
+          <Pagination
+            currentPage={currentPage}
+            totalPages={Math.ceil(totalCount / itemsPerPage)}
+            onPageChange={onPageChange}
+          />
+        </PagerFooter>
+      )}
+    </>
+  );
+};
+
+const ToolbarRow = styled.div`
+  width: 95%;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  margin: 0 auto 10px auto;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 8px 12px;
+  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+`;
+
+const SearchField = styled.div`
+  flex: 1;
+  min-width: 0;
+
+  input.search-input {
+    height: 10px;
+    width: 100%;
+  }
+`;
+
+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.button<{ $isBeingBought?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid ${({ $isBeingBought }) => $isBeingBought ? 'rgba(239, 68, 68, 0.3)' : 'rgba(255, 255, 255, 0.08)'};
+  border-radius: 8px;
+  padding: 12px;
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+  position: relative;
+  opacity: ${({ $isBeingBought }) => $isBeingBought ? 0.6 : 1};
+
+  &:hover {
+    border-color: ${({ $isBeingBought }) => $isBeingBought ? 'rgba(239, 68, 68, 0.5)' : 'rgba(245, 158, 11, 0.4)'};
+    background: ${({ $isBeingBought }) => $isBeingBought ? 'rgba(239, 68, 68, 0.05)' : 'rgba(245, 158, 11, 0.05)'};
+  }
+
+  ${({ $isBeingBought }) => $isBeingBought && `
+    pointer-events: none;
+  `}
+`;
+
+const CharacterSprite = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  image-rendering: pixelated;
+  width: 64px;
+  height: 64px;
+  flex-shrink: 0;
+`;
+
+const CharacterInfo = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+  width: 100%;
+`;
+
+const CharacterName = styled.span`
+  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-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-family: 'Press Start 2P', cursive !important;
+  font-size: 0.4rem !important;
+  color: #666 !important;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const ListingPrice = styled.div`
+  display: flex;
+  align-items: center;
+  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`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  line-height: 0;
+`;
+
+const BeingBoughtBadge = 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;
+`;
+
+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 LoadingState = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  height: 100%;
+  min-height: 160px;
+`;
+
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`;
+
+const Spinner = styled.div`
+  width: 28px;
+  height: 28px;
+  border: 3px solid rgba(245, 158, 11, 0.2);
+  border-top-color: #f59e0b;
+  border-radius: 50%;
+  animation: ${spin} 0.7s linear infinite;
+`;
+
+const LoadingText = styled.span`
+  font-family: 'Press Start 2P', cursive !important;
+  font-size: 0.48rem !important;
+  color: #8a8a8a !important;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;
+
+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-family: 'Press Start 2P', cursive !important;
+  font-size: 0.48rem !important;
+  color: #71717a !important;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+`;

package/src/components/Marketplace/CharacterMarketplaceRows.tsx

@@ -0,0 +1,265 @@
+import { formatDCAmount, ICharacterListing } from '@rpg-engine/shared';
+import { Coins } from 'pixelarticons/react/Coins';
+import React from 'react';
+import styled from 'styled-components';
+import { ItemRowWrapper } from '../shared/ItemRowWrapper';
+import { CTAButton } from '../shared/CTAButton/CTAButton';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+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;
+}
+
+export const CharacterMarketplaceRows: React.FC<ICharacterMarketplaceRowsProps> = ({
+  listing,
+  atlasJSON,
+  atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
+  onCharacterBuy,
+  onCharacterDelist,
+  disabled,
+}) => {
+  const { characterSnapshot, price, isBeingBought } = listing;
+
+  return (
+    <ItemRowWrapper $isHighlighted={disabled || isBeingBought}>
+      <ItemSection>
+        <SpriteContainer>
+          <CharacterSprite>
+            <SpriteFromAtlas
+              atlasIMG={characterAtlasIMG}
+              atlasJSON={characterAtlasJSON}
+              spriteKey={`${characterSnapshot.textureKey}/down/standing/0.png`}
+              imgScale={2.5}
+              height={56}
+              width={56}
+            />
+          </CharacterSprite>
+        </SpriteContainer>
+
+        <ItemDetails>
+          <ItemName>
+            <Ellipsis maxLines={1} maxWidth="180px" fontSize="10px">
+              {characterSnapshot.name || 'Unknown Character'}
+            </Ellipsis>
+          </ItemName>
+          <CharacterMeta>Level {characterSnapshot.level}</CharacterMeta>
+          {characterSnapshot.class && (
+            <CharacterClass>{characterSnapshot.class}</CharacterClass>
+          )}
+          <PriceRow>
+            <DCCoinWrapper>
+              <SpriteFromAtlas
+                atlasIMG={atlasIMG}
+                atlasJSON={atlasJSON}
+                spriteKey="others/definya-coin.png"
+                imgScale={1}
+              />
+            </DCCoinWrapper>
+            <DCPrice>{formatDCAmount(price)}</DCPrice>
+          </PriceRow>
+          {isBeingBought && (
+            <PendingBadge>Sale Pending</PendingBadge>
+          )}
+        </ItemDetails>
+      </ItemSection>
+
+      <ActionSection>
+        <CTAButton
+          icon={onCharacterBuy ? <Coins width={18} height={18} /> : undefined}
+          label={onCharacterBuy ? 'Buy' : 'Delist'}
+          disabled={disabled || isBeingBought}
+          onClick={() => {
+            if (disabled || isBeingBought) return;
+            onCharacterBuy?.();
+            onCharacterDelist?.();
+          }}
+          iconColor={onCharacterBuy ? '#f59e0b' : '#ef4444'}
+        />
+      </ActionSection>
+    </ItemRowWrapper>
+  );
+};
+
+const ItemSection = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex: 1;
+  min-width: 0;
+`;
+
+const SpriteContainer = styled.div`
+  position: relative;
+  flex-shrink: 0;
+  min-width: 44px;
+`;
+
+const CharacterSprite = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  image-rendering: pixelated;
+`;
+
+const ItemDetails = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+  margin-left: 0.5rem;
+`;
+
+const ItemName = styled.div`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
+  color: #ffffff;
+`;
+
+const CharacterMeta = styled.span`
+  font-size: 0.45rem;
+  color: #888;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const CharacterClass = styled.span`
+  font-size: 0.4rem;
+  color: #666;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const PriceRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.2rem;
+`;
+
+const DCCoinWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  top: -0.5rem;
+  left: -0.4rem;
+`;
+
+const DCPrice = styled.span`
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.55rem !important;
+  color: #fef08a;
+  line-height: 1;
+`;
+
+const ActionSection = styled.div`
+  flex-shrink: 0;
+  margin-left: 0.75rem;
+`;
+
+const PendingBadge = styled.span`
+  font-size: 0.38rem;
+  padding: 2px 6px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  background: rgba(239, 68, 68, 0.2);
+  border: 1px solid rgba(239, 68, 68, 0.4);
+  color: #ef4444;
+  margin-top: 4px;
+`;
+
+export interface IGroupedCharacterMarketplaceRowProps {
+  bestListing: ICharacterListing;
+  otherListings: ICharacterListing[];
+  atlasJSON: any;
+  atlasIMG: any;
+  characterAtlasJSON: any;
+  characterAtlasIMG: any;
+  onBuy: (id: string) => void;
+  currentCharacterId?: string;
+}
+
+export const GroupedCharacterMarketplaceRow: React.FC<IGroupedCharacterMarketplaceRowProps> = ({
+  bestListing,
+  otherListings,
+  atlasJSON,
+  atlasIMG,
+  characterAtlasJSON,
+  characterAtlasIMG,
+  onBuy,
+  currentCharacterId,
+}) => {
+  const makeRow = (listing: ICharacterListing) => {
+    const isOwnListing = listing.seller === currentCharacterId;
+
+    return (
+      <CharacterMarketplaceRows
+        key={listing._id}
+        listing={listing}
+        atlasJSON={atlasJSON}
+        atlasIMG={atlasIMG}
+        characterAtlasJSON={characterAtlasJSON}
+        characterAtlasIMG={characterAtlasIMG}
+        onCharacterBuy={isOwnListing ? undefined : () => onBuy(listing._id)}
+        disabled={isOwnListing}
+      />
+    );
+  };
+
+  if (otherListings.length === 0) {
+    return makeRow(bestListing);
+  }
+
+  return (
+    <GroupedRowContainer>
+      <MainRow>{makeRow(bestListing)}</MainRow>
+      <OtherListings>
+        {otherListings.map((listing) => (
+          <OtherListingRow key={listing._id}>
+            {makeRow(listing)}
+          </OtherListingRow>
+        ))}
+      </OtherListings>
+    </GroupedRowContainer>
+  );
+};
+
+const GroupedRowContainer = styled.div`
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+
+const MainRow = styled.div``;
+
+const OtherListings = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: 12px;
+  border-left: 2px solid rgba(245, 158, 11, 0.15);
+  margin-top: 4px;
+  margin-bottom: 4px;
+`;
+
+const OtherListingRow = styled.div`
+  opacity: 0.85;
+
+  &:hover {
+    opacity: 1;
+  }
+`;