@rpg-engine/long-bow 0.8.30 → 0.8.32

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

@@ -1,17 +1,17 @@
 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 { InformationCenterItemDetails } from './InformationCenterItemDetails';
 import { InformationCenterItemTooltip } from './InformationCenterItemTooltip';
-
-const TOOLTIP_OFFSET = 200;
+import { ItemsAdvancedFilters } from './ItemsAdvancedFilters';
 
 interface IItemsSectionProps {
   items: IInformationCenterItem[];
@@ -47,33 +47,38 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   initialSearchQuery,
   tabId,
 }) => {
+  const isMobile = isMobileOrTablet();
   const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   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,
@@ -86,45 +91,16 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
     );
   };
 
-  const handleMouseEnter = (
-    e: React.MouseEvent,
-    item: IInformationCenterItem
-  ) => {
-    setTooltipPosition({
-      x: e.clientX + TOOLTIP_OFFSET,
-      y: e.clientY,
-    });
-    setHoveredItem(item);
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (hoveredItem) {
-      setTooltipPosition({
-        x: e.clientX + TOOLTIP_OFFSET,
-        y: e.clientY,
-      });
-    }
-  };
-
-  const handleMouseLeave = () => {
-    setHoveredItem(null);
-  };
-
   const handleTouchStart = (
     e: React.TouchEvent,
     item: IInformationCenterItem
   ) => {
-    const touch = e.touches[0];
-    setTooltipPosition({
-      x: touch.clientX + TOOLTIP_OFFSET,
-      y: touch.clientY,
-    });
-    setHoveredItem(item);
+    e.preventDefault();
+    setSelectedItem(item);
   };
 
   const handleItemClick = (item: IInformationCenterItem) => {
     setSelectedItem(item);
-    setHoveredItem(null);
   };
 
   const handleSearchChange = (newQuery: string) => {
@@ -141,58 +117,80 @@ 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"
       />
-      {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 && (
-        <InformationCenterItemDetails
-          item={selectedItem}
-          itemsAtlasJSON={itemsAtlasJSON}
-          itemsAtlasIMG={itemsAtlasIMG}
-          droppedBy={getDroppedByNPCs(selectedItem.key, bestiaryItems)}
-          onBack={() => setSelectedItem(null)}
-        />
+        <Portal>
+          <InformationCenterItemDetails
+            item={selectedItem}
+            itemsAtlasJSON={itemsAtlasJSON}
+            itemsAtlasIMG={itemsAtlasIMG}
+            droppedBy={getDroppedByNPCs(selectedItem.key, bestiaryItems)}
+            onBack={() => setSelectedItem(null)}
+          />
+        </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;
 `;

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

@@ -0,0 +1,80 @@
+import { ItemType } from '@rpg-engine/shared';
+import React from 'react';
+import {
+  AdvancedFilters,
+  IFilterOption,
+  IFilterSection,
+} from '../../../shared/AdvancedFilters/AdvancedFilters';
+import { formatItemType } from './InformationCenterItemsSection';
+
+interface IItemsAdvancedFiltersProps {
+  isOpen: boolean;
+  onToggle: () => void;
+  onTierChange: (value: string) => void;
+  onTypeChange: (value: string) => void;
+  selectedTier: string;
+  selectedType: string;
+}
+
+export const ItemsAdvancedFilters = ({
+  isOpen,
+  onToggle,
+  onTierChange,
+  onTypeChange,
+  selectedTier,
+  selectedType,
+}: IItemsAdvancedFiltersProps): JSX.Element => {
+  const tierOptions: IFilterOption[] = [
+    { id: 0, value: 'all', option: 'All Tiers' },
+    ...Array.from({ length: 5 }, (_, i) => ({
+      id: i + 1,
+      value: String(i + 1),
+      option: `Tier ${i + 1}`,
+    })),
+  ];
+
+  const typeOptions: IFilterOption[] = [
+    { id: 0, value: 'all', option: 'All Types' },
+    ...Object.entries(ItemType).map(([, value], index) => ({
+      id: index + 1,
+      value: value as string,
+      option: formatItemType(value as string),
+    })),
+  ];
+
+  const hasActiveFilters = selectedTier !== 'all' || selectedType !== 'all';
+
+  const handleClearFilters = () => {
+    onTierChange('all');
+    onTypeChange('all');
+  };
+
+  const sections: IFilterSection[] = [
+    {
+      type: 'dropdown',
+      label: 'Tier',
+      key: 'tier',
+      options: tierOptions,
+      value: selectedTier,
+      onChange: onTierChange,
+    },
+    {
+      type: 'dropdown',
+      label: 'Item Type',
+      key: 'type',
+      options: typeOptions,
+      value: selectedType,
+      onChange: onTypeChange,
+    },
+  ];
+
+  return (
+    <AdvancedFilters
+      isOpen={isOpen}
+      onToggle={onToggle}
+      sections={sections}
+      onClearAll={handleClearFilters}
+      hasActiveFilters={hasActiveFilters}
+    />
+  );
+};

package/src/components/InformationCenter/shared/BaseInformationDetails.tsx

@@ -49,32 +49,45 @@ export const BaseInformationDetails: React.FC<IBaseInformationDetailsProps> = ({
 };
 
 const Container = styled.div`
-  position: absolute;
+  position: fixed;
   inset: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: 1000;
+  z-index: 9999;
 `;
 
 const Overlay = styled.div`
-  position: absolute;
+  position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.8);
 `;
 
 const Modal = styled.div`
-  position: relative;
-  width: 90%;
-  height: 90%;
+  position: fixed;
   background-color: rgba(0, 0, 0, 0.95);
   border-radius: 4px;
-  padding: 16px;
-  overflow-y: auto;
+  padding: 12px;
+  overflow: hidden;
   z-index: 1;
   font-family: 'Press Start 2P', cursive;
   border: 1px solid ${uiColors.darkGray};
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  width: 90%;
+  height: 90%;
+  top: 5%;
+  left: 5%;
+  max-width: 800px;
+  margin: 0 auto;
+
+  @media (max-width: 768px) {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-radius: 0;
+    padding: 8px;
+  }
 
   &::-webkit-scrollbar {
     width: 2px;
@@ -126,9 +139,19 @@ const Header = styled.div`
 const Content = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 16px;
-  height: 100%;
-  overflow: auto;
+  gap: 12px;
+  height: calc(100% - 80px);
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 6px;
+  margin-right: -6px;
+
+  @media (max-width: 768px) {
+    height: calc(100% - 64px);
+    gap: 8px;
+    padding-right: 4px;
+    margin-right: -4px;
+  }
 `;
 
 const Title = styled.h2`

package/src/components/Item/Cards/ItemInfo.tsx

@@ -1,4 +1,4 @@
-import { IItem, ItemQualityLevel } from '@rpg-engine/shared';
+import { IItem } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../constants/uiColors';
@@ -6,7 +6,6 @@ import { uiFonts } from '../../../constants/uiFonts';
 import { SpriteFromAtlas } from '../../shared/SpriteFromAtlas';
 import { ErrorBoundary } from '../Inventory/ErrorBoundary';
 import { EquipmentSlotSpriteByType } from '../Inventory/ItemSlot';
-import { qualityColorHex } from '../Inventory/ItemSlotQuality';
 import { rarityColor } from '../Inventory/ItemSlotRarity';
 
 interface IItemInfoProps {
@@ -192,24 +191,8 @@ const Container = styled.div<{ item: IItem }>`
   padding: 0.5rem;
   font-size: ${uiFonts.size.small};
   border: 3px solid ${({ item }) => rarityColor(item) ?? uiColors.lightGray};
-  box-shadow: ${({ item }) => `0 0 5px 2px ${rarityColor(item)}`};
   height: max-content;
   width: 18rem;
-  position: relative;
-
-  ${({ item }) =>
-    item?.quality && item.quality !== ItemQualityLevel.Normal &&
-    `
-    &::before {
-      content: '★';
-      position: absolute;
-      top: 0.2rem;
-      left: 0.5rem;
-      font-size: 1.2rem;
-      color: ${qualityColorHex(item)};
-      text-shadow: 0 0 3px black;
-    }
-  `}
 
   @media (max-width: 640px) {
     width: 80vw;

package/src/components/Item/Inventory/ItemSlot.tsx

@@ -6,7 +6,7 @@ import {
   ItemContainerType,
   ItemSlotType,
   ItemSubType,
-  ItemType
+  ItemType,
 } from '@rpg-engine/shared';
 
 import { observer } from 'mobx-react-lite';
@@ -15,11 +15,10 @@ import Draggable, { DraggableEventHandler } from 'react-draggable';
 import styled from 'styled-components';
 import useTouchTarget from '../../../hooks/useTouchTarget';
 import { IPosition } from '../../../types/eventTypes';
-import { useItemSlotDetails } from './context/ItemSlotDetailsContext';
-import { useItemSlotDragging } from './context/ItemSlotDraggingContext';
-import { qualityColorHex } from './ItemSlotQuality';
 import { rarityColor } from './ItemSlotRarity';
 import { ItemSlotRenderer } from './ItemSlotRenderer';
+import { useItemSlotDetails } from './context/ItemSlotDetailsContext';
+import { useItemSlotDragging } from './context/ItemSlotDraggingContext';
 
 export const EquipmentSlotSpriteByType: any = {
   Neck: 'accessories/corruption-necklace.png',
@@ -540,17 +539,6 @@ const Container = styled.div<ContainerTypes>`
       ${({ item }) => `0 0 4px 3px ${rarityColor(item)}`};
   }
 
-  .quality-star {
-    position: absolute;
-    top: 0.5rem;
-    left: 0.5rem;
-    font-size: 1.2rem;
-    z-index: 2;
-    text-shadow: 0 0 3px black;
-    pointer-events: none;
-    color: ${({ item }) => qualityColorHex(item)};
-  }
-
   &::before {
     content: '';
     position: absolute;

package/src/components/Item/Inventory/ItemSlotRenderer.tsx

@@ -1,9 +1,8 @@
 import {
-  getItemTextureKeyPath,
   IItem,
   ItemContainerType,
-  ItemQualityLevel,
   ItemSlotType,
+  getItemTextureKeyPath,
 } from '@rpg-engine/shared';
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -47,9 +46,6 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
 
     return (
       <ErrorBoundary key={item._id}>
-        {item.quality && item.quality !== ItemQualityLevel.Normal && (
-          <div className="quality-star">★</div>
-        )}
         <SpriteFromAtlas
           atlasIMG={atlasIMG}
           atlasJSON={atlasJSON}
@@ -105,5 +101,5 @@ export const ItemSlotRenderer: React.FC<IProps> = ({
     }
   };
 
-  return onRenderSlot(item);
+  return <>{onRenderSlot(item)}</>;
 };