@rpg-engine/long-bow 0.8.18 → 0.8.19

package/package.json

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

package/src/components/CraftBook/CraftBook.tsx

@@ -368,7 +368,7 @@ const ContentContainer = styled.div`
   padding-bottom: 0;
   width: 100%;
   position: relative;
-  min-height: 250px;
+  min-height: 300px;
   overflow: hidden;
 `;
 

package/src/components/InformationCenter/InformationCenter.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { InternalTabs } from '../InternalTabs/InternalTabs';
 import {
   IInformationCenterItem,
-  IInformationCenterNPC,
+  IInformationCenterProps,
 } from './InformationCenterTypes';
 import { InformationCenterBestiarySection } from './sections/bestiary/InformationCenterBestiarySection';
 import { InformationCenterFAQSection } from './sections/faq/InformationCenterFaqSection';
@@ -27,127 +27,119 @@ export interface IVideoGuide {
   category: 'Combat' | 'Crafting' | 'Exploration' | 'General';
 }
 
-export interface IInformationCenterProps {
-  itemsAtlasJSON: Record<string, any>;
-  itemsAtlasIMG: string;
-  entitiesAtlasJSON: Record<string, any>;
-  entitiesAtlasIMG: string;
-  faqItems?: IFaqItem[];
-  bestiaryItems?: IInformationCenterNPC[];
-  videoGuides?: IVideoGuide[];
-  items?: IInformationCenterItem[];
-  loading?: boolean;
-  error?: string;
-  initialSearchQuery?: string;
-}
-
 export const InformationCenter: React.FC<IInformationCenterProps> = ({
-  itemsAtlasJSON,
-  itemsAtlasIMG,
-  entitiesAtlasJSON,
-  entitiesAtlasIMG,
-  faqItems = [],
-  bestiaryItems = [],
-  videoGuides = [],
-  items = [],
-  loading = false,
-  error,
-  initialSearchQuery = '',
-}) => {
-  const [activeTab, setActiveTab] = useState('bestiary');
-  const [
-    selectedItem,
-    setSelectedItem,
-  ] = useState<IInformationCenterItem | null>(null);
+         itemsAtlasJSON,
+         itemsAtlasIMG,
+         entitiesAtlasJSON,
+         entitiesAtlasIMG,
+         iconsAtlasIMG,
+         iconsAtlasJSON,
+         faqItems = [],
+         bestiaryItems = [],
+         videoGuides = [],
+         items = [],
+         loading = false,
+         error,
+         initialSearchQuery = '',
+       }) => {
+         const [activeTab, setActiveTab] = useState('bestiary');
+         const [
+           selectedItem,
+           setSelectedItem,
+         ] = useState<IInformationCenterItem | null>(null);
 
-  if (loading) {
-    return <LoadingMessage>Loading...</LoadingMessage>;
-  }
+         if (loading) {
+           return <LoadingMessage>Loading...</LoadingMessage>;
+         }
 
-  if (error) {
-    return <ErrorMessage>{error}</ErrorMessage>;
-  }
+         if (error) {
+           return <ErrorMessage>{error}</ErrorMessage>;
+         }
 
-  const tabs = [
-    {
-      id: 'bestiary',
-      title: 'Bestiary',
-      content: (
-        <InformationCenterBestiarySection
-          bestiaryItems={bestiaryItems}
-          itemsAtlasJSON={itemsAtlasJSON}
-          itemsAtlasIMG={itemsAtlasIMG}
-          entitiesAtlasJSON={entitiesAtlasJSON}
-          entitiesAtlasIMG={entitiesAtlasIMG}
-          initialSearchQuery={initialSearchQuery}
-          tabId="bestiary"
-        />
-      ),
-    },
-    {
-      id: 'items',
-      title: 'Items',
-      content: (
-        <InformationCenterItemsSection
-          items={items}
-          bestiaryItems={bestiaryItems}
-          itemsAtlasJSON={itemsAtlasJSON}
-          itemsAtlasIMG={itemsAtlasIMG}
-          initialSearchQuery={initialSearchQuery}
-          tabId="items"
-        />
-      ),
-    },
-    {
-      id: 'faq',
-      title: 'FAQ',
-      content: (
-        <InformationCenterFAQSection
-          faqItems={faqItems}
-          initialSearchQuery={initialSearchQuery}
-          tabId="faq"
-        />
-      ),
-    },
-    {
-      id: 'tutorials',
-      title: 'Tutorials',
-      content: (
-        <InformationCenterTutorialsSection
-          videoGuides={videoGuides}
-          initialSearchQuery={initialSearchQuery}
-          tabId="tutorials"
-        />
-      ),
-    },
-  ];
+         const tabs = [
+           {
+             id: 'bestiary',
+             title: 'Bestiary',
+             content: (
+               <InformationCenterBestiarySection
+                 bestiaryItems={bestiaryItems}
+                 itemsAtlasJSON={itemsAtlasJSON}
+                 itemsAtlasIMG={itemsAtlasIMG}
+                 iconsAtlasIMG={iconsAtlasIMG}
+                 iconsAtlasJSON={iconsAtlasJSON}
+                 entitiesAtlasJSON={entitiesAtlasJSON}
+                 entitiesAtlasIMG={entitiesAtlasIMG}
+                 initialSearchQuery={initialSearchQuery}
+                 tabId="bestiary"
+               />
+             ),
+           },
+           {
+             id: 'items',
+             title: 'Items',
+             content: (
+               <InformationCenterItemsSection
+                 items={items}
+                 bestiaryItems={bestiaryItems}
+                 itemsAtlasJSON={itemsAtlasJSON}
+                 itemsAtlasIMG={itemsAtlasIMG}
+                 initialSearchQuery={initialSearchQuery}
+                 tabId="items"
+               />
+             ),
+           },
+           {
+             id: 'faq',
+             title: 'FAQ',
+             content: (
+               <InformationCenterFAQSection
+                 faqItems={faqItems}
+                 initialSearchQuery={initialSearchQuery}
+                 tabId="faq"
+               />
+             ),
+           },
+           {
+             id: 'tutorials',
+             title: 'Tutorials',
+             content: (
+               <InformationCenterTutorialsSection
+                 videoGuides={videoGuides}
+                 initialSearchQuery={initialSearchQuery}
+                 tabId="tutorials"
+               />
+             ),
+           },
+         ];
 
-  return (
-    <Container>
-      <InternalTabs
-        tabs={tabs}
-        activeTextColor="#000000"
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
-        activeColor="#fef08a"
-        inactiveColor="#6b7280"
-        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>
-  );
-};
+         return (
+           <Container>
+             <InternalTabs
+               tabs={tabs}
+               activeTextColor="#000000"
+               activeTab={activeTab}
+               onTabChange={setActiveTab}
+               activeColor="#fef08a"
+               inactiveColor="#6b7280"
+               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>
+         );
+       };
 
 const Container = styled.div`
   width: 100%;

package/src/components/InformationCenter/InformationCenterTypes.ts

@@ -8,6 +8,7 @@ import {
   NPCSubtype,
   RangeTypes,
 } from '@rpg-engine/shared';
+import { IFaqItem, IVideoGuide } from './InformationCenter';
 
 export enum MovementSpeed {
   ExtraSlow = 1.5,
@@ -48,6 +49,7 @@ interface INPCBlueprintSpellArea {
   spellKey: string;
   probability: number;
   power: string;
+  texturePath: string;
 }
 
 export interface IInformationCenterNPC {
@@ -85,3 +87,19 @@ export interface IInformationCenterItem extends IEquippableItemBlueprint {
   equippedBuff?: ICharacterPermanentBuff[];
   equippedBuffDescription?: string;
 }
+
+export interface IInformationCenterProps {
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  entitiesAtlasJSON: Record<string, any>;
+  entitiesAtlasIMG: string;
+  iconsAtlasJSON: any;
+  iconsAtlasIMG: any;
+  faqItems?: IFaqItem[];
+  bestiaryItems?: IInformationCenterNPC[];
+  videoGuides?: IVideoGuide[];
+  items?: IInformationCenterItem[];
+  loading?: boolean;
+  error?: string;
+  initialSearchQuery?: string;
+}

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

@@ -13,6 +13,8 @@ interface IBestiarySectionProps {
   itemsAtlasIMG: string;
   entitiesAtlasJSON: Record<string, any>;
   entitiesAtlasIMG: string;
+  iconsAtlasIMG: any;
+  iconsAtlasJSON: any;
   initialSearchQuery: string;
   tabId: string;
 }
@@ -21,6 +23,8 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   bestiaryItems,
   itemsAtlasJSON,
   itemsAtlasIMG,
+  iconsAtlasIMG,
+  iconsAtlasJSON,
   entitiesAtlasJSON,
   entitiesAtlasIMG,
   initialSearchQuery,
@@ -143,6 +147,8 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
           npc={selectedMonster}
           itemsAtlasJSON={itemsAtlasJSON}
           itemsAtlasIMG={itemsAtlasIMG}
+          iconAtlasIMG={iconsAtlasIMG}
+          iconAtlasJSON={iconsAtlasJSON}
           entitiesAtlasJSON={entitiesAtlasJSON}
           entitiesAtlasIMG={entitiesAtlasIMG}
           onBack={() => setSelectedMonster(null)}