@rpg-engine/long-bow 0.8.30 → 0.8.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.30",
+  "version": "0.8.32",
   "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.104",
+    "@rpg-engine/shared": "^0.10.0",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

package/src/components/InformationCenter/InformationCenter.tsx

@@ -9,9 +9,9 @@ import {
 } from '@rpg-engine/shared';
 import { DraggableContainer } from '../DraggableContainer';
 import { InternalTabs } from '../InternalTabs/InternalTabs';
+import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
 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';
 
@@ -47,10 +47,6 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   initialSearchQuery = '',
 }) => {
   const [activeTab, setActiveTab] = useState('bestiary');
-  const [
-    selectedItem,
-    setSelectedItem,
-  ] = useState<IInformationCenterItem | null>(null);
 
   if (loading) {
     return <LoadingMessage>Loading...</LoadingMessage>;
@@ -117,7 +113,10 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   ];
 
   return (
-    <DraggableContainer title="Information Center">
+    <DraggableContainer
+      title="Information Center"
+      type={RPGUIContainerTypes.Framed}
+    >
       <Container>
         <InternalTabs
           tabs={tabs}
@@ -129,19 +128,6 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
           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>
     </DraggableContainer>
   );

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

@@ -1,13 +1,20 @@
-import { IInformationCenterNPC, NPCAlignment } from '@rpg-engine/shared';
+import {
+  IInformationCenterNPC,
+  NPCAlignment,
+  isMobileOrTablet,
+} 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 { formatItemType } from '../items/InformationCenterItemsSection';
+import { BestiaryAdvancedFilters } from './BestiaryAdvancedFilters';
 import { InformationCenterNPCDetails } from './InformationCenterNPCDetails';
 import { InformationCenterNPCTooltip } from './InformationCenterNPCTooltip';
+
 interface IBestiarySectionProps {
   bestiaryItems: IInformationCenterNPC[];
   itemsAtlasJSON: Record<string, any>;
@@ -20,7 +27,7 @@ interface IBestiarySectionProps {
   tabId: string;
 }
 
-export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> = ({
+export const InformationCenterBestiarySection = ({
   bestiaryItems,
   itemsAtlasJSON,
   itemsAtlasIMG,
@@ -30,83 +37,59 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   entitiesAtlasIMG,
   initialSearchQuery,
   tabId,
-}) => {
-  const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
-  const [tooltipData, setTooltipData] = useState<{
-    npc: IInformationCenterNPC;
-    position: { x: number; y: number };
-  } | null>(null);
+}: IBestiarySectionProps): JSX.Element => {
+  const isMobile = isMobileOrTablet();
+  const [searchQuery, setSearchQuery] = useState<string>(initialSearchQuery);
   const [
     selectedMonster,
     setSelectedMonster,
   ] = useState<IInformationCenterNPC | null>(null);
-  const [isTouchDevice] = useState('ontouchstart' in window);
+  const [selectedBestiaryCategory, setSelectedBestiaryCategory] = useState<
+    string
+  >('all');
 
-  const handleMouseEnter = (
-    monster: IInformationCenterNPC,
-    event: React.MouseEvent
-  ) => {
-    if (!isTouchDevice && !selectedMonster) {
-      setTooltipData({
-        npc: monster,
-        position: { x: event.clientX, y: event.clientY },
-      });
-    }
-  };
+  const {
+    tooltipState,
+    handleMouseEnter,
+    handleMouseLeave,
+    TOOLTIP_WIDTH,
+  } = useTooltipPosition<IInformationCenterNPC>();
 
-  const handleMouseLeave = () => {
-    if (!isTouchDevice) {
-      setTooltipData(null);
-    }
-  };
-
-  const handleMouseMove = (event: React.MouseEvent) => {
-    if (!isTouchDevice && 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
-  ) => {
-    if (isTouchDevice) {
-      event.preventDefault();
-      const touch = event.touches[0];
-      if (tooltipData?.npc.id === monster.id) {
-        setTooltipData(null);
-      } else {
-        setTooltipData({
-          npc: monster,
-          position: { x: touch.clientX, y: touch.clientY },
-        });
-      }
-    }
+  ): void => {
+    event.preventDefault();
+    setSelectedMonster(monster);
   };
 
-  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}
@@ -116,19 +99,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) {
@@ -138,17 +121,60 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         matchesCategory = item.alignment === selectedBestiaryCategory;
       }
 
-      return matchesSearch && matchesCategory;
-    });
-  }, [bestiaryItems, searchQuery, selectedBestiaryCategory]);
+      // 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;
 
