@rpg-engine/long-bow 0.8.35 → 0.8.36

package/src/components/shared/AdvancedFilters/AdvancedFilters.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
   AiFillCaretRight,
   AiFillFilter,
@@ -7,6 +7,7 @@ import {
 import styled from 'styled-components';
 import { Dropdown } from '../../Dropdown';
 import { Input } from '../../Input';
+import { Portal } from '../Portal/Portal';
 
 export interface IFilterOption {
   id: number;
@@ -82,11 +83,13 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
         return (
           <FilterSection key={section.key}>
             <Label>{section.label}</Label>
-            <Dropdown
-              options={section.options || []}
-              onChange={section.onChange}
-              width="100%"
-            />
+            <StyledDropdownWrapper>
+              <Dropdown
+                options={section.options || []}
+                onChange={section.onChange}
+                width="100%"
+              />
+            </StyledDropdownWrapper>
           </FilterSection>
         );
 
@@ -95,9 +98,68 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
     }
   };
 
+  // Calculate button position for the portal
+  const [buttonPosition, setButtonPosition] = React.useState({
+    top: 0,
+    left: 0,
+    isMobile: false,
+  });
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen && buttonRef.current) {
+      const rect = buttonRef.current.getBoundingClientRect();
+      const isMobileView = window.innerWidth < 480;
+
+      if (isMobileView) {
+        // Center in the screen for mobile
+        setButtonPosition({
+          top: Math.max(50, window.innerHeight / 2 - 150),
+          left: window.innerWidth / 2,
+          isMobile: true,
+        });
+      } else {
+        // Position below the button for larger screens
+        setButtonPosition({
+          top: rect.bottom + window.scrollY,
+          left: rect.left + rect.width / 2 + window.scrollX,
+          isMobile: false,
+        });
+      }
+    }
+  }, [isOpen]);
+
+  // Handle click outside to close the panel
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        isOpen &&
+        panelRef.current &&
+        !panelRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        onToggle();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onToggle]);
+
   return (
     <Container>
-      <FilterButton onClick={onToggle} $hasActiveFilters={hasActiveFilters}>
+      <FilterButton
+        onClick={onToggle}
+        $hasActiveFilters={hasActiveFilters}
+        ref={buttonRef}
+      >
         {hasActiveFilters ? (
           <AiFillFilter size={20} />
         ) : (
@@ -122,19 +184,34 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
       </FilterButton>
 
       {isOpen && (
-        <FiltersPanel>
-          <FilterHeader>
-            <FilterTitle>Advanced Filters</FilterTitle>
-          </FilterHeader>
-
-          {sections.map(renderFilterSection)}
-
-          {hasActiveFilters && (
-            <ClearFiltersButton onClick={onClearAll}>
-              Clear All Filters
-            </ClearFiltersButton>
-          )}
-        </FiltersPanel>
+        <Portal>
+          <FiltersPanel
+            ref={panelRef}
+            style={{
+              position: 'fixed',
+              top: `${buttonPosition.top}px`,
+              left: `${buttonPosition.left}px`,
+              transform: 'translateX(-50%)',
+              zIndex: 9999,
+            }}
+            $isMobile={buttonPosition.isMobile}
+          >
+            <FilterHeader>
+              <FilterTitle>Advanced Filters</FilterTitle>
+              {buttonPosition.isMobile && (
+                <CloseButton onClick={onToggle}>×</CloseButton>
+              )}
+            </FilterHeader>
+
+            {sections.map(renderFilterSection)}
+
+            {hasActiveFilters && (
+              <ClearFiltersButton onClick={onClearAll}>
+                Clear All Filters
+              </ClearFiltersButton>
+            )}
+          </FiltersPanel>
+        </Portal>
       )}
     </Container>
   );
@@ -184,32 +261,37 @@ const FilterCount = styled.div<{ $visible: boolean }>`
   transition: all 0.2s;
 `;
 
-const FiltersPanel = styled.div`
-  position: absolute;
-  top: calc(100% + 0.75rem);
-  right: -8px;
+const FiltersPanel = styled.div<{ $isMobile?: boolean }>`
   background: #1a1a1a;
   border: 1px solid #333;
   border-radius: 6px;
   padding: 1rem;
-  z-index: 1000;
-  min-width: 280px;
+  width: 280px;
+  max-width: calc(100vw - 20px);
   display: flex;
   flex-direction: column;
   gap: 1rem;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  font-family: 'Press Start 2P', cursive;
+
+  @media (max-width: 320px) {
+    width: 250px;
+    padding: 0.75rem;
+    gap: 0.75rem;
+  }
 
   &:before {
     content: '';
     position: absolute;
     top: -6px;
-    right: 16px;
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
     width: 12px;
     height: 12px;
     background: #1a1a1a;
     border-left: 1px solid #333;
     border-top: 1px solid #333;
-    transform: rotate(45deg);
+    display: ${props => (props.$isMobile ? 'none' : 'block')};
   }
 `;
 
@@ -225,7 +307,7 @@ const FilterHeader = styled.div`
 const FilterTitle = styled.div`
   font-weight: 600;
   color: #ffd700;
-  font-size: 0.875rem;
+  font-size: 0.75rem;
 `;
 
 const FilterSection = styled.div`
@@ -236,7 +318,7 @@ const FilterSection = styled.div`
 
 const Label = styled.div`
   color: #999;
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 `;
@@ -249,8 +331,22 @@ const RangeInputs = styled.div`
   input {
     width: 80px;
     background: #262626 !important;
-    border: 1px solid #333 !important;
-    color: #fff !important;
+    border: 1px solid #444 !important;
+    border-radius: 4px !important;
+    color: #ddd !important;
+    font-size: 0.65rem !important;
+    padding: 0.5rem !important;
+    height: auto !important;
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
+
+    &::placeholder {
+      color: #666 !important;
+    }
+
+    &:focus {
+      border-color: #f59e0b !important;
+      outline: none !important;
+    }
   }
 
   svg {
@@ -267,13 +363,42 @@ const ClearFiltersButton = styled.button`
   padding: 0.75rem 0;
   margin-top: 0.5rem;
   cursor: pointer;
-  font-size: 0.75rem;
+  font-size: 0.65rem;
   transition: all 0.2s;
   border-top: 1px solid #333;
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  font-family: 'Press Start 2P', cursive;
+
+  &:hover {
+    color: #ffd700;
+  }
+`;
+
+const CloseButton = styled.button`
+  background: transparent;
+  border: none;
+  color: #999;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
 
   &:hover {
     color: #ffd700;
   }
 `;
+
+const StyledDropdownWrapper = styled.div`
+  .rpgui-dropdown-imp {
+    font-size: 0.8rem;
+    min-height: unset;
+    padding-top: 0.3rem;
+  }
+`;

package/src/components/shared/PaginatedContent/PaginatedContent.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
+import {
+  UI_BREAKPOINT_MOBILE,
+  UI_BREAKPOINT_SMALL_LAPTOP,
+} from '../../../constants/uiBreakpoints';
 import { usePagination } from '../../CraftBook/hooks/usePagination';
 import { IOptionsProps } from '../../Dropdown';
 import { Pagination } from '../Pagination/Pagination';
@@ -93,7 +97,7 @@ export const PaginatedContent = <T extends unknown>({
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
   min-height: 400px;
   width: 100%;
 `;
@@ -107,24 +111,69 @@ const Content = styled.div<{
   flex-direction: column;
   gap: 0.5rem;
   flex: 1;
-  padding: 1rem;
+  padding: 0.25rem;
   min-height: 200px;
   max-height: ${props => props.$maxHeight};
   overflow-y: ${props => (props.$maxHeight ? 'auto' : 'visible')};
+  box-sizing: border-box;
+
+  @media (min-width: 360px) {
+    padding: 0.5rem;
+  }
+
+  @media (min-width: 480px) {
+    padding: 1rem;
+  }
 
   &.grid {
     display: grid;
-    grid-template-columns: repeat(
-      ${props => props.$gridColumns},
-      minmax(0, 1fr)
-    );
-    gap: 1rem;
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
     align-items: start;
+    justify-content: center;
+    width: 100%;
+    overflow-x: hidden;
+
+    @media (min-width: 320px) {
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    }
+
+    @media (min-width: 400px) {
+      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
+      gap: 0.75rem;
+    }
+
+    @media (min-width: 480px) {
+      grid-template-columns: repeat(2, minmax(135px, 1fr));
+      gap: 1rem;
+    }
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(3, minmax(135px, 1fr));
+    }
+
+    @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
+      grid-template-columns: repeat(
+        ${props => Math.min(props.$gridColumns, 4)},
+        minmax(135px, 1fr)
+      );
+    }
+
+    @media (min-width: ${UI_BREAKPOINT_SMALL_LAPTOP}) {
+      grid-template-columns: repeat(
+        ${props => props.$gridColumns},
+        minmax(135px, 1fr)
+      );
+    }
 
     .PaginatedContent-item {
       display: flex;
       align-items: flex-start;
+      justify-content: center;
       height: ${props => props.$itemHeight ?? 'auto'};
+      width: 100%;
+      box-sizing: border-box;
+      min-height: 135px;
     }
   }
 
@@ -138,7 +187,11 @@ const Content = styled.div<{
 const PaginationContainer = styled.div`
   display: flex;
   justify-content: center;
-  padding: 1rem;
+  padding: 0.5rem;
+
+  @media (min-width: 480px) {
+    padding: 1rem;
+  }
 `;
 
 const EmptyMessage = styled.div`

package/src/hooks/useTooltipPosition.ts

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 
-const TOOLTIP_WIDTH = 300;
 const TOOLTIP_OFFSET = 10;
 const MIN_VISIBLE_HEIGHT = 100;
 
@@ -15,6 +14,20 @@ interface ITooltipState<T> {
 }
 
 export const useTooltipPosition = <T>() => {
+  // Dynamically calculate tooltip width based on screen size
+  const getTooltipWidth = (): number => {
+    const viewportWidth = window.innerWidth;
+    if (viewportWidth < 360) {
+      return Math.min(280, viewportWidth - 20);
+    }
+    if (viewportWidth < 480) {
+      return 300;
+    }
+    return 320;
+  };
+
+  const TOOLTIP_WIDTH = getTooltipWidth();
+
   const [tooltipState, setTooltipState] = useState<ITooltipState<T> | null>(
     null
   );
@@ -22,18 +35,24 @@ export const useTooltipPosition = <T>() => {
   const calculateTooltipPosition = (rect: DOMRect): ITooltipPosition => {
     const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
+    const tooltipWidth = getTooltipWidth();
 
     // Try to position to the right first
     let x = rect.right + TOOLTIP_OFFSET;
 
     // If it would overflow right, try positioning to the left
-    if (x + TOOLTIP_WIDTH > viewportWidth - TOOLTIP_OFFSET) {
-      x = rect.left - TOOLTIP_WIDTH - TOOLTIP_OFFSET;
+    if (x + tooltipWidth > viewportWidth - TOOLTIP_OFFSET) {
+      x = rect.left - tooltipWidth - TOOLTIP_OFFSET;
     }
 
-    // If left positioning would go off screen, position relative to viewport
+    // If left positioning would go off screen, center it or position relative to viewport
     if (x < TOOLTIP_OFFSET) {
-      x = TOOLTIP_OFFSET;
+      if (viewportWidth < 400) {
+        // For very small screens, center the tooltip
+        x = Math.max(TOOLTIP_OFFSET, (viewportWidth - tooltipWidth) / 2);
+      } else {
+        x = TOOLTIP_OFFSET;
+      }
     }
 
     // Position vertically aligned with the top of the element

package/src/mocks/itemContainer.mocks.ts

@@ -1,6 +1,7 @@
 import {
   IItem,
   IItemContainer,
+  ItemQualityLevel,
   ItemRarities,
   ItemSlotType,
   ItemSubType,
@@ -81,6 +82,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Legendary,
+    quality: ItemQualityLevel.Mythic,
     canBePurchasedOnlyByPremiumPlans: [
       UserAccountTypes.PremiumGold,
       UserAccountTypes.PremiumUltimate,
@@ -167,6 +169,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Epic,
+    quality: ItemQualityLevel.Normal,
     attachedGems: [
       {
         gemEntityEffectsAdd: ['poison'],
@@ -221,6 +224,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Uncommon,
+    quality: ItemQualityLevel.HighQuality,
   },
   {
     _id: '629acek4j7c8e8002ff60034',
@@ -255,6 +259,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Rare,
+    quality: ItemQualityLevel.Ancient,
   },
   {
     _id: '629acek4j7c8e8002fg60034',
@@ -289,6 +294,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Common,
+    quality: ItemQualityLevel.Mastercrafted,
   },
   {
     _id: '392acek4j7c8e8002ff60403',
@@ -323,6 +329,7 @@ export const items: IItem[] = [
     createdAt: '2022-06-04T03:18:09.335Z',
     updatedAt: '2022-06-04T18:16:49.056Z',
     rarity: ItemRarities.Common,
+    quality: ItemQualityLevel.Exceptional,
   },
   createBagItem('392acek4j7c8e8002ff60404', '#FF0000'), // red
   createBagItem('392acek4j7c8e8002ff60405', '#0000FF'), // blue