@rpg-engine/long-bow 0.7.91 → 0.7.93

package/dist/stories/Features/craftbook/CraftBook.stories.d.ts

@@ -2,3 +2,5 @@ import { Meta } from '@storybook/react';
 declare const meta: Meta;
 export default meta;
 export declare const Default: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const WithSearch: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export declare const WithCategory: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;

package/package.json

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

package/src/components/CraftBook/CraftBook.tsx

@@ -6,11 +6,18 @@ import {
   ItemSubType,
 } from '@rpg-engine/shared';
 import React, { useEffect, useState } from 'react';
+import {
+  FaChevronLeft,
+  FaChevronRight,
+  FaSearch,
+  FaThumbtack,
+} from 'react-icons/fa';
 import styled from 'styled-components';
 import { uiColors } from '../../constants/uiColors';
+import { useLocalStorage } from '../../hooks/useLocalStorage';
 import { Button, ButtonTypes } from '../Button';
 import { DraggableContainer } from '../DraggableContainer';
-import { InputRadio } from '../InputRadio';
+import { Dropdown, IOptionsProps } from '../Dropdown';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 import { CraftingRecipe } from './CraftingRecipe';
 import { calculateMaxCraftable } from './utils/calculateMaxCraftable';
@@ -49,6 +56,8 @@ const mobilePortrait = {
   height: '700px',
 };
 
+const ITEMS_PER_PAGE = 8;
+
 export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
   atlasIMG,
   atlasJSON,
@@ -68,7 +77,18 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
   );
   const [size, setSize] = useState<{ width: string; height: string }>();
   const [searchTerm, setSearchTerm] = useState('');
+  const [isSearchVisible, setIsSearchVisible] = useState(false);
   const [isCraftingDisabled, setIsCraftingDisabled] = useState(false);
