@rpg-engine/long-bow 0.8.120 → 0.8.122

package/package.json

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

package/src/components/CraftBook/CraftBook.tsx

@@ -208,7 +208,6 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
                     scale={scale}
                     handleRecipeSelect={setCraftItemKey.bind(null, item.key)}
                     selectedCraftItemKey={craftItemKey}
-                    inventory={inventory}
                     skills={skills}
                   />
                 </CraftingRecipeWrapper>

package/src/components/CraftBook/CraftingRecipe.tsx

@@ -1,7 +1,6 @@
 import {
   ICraftableItem,
   IEquipmentSet,
-  IItemContainer,
   ISkill,
 } from '@rpg-engine/shared';
 import React, { useEffect, useRef, useState } from 'react';
@@ -20,7 +19,6 @@ interface ICraftingRecipeProps {
   scale?: number;
   handleRecipeSelect: () => void;
   selectedCraftItemKey?: string;
-  inventory?: IItemContainer | null;
   skills?: ISkill | null;
 }
 
@@ -71,7 +69,6 @@ export const CraftingRecipe: React.FC<ICraftingRecipeProps> = ({
   scale,
   handleRecipeSelect,
   selectedCraftItemKey,
-  inventory,
   skills,
 }) => {
   const [showTooltip, setShowTooltip] = useState(false);
@@ -150,7 +147,6 @@ export const CraftingRecipe: React.FC<ICraftingRecipeProps> = ({
             x={tooltipPosition.x}
             y={tooltipPosition.y}
             recipe={recipe}
-            inventory={inventory}
             skills={skills}
             atlasIMG={atlasIMG}
             atlasJSON={atlasJSON}

package/src/components/CraftBook/CraftingTooltip.tsx

@@ -1,8 +1,7 @@
-import { ICraftableItem, IItemContainer, ISkill } from '@rpg-engine/shared';
+import { ICraftableItem, ISkill } from '@rpg-engine/shared';
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
-import { countItemFromInventory } from '../../libs/itemCounter';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
 import { modifyString } from './utils/modifyString';
 
@@ -10,7 +9,6 @@ interface ICraftingTooltipProps {
   x: number;
   y: number;
   recipe: ICraftableItem;
-  inventory?: IItemContainer | null;
   skills?: ISkill | null;
   atlasIMG: any;
   atlasJSON: any;
@@ -85,7 +83,6 @@ export const CraftingTooltip: React.FC<ICraftingTooltipProps> = ({
   x,
   y,
   recipe,
-  inventory,
   skills,
   atlasIMG,
   atlasJSON,
@@ -144,10 +141,7 @@ export const CraftingTooltip: React.FC<ICraftingTooltipProps> = ({
 
       <TooltipTitle>Ingredients</TooltipTitle>
       {recipe.ingredients.map((ingredient, index) => {
-        const itemQtyInInventory = !inventory
-          ? 0
-          : countItemFromInventory(ingredient.key, inventory);
-        const isQuantityOk = ingredient.qty <= itemQtyInInventory;
+        const isQuantityOk = ingredient.qty <= ingredient.qtyInInventory;
 
         return (
           <Recipe key={index}>
@@ -159,7 +153,7 @@ export const CraftingTooltip: React.FC<ICraftingTooltipProps> = ({
             />
             <Ingredient isQuantityOk={isQuantityOk}>
               {modifyString(ingredient.key)} x{ingredient.qty} (
-              {itemQtyInInventory})
+              {ingredient.qtyInInventory})
             </Ingredient>
           </Recipe>
         );

package/src/components/CraftBook/MockItems.ts

@@ -11,18 +11,21 @@ export const craftableItems: ICraftableItem[] = [
         name: 'leather',
         qty: 5,
         texturePath: 'crafting-resources/leather.png',
+        qtyInInventory: 10,
       },
       {
         key: 'leather1',
         name: 'leather',
         qty: 10,
         texturePath: 'crafting-resources/leather.png',
+        qtyInInventory: 5,
       },
       {
         key: 'leather2',
         name: 'leather',
         qty: 100,
         texturePath: 'crafting-resources/leather.png',
+        qtyInInventory: 0,
       },
     ],
     minCraftingRequirements: ['blacksmithing', 4],
@@ -37,6 +40,7 @@ export const craftableItems: ICraftableItem[] = [
         name: 'leather',
         qty: 10,
         texturePath: 'crafting-resources/leather.png',
+        qtyInInventory: 15,
       },
     ],
     minCraftingRequirements: ['blacksmithing', 4],
@@ -51,6 +55,7 @@ export const craftableItems: ICraftableItem[] = [
         name: 'leather',
         qty: 10,
         texturePath: 'crafting-resources/leather.png',
+        qtyInInventory: 15,
       },
     ],
     minCraftingRequirements: ['blacksmithing', 4],
@@ -65,6 +70,7 @@ export const craftableItems: ICraftableItem[] = [
         name: 'leather',
         qty: 10,
         texturePath: 'crafting-resources/leather.png',
+        qtyInInventory: 15,
       },
     ],
     minCraftingRequirements: ['blacksmithing', 4],
@@ -79,6 +85,7 @@ export const craftableItems: ICraftableItem[] = [
         name: 'leather',
         qty: 10,
         texturePath: 'crafting-resources/leather.png',
+        qtyInInventory: 15,
       },
     ],
     minCraftingRequirements: ['blacksmithing', 1],
@@ -93,6 +100,7 @@ export const craftableItems: ICraftableItem[] = [
         name: 'leather',
         qty: 10,
         texturePath: 'crafting-resources/leather.png',
+        qtyInInventory: 15,
       },
     ],
     minCraftingRequirements: ['blacksmithing', 4],

package/src/components/InternalTabs/InternalTabs.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { UI_BREAKPOINT_MOBILE } from '../../constants/uiBreakpoints';
 
@@ -29,7 +29,13 @@ export const InternalTabs: React.FC<TableTabProps> = ({
   onTabChange,
   activeTab: externalActiveTab,
 }) => {
-  const activeTabId = externalActiveTab ?? tabs[0].id;
+  const [internalActiveTab, setInternalActiveTab] = useState(tabs[0]?.id);
+  const activeTabId = externalActiveTab ?? internalActiveTab;
+
+  const handleTabClick = (tabId: string): void => {
+    setInternalActiveTab(tabId);
+    onTabChange?.(tabId);
+  };
 
   return (
     <TableWrapper>
@@ -43,7 +49,7 @@ export const InternalTabs: React.FC<TableTabProps> = ({
             inactiveColor={inactiveColor}
             borderColor={borderColor}
             hoverColor={hoverColor}
-            onClick={() => onTabChange?.(tab.id)}
+            onClick={() => handleTabClick(tab.id)}
           >
             {tab.title}
           </TabButton>