@rpg-engine/long-bow 0.8.32 → 0.8.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.32",
+  "version": "0.8.34",
   "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/bestiary/InformationCenterNPCDetails.tsx

@@ -1,18 +1,23 @@
 import {
+  IInformationCenterItem,
   IInformationCenterNPC,
   isMobileOrTablet,
+  ItemRarities,
+  ItemSubType,
+  ItemType,
   MovementSpeed,
   RangeTypes,
 } from '@rpg-engine/shared';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../../constants/uiColors';
 import { Collapsible } from '../../../shared/Collapsible/Collapsible';
 import { Pagination } from '../../../shared/Pagination/Pagination';
+import { Portal } from '../../../shared/Portal/Portal';
 import { SearchBar } from '../../../shared/SearchBar/SearchBar';
 import { SpriteFromAtlas } from '../../../shared/SpriteFromAtlas';
-
 import { BaseInformationDetails } from '../../shared/BaseInformationDetails';
+import { InformationCenterItemDetails } from '../items/InformationCenterItemDetails';
 
 interface INPCDetailsProps {
   npc: IInformationCenterNPC;
@@ -54,6 +59,14 @@ export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
   const isMobile = isMobileOrTablet();
   const [lootSearchQuery, setLootSearchQuery] = useState('');
   const [currentLootPage, setCurrentLootPage] = useState(1);
+  const [
+    selectedItem,
+    setSelectedItem,
+  ] = useState<IInformationCenterItem | null>(null);
+
+  useEffect(() => {
+    setCurrentLootPage(1);
+  }, [lootSearchQuery]);
 
   const formatText = (text: string | RangeTypes | MovementSpeed): string => {
     if (typeof text === 'number') {
@@ -101,6 +114,26 @@ export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
     currentLootPage * ITEMS_PER_PAGE
   );
 
+  const handleItemClick = (loot: any) => {
+    const item: IInformationCenterItem = {
+      key: loot.itemBlueprintKey,
+      name: formatItemName(loot.itemBlueprintKey),
+      texturePath: loot.itemBlueprintKey,
+      textureAtlas: 'items',
+      type: ItemType.Weapon,
+      subType: ItemSubType.Sword,
+      tier: 1,
+      rarity: ItemRarities.Common,
+      weight: 0,
+      maxStackSize: loot.quantityRange ? loot.quantityRange[1] : 1,
+      canSell: true,
+      description: 'A basic item.',
+      basePrice: 100,
+      allowedEquipSlotType: [],
+    };
+    setSelectedItem(item);
+  };
+
   return (
     <BaseInformationDetails
       name={npc.name}
@@ -153,13 +186,19 @@ export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
           <LootSearchContainer>
             <StyledSearchBar
               value={lootSearchQuery}
-              onChange={setLootSearchQuery}
+              onChange={(query: string) => {
+                setLootSearchQuery(query);
+                setCurrentLootPage(1);
+              }}
               placeholder="Search loot..."
             />
           </LootSearchContainer>
           <LootGrid>
             {paginatedLoots.map((loot, index) => (
-              <LootItem key={index}>
+              <LootItem
+                key={`${loot.itemBlueprintKey}-${index}`}
+                onClick={() => handleItemClick(loot)}
+              >
                 <SpriteFromAtlas
                   atlasJSON={itemsAtlasJSON}
                   atlasIMG={itemsAtlasIMG}
@@ -232,6 +271,18 @@ export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
           </SpellsList>
         </StyledCollapsible>
       )}
+
+      {selectedItem && (
+        <Portal>
+          <InformationCenterItemDetails
+            item={selectedItem}
+            itemsAtlasJSON={itemsAtlasJSON}
+            itemsAtlasIMG={itemsAtlasIMG}
+            droppedBy={[npc]}
+            onBack={() => setSelectedItem(null)}
+          />
+        </Portal>
+      )}
     </BaseInformationDetails>
   );
 };
@@ -399,6 +450,13 @@ const LootItem = styled.div`
   padding: 4px;
   border-radius: 4px;
   min-width: 0;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
 `;
 
 const LootDetails = styled.div`
@@ -406,27 +464,32 @@ const LootDetails = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
+  user-select: none;
 `;
 
 const LootName = styled.div`
   color: ${uiColors.white};
   font-size: 0.5rem;
+  user-select: none;
 `;
 
 const LootInfo = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
+  user-select: none;
 `;
 
 const LootChance = styled.span`
   color: ${uiColors.yellow};
   font-size: 0.45rem;
+  user-select: none;
 `;
 
 const LootQuantity = styled.span`
   color: ${uiColors.lightGray};
   font-size: 0.45rem;
+  user-select: none;
 `;
 
 const PaginationContainer = styled.div`

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;
   }