@rpg-engine/long-bow 0.7.89 → 0.7.91

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.89",
+  "version": "0.7.91",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/CraftBook/CraftBook.tsx

@@ -13,13 +13,14 @@ import { DraggableContainer } from '../DraggableContainer';
 import { InputRadio } from '../InputRadio';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { CraftingRecipe } from './CraftingRecipe';
+import { calculateMaxCraftable } from './utils/calculateMaxCraftable';
 
 export interface IItemCraftSelectorProps {
   atlasJSON: any;
   atlasIMG: any;
   onClose: () => void;
   onSelect: (value: string) => void;
-  onCraftItem: (value: string | undefined) => void;
+  onCraftItem: (value: string | undefined, maxCraftable: number) => void;
   craftablesItems: ICraftableItem[];
   equipmentSet?: IEquipmentSet | null;
   inventory?: IItemContainer | null;
@@ -66,7 +67,7 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
     savedSelectedType ?? Object.keys(ItemSubType)[0]
   );
   const [size, setSize] = useState<{ width: string; height: string }>();
-
+  const [searchTerm, setSearchTerm] = useState('');
   const [isCraftingDisabled, setIsCraftingDisabled] = useState(false);
 
   useEffect(() => {
@@ -149,6 +150,15 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
     ));
   };
 
+  const filteredCraftableItems = craftablesItems?.filter(item => {
+    const matchesSearch = item.name
+      .toLowerCase()
+      .includes(searchTerm.toLowerCase());
+    const matchesCategory =
+      selectedType === 'Suggested' || item.type === selectedType;
+    return matchesSearch && matchesCategory;
+  });
+
   if (!size) return null;
 
   return (
@@ -168,6 +178,15 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
         <div style={{ width: '100%' }}>
           <Title>Craftbook</Title>
           <Subtitle>Select an item to craft</Subtitle>
+          <SearchContainer>
+            <input
+              type="text"
+              className="rpgui-input"
+              placeholder="Search items..."
+              value={searchTerm}
+              onChange={e => setSearchTerm(e.target.value)}
+            />
+          </SearchContainer>
           <hr className="golden" />
         </div>
 
@@ -177,7 +196,7 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
           </ItemTypes>
 
           <RadioInputScroller className="inputRadioCraftBook">
-            {craftablesItems?.map(item => (
+            {filteredCraftableItems?.map(item => (
               <CraftingRecipe
                 key={item.key}
                 atlasIMG={atlasIMG}
@@ -203,7 +222,15 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
             onPointerDown={() => {
               if (!craftItemKey || isCraftingDisabled) return;
 
-              onCraftItem(craftItemKey);
+              const selectedItem = craftablesItems.find(
+                item => item.key === craftItemKey
+              );
+              const maxCraftable = calculateMaxCraftable(
+                selectedItem,
+                inventory
+              );
+
+              onCraftItem(craftItemKey, maxCraftable);
               setIsCraftingDisabled(true);
 
               setTimeout(() => {
@@ -295,3 +322,27 @@ const ItemTypes = styled.div`
     width: 100%;
   }
 `;
+
+const SearchContainer = styled.div`
+  margin: 8px 0;
+  padding: 0 16px;
+
+  input {
+    width: 100%;
+    font-size: 0.8rem;
+    padding: 8px 12px;
+    background-color: rgba(0, 0, 0, 0.3);
+    border: none;
+    color: white;
+    border-radius: 4px;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+
+    &:focus {
+      outline: none;
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+`;

package/src/components/CraftBook/utils/calculateMaxCraftable.ts

@@ -0,0 +1,30 @@
+import { ICraftableItem, IItem, IItemContainer } from '@rpg-engine/shared';
+
+export function calculateMaxCraftable(
+  recipe: ICraftableItem | undefined,
+  inventory: IItemContainer | null | undefined
+): number {
+  if (!inventory || !recipe?.ingredients) {
+    return 0;
+  }
+
+  return recipe.ingredients.reduce((maxPossible, ingredient) => {
+    const inventoryItem = Object.values(inventory.slots).find(
+      (item): item is IItem => item?.key === ingredient.key
+    );
+
+    if (!inventoryItem) {
+      return 0;
+    }
+
+    const possibleWithThisIngredient = Math.floor(
+      inventoryItem.stackQty ?? 0 / ingredient.qty
+    );
+
+    if (maxPossible === -1) {
+      return possibleWithThisIngredient;
+    }
+
+    return Math.min(maxPossible, possibleWithThisIngredient);
+  }, -1);
+}

package/src/stories/Features/craftbook/CraftBook.stories.tsx

@@ -22,7 +22,12 @@ const Template: Story = args => (
       onSelect={onSelect}
       onClose={() => console.log('closing Equipment Set Container')}
       craftablesItems={craftableItems}
-      onCraftItem={onCraftItem}
+      onCraftItem={(value, maxCraftable) => {
+        console.log('Crafting:', {
+          itemKey: value,
+          maxCraftable: maxCraftable,
+        });
+      }}
       equipmentSet={equipmentSetMock}
       {...args}
     />
@@ -31,10 +36,6 @@ const Template: Story = args => (
 
 export const Default = Template.bind({});
 
-const onCraftItem = (value: string | undefined) => {
-  console.log('Craft', value);
-};
-
 const onSelect = (value: string) => {
   console.log('Story package', value);
 };