@rpg-engine/long-bow 0.7.92 → 0.7.94

package/package.json

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

package/src/components/CraftBook/CraftBook.tsx

@@ -84,6 +84,11 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
     []
   );
   const [currentPage, setCurrentPage] = useState(1);
+  const [items, setItems] = useState<ICraftableItem[]>(craftablesItems);
+
+  useEffect(() => {
+    setItems(craftablesItems);
+  }, [craftablesItems]);
 
   useEffect(() => {
     const handleResize = (): void => {
@@ -118,32 +123,36 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
   };
 
   const categoryOptions: IOptionsProps[] = [
-    'Suggested',
-    ...(pinnedItems.length > 0 ? ['Pinned'] : []),
-    ...Object.keys(ItemSubType),
-  ]
-    .filter(type => type !== 'DeadBody')
-    .sort((a, b) => {
-      if (a === 'Suggested') return -1;
-      if (b === 'Suggested') return 1;
-      if (a === 'Pinned') return -1;
-      if (b === 'Pinned') return 1;
-      return a.localeCompare(b);
-    })
-    .map((type, index) => ({
-      id: index,
-      value: type,
-      option: type,
-    }));
-
-  const filteredCraftableItems = craftablesItems?.filter(item => {
+    { id: 0, value: 'Suggested', option: 'Suggested' },
+    ...(pinnedItems.length > 0
+      ? [{ id: 1, value: 'Pinned', option: 'Pinned' }]
+      : []),
+    ...Object.keys(ItemSubType)
+      .filter(type => type !== 'DeadBody')
+      .map((type, index) => ({
+        id: index + (pinnedItems.length > 0 ? 2 : 1),
+        value: type,
+        option:
+          type === 'CraftingResources' || type === 'CraftingResource'
+            ? 'Resources'
+            : type,
+      })),
+  ].sort((a, b) => {
+    if (a.value === 'Suggested') return -1;
+    if (b.value === 'Suggested') return 1;
+    if (a.value === 'Pinned') return -1;
+    if (b.value === 'Pinned') return 1;
+    return a.value.localeCompare(b.value);
+  });
+
+  const filteredCraftableItems = items?.filter(item => {
     const matchesSearch = item.name
       .toLowerCase()
       .includes(searchTerm.toLowerCase());
     const matchesCategory =
       selectedType === 'Suggested' ||
       (selectedType === 'Pinned' && pinnedItems.includes(item.key)) ||
-      item.type === selectedType;
+      item.subType === selectedType;
     return matchesSearch && matchesCategory;
   });
 
@@ -241,25 +250,27 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
           </RadioInputScroller>
         </ContentContainer>
 
-        <PaginationContainer>
-          <PaginationButton
-            onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
-            disabled={currentPage === 1}
-          >
-            <FaChevronLeft size={12} />
-          </PaginationButton>
-          <PageInfo>
-            Page {currentPage} of {totalPages}
-          </PageInfo>
-          <PaginationButton
-            onClick={() =>
-              setCurrentPage(prev => Math.min(totalPages, prev + 1))
-            }
-            disabled={currentPage === totalPages}
-          >
-            <FaChevronRight size={12} />
-          </PaginationButton>
-        </PaginationContainer>
+        {totalPages > 1 && (
+          <PaginationContainer>
+            <PaginationButton
+              onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
+              disabled={currentPage === 1}
+            >
+              <FaChevronLeft size={12} />
+            </PaginationButton>
+            <PageInfo>
+              Page {currentPage} of {totalPages}
+            </PageInfo>
+            <PaginationButton
+              onClick={() =>
+                setCurrentPage(prev => Math.min(totalPages, prev + 1))
+              }
+              disabled={currentPage === totalPages}
+            >
+              <FaChevronRight size={12} />
+            </PaginationButton>
+          </PaginationContainer>
+        )}
 
         <Footer>
           <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
@@ -398,7 +409,7 @@ const RadioInputScroller = styled.div`
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 16px;
-  align-items: start;
+  align-content: start;
 
   @media (max-width: ${mobilePortrait.width}) {
     grid-template-columns: 1fr;