@rpg-engine/long-bow 0.8.27 → 0.8.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.27",
+  "version": "0.8.28",
   "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/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,24 +49,29 @@ 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;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  max-width: 90%;
+  max-height: 90%;
   background-color: rgba(0, 0, 0, 0.95);
   border-radius: 4px;
   padding: 16px;
@@ -76,6 +81,12 @@ const Modal = styled.div`
   border: 1px solid ${uiColors.darkGray};
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 
+  @media (max-width: 768px) {
+    max-width: 100%;
+    max-height: 100%;
+    border-radius: 0;
+  }
+
   &::-webkit-scrollbar {
     width: 2px;
   }