@rpg-engine/long-bow 0.8.31 → 0.8.33

package/package.json

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

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

@@ -0,0 +1,95 @@
+import { EntityAttackType, NPCSubtype } from '@rpg-engine/shared';
+import React from 'react';
+import {
+  AdvancedFilters,
+  IFilterSection,
+} from '../../../shared/AdvancedFilters/AdvancedFilters';
+import { formatItemType } from '../items/InformationCenterItemsSection';
+
+interface IBestiaryAdvancedFiltersProps {
+  isOpen: boolean;
+  onToggle: () => void;
+  onLevelRangeChange: (range: [number | undefined, number | undefined]) => void;
+  onSubtypeChange: (value: string) => void;
+  onAttackTypeChange: (value: string) => void;
+  levelRange: [number | undefined, number | undefined];
+  selectedSubtype: string;
+  selectedAttackType: string;
+}
+
+export const BestiaryAdvancedFilters = ({
+  isOpen,
+  onToggle,
+  onLevelRangeChange,
+  onSubtypeChange,
+  onAttackTypeChange,
+  levelRange,
+  selectedSubtype,
+  selectedAttackType,
+}: IBestiaryAdvancedFiltersProps): JSX.Element => {
+  const subtypeOptions = [
+    { id: 0, value: 'all', option: 'All Types' },
+    ...Object.entries(NPCSubtype).map(([, value], index) => ({
+      id: index + 1,
+      value,
+      option: formatItemType(value),
+    })),
+  ];
+
+  const attackTypeOptions = [
+    { id: 0, value: 'all', option: 'All Attack Types' },
+    ...Object.entries(EntityAttackType).map(([, value], index) => ({
+      id: index + 1,
+      value,
+      option: formatItemType(value),
+    })),
+  ];
+
+  const hasActiveFilters =
+    levelRange[0] !== undefined ||
+    levelRange[1] !== undefined ||
+    selectedSubtype !== 'all' ||
+    selectedAttackType !== 'all';
+
+  const handleClearFilters = () => {
+    onLevelRangeChange([undefined, undefined]);
+    onSubtypeChange('all');
+    onAttackTypeChange('all');
+  };
+
+  const sections: IFilterSection[] = [
+    {
+      type: 'range',
+      label: 'Level Range',
+      key: 'level',
+      value: levelRange,
+      onChange: onLevelRangeChange,
+    },
+    {
+      type: 'dropdown',
+      label: 'Monster Type',
+      key: 'subtype',
+      options: subtypeOptions,
+      value: selectedSubtype,
+      onChange: onSubtypeChange,
+    },
+    {
+      type: 'dropdown',
+      label: 'Attack Type',
+      key: 'attackType',
+      options: attackTypeOptions,
+      value: selectedAttackType,
+      onChange: onAttackTypeChange,
+    },
+  ];
+
+  return (
+    <AdvancedFilters
+      isOpen={isOpen}
+      onToggle={onToggle}
+      sections={sections}
+      onClearAll={handleClearFilters}
+      hasActiveFilters={hasActiveFilters}
+    />
+  );
+};

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

@@ -5,11 +5,14 @@ import {
 } from '@rpg-engine/shared';
 import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
+import { useTooltipPosition } from '../../../../hooks/useTooltipPosition';
 import { IOptionsProps } from '../../../Dropdown';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 import { Portal } from '../../../shared/Portal/Portal';
 import { InformationCenterCell } from '../../InformationCenterCell';
+import { BaseInformationDetails } from '../../shared/BaseInformationDetails';
 import { formatItemType } from '../items/InformationCenterItemsSection';
+import { BestiaryAdvancedFilters } from './BestiaryAdvancedFilters';
 import { InformationCenterNPCDetails } from './InformationCenterNPCDetails';
 import { InformationCenterNPCTooltip } from './InformationCenterNPCTooltip';
 
@@ -25,7 +28,7 @@ interface IBestiarySectionProps {
   tabId: string;
 }
 
