@rpg-engine/long-bow 0.7.94 → 0.7.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.7.94",
+  "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)
@@ -274,7 +237,7 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
 
         <Footer>
           <Button buttonType={ButtonTypes.RPGUIButton} onPointerDown={onClose}>
-            Cancel
+            Close
           </Button>
           <Button
             disabled={!craftItemKey || isCraftingDisabled}
@@ -411,7 +374,7 @@ const RadioInputScroller = styled.div`
   gap: 16px;
   align-content: start;
 
-  @media (max-width: ${mobilePortrait.width}) {
+  @media (max-width: ${MOBILE_WIDTH}) {
     grid-template-columns: 1fr;
   }
 `;
@@ -463,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
+  );
 }