@rpg-engine/long-bow 0.8.4 → 0.8.5

package/src/stories/Features/store/Store.stories.tsx

@@ -0,0 +1,102 @@
+import { UserAccountTypes } from '@rpg-engine/shared';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
+import { Store } from '../../../components/Store/Store';
+import { IStoreItem } from '../../../components/Store/StoreTypes';
+import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
+import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
+import { mockItems } from '../../../mocks/informationCenter.mocks';
+
+const meta = {
+  title: 'Features/Store',
+  component: Store,
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    Story => (
+      <RPGUIRoot>
+        <Story />
+      </RPGUIRoot>
+    ),
+  ],
+} satisfies Meta<typeof Store>;
+
+export default meta;
+type Story = StoryObj<typeof Store>;
+
+// Create mock items once, with fixed stock values
+const storeItems: IStoreItem[] = mockItems.map((item, index) => ({
+  _id: `original-${item.key}-${index}`,
+  key: `original-${item.key}-${index}`,
+  name: item.name,
+  description: item.description,
+  fullDescription: item.description,
+  texturePath: item.texturePath,
+  textureAtlas: 'items',
+  textureKey: item.texturePath,
+  price: item.basePrice,
+  stock: 5 + (index % 5), // Fixed stock values based on index
+  type: item.type,
+  subType: item.subType,
+  attack: item.attack || 0,
+  defense: item.defense || 0,
+  weight: item.weight,
+  rarity: item.rarity,
+  isEquipable: true,
+  isStackable: item.maxStackSize > 1,
+  isUsable: true,
+  isStorable: true,
+  hasUseWith: false,
+  isSolid: false,
+  isTwoHanded: false,
+  isItemContainer: false,
+  layer: 1,
+  allowedEquipSlotType: item.allowedEquipSlotType || [],
+  maxStackSize: item.maxStackSize || 1,
+  usableEffectDescription: item.usableEffectDescription || '',
+  canSell: item.canSell ?? true,
+  rangeType: item.rangeType,
+  entityEffects: item.entityEffects || [],
+  entityEffectChance: item.entityEffectChance || 0,
+  equippedBuff: item.equippedBuff || [],
+  equippedBuffDescription: item.equippedBuffDescription || '',
+  requiredAccountType: item.rarity === 'Legendary' ? [UserAccountTypes.PremiumGold] : [],
+}));
+
+// Create duplicated items once with unique keys
+const duplicatedItems: IStoreItem[] = [
+  ...storeItems,
+  ...storeItems.map((item, index) => ({
+    ...item,
+    _id: `copy1-${item.key}-${index}`,
+    key: `copy1-${item.key}-${index}`,
+  })),
+  ...storeItems.map((item, index) => ({
+    ...item,
+    _id: `copy2-${item.key}-${index}`,
+    key: `copy2-${item.key}-${index}`,
+  })),
+  ...storeItems.map((item, index) => ({
+    ...item,
+    _id: `copy3-${item.key}-${index}`,
+    key: `copy3-${item.key}-${index}`,
+  })),
+];
+
+// Create the story with the static mock data
+export const Default: Story = {
+  render: () => (
+    <Store
+      items={duplicatedItems}
+      userGold={1000}
+      userAccountType={UserAccountTypes.Free}
+      onPurchase={(item: IStoreItem, quantity: number) => {
+        console.log('Purchased', quantity, 'x', item.name);
+      }}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+    />
+  ),
+};

package/src/utils/itemUtils.ts

@@ -0,0 +1,36 @@
+interface IItemSprite {
+  key: string;
+  stackQty?: number;
+  texturePath: string;
+  isStackable?: boolean;
+}
+
+export const getItemTextureKeyPath = (
+  item: IItemSprite,
+  atlasJSON: Record<string, any>
+): string => {
+  if (!item.texturePath) {
+    return '';
+  }
+
+  const textureKey = item.texturePath
+    .split('/')
+    .pop()
+    ?.split('.')[0];
+
+  if (!textureKey) {
+    return '';
+  }
+
+  const stackQty = item.stackQty || 1;
+  const isStackable = item.isStackable || false;
+
+  if (isStackable && stackQty > 1) {
+    const stackKey = `${textureKey}-stack`;
+    if (atlasJSON.frames[stackKey]) {
+      return stackKey;
+    }
+  }
+
+  return textureKey;
+};