@rpg-engine/long-bow 0.8.181 → 0.8.184

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

@@ -43,6 +43,10 @@ export * from './components/Marketplace/BuyOrderPanel';
 export * from './components/Marketplace/BuyOrderRows';
 export * from './components/Marketplace/HistoryPanel';
 export * from './components/Marketplace/BlueprintSearchModal';
+export * from './components/Marketplace/CharacterMarketplacePanel';
+export * from './components/Marketplace/CharacterMarketplaceRows';
+export * from './components/Marketplace/CharacterListingForm';
+export * from './components/Marketplace/MyCharacterListingsPanel';
 export * from './components/Multitab/TabBody';
 export * from './components/Multitab/TabsContainer';
 export * from './components/NPCDialog/NPCDialog';

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';

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

@@ -0,0 +1,340 @@
+import { ICharacterListing } from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../..';
+import { CharacterMarketplacePanel } from '../../../components/Marketplace/CharacterMarketplacePanel';
+import { MyCharacterListingsPanel } from '../../../components/Marketplace/MyCharacterListingsPanel';
+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 = {
+  title: 'Features/Marketplace/CharacterMarketplace',
+  component: CharacterMarketplacePanel,
+};
+
+export default meta;
+
+const now = new Date();
+const daysAgo = (days: number): Date =>
+  new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
+
+const mockCharacterListings: ICharacterListing[] = [
+  {
+    _id: 'cl-1',
+    character: 'char-1',
+    seller: 'player-2',
+    listedByCharacterName: 'WarriorKing',
+    price: 50000,
+    isBeingBought: false,
+    characterSnapshot: {
+      name: 'Sir Galahad',
+      level: 25,
+      class: 'Warrior',
+      race: 'Human',
+      faction: 'Alliance',
+      mode: 'Hardcore',
+      skills: { sword: 10, shield: 8 },
+      equipment: [
+        { slot: 'weapon', itemName: 'Broad Sword', itemKey: 'items/broad-sword', rarity: 'Common' },
+        { slot: 'armor', itemName: 'Steel Armor', itemKey: 'items/steel-armor', rarity: 'Rare' },
+      ],
+      textureKey: 'black-knight',
+    },
+    createdAt: daysAgo(3),
+    updatedAt: daysAgo(3),
+  },
+  {
+    _id: 'cl-2',
+    character: 'char-2',
+    seller: 'player-3',
+    listedByCharacterName: 'MageLord',
+    price: 75000,
+    isBeingBought: false,
+    characterSnapshot: {
+      name: 'Merlin Jr.',
+      level: 30,
+      class: 'Mage',
+      race: 'Elf',
+      faction: 'Horde',
+      mode: 'Standard',
+      skills: { fireball: 15, frostbolt: 12 },
+      equipment: [
+        { slot: 'weapon', itemName: 'Fire Staff', itemKey: 'items/fire-staff', rarity: 'Epic' },
+      ],
+      textureKey: 'pink-mage-1',
+    },
+    createdAt: daysAgo(1),
+    updatedAt: daysAgo(1),
+  },
+  {
+    _id: 'cl-3',
+    character: 'char-3',
+    seller: 'player-4',
+    listedByCharacterName: 'RogueShadow',
+    price: 40000,
+    isBeingBought: true,
+    characterSnapshot: {
+      name: 'ShadowStep',
+      level: 20,
+      class: 'Rogue',
+      race: 'Dark Elf',
+      faction: 'Horde',
+      mode: 'Hardcore',
+      skills: { stealth: 10, backstab: 12 },
+      equipment: [
+        { slot: 'weapon', itemName: 'Dagger', itemKey: 'items/dagger', rarity: 'Uncommon' },
+      ],
+      textureKey: 'redhair-girl-1',
+    },
+    createdAt: daysAgo(7),
+    updatedAt: daysAgo(1),
+  },
+  {
+    _id: 'cl-4',
+    character: 'char-4',
+    seller: 'player-5',
+    listedByCharacterName: 'PaladinLight',
+    price: 100000,
+    isBeingBought: false,
+    characterSnapshot: {
+      name: 'Lightbringer',
+      level: 40,
+      class: 'Paladin',
+      race: 'Human',
+      faction: 'Alliance',
+      mode: 'Standard',
+      skills: { holy: 20, shield: 15 },
+      equipment: [
+        { slot: 'weapon', itemName: 'Holy Sword', itemKey: 'items/holy-sword', rarity: 'Legendary' },
+        { slot: 'armor', itemName: 'Divine Armor', itemKey: 'items/divine-armor', rarity: 'Epic' },
+      ],
+      textureKey: 'dragon-knight',
+    },
+    createdAt: daysAgo(14),
+    updatedAt: daysAgo(14),
+  },
+  {
+    _id: 'cl-5',
+    character: 'char-5',
+    seller: 'player-6',
+    listedByCharacterName: 'ArcherQueen',
+    price: 35000,
+    isBeingBought: false,
+    characterSnapshot: {
+      name: 'ArrowStorm',
+      level: 18,
+      class: 'Archer',
+      race: 'Wood Elf',
+      faction: 'Alliance',
+      mode: 'Standard',
+      skills: { archery: 12, tracking: 8 },
+      equipment: [
+        { slot: 'weapon', itemName: 'Longbow', itemKey: 'items/longbow', rarity: 'Rare' },
+      ],
+      textureKey: 'pink-hair-girl-1',
+    },
+    createdAt: daysAgo(2),
+    updatedAt: daysAgo(2),
+  },
+];
+
+const mockMyCharacterListings: ICharacterListing[] = [
+  {
+    _id: 'cl-10',
+    character: 'char-10',
+    seller: 'player-1',
+    listedByCharacterName: 'MyMainChar',
+    price: 80000,
+    isBeingBought: false,
+    characterSnapshot: {
+      name: 'MyWarrior',
+      level: 35,
+      class: 'Warrior',
+      race: 'Human',
+      faction: 'Alliance',
+      mode: 'Standard',
+      skills: { sword: 18, shield: 16 },
+      equipment: [
+        { slot: 'weapon', itemName: 'Epic Sword', itemKey: 'items/epic-sword', rarity: 'Epic' },
+      ],
+      textureKey: 'black-knight',
+    },
+    createdAt: daysAgo(10),
+    updatedAt: daysAgo(10),
+  },
+  {
+    _id: 'cl-11',
+    character: 'char-11',
+    seller: 'player-1',
+    listedByCharacterName: 'MyMainChar',
+    price: 25000,
+    isBeingBought: true,
+    characterSnapshot: {
+      name: 'MyAltMage',
+      level: 15,
+      class: 'Mage',
+      race: 'Human',
+      faction: 'Alliance',
+      mode: 'Standard',
+      skills: { fireball: 8 },
+      equipment: [
+        { slot: 'weapon', itemName: 'Basic Staff', itemKey: 'items/staff', rarity: 'Common' },
+      ],
+      textureKey: 'red-mage-1',
+    },
+    createdAt: daysAgo(5),
+    updatedAt: daysAgo(1),
+  },
+];
+
+export const CharacterBrowse: Story = () => (
+  <RPGUIRoot>
+    <CharacterMarketplacePanel
+      characterListings={mockCharacterListings}
+      totalCount={50}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterBuy={() => {}}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
+      nameFilter=""
+      onNameFilterChange={() => {}}
+      isLoading={false}
+    />
+  </RPGUIRoot>
+);
+
+CharacterBrowse.storyName = 'Browse Character Listings';
+
+export const CharacterBrowseLoading: Story = () => (
+  <RPGUIRoot>
+    <CharacterMarketplacePanel
+      characterListings={[]}
+      totalCount={0}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterBuy={() => {}}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
+      nameFilter=""
+      onNameFilterChange={() => {}}
+      isLoading={true}
+    />
+  </RPGUIRoot>
+);
+
+CharacterBrowseLoading.storyName = 'Loading State';
+
+export const CharacterBrowseEmpty: Story = () => (
+  <RPGUIRoot>
+    <CharacterMarketplacePanel
+      characterListings={[]}
+      totalCount={0}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterBuy={() => {}}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
+      nameFilter=""
+      onNameFilterChange={() => {}}
+      isLoading={false}
+    />
+  </RPGUIRoot>
+);
+
+CharacterBrowseEmpty.storyName = 'Empty State';
+
+export const CharacterBrowseFiltered: Story = () => (
+  <RPGUIRoot>
+    <CharacterMarketplacePanel
+      characterListings={mockCharacterListings.filter(l =>
+        l.characterSnapshot.name.toLowerCase().includes('warrior')
+      )}
+      totalCount={2}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterBuy={() => {}}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
+      nameFilter="warrior"
+      onNameFilterChange={() => {}}
+      isLoading={false}
+    />
+  </RPGUIRoot>
+);
+
+CharacterBrowseFiltered.storyName = 'With Name Filter';
+
+export const MyCharacterListings: Story = () => (
+  <RPGUIRoot>
+    <MyCharacterListingsPanel
+      myCharacterListings={mockMyCharacterListings}
+      totalCount={2}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterDelist={() => {}}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
+    />
+  </RPGUIRoot>
+);
+
+MyCharacterListings.storyName = 'My Character Listings';
+
+export const MyCharacterListingsEmpty: Story = () => (
+  <RPGUIRoot>
+    <MyCharacterListingsPanel
+      myCharacterListings={[]}
+      totalCount={0}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterDelist={() => {}}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
+    />
+  </RPGUIRoot>
+);
+
+MyCharacterListingsEmpty.storyName = 'My Listings - Empty State';
+
+export const CharacterListingPending: Story = () => (
+  <RPGUIRoot>
+    <CharacterMarketplacePanel
+      characterListings={[mockCharacterListings[2]]} // The one with isBeingBought: true
+      totalCount={1}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterBuy={() => {}}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      characterAtlasJSON={entitiesAtlasJSON}
+      characterAtlasIMG={entitiesAtlasIMG}
+      nameFilter=""
+      onNameFilterChange={() => {}}
+      isLoading={false}
+    />
+  </RPGUIRoot>
+);
+
+CharacterListingPending.storyName = 'Listing with Pending Sale';

