@rpg-engine/long-bow 0.8.72 → 0.8.73

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, IProductBlueprint, ItemRarities, ItemSubType, ItemType, MetadataType, UserAccountTypes, PaymentCurrency, PurchaseType } 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';
@@ -39,7 +39,7 @@ const storeItems: IProductBlueprint[] = mockItems.map((item, index) => ({
   textureAtlas: 'items',
   textureKey: item.texturePath,
   type: PurchaseType.Item,
-  onPurchase: async () => {},
+  onPurchase: async () => { },
   itemType: item.type,
   itemSubType: item.subType,
   rarity: item.rarity,
@@ -48,6 +48,7 @@ const storeItems: IProductBlueprint[] = mockItems.map((item, index) => ({
   maxStackSize: item.maxStackSize || 1,
   isUsable: true,
   requiredAccountType: item.rarity === 'Legendary' ? [UserAccountTypes.PremiumGold] : [],
+
 }));
 
 // Sample character skins
@@ -69,6 +70,28 @@ 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: IProductBlueprint[] = [
   {
@@ -81,7 +104,7 @@ const characterSkinItems: IProductBlueprint[] = [
     textureAtlas: 'items',
     textureKey: 'items/character_customization.png',
     type: PurchaseType.Item,
-    onPurchase: async () => {},
+    onPurchase: async () => { },
     itemType: ItemType.Other,
     itemSubType: ItemSubType.Other,
     rarity: ItemRarities.Rare,
@@ -95,6 +118,9 @@ const characterSkinItems: IProductBlueprint[] = [
       atlasJSON: entitiesAtlasJSON,
       atlasIMG: entitiesAtlasIMG,
     },
+    store: {
+      isHighlighted: true, // Highlight the first character skin item
+    },
   },
   {
     key: 'skin-premium-character-pack',
@@ -106,7 +132,7 @@ const characterSkinItems: IProductBlueprint[] = [
     textureAtlas: 'items',
     textureKey: 'items/premium_character_pack.png',
     type: PurchaseType.Item,
-    onPurchase: async () => {},
+    onPurchase: async () => { },
     itemType: ItemType.Other,
     itemSubType: ItemSubType.Other,
     rarity: ItemRarities.Epic,
@@ -127,6 +153,7 @@ const characterSkinItems: IProductBlueprint[] = [
 // Create duplicated items once with unique keys
 const duplicatedItems: IProductBlueprint[] = [
   ...storeItems,
+  characterNameChangeItem,
   ...characterSkinItems,
   ...storeItems.map((item, index) => ({
     ...item,
@@ -160,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',
@@ -209,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']}
     />
   ),
 };