@rpg-engine/long-bow 0.8.21 → 0.8.22

package/dist/mocks/informationCenter.mocks.d.ts

@@ -1,5 +1,4 @@
-import { IFaqItem, IVideoGuide } from '../components/InformationCenter/InformationCenter';
-import { IInformationCenterItem, IInformationCenterNPC } from '../components/InformationCenter/InformationCenterTypes';
+import { IFaqItem, IInformationCenterItem, IInformationCenterNPC, IVideoGuide } from '@rpg-engine/shared';
 export declare const mockBestiaryItems: IInformationCenterNPC[];
 export declare const mockItems: IInformationCenterItem[];
 export declare const mockFaqItems: IFaqItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.21",
+  "version": "0.8.22",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.96",
+    "@rpg-engine/shared": "^0.9.101",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/CraftBook/CraftBook.tsx

@@ -368,7 +368,7 @@ const ContentContainer = styled.div`
   padding-bottom: 0;
   width: 100%;
   position: relative;
-  min-height: 250px;
+  min-height: 300px;
   overflow: hidden;
 `;
 

package/src/components/Dropdown.tsx

@@ -15,6 +15,10 @@ export interface IDropdownProps {
   opensUp?: boolean; // Add a new prop to control the dropdown direction
 }
 
+const ITEM_HEIGHT = 35;
+const MAX_ITEMS_VISIBLE = 10;
+const MAX_HEIGHT = MAX_ITEMS_VISIBLE * ITEM_HEIGHT;
+
 export const Dropdown: React.FC<IDropdownProps> = ({
   options,
   width,
@@ -65,6 +69,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
         className="rpgui-dropdown-imp"
         opened={opened}
         opensUp={opensUp}
+        optionsCount={options.length}
       >
         {options.map(option => {
           return (
@@ -88,11 +93,16 @@ export const Dropdown: React.FC<IDropdownProps> = ({
 const Container = styled.div<{ width: string | undefined }>`
   position: relative;
   width: ${props => props.width || '100%'};
+  max-height: ${MAX_HEIGHT}px;
 `;
 
 const DropdownSelect = styled.p`
   width: 100%;
   box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: ${ITEM_HEIGHT}px;
 
   label {
     display: inline-block;
@@ -103,10 +113,14 @@ const DropdownSelect = styled.p`
 const DropdownOptions = styled.ul<{
   opened: boolean;
   opensUp: boolean;
+  optionsCount: number;
 }>`
   position: absolute;
   width: 100%;
-  max-height: 300px;
+  max-height: ${props =>
+    props.opened
+      ? `${Math.min(props.optionsCount * ITEM_HEIGHT, MAX_HEIGHT)}px`
+      : '0'};
   overflow-y: auto;
   display: ${props => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
@@ -114,7 +128,15 @@ const DropdownOptions = styled.ul<{
   top: ${props => (props.opensUp ? 'auto' : '100%')};
   margin: 0;
   padding: 0;
-  @media (max-width: 768px) {
-    padding: 8px 0;
+
+  li {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 8px 12px;
+    min-height: ${ITEM_HEIGHT}px;
+    max-height: ${ITEM_HEIGHT}px;
+    box-sizing: border-box;
+    line-height: 1.2;
   }
 `;

package/src/components/InformationCenter/InformationCenter.tsx

@@ -1,145 +1,146 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import { InternalTabs } from '../InternalTabs/InternalTabs';
 import {
+  IFaqItem,
   IInformationCenterItem,
-  IInformationCenterProps,
-} from './InformationCenterTypes';
+  IInformationCenterNPC,
+  IVideoGuide,
+} from '@rpg-engine/shared';
+import { InternalTabs } from '../InternalTabs/InternalTabs';
 import { InformationCenterBestiarySection } from './sections/bestiary/InformationCenterBestiarySection';
 import { InformationCenterFAQSection } from './sections/faq/InformationCenterFaqSection';
 import { InformationCenterItemDetails } from './sections/items/InformationCenterItemDetails';
 import { InformationCenterItemsSection } from './sections/items/InformationCenterItemsSection';
 import { InformationCenterTutorialsSection } from './sections/tutorials/InformationCenterTutorialsSection';
 
-export interface IFaqItem {
-  id: string;
-  question: string;
-  answer: string;
-}
-
-export interface IVideoGuide {
-  id: string;
-  title: string;
-  description: string;
-  thumbnailUrl: string;
-  videoUrl: string;
-  category: 'Combat' | 'Crafting' | 'Exploration' | 'General';
+interface IInformationCenterProps {
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  entitiesAtlasJSON: Record<string, any>;
+  entitiesAtlasIMG: string;
+  iconsAtlasJSON: any;
+  iconsAtlasIMG: any;
+  faqItems?: IFaqItem[];
+  bestiaryItems?: IInformationCenterNPC[];
+  videoGuides?: IVideoGuide[];
+  items?: IInformationCenterItem[];
+  loading?: boolean;
+  error?: string;
+  initialSearchQuery?: string;
 }
 
 export const InformationCenter: React.FC<IInformationCenterProps> = ({
-         itemsAtlasJSON,
-         itemsAtlasIMG,
-         entitiesAtlasJSON,
-         entitiesAtlasIMG,
-         iconsAtlasIMG,
-         iconsAtlasJSON,
-         faqItems = [],
-         bestiaryItems = [],
-         videoGuides = [],
-         items = [],
-         loading = false,
-         error,
-         initialSearchQuery = '',
-       }) => {
-         const [activeTab, setActiveTab] = useState('bestiary');
-         const [
-           selectedItem,
-           setSelectedItem,
-         ] = useState<IInformationCenterItem | null>(null);
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  entitiesAtlasJSON,
+  entitiesAtlasIMG,
+  iconsAtlasIMG,
+  iconsAtlasJSON,
+  faqItems = [],
+  bestiaryItems = [],
+  videoGuides = [],
+  items = [],
+  loading = false,
+  error,
+  initialSearchQuery = '',
+}) => {
+  const [activeTab, setActiveTab] = useState('bestiary');
+  const [
+    selectedItem,
+    setSelectedItem,
+  ] = useState<IInformationCenterItem | null>(null);
 
-         if (loading) {
-           return <LoadingMessage>Loading...</LoadingMessage>;
-         }
+  if (loading) {
+    return <LoadingMessage>Loading...</LoadingMessage>;
+  }
 
-         if (error) {
-           return <ErrorMessage>{error}</ErrorMessage>;
-         }
+  if (error) {
+    return <ErrorMessage>{error}</ErrorMessage>;
+  }
 
-         const tabs = [
-           {
-             id: 'bestiary',
-             title: 'Bestiary',
-             content: (
-               <InformationCenterBestiarySection
-                 bestiaryItems={bestiaryItems}
-                 itemsAtlasJSON={itemsAtlasJSON}
-                 itemsAtlasIMG={itemsAtlasIMG}
-                 iconsAtlasIMG={iconsAtlasIMG}
-                 iconsAtlasJSON={iconsAtlasJSON}
-                 entitiesAtlasJSON={entitiesAtlasJSON}
-                 entitiesAtlasIMG={entitiesAtlasIMG}
-                 initialSearchQuery={initialSearchQuery}
-                 tabId="bestiary"
-               />
-             ),
-           },
-           {
-             id: 'items',
-             title: 'Items',
-             content: (
-               <InformationCenterItemsSection
-                 items={items}
-                 bestiaryItems={bestiaryItems}
-                 itemsAtlasJSON={itemsAtlasJSON}
-                 itemsAtlasIMG={itemsAtlasIMG}
-                 initialSearchQuery={initialSearchQuery}
-                 tabId="items"
-               />
-             ),
-           },
-           {
-             id: 'faq',
-             title: 'FAQ',
-             content: (
-               <InformationCenterFAQSection
-                 faqItems={faqItems}
-                 initialSearchQuery={initialSearchQuery}
-                 tabId="faq"
-               />
-             ),
-           },
-           {
-             id: 'tutorials',
-             title: 'Tutorials',
-             content: (
-               <InformationCenterTutorialsSection
-                 videoGuides={videoGuides}
-                 initialSearchQuery={initialSearchQuery}
-                 tabId="tutorials"
-               />
-             ),
-           },
-         ];
+  const tabs = [
+    {
+      id: 'bestiary',
+      title: 'Bestiary',
+      content: (
+        <InformationCenterBestiarySection
+          bestiaryItems={bestiaryItems}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          iconsAtlasIMG={iconsAtlasIMG}
+          iconsAtlasJSON={iconsAtlasJSON}
+          entitiesAtlasJSON={entitiesAtlasJSON}
+          entitiesAtlasIMG={entitiesAtlasIMG}
+          initialSearchQuery={initialSearchQuery}
+          tabId="bestiary"
+        />
+      ),
+    },
+    {
+      id: 'items',
+      title: 'Items',
+      content: (
+        <InformationCenterItemsSection
+          items={items}
+          bestiaryItems={bestiaryItems}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          initialSearchQuery={initialSearchQuery}
+          tabId="items"
+        />
+      ),
+    },
+    {
+      id: 'faq',
+      title: 'FAQ',
+      content: (
+        <InformationCenterFAQSection
+          faqItems={faqItems}
+          initialSearchQuery={initialSearchQuery}
+          tabId="faq"
+        />
+      ),
+    },
+    {
+      id: 'tutorials',
+      title: 'Tutorials',
+      content: (
+        <InformationCenterTutorialsSection
+          videoGuides={videoGuides}
+          initialSearchQuery={initialSearchQuery}
+          tabId="tutorials"
+        />
+      ),
+    },
+  ];
 
-         return (
-           <Container>
-             <InternalTabs
-               tabs={tabs}
-               activeTextColor="#000000"
-               activeTab={activeTab}
-               onTabChange={setActiveTab}
-               activeColor="#fef08a"
-               inactiveColor="#6b7280"
-               borderColor="#f59e0b"
-               hoverColor="#fef3c7"
-             />
-             {selectedItem && (
-               <InformationCenterItemDetails
-                 item={selectedItem}
-                 itemsAtlasJSON={itemsAtlasJSON}
-                 itemsAtlasIMG={itemsAtlasIMG}
-                 droppedBy={bestiaryItems.filter(npc =>
-                   npc.loots?.some(
-                     loot => loot.itemBlueprintKey === selectedItem.key
-                   )
-                 )}
-                 onBack={() => setSelectedItem(null)}
-               />
-             )}
-           </Container>
-         );
-       };
+  return (
+    <Container>
+      <InternalTabs
+        tabs={tabs}
+        activeTextColor="#000000"
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+        activeColor="#fef08a"
+        inactiveColor="#6b7280"
+        borderColor="#f59e0b"
+        hoverColor="#fef3c7"
+      />
+      {selectedItem && (
+        <InformationCenterItemDetails
+          item={selectedItem}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          droppedBy={bestiaryItems.filter(npc =>
+            npc.loots?.some(loot => loot.itemBlueprintKey === selectedItem.key)
+          )}
+          onBack={() => setSelectedItem(null)}
+        />
+      )}
+    </Container>
+  );
+};
 
 const Container = styled.div`
   width: 100%;

package/src/components/InformationCenter/sections/bestiary/InformationCenterBestiarySection.tsx

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import { IInformationCenterNPC, NPCAlignment } from '@rpg-engine/shared';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
+import { IOptionsProps } from '../../../Dropdown';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 import { Portal } from '../../../shared/Portal/Portal';
 import { InformationCenterCell } from '../../InformationCenterCell';
-import { IInformationCenterNPC } from '../../InformationCenterTypes';
+import { formatItemType } from '../items/InformationCenterItemsSection';
 import { InformationCenterNPCDetails } from './InformationCenterNPCDetails';
 import { InformationCenterNPCTooltip } from './InformationCenterNPCTooltip';
-
 interface IBestiarySectionProps {
   bestiaryItems: IInformationCenterNPC[];
   itemsAtlasJSON: Record<string, any>;
@@ -91,6 +92,20 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
     setTooltipData(null);
   };
 
+  const [selectedBestiaryCategory, setSelectedBestiaryCategory] = useState<
+    string
+  >('all');
+
+  const bestiaryCategoryOptions: IOptionsProps[] = [
+    { id: 0, value: 'all', option: 'All Monsters' },
+    { id: 1, value: 'bosses', option: 'Bosses' },
+    ...Object.entries(NPCAlignment).map(([, value], index) => ({
+      id: index + 1,
+      value,
+      option: formatItemType(value),
+    })),
+  ];
+
   const renderItem = (item: IInformationCenterNPC) => (
     <InformationCenterCell
       key={item.id}
@@ -106,9 +121,33 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
     />
   );
 
-  const filteredItems = bestiaryItems.filter(item =>
-    item.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const filteredItems = useMemo(() => {
+    return bestiaryItems.filter(item => {
+      const matchesSearch = item.name
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+
+      let matchesCategory = true;
+
+      if (selectedBestiaryCategory === 'bosses') {
+        matchesCategory = item.isBoss === true;
+      } else if (selectedBestiaryCategory === NPCAlignment.Hostile) {
+        matchesCategory =
+          item.alignment === NPCAlignment.Hostile && !item.isBoss;
+      } else if (selectedBestiaryCategory !== 'all') {
+        matchesCategory = item.alignment === selectedBestiaryCategory;
+      }
+
+      return matchesSearch && matchesCategory;
+    });
+  }, [bestiaryItems, searchQuery, selectedBestiaryCategory]);
+
+  const handleSearchChange = (newQuery: string) => {
+    setSearchQuery(newQuery);
+    if (newQuery && selectedBestiaryCategory !== 'all') {
+      setSelectedBestiaryCategory('all');
+    }
+  };
 
   return (
     <>
@@ -118,11 +157,17 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         emptyMessage="No monsters found"
         tabId={tabId}
         layout="grid"
+        filterOptions={{
+          options: bestiaryCategoryOptions,
+          selectedOption: selectedBestiaryCategory,
+          onOptionChange: setSelectedBestiaryCategory,
+        }}
         searchOptions={{
           value: searchQuery,
-          onChange: setSearchQuery,
+          onChange: handleSearchChange,
           placeholder: 'Search monsters...',
         }}
+        dependencies={[selectedBestiaryCategory]}
         itemHeight="180px"
       />
       {tooltipData && (