@rpg-engine/long-bow 0.8.141 → 0.8.146

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

@@ -0,0 +1,157 @@
+import {
+  IMarketplaceTransaction,
+  MarketplaceTransactionType,
+} from '@rpg-engine/shared';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { HistoryPanel } from '../../../components/Marketplace/HistoryPanel';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import atlasJSON from '../../../mocks/atlas/items/items.json';
+import atlasIMG from '../../../mocks/atlas/items/items.png';
+
+const meta = {
+  title: 'Features/Marketplace/HistoryPanel',
+  component: HistoryPanel,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <RPGUIRoot>
+        <div style={{ width: '800px' }}>
+          <Story />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof HistoryPanel>;
+
+export default meta;
+type Story = StoryObj<typeof HistoryPanel>;
+
+const now = new Date();
+const daysAgo = (days: number): Date =>
+  new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
+
+const mockTransactions: IMarketplaceTransaction[] = [
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Purchase,
+    goldAmount: 500,
+    itemKey: 'items/iron-sword.png',
+    itemName: 'Iron Sword',
+    counterpartName: 'SomePlayer',
+    currency: 'gold',
+    createdAt: daysAgo(0),
+    updatedAt: daysAgo(0),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Sale,
+    goldAmount: 1200,
+    itemKey: 'items/leather-armor.png',
+    itemName: 'Leather Armor',
+    counterpartName: 'AnotherPlayer',
+    currency: 'dc', // DC sale
+    createdAt: daysAgo(1),
+    updatedAt: daysAgo(1),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Purchase,
+    goldAmount: 275000,
+    itemKey: 'items/angelic-sword.png',
+    itemName: 'Angelic Sword',
+    counterpartName: 'DCBuyer',
+    currency: 'dc', // DC purchase
+    createdAt: daysAgo(2),
+    updatedAt: daysAgo(2),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.ListingFee,
+    goldAmount: 60,
+    itemKey: 'items/leather-armor.png',
+    itemName: 'Leather Armor',
+    createdAt: daysAgo(1),
+    updatedAt: daysAgo(1),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Withdrawal,
+    goldAmount: 1200,
+    createdAt: daysAgo(2),
+    updatedAt: daysAgo(2),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Expired,
+    goldAmount: 0,
+    itemKey: 'items/magic-staff.png',
+    itemName: 'Magic Staff',
+    createdAt: daysAgo(3),
+    updatedAt: daysAgo(3),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.Unlisted,
+    goldAmount: 0,
+    itemKey: 'items/shield.png',
+    itemName: 'Wooden Shield',
+    createdAt: daysAgo(4),
+    updatedAt: daysAgo(4),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.BuyOrderPlaced,
+    goldAmount: 800,
+    itemKey: 'items/angelic-sword.png',
+    itemName: 'Angelic Sword',
+    createdAt: daysAgo(5),
+    updatedAt: daysAgo(5),
+  },
+  {
+    owner: 'character-1',
+    type: MarketplaceTransactionType.BuyOrderFulfilled,
+    goldAmount: 800,
+    itemKey: 'items/angelic-sword.png',
+    itemName: 'Angelic Sword',
+    counterpartName: 'Fulfiller',
+    createdAt: daysAgo(6),
+    updatedAt: daysAgo(6),
+  },
+];
+
+export const Default: Story = {
+  render: () => (
+    <HistoryPanel
+      transactions={mockTransactions}
+      totalCount={mockTransactions.length}
+      currentPage={1}
+      itemsPerPage={10}
+      selectedType="All"
+      onTypeChange={(type) => console.log('type change:', type)}
+      onPageChange={(page) => console.log('page change:', page)}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      dcToGoldSwapRate={550000} // 1 DC = 550,000 GOLD
+    />
+  ),
+};
+
+export const EmptyState: Story = {
+  render: () => (
+    <HistoryPanel
+      transactions={[]}
+      totalCount={0}
+      currentPage={1}
+      itemsPerPage={10}
+      selectedType="All"
+      onTypeChange={(type) => console.log('type change:', type)}
+      onPageChange={(page) => console.log('page change:', page)}
+      atlasJSON={atlasJSON}
+      atlasIMG={atlasIMG}
+      dcToGoldSwapRate={550000}
+    />
+  ),
+};

package/src/stories/Features/trading/Marketplace.stories.tsx

