@rpg-engine/long-bow 0.8.180 → 0.8.182

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

@@ -0,0 +1,324 @@
+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 atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG 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: 'characters/warrior/male',
+    },
+    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: 'characters/mage/male',
+    },
+    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: 'characters/rogue/female',
+    },
+    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: 'characters/paladin/male',
+    },
+    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: 'characters/archer/female',
+    },
+    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: 'characters/warrior/male',
+    },
+    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: 'characters/mage/female',
+    },
+    createdAt: daysAgo(5),
+    updatedAt: daysAgo(1),
+  },
+];
+
+export const CharacterBrowse: Story = () => (
+  <RPGUIRoot>
+    <CharacterMarketplacePanel
+      characterListings={mockCharacterListings}
+      totalCount={50}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterBuy={() => {}}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      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={atlasJSON}
+      atlasIMG={atlasIMG}
+      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={atlasJSON}
+      atlasIMG={atlasIMG}
+      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={atlasJSON}
+      atlasIMG={atlasIMG}
+      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={atlasJSON}
+      atlasIMG={atlasIMG}
+    />
+  </RPGUIRoot>
+);
+
+MyCharacterListings.storyName = 'My Character Listings';
+
+export const MyCharacterListingsEmpty: Story = () => (
+  <RPGUIRoot>
+    <MyCharacterListingsPanel
+      myCharacterListings={[]}
+      totalCount={0}
+      currentPage={1}
+      itemsPerPage={8}
+      onPageChange={() => {}}
+      onCharacterDelist={() => {}}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+    />
+  </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={atlasJSON}
+      atlasIMG={atlasIMG}
+      nameFilter=""
+      onNameFilterChange={() => {}}
+      isLoading={false}
+    />
+  </RPGUIRoot>
+);
+
+CharacterListingPending.storyName = 'Listing with Pending Sale';