@rpg-engine/long-bow 0.8.27 → 0.8.29

package/package.json

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

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/InformationCenterBestiarySection.tsx

@@ -1,4 +1,8 @@
-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 { IOptionsProps } from '../../../Dropdown';
@@ -8,6 +12,7 @@ import { InformationCenterCell } from '../../InformationCenterCell';
 import { formatItemType } from '../items/InformationCenterItemsSection';
 import { InformationCenterNPCDetails } from './InformationCenterNPCDetails';
 import { InformationCenterNPCTooltip } from './InformationCenterNPCTooltip';
+
 interface IBestiarySectionProps {
   bestiaryItems: IInformationCenterNPC[];
   itemsAtlasJSON: Record<string, any>;
@@ -31,6 +36,7 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   initialSearchQuery,
   tabId,
 }) => {
+  const isMobile = isMobileOrTablet();
   const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [tooltipData, setTooltipData] = useState<{
     npc: IInformationCenterNPC;
@@ -40,13 +46,12 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
     selectedMonster,
     setSelectedMonster,
   ] = useState<IInformationCenterNPC | null>(null);
-  const [isTouchDevice] = useState('ontouchstart' in window);
 
   const handleMouseEnter = (
     monster: IInformationCenterNPC,
     event: React.MouseEvent
   ) => {
-    if (!isTouchDevice && !selectedMonster) {
+    if (!isMobile && !selectedMonster) {
       setTooltipData({
         npc: monster,
         position: { x: event.clientX, y: event.clientY },
@@ -55,13 +60,13 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   };
 
   const handleMouseLeave = () => {
-    if (!isTouchDevice) {
+    if (!isMobile) {
       setTooltipData(null);
     }
   };
 
   const handleMouseMove = (event: React.MouseEvent) => {
-    if (!isTouchDevice && tooltipData) {
+    if (!isMobile && tooltipData) {
       setTooltipData({
         ...tooltipData,
         position: { x: event.clientX, y: event.clientY },
@@ -73,18 +78,9 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
     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 },
-        });
-      }
-    }
+    event.preventDefault();
+    setSelectedMonster(monster);
+    setTooltipData(null);
   };
 
   const handleMonsterClick = (monster: IInformationCenterNPC) => {
@@ -170,7 +166,7 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         dependencies={[selectedBestiaryCategory]}
         itemHeight="180px"
       />
-      {tooltipData && (
+      {!isMobile && tooltipData && (
         <Portal>
           <TooltipWrapper
             style={{
@@ -188,16 +184,18 @@ 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>
       )}
     </>
   );

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`

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

@@ -2,11 +2,13 @@ import {
   IInformationCenterItem,
   IInformationCenterNPC,
   ItemType,
+  isMobileOrTablet,
 } from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { IOptionsProps } from '../../../Dropdown';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
+import { Portal } from '../../../shared/Portal/Portal';
 import { InformationCenterCell } from '../../InformationCenterCell';
 import { InformationCenterItemDetails } from './InformationCenterItemDetails';
 import { InformationCenterItemTooltip } from './InformationCenterItemTooltip';
@@ -47,6 +49,7 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   initialSearchQuery,
   tabId,
 }) => {
+  const isMobile = isMobileOrTablet();
   const [searchQuery, setSearchQuery] = useState(initialSearchQuery);
   const [selectedItemCategory, setSelectedItemCategory] = useState<string>(
     'all'
@@ -90,15 +93,17 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
     e: React.MouseEvent,
     item: IInformationCenterItem
   ) => {
-    setTooltipPosition({
-      x: e.clientX + TOOLTIP_OFFSET,
-      y: e.clientY,
-    });
-    setHoveredItem(item);
+    if (!isMobile) {
+      setTooltipPosition({
+        x: e.clientX + TOOLTIP_OFFSET,
+        y: e.clientY,
+      });
+      setHoveredItem(item);
+    }
   };
 
   const handleMouseMove = (e: React.MouseEvent) => {
-    if (hoveredItem) {
+    if (!isMobile && hoveredItem) {
       setTooltipPosition({
         x: e.clientX + TOOLTIP_OFFSET,
         y: e.clientY,
@@ -107,19 +112,17 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   };
 
   const handleMouseLeave = () => {
-    setHoveredItem(null);
+    if (!isMobile) {
+      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) => {
@@ -170,7 +173,7 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
         layout="grid"
         itemHeight="180px"
       />
-      {hoveredItem && (
+      {!isMobile && hoveredItem && (
         <TooltipWrapper
           style={{ top: tooltipPosition.y, left: tooltipPosition.x }}
         >
@@ -178,13 +181,15 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
         </TooltipWrapper>
       )}
       {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>
       )}
     </>
   );

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/shared/Collapsible/Collapsible.tsx

@@ -66,5 +66,5 @@ const Icon = styled.span`
 `;
 
 const Content = styled.div`
-  padding: 12px;
+  padding: 6px;
 `;