-export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> = ({
+export const InformationCenterBestiarySection = ({
   bestiaryItems,
   itemsAtlasJSON,
   itemsAtlasIMG,
@@ -35,74 +38,59 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   entitiesAtlasIMG,
   initialSearchQuery,
   tabId,
-}) => {
+}: IBestiarySectionProps): JSX.Element => {
   const isMobile = isMobileOrTablet();
-  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
-  const [tooltipData, setTooltipData] = useState<{
-    npc: IInformationCenterNPC;
-    position: { x: number; y: number };
-  } | null>(null);
+  const [searchQuery, setSearchQuery] = useState<string>(initialSearchQuery);
   const [
     selectedMonster,
     setSelectedMonster,
   ] = useState<IInformationCenterNPC | null>(null);
+  const [selectedBestiaryCategory, setSelectedBestiaryCategory] = useState<
+    string
+  >('all');
 
-  const handleMouseEnter = (
-    monster: IInformationCenterNPC,
-    event: React.MouseEvent
-  ) => {
-    if (!isMobile && !selectedMonster) {
-      setTooltipData({
-        npc: monster,
-        position: { x: event.clientX, y: event.clientY },
-      });
-    }
-  };
+  const {
+    tooltipState,
+    handleMouseEnter,
+    handleMouseLeave,
+    TOOLTIP_WIDTH,
+  } = useTooltipPosition<IInformationCenterNPC>();
 
-  const handleMouseLeave = () => {
-    if (!isMobile) {
-      setTooltipData(null);
-    }
-  };
-
-  const handleMouseMove = (event: React.MouseEvent) => {
-    if (!isMobile && tooltipData) {
-      setTooltipData({
-        ...tooltipData,
-        position: { x: event.clientX, y: event.clientY },
-      });
-    }
-  };
+  // Advanced filters state
+  const [isAdvancedFiltersOpen, setIsAdvancedFiltersOpen] = useState<boolean>(
+    false
+  );
+  const [levelRange, setLevelRange] = useState<
+    [number | undefined, number | undefined]
+  >([undefined, undefined]);
+  const [selectedSubtype, setSelectedSubtype] = useState<string>('all');
+  const [selectedAttackType, setSelectedAttackType] = useState<string>('all');
 
   const handleTouchStart = (
     monster: IInformationCenterNPC,
     event: React.TouchEvent
-  ) => {
+  ): void => {
     event.preventDefault();
     setSelectedMonster(monster);
-    setTooltipData(null);
   };
 
-  const handleMonsterClick = (monster: IInformationCenterNPC) => {
+  const handleMonsterClick = (monster: IInformationCenterNPC): void => {
     setSelectedMonster(monster);
-    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),
-    })),
+    ...Object.entries(NPCAlignment)
+      .filter(([, value]) => value !== NPCAlignment.Friendly)
+      .map(([, value], index) => ({
+        id: index + 2,
+        value,
+        option: formatItemType(value),
+      })),
   ];
 