-  const handleSearchChange = (newQuery: string) => {
+      return (
+        matchesSearch &&
+        matchesCategory &&
+        matchesLevel &&
+        matchesSubtype &&
+        matchesAttackType &&
+        isNotFriendly
+      );
+    });
+  }, [
+    bestiaryItems,
+    searchQuery,
+    selectedBestiaryCategory,
+    levelRange,
+    selectedSubtype,
+    selectedAttackType,
+  ]);
+
+  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>
@@ -166,21 +192,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"
       />
-      {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}
             />
@@ -188,24 +221,31 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         </Portal>
       )}
       {selectedMonster && (
-        <InformationCenterNPCDetails
-          npc={selectedMonster}
-          itemsAtlasJSON={itemsAtlasJSON}
-          itemsAtlasIMG={itemsAtlasIMG}
-          iconAtlasIMG={iconsAtlasIMG}
-          iconAtlasJSON={iconsAtlasJSON}
-          entitiesAtlasJSON={entitiesAtlasJSON}
-          entitiesAtlasIMG={entitiesAtlasIMG}
-          onBack={() => setSelectedMonster(null)}
-        />
+        <Portal>
+          <InformationCenterNPCDetails
+            npc={selectedMonster}
+            itemsAtlasJSON={itemsAtlasJSON}
+            itemsAtlasIMG={itemsAtlasIMG}
+            iconAtlasIMG={iconsAtlasIMG}
+            iconAtlasJSON={iconsAtlasJSON}
+            entitiesAtlasJSON={entitiesAtlasJSON}
+            entitiesAtlasIMG={entitiesAtlasIMG}
+            onBack={() => setSelectedMonster(null)}
+          />
+        </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/bestiary/InformationCenterNPCDetails.tsx

@@ -265,9 +265,11 @@ const Value = styled.span`
 const StyledCollapsible = styled(Collapsible)`
   background: rgba(255, 255, 255, 0.05);
   border-radius: 4px;
-  overflow: auto;
+  overflow: visible;
   scrollbar-width: thin;
   scrollbar-color: ${uiColors.darkGray} transparent;
+  width: 100%;
+  box-sizing: border-box;
 `;
 
 const StatGrid = styled.div`
@@ -354,27 +356,49 @@ const Separator = styled.span`
 `;
 
 const LootSearchContainer = styled.div`
-  padding: 12px 12px 0;
+  padding: 8px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  margin: 8px 8px 4px;
+  box-sizing: border-box;
 `;
 
 const StyledSearchBar = styled(SearchBar)`
   width: 100%;
+  box-sizing: border-box;
+  input {
+    background: rgba(0, 0, 0, 0.2) !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-sizing: border-box;
+    &:focus {
+      border-color: ${uiColors.yellow} !important;
+    }
+  }
 `;
 
 const LootGrid = styled.div`
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 8px;
-  padding: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 4px;
+  padding: 4px 8px;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+    padding: 4px;
+  }
 `;
 
 const LootItem = styled.div`
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
   background: rgba(255, 255, 255, 0.05);
-  padding: 8px;
+  padding: 4px;
   border-radius: 4px;
+  min-width: 0;
 `;
 
 const LootDetails = styled.div`