@rpg-engine/long-bow 0.8.36 → 0.8.37

package/package.json

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

package/src/components/InformationCenter/InformationCenter.tsx

@@ -8,10 +8,6 @@ import {
   IVideoGuide,
   isMobileOrTablet,
 } from '@rpg-engine/shared';
-import {
-  UI_BREAKPOINT_MOBILE,
-  UI_BREAKPOINT_SMALL_LAPTOP,
-} from '../../constants/uiBreakpoints';
 import { DraggableContainer } from '../DraggableContainer';
 import { InternalTabs } from '../InternalTabs/InternalTabs';
 import { RPGUIContainerTypes } from '../RPGUI/RPGUIContainer';
@@ -147,15 +143,6 @@ const Container = styled.div`
   @media (min-width: 480px) {
     padding: 0.75rem;
   }
-
-  @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
-    max-width: 900px;
-    padding: 1rem;
-  }
-
-  @media (min-width: ${UI_BREAKPOINT_SMALL_LAPTOP}) {
-    max-width: 1200px;
-  }
 `;
 
 const LoadingMessage = styled.div`

package/src/components/InformationCenter/InformationCenterCell.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { UI_BREAKPOINT_MOBILE } from '../../constants/uiBreakpoints';
 import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
@@ -26,13 +26,46 @@ export const InformationCenterCell: React.FC<IInformationCenterCellProps> = ({
   onMouseMove,
   onTouchStart,
 }) => {
+  const [touchStartY, setTouchStartY] = useState<number | null>(null);
+  const [touchStartX, setTouchStartX] = useState<number | null>(null);
+  const [isTouchScrolling, setIsTouchScrolling] = useState(false);
+
+  const handleTouchStart = (e: React.TouchEvent) => {
+    setTouchStartY(e.touches[0].clientY);
+    setTouchStartX(e.touches[0].clientX);
+    setIsTouchScrolling(false);
+  };
+
+  const handleTouchMove = (e: React.TouchEvent) => {
+    if (touchStartY !== null && touchStartX !== null) {
+      const touchDiffY = Math.abs(e.touches[0].clientY - touchStartY);
+      const touchDiffX = Math.abs(e.touches[0].clientX - touchStartX);
+
+      // If user moved finger more than 15px in any direction, consider it scrolling
+      if (touchDiffY > 15 || touchDiffX > 15) {
+        setIsTouchScrolling(true);
+        e.stopPropagation(); // Prevent parent elements from handling this touch
+      }
+    }
+  };
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    if (!isTouchScrolling && onTouchStart) {
+      onTouchStart(e);
+    }
+    setTouchStartY(null);
+    setTouchStartX(null);
+  };
+
   return (
     <CellContainer
       onClick={onClick}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onMouseMove={onMouseMove}
-      onTouchStart={onTouchStart}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
     >
       <SpriteContainer>
         <SpriteFromAtlas
@@ -54,30 +87,31 @@ export const InformationCenterCell: React.FC<IInformationCenterCellProps> = ({
 const CellContainer = styled.div`
   position: relative;
   background: rgba(0, 0, 0, 0.2);
-  padding: 0.25rem;
+  padding: 0.2rem;
   border-radius: 4px;
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   cursor: pointer;
   transition: background-color 0.2s ease;
   width: 100%;
   height: 100%;
-  min-height: 135px;
+  min-height: 90px;
   box-sizing: border-box;
-  gap: 0.25rem;
+  gap: 0.2rem;
   margin: 0;
 
   @media (min-width: 360px) {
-    padding: 0.75rem;
-    gap: 0.75rem;
-    margin: 2px;
-    width: calc(100% - 4px);
+    padding: 0.3rem;
+    gap: 0.3rem;
+    margin: 1px;
+    width: calc(100% - 2px);
+    min-height: 100px;
   }
 
   @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
