@rpg-engine/long-bow 0.8.185 → 0.8.187

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

@@ -0,0 +1,129 @@
+import { ICharacterListing } from '@rpg-engine/shared';
+import { Meta, Story } from '@storybook/react';
+import React, { useState } from 'react';
+import { RPGUIRoot } from '../../..';
+import { CharacterDetailModal, ICharacterDetailModalProps } from '../../../components/Marketplace/CharacterDetailModal';
+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<ICharacterDetailModalProps> = {
+  title: 'Features/Marketplace/CharacterDetailModal',
+  component: CharacterDetailModal,
+};
+
+export default meta;
+
+const now = new Date();
+
+const warriorListing: 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: 'Standard',
+    skills: { level: 25, sword: 10, shielding: 8, strength: 18, dexterity: 7, resistance: 15 },
+    equipment: [
+      { slot: 'rightHand', itemName: 'Broad Sword', itemKey: 'broad-sword', rarity: 'Common' },
+      { slot: 'armor', itemName: 'Steel Armor', itemKey: 'steel-armor', rarity: 'Rare' },
+      { slot: 'head', itemName: 'Iron Helm', itemKey: 'iron-helm', rarity: 'Uncommon' },
+    ],
+    textureKey: 'black-knight',
+  },
+  createdAt: now,
+  updatedAt: now,
+};
+
+const hardcoreListing: ICharacterListing = {
+  _id: 'cl-2',
+  character: 'char-2',
+  seller: 'player-3',
+  listedByCharacterName: 'MageLord',
+  price: 100000,
+  isBeingBought: false,
+  characterSnapshot: {
+    name: 'Merlin Jr.',
+    level: 40,
+    class: 'Mage',
+    race: 'Elf',
+    faction: 'Horde',
+    mode: 'Hardcore',
+    skills: { level: 40, magic: 20, magicResistance: 18, dexterity: 12, stamina: 15 },
+    equipment: [
+      { slot: 'rightHand', itemName: 'Staff of Flames', itemKey: 'fire-staff', rarity: 'Epic' },
+      { slot: 'armor', itemName: 'Arcane Robe', itemKey: 'arcane-robe', rarity: 'Legendary' },
+      { slot: 'neck', itemName: 'Mana Amulet', itemKey: 'mana-amulet', rarity: 'Rare' },
+    ],
+    textureKey: 'pink-mage-1',
+  },
+  createdAt: now,
+  updatedAt: now,
+};
+
+const pendingListing: ICharacterListing = {
+  ...warriorListing,
+  _id: 'cl-3',
+  isBeingBought: true,
+  price: 35000,
+  characterSnapshot: {
+    ...warriorListing.characterSnapshot,
+    name: 'ShadowStep',
+    textureKey: 'redhair-girl-1',
+    class: 'Rogue',
+    mode: 'Hardcore',
+  },
+};
+
+const ModalWrapper: React.FC<{ listing: ICharacterListing }> = ({ listing }) => {
+  const [isOpen, setIsOpen] = useState(true);
+  const [lastAction, setLastAction] = useState<string | null>(null);
+
+  return (
+    <RPGUIRoot>
+      <div style={{ padding: '20px', fontFamily: 'monospace', fontSize: '12px', color: '#fff' }}>
+        {lastAction ? (
+          <p>✅ {lastAction}</p>
+        ) : (
+          <p>Click "Buy Character" inside the modal</p>
+        )}
+        <button
+          style={{ marginTop: 8, padding: '6px 12px', cursor: 'pointer' }}
+          onClick={() => { setIsOpen(true); setLastAction(null); }}
+        >
+          Reopen Modal
+        </button>
+      </div>
+      <CharacterDetailModal
+        listing={listing}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        onBuy={(id) => {
+          setLastAction(`Buying listing ID=${id}`);
+          setIsOpen(false);
+        }}
+        atlasJSON={itemsAtlasJSON}
+        atlasIMG={itemsAtlasIMG}
+        characterAtlasJSON={entitiesAtlasJSON}
+        characterAtlasIMG={entitiesAtlasIMG}
+      />
+    </RPGUIRoot>
+  );
+};
+
+export const WarriorListing: Story = () => <ModalWrapper listing={warriorListing} />;
+WarriorListing.storyName = 'Standard warrior listing';
+
+export const HardcoreMageListing: Story = () => <ModalWrapper listing={hardcoreListing} />;
+HardcoreMageListing.storyName = 'Hardcore mage — high price';
+
+export const PendingPurchase: Story = () => <ModalWrapper listing={pendingListing} />;
+PendingPurchase.storyName = 'Listing with pending purchase (buy disabled)';