@@ -1,3 +1,10 @@
+import {
+  IMarketplaceBlueprintSummary,
+  IMarketplaceBuyOrderItem,
+  IMarketplaceTransaction,
+  MarketplaceBuyOrderStatus,
+  MarketplaceTransactionType,
+} from '@rpg-engine/shared';
 import { Meta, Story } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../../..';
@@ -14,8 +21,74 @@ const meta: Meta = {
 
 export default meta;
 
+const now = new Date();
+const daysAgo = (days: number): Date =>
+  new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
+
+const mockBlueprints: IMarketplaceBlueprintSummary[] = [
+  { key: 'items/broad-sword', name: 'Broad Sword', type: 'Weapon', subType: 'Sword', tier: 1, textureAtlas: 'items', texturePath: 'swords/broad-sword.png' },
+  { key: 'items/angelic-sword', name: 'Angelic Sword', type: 'Weapon', subType: 'Sword', tier: 5, textureAtlas: 'items', texturePath: 'swords/angelic-sword.png', rarity: 'Epic' },
+  { key: 'items/leather-armor', name: 'Leather Armor', type: 'Armor', subType: 'Body', tier: 1, textureAtlas: 'items', texturePath: 'armors/leather-armor.png' },
+  { key: 'items/abyssal-tide-staff', name: 'Abyssal Tide Staff', type: 'Weapon', subType: 'Staff', tier: 3, textureAtlas: 'items', texturePath: 'staffs/abyssal-tide-staff.png', rarity: 'Rare' },
+  { key: 'items/wooden-shield', name: 'Wooden Shield', type: 'Armor', subType: 'Shield', tier: 1, textureAtlas: 'items', texturePath: 'shields/wooden-shield.png' },
+  { key: 'items/fire-wand', name: 'Fire Wand', type: 'Weapon', subType: 'Wand', tier: 2, textureAtlas: 'items', texturePath: 'staffs/fire-wand.png' },
+  { key: 'items/barbarian-helmet', name: 'Barbarian Helmet', type: 'Armor', subType: 'Head', tier: 2, textureAtlas: 'items', texturePath: 'helmets/barbarian-helmet.png' },
+  { key: 'items/greater-life-potion', name: 'Greater Life Potion', type: 'Consumable', subType: 'Potion', tier: 1, textureAtlas: 'items', texturePath: 'potions/greater-life-potion.png' },
+];
+
+const mockYourBuyOrders: IMarketplaceBuyOrderItem[] = [
+  { _id: 'bo-1', owner: 'player-1', itemBlueprintKey: 'items/abyssal-edge', itemRarity: 'Rare', maxPrice: 500, escrowedGold: 500, fee: 25, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  { _id: 'bo-2', owner: 'player-1', itemBlueprintKey: 'items/angelic-sword', maxPrice: 2000, escrowedGold: 2000, fee: 100, status: MarketplaceBuyOrderStatus.Fulfilled, fulfilledBy: 'DarkKnight42', createdAt: daysAgo(14), updatedAt: daysAgo(1) },
+  { _id: 'bo-3', owner: 'player-1', itemBlueprintKey: 'items/leather-armor', maxPrice: 300, escrowedGold: 0, fee: 15, status: MarketplaceBuyOrderStatus.Expired, createdAt: daysAgo(35), updatedAt: daysAgo(7) },
+];
+
+const mockOpenBuyOrders: IMarketplaceBuyOrderItem[] = [
+  { _id: 'obo-1', owner: 'player-2', itemBlueprintKey: 'items/abyssal-tide-staff', itemRarity: 'Epic', maxPrice: 1500, escrowedGold: 1500, fee: 75, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  { _id: 'obo-2', owner: 'player-3', itemBlueprintKey: 'items/wooden-shield', maxPrice: 200, escrowedGold: 200, fee: 10, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(5), updatedAt: daysAgo(5) },
+  { _id: 'obo-3', owner: 'player-4', itemBlueprintKey: 'items/fire-wand', itemRarity: 'Rare', maxPrice: 800, escrowedGold: 800, fee: 40, status: MarketplaceBuyOrderStatus.Active, createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+];
+
+const mockTransactions: IMarketplaceTransaction[] = [
+  { owner: 'player-1', type: MarketplaceTransactionType.Purchase, goldAmount: 450, itemKey: 'items/broad-sword', itemName: 'Broad Sword', counterpartName: 'MerchantKing', currency: 'gold', createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  { owner: 'player-1', type: MarketplaceTransactionType.Sale, goldAmount: 1200, itemKey: 'items/angelic-sword', itemName: 'Angelic Sword', counterpartName: 'ShadowBlade', currency: 'dc', createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+  { owner: 'player-1', type: MarketplaceTransactionType.Purchase, goldAmount: 275000, itemKey: 'items/angelic-sword', itemName: 'Angelic Sword', counterpartName: 'DCBuyer', currency: 'dc', createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  { owner: 'player-1', type: MarketplaceTransactionType.ListingFee, goldAmount: 60, itemKey: 'items/angelic-sword', itemName: 'Angelic Sword', createdAt: daysAgo(2), updatedAt: daysAgo(2) },
+  { owner: 'player-1', type: MarketplaceTransactionType.Withdrawal, goldAmount: 3200, createdAt: daysAgo(4), updatedAt: daysAgo(4) },
+  { owner: 'player-1', type: MarketplaceTransactionType.Expired, goldAmount: 0, itemKey: 'items/leather-armor', itemName: 'Leather Armor', createdAt: daysAgo(7), updatedAt: daysAgo(7) },
+  { owner: 'player-1', type: MarketplaceTransactionType.BuyOrderPlaced, goldAmount: 500, itemKey: 'items/broad-sword', itemName: 'Broad Sword', createdAt: daysAgo(3), updatedAt: daysAgo(3) },
+  { owner: 'player-1', type: MarketplaceTransactionType.BuyOrderFulfilled, goldAmount: 2000, itemKey: 'items/angelic-sword', itemName: 'Angelic Sword', counterpartName: 'DarkKnight42', createdAt: daysAgo(1), updatedAt: daysAgo(1) },
+  { owner: 'player-1', type: MarketplaceTransactionType.BuyOrderCancelled, goldAmount: 300, itemKey: 'items/leather-armor', itemName: 'Leather Armor', createdAt: daysAgo(10), updatedAt: daysAgo(10) },
+];
+
 const Template: Story = () => {
   const [page, setPage] = React.useState(1);
+  const [selectedBlueprint, setSelectedBlueprint] = React.useState<IMarketplaceBlueprintSummary | undefined>();
+  const [quantity, setQuantity] = React.useState(1);
+  const [maxPrice, setMaxPrice] = React.useState(0);
+  const [selectedRarity, setSelectedRarity] = React.useState('');
+  const [blueprintResults, setBlueprintResults] = React.useState<IMarketplaceBlueprintSummary[]>([]);
+  const [blueprintLoading, setBlueprintLoading] = React.useState(false);
+  const [historyType, setHistoryType] = React.useState('All');
+  const [yourBuyOrders, setYourBuyOrders] = React.useState<IMarketplaceBuyOrderItem[]>(mockYourBuyOrders);
+
+  const handleBlueprintSearch = (request: any) => {
+    console.log('blueprint search:', request);
+    setBlueprintLoading(true);
+    // Simulate async search
+    setTimeout(() => {
+      const filtered = mockBlueprints.filter(bp => {
+        if (request.name && !bp.name.toLowerCase().includes(request.name.toLowerCase())) return false;
+        if (request.itemType && bp.type !== request.itemType) return false;
+        return true;
+      });
+      setBlueprintResults(filtered);
+      setBlueprintLoading(false);
+    }, 300);
+  };
+
+  const filteredTransactions = historyType === 'All'
+    ? mockTransactions
+    : mockTransactions.filter(tx => tx.type === historyType);
 
   return (
     <RPGUIRoot>
@@ -38,6 +111,7 @@ const Template: Story = () => {
         }))}
         equipmentSet={equipmentSetMock}
         onMarketPlaceItemBuy={tradeId => console.log(tradeId)}
+        onFulfillBuyOrder={buyOrderId => console.log('fulfill buy order:', buyOrderId)}
         availableGold={0}
         selectedItemToSell={null}
         onSelectedItemToSellRemove={() => console.log('click')}
@@ -51,6 +125,62 @@ const Template: Story = () => {
         currentPage={page}
         itemsPerPage={30}
         onPageChange={setPage}
+        // Buy Order props
+        buyOrderSelectedBlueprint={selectedBlueprint}
+        buyOrderQuantity={quantity}
+        buyOrderMaxPrice={maxPrice}
+        buyOrderSelectedRarity={selectedRarity}
+        onBuyOrderQuantityChange={setQuantity}
+        onBuyOrderMaxPriceChange={setMaxPrice}
+        onBuyOrderRarityChange={setSelectedRarity}
+        onPlaceBuyOrder={() => {
+          if (selectedBlueprint) {
+            const newOrder: IMarketplaceBuyOrderItem = {
+              _id: `bo-${Date.now()}`,
+              owner: 'player-1',
+              itemBlueprintKey: selectedBlueprint.key,
+              itemRarity: selectedRarity as any,
+              maxPrice,
+              escrowedGold: maxPrice,
+              fee: Math.floor(maxPrice * 0.05),
+              status: MarketplaceBuyOrderStatus.Active,
+              createdAt: new Date(),
+              updatedAt: new Date(),
+            };
+            setYourBuyOrders(prev => [newOrder, ...prev]);
+          }
+        }}
+        onClearBuyOrderBlueprint={() => {
+          setSelectedBlueprint(undefined);
+          setQuantity(1);
+          setMaxPrice(0);
+          setSelectedRarity('');
+        }}
+        yourBuyOrders={yourBuyOrders}
+        yourBuyOrdersTotal={yourBuyOrders.length}
+        yourBuyOrdersPage={1}
+        onYourBuyOrdersPageChange={p => console.log('your orders page:', p)}
+        onCancelBuyOrder={id => setYourBuyOrders(prev => prev.filter(o => o._id !== id))}
+        openBuyOrders={mockOpenBuyOrders}
+        openBuyOrdersTotal={mockOpenBuyOrders.length}
+        openBuyOrdersPage={1}
+        onOpenBuyOrdersPageChange={(p: number) => console.log('open orders page:', p)}
+        // Blueprint Search props
+        onBlueprintSearch={handleBlueprintSearch}
+        onBlueprintSelect={setSelectedBlueprint}
+        blueprintSearchResults={blueprintResults}
+        blueprintSearchTotalCount={blueprintResults.length}
+        blueprintSearchCurrentPage={1}
+        blueprintSearchIsLoading={blueprintLoading}
+        // History props
+        historyTransactions={filteredTransactions}
+        historyTotalCount={filteredTransactions.length}
+        historyCurrentPage={1}
+        historyItemsPerPage={10}
+        historySelectedType={historyType}
+        onHistoryTypeChange={setHistoryType}
+        onHistoryPageChange={p => console.log('history page:', p)}
+        onActiveTabChange={tab => console.log('tab changed:', tab)}
       />
     </RPGUIRoot>
   );

package/src/stories/Features/trading/MarketplaceRows.stories.tsx

@@ -25,3 +25,14 @@ const Template: Story = () => (
 );
 
 export const Default = Template.bind({});
+
+export const HighStackQuantity: Story = () => (
+  <RPGUIRoot>
+    <MarketplaceRows
+      atlasIMG={atlasIMG}
+      atlasJSON={atlasJSON}
+      itemPrice={10}
+      item={{ ...items[0], stackQty: 99999 }}
+    />
+  </RPGUIRoot>
+);

package/src/stories/UI/buttonsAndInputs/SegmentedToggle.stories.tsx

@@ -0,0 +1,54 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import {
+  ISegmentedToggleProps,
+  SegmentedToggle,
+} from '../../../components/shared/SegmentedToggle';
+
+const meta: Meta = {
+  title: 'UI/Buttons & Inputs/SegmentedToggle',
+  component: SegmentedToggle,
+  decorators: [
+    StoryComponent => (
+      <RPGUIRoot>
+        <div style={{ padding: '2rem', background: '#333' }}>
+          <StoryComponent />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+};
+
+export default meta;
+
+const Template: Story<ISegmentedToggleProps> = args => {
+  const [activeId, setActiveId] = React.useState(args.activeId);
+
+  return (
+    <SegmentedToggle
+      {...args}
+      activeId={activeId}
+      onChange={setActiveId}
+    />
+  );
+};
+
+export const MarketplaceModes = Template.bind({});
+MarketplaceModes.args = {
+  activeId: 'all',
+  options: [
+    { id: 'all', label: 'All' },
+    { id: 'sell', label: 'Sell Offers' },
+    { id: 'buy', label: 'Buy Requests' },
+  ],
+};
+
+export const ShortOptions = Template.bind({});
+ShortOptions.args = {
+  activeId: 'gold',
+  options: [
+    { id: 'gold', label: 'Gold' },
+    { id: 'dc', label: 'DC' },
+  ],
+};

package/src/stories/UI/text/LabelPill.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, Story } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import { ILabelPillProps, LabelPill } from '../../../components/shared/LabelPill';
+
+const meta: Meta = {
+  title: 'UI/Text/LabelPill',
+  component: LabelPill,
+  decorators: [
+    StoryComponent => (
+      <RPGUIRoot>
+        <div style={{ padding: '2rem', background: '#333' }}>
+          <StoryComponent />
+        </div>
+      </RPGUIRoot>
+    ),
+  ],
+};
+
+export default meta;
+
+const Template: Story<ILabelPillProps> = args => <LabelPill {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  children: 'Default',
+};
+
+export const BuyRequest = Template.bind({});
+BuyRequest.args = {
+  children: 'Buy Request',
+  background: 'rgba(34, 197, 94, 0.16)',
+  borderColor: 'rgba(34, 197, 94, 0.4)',
+  color: '#bbf7d0',
+};
+
+export const Status = Template.bind({});
+Status.args = {
+  children: 'Active',
+  background: '#22c55e',
+  borderColor: 'transparent',
+  color: '#fff',
+};

package/src/utils/__test__/atlasUtils.spec.ts

@@ -0,0 +1,26 @@
+import atlasJSON from '../../mocks/atlas/items/items.json';
+import { resolveAtlasSpriteKey } from '../atlasUtils';
+
+describe('resolveAtlasSpriteKey', () => {
+  it('returns exact atlas matches unchanged', () => {
+    expect(resolveAtlasSpriteKey(atlasJSON, 'swords/angelic-sword.png')).toBe(
+      'swords/angelic-sword.png'
+    );
+  });
+
+  it('matches a missing category by sprite base name', () => {
+    expect(resolveAtlasSpriteKey(atlasJSON, 'items/angelic-sword')).toBe(
+      'swords/angelic-sword.png'
+    );
+  });
+
+  it('matches a malformed story texture path by sprite base name', () => {
+    expect(resolveAtlasSpriteKey(atlasJSON, 'armor/wooden-shield.png')).toBe(
+      'shields/wooden-shield.png'
+    );
+  });
+
+  it('returns null when no atlas sprite can be resolved', () => {
+    expect(resolveAtlasSpriteKey(atlasJSON, 'items/iron-sword')).toBeNull();
+  });
+});

package/src/utils/atlasUtils.ts

@@ -0,0 +1,80 @@
+export const NO_IMAGE_SPRITE_KEY = 'others/no-image.png';
+
+const atlasBaseNameLookupCache = new WeakMap<object, Map<string, string>>();
+
+const getBaseName = (spriteKey: string): string | null => {
+  const normalizedKey = spriteKey.trim();
+  if (!normalizedKey) {
+    return null;
+  }
+
+  const fileName = normalizedKey.split('/').pop();
+  if (!fileName) {
+    return null;
+  }
+
+  return fileName.replace(/\.png$/, '');
+};
+
+const getAtlasBaseNameLookup = (atlasJSON: any): Map<string, string> => {
+  if (!atlasJSON || typeof atlasJSON !== 'object') {
+    return new Map();
+  }
+
+  const cachedLookup = atlasBaseNameLookupCache.get(atlasJSON);
+  if (cachedLookup) {
+    return cachedLookup;
+  }
+
+  const frames = atlasJSON?.frames ?? {};
+  const lookup = new Map<string, string>();
+
+  Object.keys(frames).forEach((frameKey) => {
+    const baseName = getBaseName(frameKey);
+    if (baseName && !lookup.has(baseName)) {
+      lookup.set(baseName, frameKey);
+    }
+  });
+
+  atlasBaseNameLookupCache.set(atlasJSON, lookup);
+
+  return lookup;
+};
+
+export const resolveAtlasSpriteKey = (
+  atlasJSON: any,
+  spriteKey?: string | null
+): string | null => {
+  if (!spriteKey) {
+    return null;
+  }
+
+  const normalizedKey = spriteKey.trim();
+  if (!normalizedKey) {
+    return null;
+  }
+
+  const frames = atlasJSON?.frames;
+  if (!frames) {
+    return null;
+  }
+
+  if (frames[normalizedKey]) {
+    return normalizedKey;
+  }
+
+  const withPngExtension = normalizedKey.endsWith('.png')
+    ? normalizedKey
+    : `${normalizedKey}.png`;
+
+  if (frames[withPngExtension]) {
+    return withPngExtension;
+  }
+
+  const baseName = getBaseName(normalizedKey);
+  if (!baseName) {
+    return null;
+  }
+
+  return getAtlasBaseNameLookup(atlasJSON).get(baseName) ?? null;
+};