-    min-height: 150px;
+    min-height: 110px;
   }
 
   &:hover {
@@ -86,30 +120,33 @@ const CellContainer = styled.div`
 `;
 
 const SpriteContainer = styled.div`
-  margin-bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   position: relative;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 4px;
   flex-shrink: 0;
+  overflow: hidden;
+
+  padding: 1rem;
+  margin-top: 1rem;
 
   @media (min-width: 360px) {
-    width: 48px;
-    height: 48px;
+    width: 36px;
+    height: 36px;
   }
 
   @media (min-width: 480px) {
-    width: 64px;
-    height: 64px;
+    width: 42px;
+    height: 42px;
   }
 
   @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
-    width: 72px;
-    height: 72px;
+    width: 48px;
+    height: 48px;
   }
 
   .sprite-from-atlas-img {
@@ -125,19 +162,19 @@ const CellNameContainer = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   flex: 1;
   width: 100%;
-  padding-top: 0.25rem;
+  padding-top: 0.1rem;
 `;
 
 const CellName = styled.h3`
-  font-size: 0.55rem;
+  font-size: 0.5rem;
   color: #fef08a;
   margin: 0;
   text-align: center;
   font-family: 'Press Start 2P', cursive;
-  line-height: 1.2;
+  line-height: 1.1;
   word-break: break-word;
   max-width: 100%;
   overflow-wrap: break-word;
@@ -151,14 +188,14 @@ const CellName = styled.h3`
   }
 
   @media (min-width: 360px) {
-    font-size: 0.6rem;
+    font-size: 0.55rem;
   }
 
   @media (min-width: 480px) {
-    font-size: 0.7rem;
+    font-size: 0.6rem;
   }
 
   @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
-    font-size: 0.8rem;
+    font-size: 0.65rem;
   }
 `;

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

@@ -113,9 +113,9 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
       const isMobileView = window.innerWidth < 480;
 
       if (isMobileView) {
-        // Center in the screen for mobile
+        // For mobile, position in center of screen
         setButtonPosition({
-          top: Math.max(50, window.innerHeight / 2 - 150),
+          top: window.innerHeight / 2,
           left: window.innerWidth / 2,
           isMobile: true,
         });
@@ -189,18 +189,20 @@ export const AdvancedFilters: React.FC<IAdvancedFiltersProps> = ({
             ref={panelRef}
             style={{
               position: 'fixed',
-              top: `${buttonPosition.top}px`,
-              left: `${buttonPosition.left}px`,
-              transform: 'translateX(-50%)',
+              top: buttonPosition.isMobile ? '50vh' : `${buttonPosition.top}px`,
+              left: buttonPosition.isMobile
+                ? '50vw'
+                : `${buttonPosition.left}px`,
+              transform: buttonPosition.isMobile
+                ? 'translate(-50%, -50%)'
+                : 'translateX(-50%)',
               zIndex: 9999,
             }}
             $isMobile={buttonPosition.isMobile}
           >
             <FilterHeader>
               <FilterTitle>Advanced Filters</FilterTitle>
-              {buttonPosition.isMobile && (
-                <CloseButton onClick={onToggle}>×</CloseButton>
-              )}
+              <CloseButton onClick={onToggle}>×</CloseButton>
             </FilterHeader>
 
             {sections.map(renderFilterSection)}

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

@@ -113,10 +113,15 @@ const Content = styled.div<{
   flex: 1;
   padding: 0.25rem;
   min-height: 200px;
-  max-height: ${props => props.$maxHeight};
-  overflow-y: ${props => (props.$maxHeight ? 'auto' : 'visible')};
+  max-height: 60vh;
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
   box-sizing: border-box;
 
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(0, 0, 0, 0.2);
+
   @media (min-width: 360px) {
     padding: 0.5rem;
   }
@@ -132,37 +137,36 @@ const Content = styled.div<{
     align-items: start;
     justify-content: center;
     width: 100%;
-    overflow-x: hidden;
 
     @media (min-width: 320px) {
-      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+      grid-template-columns: repeat(2, minmax(100px, 1fr));
     }
 
     @media (min-width: 400px) {
-      grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
+      grid-template-columns: repeat(2, minmax(120px, 1fr));
       gap: 0.75rem;
     }
 
     @media (min-width: 480px) {
-      grid-template-columns: repeat(2, minmax(135px, 1fr));
+      grid-template-columns: repeat(3, minmax(120px, 1fr));
       gap: 1rem;
     }
 
     @media (min-width: 768px) {
-      grid-template-columns: repeat(3, minmax(135px, 1fr));
+      grid-template-columns: repeat(4, minmax(120px, 1fr));
     }
 
     @media (min-width: ${UI_BREAKPOINT_MOBILE}) {
       grid-template-columns: repeat(
         ${props => Math.min(props.$gridColumns, 4)},
-        minmax(135px, 1fr)
+        minmax(120px, 1fr)
       );
     }
 
     @media (min-width: ${UI_BREAKPOINT_SMALL_LAPTOP}) {
       grid-template-columns: repeat(
         ${props => props.$gridColumns},
-        minmax(135px, 1fr)
+        minmax(120px, 1fr)
       );
     }
 
@@ -173,7 +177,7 @@ const Content = styled.div<{
       height: ${props => props.$itemHeight ?? 'auto'};
       width: 100%;
       box-sizing: border-box;
-      min-height: 135px;
+      min-height: 120px;
     }
   }