+  const [pinnedItems, setPinnedItems] = useLocalStorage<string[]>(
+    'pinnedCraftItems',
+    []
+  );
+  const [currentPage, setCurrentPage] = useState(1);
+  const [items, setItems] = useState<ICraftableItem[]>(craftablesItems);
+
+  useEffect(() => {
+    setItems(craftablesItems);
+  }, [craftablesItems]);
 
   useEffect(() => {
     const handleResize = (): void => {
@@ -94,71 +114,62 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
     return () => window.removeEventListener('resize', handleResize);
   }, [scale]);
 
-  const renderItemTypes = () => {
-    const itemTypes = ['Suggested', ...Object.keys(ItemSubType)]
-      .filter(type => type !== 'DeadBody')
-      .sort((a, b) => {
-        if (a === 'Suggested') return -1;
-        if (b === 'Suggested') return 1;
-        return a.localeCompare(b);
-      });
-
-    if (window.innerWidth > parseInt(mobilePortrait.width)) {
-      return itemTypes.map(type => {
-        return (
-          <InputRadio
-            key={type}
-            value={type}
-            label={type}
-            name={type}
-            isChecked={selectedType === type}
-            onRadioSelect={value => {
-              setSelectedType(value);
-              onSelect(value);
-            }}
-          />
-        );
-      });
-    }
-
-    const rows: JSX.Element[][] = [[], []];
-
-    itemTypes.forEach((type, index) => {
-      let row = 0;
-
-      if (index % 2 === 1) row = 1;
-
-      rows[row].push(
-        <InputRadio
-          key={type}
-          value={type}
-          label={type}
-          name={type}
-          isChecked={selectedType === type}
-          onRadioSelect={value => {
-            setSelectedType(value);
-            onSelect(value);
-          }}
-        />
-      );
-    });
-
-    return rows.map((row, index) => (
-      <div key={index} style={{ display: 'flex', gap: '10px' }}>
-        {row}
-      </div>
-    ));
+  const togglePinItem = (itemKey: string) => {
+    setPinnedItems(current =>
+      current.includes(itemKey)
+        ? current.filter(key => key !== itemKey)
+        : [...current, itemKey]
+    );
   };
 
-  const filteredCraftableItems = craftablesItems?.filter(item => {
+  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 = items?.filter(item => {
     const matchesSearch = item.name
       .toLowerCase()
       .includes(searchTerm.toLowerCase());
     const matchesCategory =
-      selectedType === 'Suggested' || item.type === selectedType;
+      selectedType === 'Suggested' ||
+      (selectedType === 'Pinned' && pinnedItems.includes(item.key)) ||
+      item.subType === selectedType;
     return matchesSearch && matchesCategory;
   });
 
+  const sortedItems = [...(filteredCraftableItems || [])].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;
+  });
+
+  const totalPages = Math.ceil(sortedItems.length / ITEMS_PER_PAGE);
+  const paginatedItems = sortedItems.slice(
+    (currentPage - 1) * ITEMS_PER_PAGE,
+    currentPage * ITEMS_PER_PAGE
+  );
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [selectedType, searchTerm]);
+
   if (!size) return null;
 
   return (
@@ -167,17 +178,30 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
       width={size.width}
       height={size.height}
       cancelDrag=".inputRadioCraftBook"
-      onCloseButton={() => {
-        if (onClose) {
-          onClose();
-        }
-      }}
+      onCloseButton={onClose}
       scale={scale}
     >
       <Wrapper>
-        <div style={{ width: '100%' }}>
+        <HeaderContainer>
           <Title>Craftbook</Title>
-          <Subtitle>Select an item to craft</Subtitle>
+          <HeaderControls>
+            <DropdownWrapper>
+              <Dropdown
+                options={categoryOptions}
+                onChange={value => {
+                  setSelectedType(value);
+                  onSelect(value);
+                }}
+                width="200px"
+              />
+            </DropdownWrapper>
+            <SearchButton onClick={() => setIsSearchVisible(!isSearchVisible)}>
+              <FaSearch size={16} />
+            </SearchButton>
+          </HeaderControls>
+        </HeaderContainer>
+
+        {isSearchVisible && (
           <SearchContainer>
             <input
               type="text"
@@ -185,34 +209,64 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
               placeholder="Search items..."
               value={searchTerm}
               onChange={e => setSearchTerm(e.target.value)}
+              autoFocus
             />
           </SearchContainer>
-          <hr className="golden" />
-        </div>
+        )}
 
         <ContentContainer>
-          <ItemTypes className="inputRadioCraftBook">
-            {renderItemTypes()}
-          </ItemTypes>
-
           <RadioInputScroller className="inputRadioCraftBook">
-            {filteredCraftableItems?.map(item => (
-              <CraftingRecipe
+            {paginatedItems?.map(item => (
+              <CraftingRecipeWrapper
                 key={item.key}
-                atlasIMG={atlasIMG}
-                atlasJSON={atlasJSON}
-                equipmentSet={equipmentSet}
-                recipe={item}
-                scale={scale}
-                handleRecipeSelect={setCraftItemKey.bind(null, item.key)}
-                selectedCraftItemKey={craftItemKey}
-                inventory={inventory}
-                skills={skills}
-              />
+                isSelected={pinnedItems.includes(item.key)}
+              >
+                <PinButton
+                  onClick={e => {
+                    e.stopPropagation();
+                    togglePinItem(item.key);
+                  }}
+                  isPinned={pinnedItems.includes(item.key)}
+                >
+                  <FaThumbtack size={14} />
+                </PinButton>
+                <CraftingRecipe
+                  atlasIMG={atlasIMG}
+                  atlasJSON={atlasJSON}
+                  equipmentSet={equipmentSet}
+                  recipe={item}
+                  scale={scale}
+                  handleRecipeSelect={setCraftItemKey.bind(null, item.key)}
+                  selectedCraftItemKey={craftItemKey}
+                  inventory={inventory}
+                  skills={skills}
+                />
+              </CraftingRecipeWrapper>
             ))}
           </RadioInputScroller>
         </ContentContainer>
-        <ButtonWrapper>
+
+        <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
           </Button>
@@ -240,7 +294,7 @@ export const CraftBook: React.FC<IItemCraftSelectorProps> = ({
           >
             Craft
           </Button>
-        </ButtonWrapper>
+        </Footer>
       </Wrapper>
     </DraggableContainer>
   );
@@ -251,81 +305,61 @@ const Wrapper = styled.div`
   flex-direction: column;
   width: 100%;
   height: 100%;
-`;
 
-const Title = styled.h1`
-  font-size: 0.6rem;
-  color: ${uiColors.yellow} !important;
-`;
-
-const Subtitle = styled.h1`
-  font-size: 0.4rem;
-  color: ${uiColors.yellow} !important;
-`;
-
-const RadioInputScroller = styled.div`
-  padding-left: 15px;
-  padding-top: 10px;
-  margin-top: 1rem;
-  align-items: center;
-  align-items: flex-start;
-  overflow-y: scroll;
-  min-height: 0;
-  flex: 1;
-  margin-left: 10px;
-  -webkit-overflow-scrolling: touch;
-
-  @media (max-width: ${mobilePortrait.width}) {
-    margin-left: 0;
+  & > * {
+    box-sizing: border-box;
   }
 `;
 
-const ButtonWrapper = styled.div`
+const HeaderContainer = styled.div`
   display: flex;
-  justify-content: flex-end;
-  margin-top: 10px;
+  justify-content: space-between;
+  align-items: center;
   width: 100%;
+  padding: 16px 16px 0;
+`;
 
-  button {
-    padding: 0px 50px;
-    margin: 5px;
-  }
-
-  @media (max-width: ${mobilePortrait.width}) {
-    justify-content: center;
-  }
+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 ContentContainer = styled.div`
+const HeaderControls = styled.div`
   display: flex;
-  width: 100%;
-  min-height: 0;
-  flex: 1;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+  left: -2rem;
+`;
 
-  @media (max-width: ${mobilePortrait.width}) {
-    flex-direction: column;
-  }
+const DropdownWrapper = styled.div`
+  width: 200px;
 `;
 
-const ItemTypes = styled.div`
+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;
-  overflow-y: scroll;
-  overflow-x: hidden;
-  width: max-content;
-  flex-direction: column;
-  padding-right: 5px;
+  align-items: center;
+  justify-content: center;
 
-  @media (max-width: ${mobilePortrait.width}) {
-    overflow-x: scroll;
-    overflow-y: hidden;
-    padding-right: 0;
-    width: 100%;
+  &:hover {
+    opacity: 1;
   }
 `;
 
 const SearchContainer = styled.div`
-  margin: 8px 0;
   padding: 0 16px;
+  margin-top: 16px;
 
   input {
     width: 100%;
@@ -346,3 +380,117 @@ const SearchContainer = styled.div`
     }
   }
 `;
+
+const ContentContainer = styled.div`
+  flex: 1;
+  min-height: 0;
+  padding: 16px;
+  padding-right: 0;
+  padding-bottom: 0;
+  overflow: hidden;
+  width: 100%;
+`;
+
+const RadioInputScroller = styled.div`
+  height: 100%;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  padding: 8px 16px;
+  padding-right: 24px;
+  width: 100%;
+  box-sizing: border-box;
+
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  align-items: start;
+
+  @media (max-width: ${mobilePortrait.width}) {
+    grid-template-columns: 1fr;
+  }
+`;
+
+const CraftingRecipeWrapper = styled.div<{ isSelected: boolean }>`
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.4);
+  }
+
+  ${props =>
+    props.isSelected &&
+    `
+    background: rgba(255, 215, 0, 0.1);
+  `}
+`;
+
+const PinButton = styled.button<{ isPinned: boolean }>`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: ${props => (props.isPinned ? uiColors.yellow : uiColors.lightGray)};
+  opacity: ${props => (props.isPinned ? 1 : 0.6)};
+  transition: all 0.2s;
+  z-index: 2;
+
+  &:hover {
+    opacity: 1;
+    color: ${uiColors.yellow};
+  }
+`;
+
+const Footer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+  padding: 8px;
+
+  button {
+    min-width: 100px;
+  }
+
+  @media (max-width: ${mobilePortrait.width}) {
+    justify-content: center;
+  }
+`;
+
+const PaginationContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 8px;
+  margin-top: 8px;
+  border-top: 1px solid ${uiColors.darkGray};
+`;
+
+const PaginationButton = styled.button<{ disabled?: boolean }>`
+  background: none;
+  border: none;
+  color: ${props => (props.disabled ? uiColors.darkGray : uiColors.yellow)};
+  cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
+  opacity: ${props => (props.disabled ? 0.5 : 0.8)};
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.2s;
+
+  &:hover:not(:disabled) {
+    opacity: 1;
+  }
+`;
+
+const PageInfo = styled.div`
+  color: ${uiColors.lightGray};
+  font-size: 0.8rem;
+  font-family: 'Press Start 2P', cursive;
+`;