@rpg-engine/long-bow 0.7.90 → 0.7.92

package/src/components/CraftBook/CraftingRecipe.tsx

@@ -4,12 +4,13 @@ import {
   IItemContainer,
   ISkill,
 } from '@rpg-engine/shared';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import styled from 'styled-components';
-import { uiColors } from '../../constants/uiColors';
-import { countItemFromInventory } from '../../libs/itemCounter';
 import { ItemInfoWrapper } from '../Item/Cards/ItemInfoWrapper';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+import { CraftingTooltip } from './CraftingTooltip';
+import { modifyString } from './utils/modifyString';
 
 interface ICraftingRecipeProps {
   atlasJSON: any;
@@ -23,6 +24,44 @@ interface ICraftingRecipeProps {
   skills?: ISkill | null;
 }
 
+const RadioOptionsWrapper = styled.div`
+  display: flex;
+  align-items: stretch;
+  margin-bottom: 0.5rem;
+  padding: 8px;
+  position: relative;
+  cursor: pointer;
+`;
+
+const SpriteAtlasWrapper = styled.div`
+  margin-right: 40px;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const MainContent = styled.div`
+  flex: 1;
+  min-width: 0;
+`;
+
+const ItemHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+
+  label {
+    font-size: 0.9rem;
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+  }
+`;
+
 export const CraftingRecipe: React.FC<ICraftingRecipeProps> = ({
   atlasIMG,
   atlasJSON,
@@ -34,32 +73,41 @@ export const CraftingRecipe: React.FC<ICraftingRecipeProps> = ({
   inventory,
   skills,
 }) => {
-  const modifyString = (str: string) => {
-    // Split the string by "/" and "."
-    let parts = str.split('/');
-    let fileName = parts[parts.length - 1];
-    parts = fileName.split('.');
-    let name = parts[0];
-
-    // Replace all occurrences of "-" with " "
-    name = name.replace(/-/g, ' ');
-
-    // Uppercase the first word
-    let words = name.split(' ');
-    let firstWord = words[0].slice(0, 1).toUpperCase() + words[0].slice(1);
-    let modifiedWords = [firstWord].concat(words.slice(1));
-    name = modifiedWords.join(' ');
-
-    return name;
+  const [showTooltip, setShowTooltip] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const isSelected = selectedCraftItemKey === recipe.key;
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        wrapperRef.current &&
+        !wrapperRef.current.contains(event.target as Node)
+      ) {
+        setShowTooltip(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const handleClick = () => {
+    if (wrapperRef.current) {
+      const rect = wrapperRef.current.getBoundingClientRect();
+      setTooltipPosition({
+        x: rect.right + 10,
+        y: rect.top,
+      });
+      setShowTooltip(true);
+    }
   };
 
-  const levelInSkill =
-    (skills?.[
-      (recipe?.minCraftingRequirements?.[0] ?? '') as keyof ISkill
-    ] as any)?.level ?? 1;
-
   return (
-    <RadioOptionsWrapper>
+    <RadioOptionsWrapper ref={wrapperRef} onClick={handleClick}>
       <SpriteAtlasWrapper>
         <ItemInfoWrapper
           item={recipe}
@@ -77,85 +125,37 @@ export const CraftingRecipe: React.FC<ICraftingRecipeProps> = ({
           />
         </ItemInfoWrapper>
       </SpriteAtlasWrapper>
-      <div>
-        <div onPointerUp={recipe.canCraft ? handleRecipeSelect : undefined}>
+
+      <MainContent>
+        <ItemHeader
+          onPointerUp={recipe.canCraft ? handleRecipeSelect : undefined}
+        >
           <input
             className="rpgui-radio"
             type="radio"
             value={recipe.name}
             name="test"
             disabled={!recipe.canCraft}
-            checked={selectedCraftItemKey === recipe.key}
+            checked={isSelected}
             onChange={handleRecipeSelect}
           />
-          <label style={{ display: 'flex', alignItems: 'center' }}>
-            {modifyString(recipe.name)}
-          </label>
-        </div>
-
-        <MinCraftingRequirementsText levelIsOk={recipe?.levelIsOk ?? false}>
-          {modifyString(`${recipe?.minCraftingRequirements?.[0] ?? ''}`)} lvl{' '}
-          {recipe?.minCraftingRequirements?.[1] ?? 0} ({levelInSkill})
-        </MinCraftingRequirementsText>
-
-        {recipe.ingredients.map((ingredient, index) => {
-          const itemQtyInInventory = !inventory
-            ? 0
-            : countItemFromInventory(ingredient.key, inventory);
-
-          return (
-            <Recipe key={index}>
-              <SpriteFromAtlas
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                spriteKey={ingredient.texturePath}
-                imgScale={1.2}
-              />
-              <Ingredient isQuantityOk={ingredient.qty <= itemQtyInInventory}>
-                {modifyString(ingredient.key)} x{ingredient.qty} (
-                {itemQtyInInventory})
-              </Ingredient>
-            </Recipe>
-          );
-        })}
-      </div>
+          <label>{modifyString(recipe.name)}</label>
+        </ItemHeader>
+      </MainContent>
+
+      {showTooltip &&
+        createPortal(
+          <CraftingTooltip
+            x={tooltipPosition.x}
+            y={tooltipPosition.y}
+            recipe={recipe}
+            inventory={inventory}
+            skills={skills}
+            atlasIMG={atlasIMG}
+            atlasJSON={atlasJSON}
+          />,
+          document.body
+        )}
     </RadioOptionsWrapper>
   );
 };
-
-const Ingredient = styled.p<{ isQuantityOk: boolean }>`
-  margin: 0;
-  margin-left: 14px;
-  color: ${({ isQuantityOk }) =>
-    isQuantityOk ? uiColors.lightGreen : uiColors.lightGray} !important;
-`;
-
-const Recipe = styled.div`
-  font-size: 0.6rem;
-  margin-bottom: 3px;
-  display: flex;
-  align-items: center;
-  margin-left: 4px;
-
-  .sprite-from-atlas-img {
-    top: 0px;
-    left: 0px;
-  }
-`;
-
-const SpriteAtlasWrapper = styled.div`
-  margin-right: 40px;
-`;
-
-const RadioOptionsWrapper = styled.div`
-  display: flex;
-  align-items: stretch;
-  margin-bottom: 40px;
-`;
-
-const MinCraftingRequirementsText = styled.p<{ levelIsOk: boolean }>`
-  font-size: 0.6rem !important;
-  margin: 0 5px 0 35px;
-  color: ${({ levelIsOk }) =>
-    levelIsOk ? uiColors.lightGreen : uiColors.lightGray} !important;
-`;

package/src/components/CraftBook/CraftingTooltip.tsx

@@ -0,0 +1,137 @@
+import { ICraftableItem, IItemContainer, ISkill } from '@rpg-engine/shared';
+import React 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';
+
+interface ICraftingTooltipProps {
+  x: number;
+  y: number;
+  recipe: ICraftableItem;
+  inventory?: IItemContainer | null;
+  skills?: ISkill | null;
+  atlasIMG: any;
+  atlasJSON: any;
+}
+
+const TooltipContainer = styled.div<{ x: number; y: number }>`
+  position: fixed;
+  left: ${props => props.x}px;
+  top: ${props => props.y}px;
+  background-color: rgba(0, 0, 0, 0.95);
+  color: white;
+  text-align: left;
+  border-radius: 4px;
+  padding: 10px;
+  z-index: 1000;
+  font-family: 'Press Start 2P', cursive;
+  font-size: 0.6rem;
+  width: max-content;
+  max-width: 250px;
+  white-space: normal;
+  border: 1px solid ${uiColors.darkGray};
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  line-height: 1.4;
+
+  /* Arrow */
+  &:before {
+    content: '';
+    position: absolute;
+    top: 12px;
+    left: -6px;
+    border-width: 6px 6px 6px 0;
+    border-style: solid;
+    border-color: transparent rgba(0, 0, 0, 0.95) transparent transparent;
+  }
+`;
+
+const MinCraftingRequirementsText = styled.div<{ levelIsOk: boolean }>`
+  font-size: 0.55rem;
+  margin: 0;
+  margin-bottom: 12px;
+  color: ${({ levelIsOk }) =>
+    levelIsOk ? uiColors.lightGreen : uiColors.lightGray} !important;
+`;
+
+const IngredientsTitle = styled.div`
+  color: ${uiColors.yellow};
+  font-size: 0.6rem;
+  margin-bottom: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+
+const Recipe = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 0.55rem;
+  margin-bottom: 8px;
+  margin-left: 4px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  .sprite-from-atlas-img {
+    top: 0px;
+    left: 0px;
+  }
+`;
+
+const Ingredient = styled.div<{ isQuantityOk: boolean }>`
+  margin: 0;
+  margin-left: 14px;
+  color: ${({ isQuantityOk }) =>
+    isQuantityOk ? uiColors.lightGreen : uiColors.lightGray} !important;
+`;
+
+export const CraftingTooltip: React.FC<ICraftingTooltipProps> = ({
+  x,
+  y,
+  recipe,
+  inventory,
+  skills,
+  atlasIMG,
+  atlasJSON,
+}) => {
+  const levelInSkill =
+    (skills?.[
+      (recipe?.minCraftingRequirements?.[0] ?? '') as keyof ISkill
+    ] as any)?.level ?? 1;
+
+  const levelIsOk = recipe?.levelIsOk ?? false;
+
+  return (
+    <TooltipContainer x={x} y={y}>
+      <MinCraftingRequirementsText levelIsOk={levelIsOk}>
+        {modifyString(`${recipe?.minCraftingRequirements?.[0] ?? ''}`)} lvl{' '}
+        {recipe?.minCraftingRequirements?.[1] ?? 0} ({levelInSkill})
+      </MinCraftingRequirementsText>
+
+      <IngredientsTitle>Ingredients</IngredientsTitle>
+      {recipe.ingredients.map((ingredient, index) => {
+        const itemQtyInInventory = !inventory
+          ? 0
+          : countItemFromInventory(ingredient.key, inventory);
+        const isQuantityOk = ingredient.qty <= itemQtyInInventory;
+
+        return (
+          <Recipe key={index}>
+            <SpriteFromAtlas
+              atlasIMG={atlasIMG}
+              atlasJSON={atlasJSON}
+              spriteKey={ingredient.texturePath}
+              imgScale={1.2}
+            />
+            <Ingredient isQuantityOk={isQuantityOk}>
+              {modifyString(ingredient.key)} x{ingredient.qty} (
+              {itemQtyInInventory})
+            </Ingredient>
+          </Recipe>
+        );
+      })}
+    </TooltipContainer>
+  );
+};

package/src/components/CraftBook/components/CraftBookHeader.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { FaSearch } from 'react-icons/fa';
+import styled from 'styled-components';
+import { uiColors } from '../../../constants/uiColors';
+import { Dropdown, IOptionsProps } from '../../Dropdown';
+
+interface CraftBookHeaderProps {
+  categoryOptions: IOptionsProps[];
+  onCategoryChange: (value: string) => void;
+  onSearchToggle: () => void;
+}
+
+export const CraftBookHeader: React.FC<CraftBookHeaderProps> = ({
+  categoryOptions,
+  onCategoryChange,
+  onSearchToggle,
+}) => {
+  return (
+    <Container>
+      <Title>Craftbook</Title>
+      <Controls>
+        <DropdownWrapper>
+          <Dropdown
+            options={categoryOptions}
+            onChange={onCategoryChange}
+            width="200px"
+          />
+        </DropdownWrapper>
+        <SearchButton onClick={onSearchToggle}>
+          <FaSearch size={16} />
+        </SearchButton>
+      </Controls>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 16px 16px 0;
+`;
+
+const Title = styled.h1`
+  font-size: 1.2rem;
+  color: ${uiColors.yellow} !important;
+  margin: 0;
+  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+`;
+
+const Controls = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  left: -2rem;
+`;
+
+const DropdownWrapper = styled.div`
+  width: 200px;
+`;
+
+const SearchButton = styled.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  width: 32px;
+  height: 32px;
+  color: ${uiColors.yellow};
+  opacity: 0.8;
+  transition: opacity 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    opacity: 1;
+  }
+`;

package/src/components/CraftBook/components/CraftBookPagination.tsx

@@ -0,0 +1 @@
+ 

package/src/components/CraftBook/components/CraftBookSearch.tsx

@@ -0,0 +1 @@
+ 

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

@@ -0,0 +1,39 @@
+import { ICraftableItem } from '@rpg-engine/shared';
+import { useMemo } from 'react';
+
+interface UseCraftBookFiltersProps {
+  items: ICraftableItem[];
+  searchTerm: string;
+  selectedType: string;
+  pinnedItems: string[];
+}
+
+export const useCraftBookFilters = ({
+  items,
+  searchTerm,
+  selectedType,
+  pinnedItems,
+}: UseCraftBookFiltersProps): ICraftableItem[] => {
+  return useMemo(() => {
+    // First filter items
+    const filteredItems = items?.filter(item => {
+      const matchesSearch = item.name
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase());
+      const matchesCategory =
+        selectedType === 'Suggested' ||
+        (selectedType === 'Pinned' && pinnedItems.includes(item.key)) ||
+        item.type === selectedType;
+      return matchesSearch && matchesCategory;
+    });
+
+    // Then sort them (pinned items first)
+    return [...(filteredItems || [])].sort((a, b) => {
+      const aIsPinned = pinnedItems.includes(a.key);
+      const bIsPinned = pinnedItems.includes(b.key);
+      if (aIsPinned && !bIsPinned) return -1;
+      if (!aIsPinned && bIsPinned) return 1;
+      return 0;
+    });
+  }, [items, searchTerm, selectedType, pinnedItems]);
+};

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

@@ -0,0 +1,39 @@
+import { ICraftableItem } from '@rpg-engine/shared';
+import { useMemo } from 'react';
+
+interface UseFilteredItemsProps {
+  items: ICraftableItem[];
+  searchTerm: string;
+  selectedType: string;
+  pinnedItems: string[];
+}
+
+export const useFilteredItems = ({
+  items,
+  searchTerm,
+  selectedType,
+  pinnedItems,
+}: UseFilteredItemsProps): ICraftableItem[] => {
+  return useMemo(() => {
+    // First filter items
+    const filteredItems = items?.filter(item => {
+      const matchesSearch = item.name
+        .toLowerCase()
+        .includes(searchTerm.toLowerCase());
+      const matchesCategory =
+        selectedType === 'Suggested' ||
+        (selectedType === 'Pinned' && pinnedItems.includes(item.key)) ||
+        item.type === selectedType;
+      return matchesSearch && matchesCategory;
+    });
+
+    // Then sort them (pinned items first)
+    return [...(filteredItems || [])].sort((a, b) => {
+      const aIsPinned = pinnedItems.includes(a.key);
+      const bIsPinned = pinnedItems.includes(b.key);
+      if (aIsPinned && !bIsPinned) return -1;
+      if (!aIsPinned && bIsPinned) return 1;
+      return 0;
+    });
+  }, [items, searchTerm, selectedType, pinnedItems]);
+};

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

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+
+interface UsePaginationProps<T> {
+  items: T[];
+  itemsPerPage: number;
+  dependencies?: any[];
+}
+
+interface UsePaginationReturn<T> {
+  currentPage: number;
+  setCurrentPage: (page: number) => void;
+  paginatedItems: T[];
+  totalPages: number;
+}
+
+export const usePagination = <T>({
+  items,
+  itemsPerPage,
+  dependencies = [],
+}: UsePaginationProps<T>): UsePaginationReturn<T> => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = Math.ceil(items.length / itemsPerPage);
+
+  const paginatedItems = items.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [...dependencies]);
+
+  return {
+    currentPage,
+    setCurrentPage,
+    paginatedItems,
+    totalPages,
+  };
+};

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

@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+
+const desktop = {
+  width: 'min(900px, 80%)',
+  height: 'min(700px, 80%)',
+};
+
+const mobileLanscape = {
+  width: '800px',
+  height: '500px',
+};
+
+const mobilePortrait = {
+  width: '500px',
+  height: '700px',
+};
+
+interface Size {
+  width: string;
+  height: string;
+}
+
+export const useResponsiveSize = (scale?: number): Size | undefined => {
+  const [size, setSize] = useState<Size>();
+
+  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]);
+
+  return size;
+};

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

@@ -0,0 +1,11 @@
+export const modifyString = (str: string): string => {
+  let parts = str.split('/');
+  let fileName = parts[parts.length - 1];
+  parts = fileName.split('.');
+  let name = parts[0];
+  name = name.replace(/-/g, ' ');
+  let words = name.split(' ');
+  let firstWord = words[0].slice(0, 1).toUpperCase() + words[0].slice(1);
+  let modifiedWords = [firstWord].concat(words.slice(1));
+  return modifiedWords.join(' ');
+};