@rpg-engine/long-bow 0.7.93 → 0.7.95

package/package.json

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

package/src/components/CraftBook/CraftBook.tsx

@@ -20,8 +20,12 @@ import { DraggableContainer } from '../DraggableContainer';
 import { Dropdown, IOptionsProps } from '../Dropdown';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { CraftingRecipe } from './CraftingRecipe';
+import { useResponsiveSize } from './hooks/useResponsiveSize';
 import { calculateMaxCraftable } from './utils/calculateMaxCraftable';
 
+const MOBILE_WIDTH = '500px';
+const ITEMS_PER_PAGE = 8;
+
 export interface IItemCraftSelectorProps {
   atlasJSON: any;
   atlasIMG: any;
@@ -41,23 +45,6 @@ export interface ShowMessage {
   index: number;
 }
 
-const desktop = {
-  width: 'min(900px, 80%)',
-  height: 'min(700px, 80%)',
-};
-
-const mobileLanscape = {
-  width: '800px',
-  height: '500px',
-};
-
-const mobilePortrait = {
-  width: '500px',
-  height: '700px',
-};
-
-const ITEMS_PER_PAGE = 8;
-
 export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
   atlasIMG,
   atlasJSON,
@@ -75,7 +62,7 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
   const [selectedType, setSelectedType] = useState<string>(
     savedSelectedType ?? Object.keys(ItemSubType)[0]
   );
-  const [size, setSize] = useState<{ width: string; height: string }>();
+  const size = useResponsiveSize(scale);
   const [searchTerm, setSearchTerm] = useState('');
   const [isSearchVisible, setIsSearchVisible] = useState(false);
   const [isCraftingDisabled, setIsCraftingDisabled] = useState(false);
@@ -90,30 +77,6 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
     setItems(craftablesItems);
   }, [craftablesItems]);
 
-  useEffect(() => {
-    const handleResize = (): void => {
-      if (
-        window.innerWidth < 500 &&
-        size?.width !== mobilePortrait.width &&
-        (!scale || scale < 1)
-      ) {
-        setSize(mobilePortrait);
-      } else if (
-        (!scale || scale < 1) &&
-        size?.width !== mobileLanscape.width
-      ) {
-        setSize(mobileLanscape);
-      } else if (size?.width !== desktop.width) {
-        setSize(desktop);
-      }
-    };
-    handleResize();
-
-    window.addEventListener('resize', handleResize);
-
-    return () => window.removeEventListener('resize', handleResize);
-  }, [scale]);
-
   const togglePinItem = (itemKey: string) => {
     setPinnedItems(current =>
       current.includes(itemKey)
@@ -123,23 +86,27 @@ 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,
-    }));
+    { 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
@@ -246,29 +213,31 @@ 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}>
-            Cancel
+            Close
           </Button>
           <Button
             disabled={!craftItemKey || isCraftingDisabled}
@@ -403,9 +372,9 @@ 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}) {
+  @media (max-width: ${MOBILE_WIDTH}) {
     grid-template-columns: 1fr;
   }
 `;
@@ -457,7 +426,7 @@ const Footer = styled.div`
     min-width: 100px;
   }
 
-  @media (max-width: ${mobilePortrait.width}) {
+  @media (max-width: ${MOBILE_WIDTH}) {
     justify-content: center;
   }
 `;

package/src/components/CraftBook/hooks/useResponsiveSize.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 const desktop = {
   width: 'min(900px, 80%)',
-  height: 'min(700px, 80%)',
+  height: 'min(auto, 80%)',
 };
 
 const mobileLanscape = {

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

@@ -8,23 +8,23 @@ export function calculateMaxCraftable(
     return 0;
   }
 
-  return recipe.ingredients.reduce((maxPossible, ingredient) => {
-    const inventoryItem = Object.values(inventory.slots).find(
-      (item): item is IItem => item?.key === ingredient.key
-    );
+  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;
-    }
+      if (!inventoryItem) {
+        return 0;
+      }
 
-    const possibleWithThisIngredient = Math.floor(
-      inventoryItem.stackQty ?? 0 / ingredient.qty
-    );
+      const possibleWithThisIngredient = Math.floor(
+        (inventoryItem.stackQty ?? 0) / ingredient.qty
+      );
 
-    if (maxPossible === -1) {
-      return possibleWithThisIngredient;
-    }
-
-    return Math.min(maxPossible, possibleWithThisIngredient);
-  }, -1);
+      return maxPossible === undefined
+        ? possibleWithThisIngredient
+        : Math.min(maxPossible, possibleWithThisIngredient);
+    }, undefined as number | undefined) ?? 0
+  );
 }