package/src/stories/shared/RadioOption.stories.tsx

@@ -0,0 +1,93 @@
+import { Meta, Story } from '@storybook/react';
+import React, { useState } from 'react';
+import { RPGUIRoot } from '../../components/RPGUI/RPGUIRoot';
+import {
+  IRadioOptionProps,
+  RadioOption,
+  RadioOptionLabel,
+  RadioOptionSub,
+} from '../../components/shared/RadioOption';
+
+const meta: Meta = {
+  title: 'Shared/RadioOption',
+  component: RadioOption,
+  decorators: [
+    Story => (
+      <RPGUIRoot>
+        <div style={{ padding: '2rem', background: '#1a1a2e', minWidth: '320px' }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+};
+
+export default meta;
+
+// ---------------------------------------------------------------------------
+// Single unselected option
+// ---------------------------------------------------------------------------
+export const Unselected: Story<IRadioOptionProps> = () => (
+  <RadioOption selected={false} onSelect={() => {}}>
+    <div>
+      <RadioOptionLabel>Pay with Stripe</RadioOptionLabel>
+    </div>
+  </RadioOption>
+);
+
+// ---------------------------------------------------------------------------
+// Single selected option
+// ---------------------------------------------------------------------------
+export const Selected: Story<IRadioOptionProps> = () => (
+  <RadioOption selected={true} onSelect={() => {}}>
+    <div>
+      <RadioOptionLabel>Pay with Stripe</RadioOptionLabel>
+    </div>
+  </RadioOption>
+);
+
+// ---------------------------------------------------------------------------
+// Disabled option
+// ---------------------------------------------------------------------------
+export const Disabled: Story<IRadioOptionProps> = () => (
+  <RadioOption selected={false} disabled={true} onSelect={() => {}}>
+    <div>
+      <RadioOptionLabel $disabled={true}>Pay with DC Wallet</RadioOptionLabel>
+      <RadioOptionSub>Insufficient balance</RadioOptionSub>
+    </div>
+  </RadioOption>
+);
+
+// ---------------------------------------------------------------------------
+// Interactive group of 3 options
+// ---------------------------------------------------------------------------
+const OPTIONS = [
+  { id: 'stripe', label: 'Pay with Stripe', sub: 'Credit / debit card' },
+  { id: 'dc', label: 'Pay with DC Wallet', sub: '250 DC available' },
+  { id: 'paypal', label: 'Pay with PayPal', sub: 'Coming soon' },
+] as const;
+
+type IOptionId = (typeof OPTIONS)[number]['id'];
+
+export const InteractiveGroup: Story = () => {
+  const [selected, setSelected] = useState<IOptionId>('stripe');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+      {OPTIONS.map(opt => (
+        <RadioOption
+          key={opt.id}
+          selected={selected === opt.id}
+          onSelect={() => setSelected(opt.id)}
+        >
+          <div>
+            <RadioOptionLabel>{opt.label}</RadioOptionLabel>
+            <div style={{ marginTop: '3px' }}>
+              <RadioOptionSub>{opt.sub}</RadioOptionSub>
+            </div>
+          </div>
+        </RadioOption>
+      ))}
+    </div>
+  );
+};