@rpg-engine/long-bow 0.8.33 → 0.8.35

package/package.json

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

package/src/components/InformationCenter/InformationCenter.tsx

@@ -11,7 +11,6 @@ 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 { InformationCenterItemsSection } from './sections/items/InformationCenterItemsSection';
 import { InformationCenterTutorialsSection } from './sections/tutorials/InformationCenterTutorialsSection';
 
@@ -38,7 +37,6 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   entitiesAtlasIMG,
   iconsAtlasIMG,
   iconsAtlasJSON,
-  faqItems = [],
   bestiaryItems = [],
   videoGuides = [],
   items = [],
@@ -88,17 +86,6 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
         />
       ),
     },
-    {
-      id: 'faq',
-      title: 'FAQ',
-      content: (
-        <InformationCenterFAQSection
-          faqItems={faqItems}
-          initialSearchQuery={initialSearchQuery}
-          tabId="faq"
-        />
-      ),
-    },
     {
       id: 'tutorials',
       title: 'Tutorials',

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/stories/UI/info/InformationCenter.stories.tsx

@@ -10,7 +10,7 @@ import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
 import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
 
 import { IInformationCenterItem } from '@rpg-engine/shared';
-import { mockBestiaryItems, mockFaqItems, mockItems, mockTutorials } from '../../../mocks/informationCenter.mocks';
+import { mockBestiaryItems, mockItems, mockTutorials } from '../../../mocks/informationCenter.mocks';
  
 
 const meta: Meta = {
@@ -32,7 +32,7 @@ const Template: Story = args => (
       entitiesAtlasIMG={entitiesAtlasIMG}
       iconsAtlasJSON={iconsAtlasJSON}
       iconsAtlasIMG={iconsAtlasIMG}
-      faqItems={mockFaqItems}
+      // faqItems={mockFaqItems}
       bestiaryItems={mockBestiaryItems}
       videoGuides={mockTutorials}
       items={mockItems as unknown as IInformationCenterItem[]}