-  const renderItem = (item: IInformationCenterNPC) => (
+  const renderItem = (item: IInformationCenterNPC): JSX.Element => (
     <InformationCenterCell
       key={item.id}
       name={item.name}
@@ -112,19 +100,19 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
       onClick={() => handleMonsterClick(item)}
       onMouseEnter={e => handleMouseEnter(item, e)}
       onMouseLeave={handleMouseLeave}
-      onMouseMove={handleMouseMove}
       onTouchStart={e => handleTouchStart(item, e)}
     />
   );
 
-  const filteredItems = useMemo(() => {
+  const filteredItems = useMemo<IInformationCenterNPC[]>(() => {
     return bestiaryItems.filter(item => {
+      // Basic search filter
       const matchesSearch = item.name
         .toLowerCase()
         .includes(searchQuery.toLowerCase());
 
+      // Category filter
       let matchesCategory = true;
-
       if (selectedBestiaryCategory === 'bosses') {
         matchesCategory = item.isBoss === true;
       } else if (selectedBestiaryCategory === NPCAlignment.Hostile) {
@@ -134,17 +122,60 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         matchesCategory = item.alignment === selectedBestiaryCategory;
       }
 
-      return matchesSearch && matchesCategory;
+      // Advanced filters
+      const matchesLevel =
+        (!levelRange[0] || item.skills.level >= levelRange[0]) &&
+        (!levelRange[1] || item.skills.level <= levelRange[1]);
+
+      const matchesSubtype =
+        selectedSubtype === 'all' || item.subType === selectedSubtype;
+
+      const matchesAttackType =
+        selectedAttackType === 'all' || item.attackType === selectedAttackType;
+
+      // Filter out friendly NPCs
+      const isNotFriendly = item.alignment !== NPCAlignment.Friendly;
+
+      return (
+        matchesSearch &&
+        matchesCategory &&
+        matchesLevel &&
+        matchesSubtype &&
+        matchesAttackType &&
+        isNotFriendly
+      );
     });
-  }, [bestiaryItems, searchQuery, selectedBestiaryCategory]);
+  }, [
+    bestiaryItems,
+    searchQuery,
+    selectedBestiaryCategory,
+    levelRange,
+    selectedSubtype,
+    selectedAttackType,
+  ]);
 
-  const handleSearchChange = (newQuery: string) => {
+  const handleSearchChange = (newQuery: string): void => {
     setSearchQuery(newQuery);
     if (newQuery && selectedBestiaryCategory !== 'all') {
       setSelectedBestiaryCategory('all');
     }
   };
 
+  const SearchBarRightElement = (
+    <SearchBarActions>
+      <BestiaryAdvancedFilters
+        isOpen={isAdvancedFiltersOpen}
+        onToggle={() => setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)}
+        onLevelRangeChange={setLevelRange}
+        onSubtypeChange={setSelectedSubtype}
+        onAttackTypeChange={setSelectedAttackType}
+        levelRange={levelRange}
+        selectedSubtype={selectedSubtype}
+        selectedAttackType={selectedAttackType}
+      />
+    </SearchBarActions>
+  );
+
   return (
     <>
       <PaginatedContent<IInformationCenterNPC>
@@ -162,21 +193,28 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
           value: searchQuery,
           onChange: handleSearchChange,
           placeholder: 'Search monsters...',
+          rightElement: SearchBarRightElement,
         }}
-        dependencies={[selectedBestiaryCategory]}
+        dependencies={[
+          selectedBestiaryCategory,
+          levelRange,
+          selectedSubtype,
+          selectedAttackType,
+        ]}
         itemHeight="180px"
       />
-      {!isMobile && tooltipData && (
+      {!isMobile && tooltipState && tooltipState.item && (
         <Portal>
           <TooltipWrapper
+            width={TOOLTIP_WIDTH}
             style={{
               position: 'fixed',
-              left: tooltipData.position.x + 10,
-              top: tooltipData.position.y + 10,
+              left: `${tooltipState.position.x}px`,
+              top: `${tooltipState.position.y}px`,
             }}
           >
             <InformationCenterNPCTooltip
-              npc={tooltipData.npc}
+              npc={tooltipState.item}
               itemsAtlasJSON={itemsAtlasJSON}
               itemsAtlasIMG={itemsAtlasIMG}
             />
@@ -185,25 +223,38 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
       )}
       {selectedMonster && (
         <Portal>
-          <InformationCenterNPCDetails
-            npc={selectedMonster}
-            itemsAtlasJSON={itemsAtlasJSON}
-            itemsAtlasIMG={itemsAtlasIMG}
-            iconAtlasIMG={iconsAtlasIMG}
-            iconAtlasJSON={iconsAtlasJSON}
-            entitiesAtlasJSON={entitiesAtlasJSON}
-            entitiesAtlasIMG={entitiesAtlasIMG}
+          <BaseInformationDetails
+            name={selectedMonster.name}
+            spriteKey={selectedMonster.key}
+            atlasJSON={entitiesAtlasJSON}
+            atlasIMG={entitiesAtlasIMG}
             onBack={() => setSelectedMonster(null)}
-          />
+          >
+            <InformationCenterNPCDetails
+              npc={selectedMonster}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+              iconAtlasIMG={iconsAtlasIMG}
+              iconAtlasJSON={iconsAtlasJSON}
+              entitiesAtlasJSON={entitiesAtlasJSON}
+              entitiesAtlasIMG={entitiesAtlasIMG}
+              onBack={() => setSelectedMonster(null)}
+            />
+          </BaseInformationDetails>
         </Portal>
       )}
     </>
   );
 };
 
