@rpg-engine/long-bow 0.8.71 → 0.8.73

package/src/components/Store/sections/StoreItemsSection.tsx

@@ -1,13 +1,25 @@
-import { IStoreItem, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import {
+  IProductBlueprint,
+  MetadataType,
+  UserAccountTypes,
+  ItemType,
+} from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { StoreCharacterSkinRow } from '../StoreCharacterSkinRow';
 import { StoreItemRow } from '../StoreItemRow';
-
+import { Dropdown } from '../../Dropdown';
+import { SearchBar } from '../../shared/SearchBar/SearchBar';
+import { useStoreFiltering } from '../../../hooks/useStoreFiltering';
 
 interface IStoreItemsSectionProps {
-  items: IStoreItem[];
-  onAddToCart: (item: IStoreItem, quantity: number, metadata?: Record<string, any>) => void;
+  items: IProductBlueprint[];
+  onAddToCart: (
+    item: IProductBlueprint,
+    quantity: number,
+    metadata?: Record<string, any>
+  ) => void;
   atlasJSON: Record<string, any>;
   atlasIMG: string;
   userAccountType?: UserAccountTypes;
@@ -22,18 +34,20 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   userAccountType,
   textInputItemKeys = [],
 }) => {
-  const [searchQuery, setSearchQuery] = useState('');
-
-  const filteredItems = items.filter(item =>
-    item.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const {
+    searchQuery,
+    setSearchQuery,
+    setSelectedCategory,
+    categoryOptions,
+    filteredItems,
+  } = useStoreFiltering(items);
 
-  const renderStoreItem = (item: IStoreItem) => {
+  const renderStoreItem = (item: IProductBlueprint) => {
     // Prefer a specialized character skin row when needed
     if (item.metadataType === MetadataType.CharacterSkin) {
       return (
         <StoreCharacterSkinRow
-          key={item._id}
+          key={item.key}
           item={item}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
@@ -43,10 +57,10 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
       );
     }
     // Render text input row when configured for this item key
-    if (textInputItemKeys.includes(item.key) || textInputItemKeys.includes(item._id)) {
+    if (textInputItemKeys.includes(item.key)) {
       return (
         <StoreItemRow
-          key={item._id}
+          key={item.key}
           item={item}
           atlasJSON={atlasJSON}
           atlasIMG={atlasIMG}
@@ -59,7 +73,7 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
     // Fallback to standard arrow-based row
     return (
       <StoreItemRow
-        key={item._id}
+        key={item.key}
         item={item}
         atlasJSON={atlasJSON}
         atlasIMG={atlasIMG}
@@ -70,17 +84,54 @@ export const StoreItemsSection: React.FC<IStoreItemsSectionProps> = ({
   };
 
   return (
-    <ScrollableContent
-      items={filteredItems}
-      renderItem={renderStoreItem}
-      emptyMessage="No items available."
-      searchOptions={{
-        value: searchQuery,
-        onChange: setSearchQuery,
-        placeholder: 'Search items...',
-      }}
-      layout="list"
-      maxHeight="400px"
-    />
+    <StoreContainer>
+      <SearchHeader>
+        <SearchBarContainer>
+          <SearchBar
+            value={searchQuery}
+            onChange={setSearchQuery}
+            placeholder="Search items..."
+          />
+        </SearchBarContainer>
+        <DropdownContainer>
+          <Dropdown
+            options={categoryOptions}
+            onChange={value => setSelectedCategory(value as ItemType | 'all')}
+            width="100%"
+          />
+        </DropdownContainer>
+      </SearchHeader>
+
+      <ScrollableContent
+        items={filteredItems}
+        renderItem={renderStoreItem}
+        emptyMessage="No items match your filters."
+        layout="list"
+        maxHeight="350px"
+      />
+    </StoreContainer>
   );
 };
+
+const StoreContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 0.5rem;
+`;
+
+const SearchHeader = styled.div`
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  padding-top: 0.25rem;
+`;
+
+const SearchBarContainer = styled.div`
+  flex: 0.75;
+`;
+
+const DropdownContainer = styled.div`
+  flex: 0.25;
+  min-width: 140px;
+`;

package/src/components/Store/sections/StorePacksSection.tsx

@@ -1,10 +1,11 @@
 import { IItemPack } from '@rpg-engine/shared';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback } from 'react';
 import { FaCartPlus } from 'react-icons/fa';
 import styled from 'styled-components';
 import { CTAButton } from '../../shared/CTAButton/CTAButton';
 import { ScrollableContent } from '../../shared/ScrollableContent/ScrollableContent';
 import { ShoppingCardHorizontal } from '../../shared/ShoppingCart/CartCardHorizontal';
+import { usePackFiltering } from '../../../hooks/usePackFiltering';
 
 interface IStorePacksSectionProps {
   packs: IItemPack[];
@@ -17,7 +18,9 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
   onAddToCart,
   onSelectPack,
 }) => {
-  const [searchQuery, setSearchQuery] = useState('');
+  const { searchQuery, setSearchQuery, filteredPacks } = usePackFiltering(
+    packs
+  );
 
   const renderPackFooter = useCallback(
     (pack: IItemPack) => (
@@ -50,14 +53,6 @@ export const StorePacksSection: React.FC<IStorePacksSectionProps> = ({
     [onSelectPack, renderPackFooter]
   );
 
-  const filteredPacks = useMemo(
-    () =>
-      packs.filter(pack =>
-        pack.title.toLowerCase().includes(searchQuery.toLowerCase())
-      ),
-    [packs, searchQuery]
-  );
-
   return (
     <ScrollableContent
       items={filteredPacks}

package/src/hooks/useCharacterSkinNavigation.ts

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import { ICharacterProps } from '../components/Character/CharacterSelection';
+
+export const useCharacterSkinNavigation = (
+  availableCharacters: ICharacterProps[],
+  itemKey: string
+) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    setCurrentIndex(0);
+  }, [itemKey]);
+
+  const handlePreviousSkin = () => {
+    setCurrentIndex(prevIndex =>
+      prevIndex === 0 ? availableCharacters.length - 1 : prevIndex - 1
+    );
+  };
+
+  const handleNextSkin = () => {
+    setCurrentIndex(prevIndex =>
+      prevIndex === availableCharacters.length - 1 ? 0 : prevIndex + 1
+    );
+  };
+
+  const currentCharacter = availableCharacters[currentIndex];
+
+  return {
+    currentIndex,
+    currentCharacter,
+    handlePreviousSkin,
+    handleNextSkin,
+  };
+};

package/src/hooks/usePackFiltering.ts

@@ -0,0 +1,20 @@
+import { useMemo, useState } from 'react';
+import { IItemPack } from '@rpg-engine/shared';
+
+export const usePackFiltering = (packs: IItemPack[]) => {
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredPacks = useMemo(
+    () =>
+      packs.filter(pack =>
+        pack.title.toLowerCase().includes(searchQuery.toLowerCase())
+      ),
+    [packs, searchQuery]
+  );
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    filteredPacks,
+  };
+};

package/src/hooks/useQuantityControl.ts

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+export const useQuantityControl = (
+  initialQuantity: number = 1,
+  min: number = 1,
+  max: number = 99
+) => {
+  const [quantity, setQuantity] = useState(initialQuantity);
+
+  const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(e.target.value) || min;
+    setQuantity(Math.min(Math.max(min, value), max));
+  };
+
+  const handleBlur = () => {
+    if (quantity < min) setQuantity(min);
+    if (quantity > max) setQuantity(max);
+  };
+
+  const incrementQuantity = () => {
+    setQuantity(prev => Math.min(prev + 1, max));
+  };
+
+  const decrementQuantity = () => {
+    setQuantity(prev => Math.max(min, prev - 1));
+  };
+
+  const resetQuantity = () => {
+    setQuantity(initialQuantity);
+  };
+
+  return {
+    quantity,
+    setQuantity,
+    handleQuantityChange,
+    handleBlur,
+    incrementQuantity,
+    decrementQuantity,
+    resetQuantity,
+  };
+};

package/src/hooks/useStoreFiltering.ts

@@ -0,0 +1,51 @@
+import { useMemo, useState } from 'react';
+import { IProductBlueprint, ItemType } from '@rpg-engine/shared';
+import { IOptionsProps } from '../components/Dropdown';
+
+export const useStoreFiltering = (items: IProductBlueprint[]) => {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<ItemType | 'all'>(
+    'all'
+  );
+
+  const categoryOptions: IOptionsProps[] = useMemo(() => {
+    const uniqueCategories = Array.from(
+      new Set(items.map(item => item.itemType))
+    );
+    const allCategories = ['all', ...uniqueCategories] as (ItemType | 'all')[];
+    return allCategories.map((category, index) => ({
+      id: index,
+      value: category,
+      option: category === 'all' ? 'All' : category,
+    }));
+  }, [items]);
+
+  const filteredItems = useMemo(() => {
+    return items
+      .filter(item => {
+        const matchesSearch = item.name
+          .toLowerCase()
+          .includes(searchQuery.toLowerCase());
+        const matchesCategory =
+          selectedCategory === 'all' || item.itemType === selectedCategory;
+        return matchesSearch && matchesCategory;
+      })
+      .sort((a, b) => {
+        const aHighlighted = a.store?.isHighlighted || false;
+        const bHighlighted = b.store?.isHighlighted || false;
+
+        if (aHighlighted && !bHighlighted) return -1;
+        if (!aHighlighted && bHighlighted) return 1;
+        return 0;
+      });
+  }, [items, searchQuery, selectedCategory]);
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    selectedCategory,
+    setSelectedCategory,
+    categoryOptions,
+    filteredItems,
+  };
+};

package/src/mocks/dailyTasks.mocks.ts

@@ -1,8 +1,8 @@
-import { DailyTaskBlueprintMapVisitRegular, DailyTaskChallengeKillMobsBlueprint, DailyTaskRegularCraftFoodBlueprint, DailyTaskRegularCraftPotionsBlueprint, DailyTaskRegularKillMobsBlueprint, ICharacterDailyTask, RewardType, TaskDifficulty, TaskStatus, TaskType } from "@rpg-engine/shared";
+import { ICharacterDailyTask, RewardType, TaskDifficulty, TaskStatus, TaskType } from "@rpg-engine/shared";
 
 export const mockTasks: ICharacterDailyTask[] = [
     {
-        key: DailyTaskRegularKillMobsBlueprint.HuntRats,
+        key: 'hunt-rats',
         name: 'Kill Rats',
         description: 'Eliminate 5 rats in the forest',
         type: TaskType.KillMobs,
@@ -43,7 +43,7 @@ export const mockTasks: ICharacterDailyTask[] = [
         tier: 0
     },
     {
-        key: DailyTaskRegularCraftFoodBlueprint.CraftCheese,
+        key: 'craft-cheese',
         name: 'Gather Resources',
         description: 'Collect 10 pieces of wood',
         type: TaskType.CollectItems,
@@ -84,7 +84,7 @@ export const mockTasks: ICharacterDailyTask[] = [
         tier: 0
     },
     {
-        key: DailyTaskChallengeKillMobsBlueprint.HuntEloraTheQueen,
+        key: 'hunt-elora-the-queen',
         name: 'Slay the Dragon',
         description: 'Defeat the Queen Dragon',
         type: TaskType.KillMobs,
@@ -125,7 +125,7 @@ export const mockTasks: ICharacterDailyTask[] = [
         tier: 0
     },
     {
-        key: DailyTaskBlueprintMapVisitRegular.ExploreVillage,
+        key: 'explore-village',
         name: "Village Ilya Explorer",
         description: "Visit the key locations in the ilya village",
         difficulty: TaskDifficulty.Regular,
@@ -167,7 +167,7 @@ export const mockTasks: ICharacterDailyTask[] = [
         tier: 0
     },
     {
-        key: DailyTaskRegularCraftPotionsBlueprint.CraftLifePotion,
+        key: 'craft-life-potion',
         name: 'Craft Potions',
         description: 'Craft 5 health potions for the local alchemist',
         type: TaskType.CraftItems,

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

@@ -1,4 +1,4 @@
-import { IItemPack, IPurchase, IStoreItem, ItemRarities, ItemSubType, ItemType, MetadataType, UserAccountTypes } from '@rpg-engine/shared';
+import { IItemPack, IProductBlueprint, IPurchase, ItemRarities, ItemSubType, ItemType, MetadataType, PaymentCurrency, PurchaseType, UserAccountTypes } from '@rpg-engine/shared';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
@@ -29,42 +29,26 @@ 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}`,
+const storeItems: IProductBlueprint[] = mockItems.map((item, index) => ({
   key: `original-${item.key}-${index}`,
   name: item.name,
   description: item.description,
-  fullDescription: item.description,
+  price: item.basePrice,
+  currency: PaymentCurrency.USD,
   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,
+  type: PurchaseType.Item,
+  onPurchase: async () => { },
+  itemType: item.type,
+  itemSubType: item.subType,
   rarity: item.rarity,
-  isEquipable: true,
+  weight: item.weight,
   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 || '',
+  isUsable: true,
   requiredAccountType: item.rarity === 'Legendary' ? [UserAccountTypes.PremiumGold] : [],
+
 }));
 
 // Sample character skins
@@ -86,72 +70,77 @@ const availableCharacters = [
   },
 ];
 
+// Create character name change item
+const characterNameChangeItem: IProductBlueprint = {
+  key: 'character-name-change',
+  name: 'Character Name Change',
+  description: 'Change your character\'s name to something new',
+  price: 9.99,
+  currency: PaymentCurrency.USD,
+  texturePath: 'items/character_customization.png',
+  textureAtlas: 'items',
+  textureKey: 'items/character_customization.png',
+  type: PurchaseType.Item,
+  onPurchase: async () => { },
+  itemType: ItemType.Other,
+  itemSubType: ItemSubType.Other,
+  rarity: ItemRarities.Common,
+  weight: 0,
+  isStackable: false,
+  maxStackSize: 1,
+  isUsable: true,
+  inputPlaceholder: 'Enter new character name',
+};
+
 // Create character skin items
-const characterSkinItems: IStoreItem[] = [
+const characterSkinItems: IProductBlueprint[] = [
   {
-    _id: 'skin-character-customization',
     key: 'skin-character-customization',
     name: 'Character Skin Customization',
     description: 'Customize your character\'s appearance with a variety of skins',
-    fullDescription: 'This premium item allows you to customize your character\'s appearance by selecting from a variety of available skins.',
+    price: 14.99,
+    currency: PaymentCurrency.USD,
     texturePath: 'items/character_customization.png',
     textureAtlas: 'items',
     textureKey: 'items/character_customization.png',
-    price: 14.99,
-    type: ItemType.Other,
-    subType: ItemSubType.Other,
-    attack: 0,
-    defense: 0,
-    weight: 0,
+    type: PurchaseType.Item,
+    onPurchase: async () => { },
+    itemType: ItemType.Other,
+    itemSubType: ItemSubType.Other,
     rarity: ItemRarities.Rare,
-    isEquipable: false,
+    weight: 0,
     isStackable: false,
-    isUsable: true,
-    isStorable: true,
-    hasUseWith: false,
-    isSolid: false,
-    isTwoHanded: false,
-    isItemContainer: false,
-    layer: 1,
-    allowedEquipSlotType: [],
     maxStackSize: 1,
-    // Add metadata type and config
+    isUsable: true,
     metadataType: MetadataType.CharacterSkin,
     metadataConfig: {
       availableCharacters,
       atlasJSON: entitiesAtlasJSON,
       atlasIMG: entitiesAtlasIMG,
     },
+    store: {
+      isHighlighted: true, // Highlight the first character skin item
+    },
   },
   {
-    _id: 'skin-premium-character-pack',
     key: 'skin-premium-character-pack',
     name: 'Premium Character Skin Pack',
     description: 'A premium collection of exclusive character skins',
-    fullDescription: 'This exclusive premium pack gives you access to rare and unique character skins to stand out from the crowd.',
+    price: 24.99,
+    currency: PaymentCurrency.USD,
     texturePath: 'items/premium_character_pack.png',
     textureAtlas: 'items',
     textureKey: 'items/premium_character_pack.png',
-    price: 24.99,
-    type: ItemType.Other,
-    subType: ItemSubType.Other,
-    attack: 0,
-    defense: 0,
-    weight: 0,
+    type: PurchaseType.Item,
+    onPurchase: async () => { },
+    itemType: ItemType.Other,
+    itemSubType: ItemSubType.Other,
     rarity: ItemRarities.Epic,
-    isEquipable: false,
+    weight: 0,
     isStackable: false,
-    isUsable: true,
-    isStorable: true,
-    hasUseWith: false,
-    isSolid: false,
-    isTwoHanded: false,
-    isItemContainer: false,
-    layer: 1,
-    allowedEquipSlotType: [],
     maxStackSize: 1,
+    isUsable: true,
     requiredAccountType: [UserAccountTypes.PremiumSilver],
-    // Add metadata type and config with the same character options
     metadataType: MetadataType.CharacterSkin,
     metadataConfig: {
       availableCharacters,
@@ -162,22 +151,20 @@ const characterSkinItems: IStoreItem[] = [
 ];
 
 // Create duplicated items once with unique keys
-const duplicatedItems: IStoreItem[] = [
+const duplicatedItems: IProductBlueprint[] = [
   ...storeItems,
+  characterNameChangeItem,
   ...characterSkinItems,
   ...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}`,
   })),
 ];
@@ -200,20 +187,20 @@ const mockPacks: IItemPack[] = [
     image: customSkinImage,
   },
 
-   {
+  {
     key: 'ultimate-pack',
     title: '👑 Ultimate Premium Pack',
     description: 'The most exclusive collection of items, effects, and perks. Includes everything from previous tiers plus legendary items!',
     priceUSD: 99.99,
     image: customSkinImage,
   },
-    {
+  {
     key: 'gold-pack',
     title: '🥇 Gold Premium Pack',
     description: 'The ultimate premium experience with rare items, unique effects, and exclusive content. For true champions!',
     priceUSD: 49.99,
     image: customSkinImage,
-  },  
+  },
   {
     key: 'silver-pack',
     title: '🥈 Silver Premium Pack',
@@ -249,7 +236,7 @@ export const Default: Story = {
       hidePremiumTab={true}
       tabOrder={['items', 'packs']}
       defaultActiveTab="items"
-      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1']}
+      textInputItemKeys={['original-greater-life-potion-2', 'original-angelic-sword-1', 'character-name-change']}
     />
   ),
 };