@rpg-engine/long-bow 0.8.32 → 0.8.33

package/package.json

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

package/src/components/InformationCenter/sections/bestiary/InformationCenterBestiarySection.tsx

@@ -10,6 +10,7 @@ import { IOptionsProps } from '../../../Dropdown';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 import { Portal } from '../../../shared/Portal/Portal';
 import { InformationCenterCell } from '../../InformationCenterCell';
+import { BaseInformationDetails } from '../../shared/BaseInformationDetails';
 import { formatItemType } from '../items/InformationCenterItemsSection';
 import { BestiaryAdvancedFilters } from './BestiaryAdvancedFilters';
 import { InformationCenterNPCDetails } from './InformationCenterNPCDetails';
@@ -222,16 +223,24 @@ export const InformationCenterBestiarySection = ({
       )}
       {selectedMonster && (
         <Portal>
-          <InformationCenterNPCDetails
-            npc={selectedMonster}
-            itemsAtlasJSON={itemsAtlasJSON}
-            itemsAtlasIMG={itemsAtlasIMG}
-            iconAtlasIMG={iconsAtlasIMG}
-            iconAtlasJSON={iconsAtlasJSON}
-            entitiesAtlasJSON={entitiesAtlasJSON}
-            entitiesAtlasIMG={entitiesAtlasIMG}
+          <BaseInformationDetails
+            name={selectedMonster.name}
+            spriteKey={selectedMonster.key}
+            atlasJSON={entitiesAtlasJSON}
+            atlasIMG={entitiesAtlasIMG}
             onBack={() => setSelectedMonster(null)}
-          />
+          >
+            <InformationCenterNPCDetails
+              npc={selectedMonster}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+              iconAtlasIMG={iconsAtlasIMG}
+              iconAtlasJSON={iconsAtlasJSON}
+              entitiesAtlasJSON={entitiesAtlasJSON}
+              entitiesAtlasIMG={entitiesAtlasIMG}
+              onBack={() => setSelectedMonster(null)}
+            />
+          </BaseInformationDetails>
         </Portal>
       )}
     </>

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

@@ -9,6 +9,7 @@ import { useTooltipPosition } from '../../../../hooks/useTooltipPosition';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 import { Portal } from '../../../shared/Portal/Portal';
 import { InformationCenterCell } from '../../InformationCenterCell';
+import { BaseInformationDetails } from '../../shared/BaseInformationDetails';
 import { InformationCenterItemDetails } from './InformationCenterItemDetails';
 import { InformationCenterItemTooltip } from './InformationCenterItemTooltip';
 import { ItemsAdvancedFilters } from './ItemsAdvancedFilters';
@@ -170,13 +171,21 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
       )}
       {selectedItem && (
         <Portal>
-          <InformationCenterItemDetails
-            item={selectedItem}
-            itemsAtlasJSON={itemsAtlasJSON}
-            itemsAtlasIMG={itemsAtlasIMG}
-            droppedBy={getDroppedByNPCs(selectedItem.key, bestiaryItems)}
+          <BaseInformationDetails
+            name={selectedItem.name}
+            spriteKey={selectedItem.texturePath}
+            atlasJSON={itemsAtlasJSON}
+            atlasIMG={itemsAtlasIMG}
             onBack={() => setSelectedItem(null)}
-          />
+          >
+            <InformationCenterItemDetails
+              item={selectedItem}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+              droppedBy={getDroppedByNPCs(selectedItem.key, bestiaryItems)}
+              onBack={() => setSelectedItem(null)}
+            />
+          </BaseInformationDetails>
         </Portal>
       )}
     </>

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

@@ -64,7 +64,7 @@ const Overlay = styled.div`
 `;
 
 const Modal = styled.div`
-  position: fixed;
+  position: relative;
   background-color: rgba(0, 0, 0, 0.95);
   border-radius: 4px;
   padding: 12px;
@@ -74,17 +74,13 @@ const Modal = styled.div`
   border: 1px solid ${uiColors.darkGray};
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   width: 90%;
-  height: 90%;
-  top: 5%;
-  left: 5%;
+  height: 90vh;
   max-width: 800px;
-  margin: 0 auto;
+  max-height: 800px;
 
   @media (max-width: 768px) {
     width: 100%;
     height: 100%;
-    top: 0;
-    left: 0;
     border-radius: 0;
     padding: 8px;
   }