-const TooltipWrapper = styled.div`
-  position: fixed;
+const TooltipWrapper = styled.div<{ width: number }>`
   z-index: 1000;
   pointer-events: none;
-  width: 300px;
+  width: ${props => `${props.width}px`};
+`;
+
+const SearchBarActions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 `;

package/src/components/InformationCenter/sections/items/InformationCenterItemsSection.tsx

@@ -1,19 +1,18 @@
 import {
   IInformationCenterItem,
   IInformationCenterNPC,
-  ItemType,
   isMobileOrTablet,
 } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
-import { IOptionsProps } from '../../../Dropdown';
+import { useTooltipPosition } from '../../../../hooks/useTooltipPosition';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 import { Portal } from '../../../shared/Portal/Portal';
 import { InformationCenterCell } from '../../InformationCenterCell';
+import { BaseInformationDetails } from '../../shared/BaseInformationDetails';
 import { InformationCenterItemDetails } from './InformationCenterItemDetails';
 import { InformationCenterItemTooltip } from './InformationCenterItemTooltip';
-
-const TOOLTIP_OFFSET = 200;
+import { ItemsAdvancedFilters } from './ItemsAdvancedFilters';
 
 interface IItemsSectionProps {
   items: IInformationCenterItem[];
@@ -54,29 +53,33 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   const [selectedItemCategory, setSelectedItemCategory] = useState<string>(
     'all'
   );
-  const [hoveredItem, setHoveredItem] = useState<IInformationCenterItem | null>(
-    null
-  );
-  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [selectedTier, setSelectedTier] = useState<string>('all');
+  const [isAdvancedFiltersOpen, setIsAdvancedFiltersOpen] = useState(false);
   const [
     selectedItem,
     setSelectedItem,
   ] = useState<IInformationCenterItem | null>(null);
 
-  const itemCategoryOptions: IOptionsProps[] = [
-    { id: 0, value: 'all', option: 'All Items' },
-    ...Object.values(ItemType).map((type, index) => ({
-      id: index + 1,
-      value: type,
-      option: formatItemType(type),
-    })),
-  ];
-
-  const filteredItems = items.filter(
-    item =>
-      (selectedItemCategory === 'all' || item.type === selectedItemCategory) &&
-      item.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const {
+    tooltipState,
+    handleMouseEnter,
+    handleMouseLeave,
+    TOOLTIP_WIDTH,
+  } = useTooltipPosition<IInformationCenterItem>();
+
+  const filteredItems = useMemo<IInformationCenterItem[]>(() => {
+    return items.filter(item => {
+      const matchesSearch = item.name
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+      const matchesCategory =
+        selectedItemCategory === 'all' || item.type === selectedItemCategory;
+      const matchesTier =
+        selectedTier === 'all' || String(item.tier) === selectedTier;
+
+      return matchesSearch && matchesCategory && matchesTier;
+    });
+  }, [items, searchQuery, selectedItemCategory, selectedTier]);
 
   const getDroppedByNPCs = (
     itemId: string,
@@ -89,34 +92,6 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
     );
   };
 
-  const handleMouseEnter = (
-    e: React.MouseEvent,
-    item: IInformationCenterItem
-  ) => {
-    if (!isMobile) {
-      setTooltipPosition({
-        x: e.clientX + TOOLTIP_OFFSET,
-        y: e.clientY,
-      });
-      setHoveredItem(item);
-    }
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isMobile && hoveredItem) {
-      setTooltipPosition({
-        x: e.clientX + TOOLTIP_OFFSET,
-        y: e.clientY,
-      });
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (!isMobile) {
-      setHoveredItem(null);
-    }
-  };
-
   const handleTouchStart = (
     e: React.TouchEvent,
     item: IInformationCenterItem
@@ -127,7 +102,6 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
 
   const handleItemClick = (item: IInformationCenterItem) => {
     setSelectedItem(item);
-    setHoveredItem(null);
   };
 
   const handleSearchChange = (newQuery: string) => {
@@ -144,60 +118,88 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
       spriteKey={item.texturePath}
       atlasJSON={itemsAtlasJSON}
       atlasIMG={itemsAtlasIMG}
-      onMouseEnter={e => handleMouseEnter(e, item)}
-      onMouseMove={handleMouseMove}
+      onMouseEnter={e => handleMouseEnter(item, e)}
       onMouseLeave={handleMouseLeave}
       onTouchStart={e => handleTouchStart(e, item)}
       onClick={() => handleItemClick(item)}
     />
   );
 
+  const SearchBarRightElement = (
+    <SearchBarActions>
+      <ItemsAdvancedFilters
+        isOpen={isAdvancedFiltersOpen}
+        onToggle={() => setIsAdvancedFiltersOpen(!isAdvancedFiltersOpen)}
+        onTierChange={setSelectedTier}
+        onTypeChange={setSelectedItemCategory}
+        selectedTier={selectedTier}
+        selectedType={selectedItemCategory}
+      />
+    </SearchBarActions>
+  );
+
   return (
     <>
       <PaginatedContent<IInformationCenterItem>
         items={filteredItems}
         renderItem={renderItem}
         emptyMessage="No items found"
-        filterOptions={{
-          options: itemCategoryOptions,
-          selectedOption: selectedItemCategory,
-          onOptionChange: setSelectedItemCategory,
-        }}
         searchOptions={{
           value: searchQuery,
           onChange: handleSearchChange,
           placeholder: 'Search items...',
+          rightElement: SearchBarRightElement,
         }}
-        dependencies={[selectedItemCategory]}
+        dependencies={[selectedItemCategory, selectedTier]}
         tabId={tabId}
         layout="grid"
         itemHeight="180px"
       />
-      {!isMobile && hoveredItem && (
-        <TooltipWrapper
-          style={{ top: tooltipPosition.y, left: tooltipPosition.x }}
-        >
-          <InformationCenterItemTooltip item={hoveredItem} />
-        </TooltipWrapper>
+      {!isMobile && tooltipState && tooltipState.item && (
+        <Portal>
+          <TooltipWrapper
+            width={TOOLTIP_WIDTH}
+            style={{
+              position: 'fixed',
+              left: `${tooltipState.position.x}px`,
+              top: `${tooltipState.position.y}px`,
+            }}
+          >
+            <InformationCenterItemTooltip item={tooltipState.item} />
+          </TooltipWrapper>
+        </Portal>
       )}
       {selectedItem && (
         <Portal>
-          <InformationCenterItemDetails
-            item={selectedItem}
-            itemsAtlasJSON={itemsAtlasJSON}
-            itemsAtlasIMG={itemsAtlasIMG}
-            droppedBy={getDroppedByNPCs(selectedItem.key, bestiaryItems)}
+          <BaseInformationDetails
+            name={selectedItem.name}
+            spriteKey={selectedItem.texturePath}
+            atlasJSON={itemsAtlasJSON}
+            atlasIMG={itemsAtlasIMG}
             onBack={() => setSelectedItem(null)}
-          />
+          >
+            <InformationCenterItemDetails
+              item={selectedItem}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+              droppedBy={getDroppedByNPCs(selectedItem.key, bestiaryItems)}
+              onBack={() => setSelectedItem(null)}
+            />
+          </BaseInformationDetails>
         </Portal>
       )}
     </>
   );
 };
 
-const TooltipWrapper = styled.div`
-  position: fixed;
+const TooltipWrapper = styled.div<{ width: number }>`
   z-index: 1000;
   pointer-events: none;
-  transition: transform 0.1s ease;
+  width: ${props => `${props.width}px`};
+`;
+
+const SearchBarActions = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
 `;