@rpg-engine/long-bow 0.8.20 → 0.8.22

package/dist/mocks/informationCenter.mocks.d.ts

@@ -1,5 +1,4 @@
-import { IFaqItem, IVideoGuide } from '../components/InformationCenter/InformationCenter';
-import { IInformationCenterItem, IInformationCenterNPC } from '../components/InformationCenter/InformationCenterTypes';
+import { IFaqItem, IInformationCenterItem, IInformationCenterNPC, IVideoGuide } from '@rpg-engine/shared';
 export declare const mockBestiaryItems: IInformationCenterNPC[];
 export declare const mockItems: IInformationCenterItem[];
 export declare const mockFaqItems: IFaqItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.8.20",
+  "version": "0.8.22",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -84,7 +84,7 @@
   "dependencies": {
     "@capacitor/core": "^6.1.0",
     "@rollup/plugin-image": "^2.1.1",
-    "@rpg-engine/shared": "^0.9.96",
+    "@rpg-engine/shared": "^0.9.101",
     "dayjs": "^1.11.2",
     "font-awesome": "^4.7.0",
     "fs-extra": "^10.1.0",

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/Dropdown.tsx

@@ -15,6 +15,10 @@ export interface IDropdownProps {
   opensUp?: boolean; // Add a new prop to control the dropdown direction
 }
 
+const ITEM_HEIGHT = 35;
+const MAX_ITEMS_VISIBLE = 10;
+const MAX_HEIGHT = MAX_ITEMS_VISIBLE * ITEM_HEIGHT;
+
 export const Dropdown: React.FC<IDropdownProps> = ({
   options,
   width,
@@ -65,6 +69,7 @@ export const Dropdown: React.FC<IDropdownProps> = ({
         className="rpgui-dropdown-imp"
         opened={opened}
         opensUp={opensUp}
+        optionsCount={options.length}
       >
         {options.map(option => {
           return (
@@ -88,11 +93,16 @@ export const Dropdown: React.FC<IDropdownProps> = ({
 const Container = styled.div<{ width: string | undefined }>`
   position: relative;
   width: ${props => props.width || '100%'};
+  max-height: ${MAX_HEIGHT}px;
 `;
 
 const DropdownSelect = styled.p`
   width: 100%;
   box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-height: ${ITEM_HEIGHT}px;
 
   label {
     display: inline-block;
@@ -103,10 +113,14 @@ const DropdownSelect = styled.p`
 const DropdownOptions = styled.ul<{
   opened: boolean;
   opensUp: boolean;
+  optionsCount: number;
 }>`
   position: absolute;
   width: 100%;
-  max-height: 300px;
+  max-height: ${props =>
+    props.opened
+      ? `${Math.min(props.optionsCount * ITEM_HEIGHT, MAX_HEIGHT)}px`
+      : '0'};
   overflow-y: auto;
   display: ${props => (props.opened ? 'block' : 'none')};
   box-sizing: border-box;
@@ -114,7 +128,15 @@ const DropdownOptions = styled.ul<{
   top: ${props => (props.opensUp ? 'auto' : '100%')};
   margin: 0;
   padding: 0;
-  @media (max-width: 768px) {
-    padding: 8px 0;
+
+  li {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding: 8px 12px;
+    min-height: ${ITEM_HEIGHT}px;
+    max-height: ${ITEM_HEIGHT}px;
+    box-sizing: border-box;
+    line-height: 1.2;
   }
 `;

package/src/components/InformationCenter/InformationCenter.tsx

@@ -1,37 +1,26 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import { InternalTabs } from '../InternalTabs/InternalTabs';
 import {
+  IFaqItem,
   IInformationCenterItem,
   IInformationCenterNPC,
-} from './InformationCenterTypes';
+  IVideoGuide,
+} from '@rpg-engine/shared';
+import { InternalTabs } from '../InternalTabs/InternalTabs';
 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';
 
-export interface IFaqItem {
-  id: string;
-  question: string;
-  answer: string;
-}
-
-export interface IVideoGuide {
-  id: string;
-  title: string;
-  description: string;
-  thumbnailUrl: string;
-  videoUrl: string;
-  category: 'Combat' | 'Crafting' | 'Exploration' | 'General';
-}
-
-export interface IInformationCenterProps {
+interface IInformationCenterProps {
   itemsAtlasJSON: Record<string, any>;
   itemsAtlasIMG: string;
   entitiesAtlasJSON: Record<string, any>;
   entitiesAtlasIMG: string;
+  iconsAtlasJSON: any;
+  iconsAtlasIMG: any;
   faqItems?: IFaqItem[];
   bestiaryItems?: IInformationCenterNPC[];
   videoGuides?: IVideoGuide[];
@@ -46,6 +35,8 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
   itemsAtlasIMG,
   entitiesAtlasJSON,
   entitiesAtlasIMG,
+  iconsAtlasIMG,
+  iconsAtlasJSON,
   faqItems = [],
   bestiaryItems = [],
   videoGuides = [],
@@ -77,6 +68,8 @@ export const InformationCenter: React.FC<IInformationCenterProps> = ({
           bestiaryItems={bestiaryItems}
           itemsAtlasJSON={itemsAtlasJSON}
           itemsAtlasIMG={itemsAtlasIMG}
+          iconsAtlasIMG={iconsAtlasIMG}
+          iconsAtlasJSON={iconsAtlasJSON}
           entitiesAtlasJSON={entitiesAtlasJSON}
           entitiesAtlasIMG={entitiesAtlasIMG}
           initialSearchQuery={initialSearchQuery}

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

@@ -1,18 +1,21 @@
-import React, { useState } from 'react';
+import { IInformationCenterNPC, NPCAlignment } from '@rpg-engine/shared';
+import React, { useMemo, 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 { IInformationCenterNPC } from '../../InformationCenterTypes';
+import { formatItemType } from '../items/InformationCenterItemsSection';
 import { InformationCenterNPCDetails } from './InformationCenterNPCDetails';
 import { InformationCenterNPCTooltip } from './InformationCenterNPCTooltip';
-
 interface IBestiarySectionProps {
   bestiaryItems: IInformationCenterNPC[];
   itemsAtlasJSON: Record<string, any>;
   itemsAtlasIMG: string;
   entitiesAtlasJSON: Record<string, any>;
   entitiesAtlasIMG: string;
+  iconsAtlasIMG: any;
+  iconsAtlasJSON: any;
   initialSearchQuery: string;
   tabId: string;
 }
@@ -21,6 +24,8 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
   bestiaryItems,
   itemsAtlasJSON,
   itemsAtlasIMG,
+  iconsAtlasIMG,
+  iconsAtlasJSON,
   entitiesAtlasJSON,
   entitiesAtlasIMG,
   initialSearchQuery,
@@ -87,6 +92,20 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
     setTooltipData(null);
   };
 
+  const [selectedBestiaryCategory, setSelectedBestiaryCategory] = useState<
+    string
+  >('all');
+
+  const bestiaryCategoryOptions: IOptionsProps[] = [
+    { id: 0, value: 'all', option: 'All Monsters' },
+    { id: 1, value: 'bosses', option: 'Bosses' },
+    ...Object.entries(NPCAlignment).map(([, value], index) => ({
+      id: index + 1,
+      value,
+      option: formatItemType(value),
+    })),
+  ];
+
   const renderItem = (item: IInformationCenterNPC) => (
     <InformationCenterCell
       key={item.id}
@@ -102,9 +121,33 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
     />
   );
 
-  const filteredItems = bestiaryItems.filter(item =>
-    item.name.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const filteredItems = useMemo(() => {
+    return bestiaryItems.filter(item => {
+      const matchesSearch = item.name
+        .toLowerCase()
+        .includes(searchQuery.toLowerCase());
+
+      let matchesCategory = true;
+
+      if (selectedBestiaryCategory === 'bosses') {
+        matchesCategory = item.isBoss === true;
+      } else if (selectedBestiaryCategory === NPCAlignment.Hostile) {
+        matchesCategory =
+          item.alignment === NPCAlignment.Hostile && !item.isBoss;
+      } else if (selectedBestiaryCategory !== 'all') {
+        matchesCategory = item.alignment === selectedBestiaryCategory;
+      }
+
+      return matchesSearch && matchesCategory;
+    });
+  }, [bestiaryItems, searchQuery, selectedBestiaryCategory]);
+
+  const handleSearchChange = (newQuery: string) => {
+    setSearchQuery(newQuery);
+    if (newQuery && selectedBestiaryCategory !== 'all') {
+      setSelectedBestiaryCategory('all');
+    }
+  };
 
   return (
     <>
@@ -114,11 +157,17 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
         emptyMessage="No monsters found"
         tabId={tabId}
         layout="grid"
+        filterOptions={{
+          options: bestiaryCategoryOptions,
+          selectedOption: selectedBestiaryCategory,
+          onOptionChange: setSelectedBestiaryCategory,
+        }}
         searchOptions={{
           value: searchQuery,
-          onChange: setSearchQuery,
+          onChange: handleSearchChange,
           placeholder: 'Search monsters...',
         }}
+        dependencies={[selectedBestiaryCategory]}
         itemHeight="180px"
       />
       {tooltipData && (
@@ -143,6 +192,8 @@ export const InformationCenterBestiarySection: React.FC<IBestiarySectionProps> =
           npc={selectedMonster}
           itemsAtlasJSON={itemsAtlasJSON}
           itemsAtlasIMG={itemsAtlasIMG}
+          iconAtlasIMG={iconsAtlasIMG}
+          iconAtlasJSON={iconsAtlasJSON}
           entitiesAtlasJSON={entitiesAtlasJSON}
           entitiesAtlasIMG={entitiesAtlasIMG}
           onBack={() => setSelectedMonster(null)}

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

@@ -1,4 +1,9 @@
-import { isMobileOrTablet, RangeTypes } from '@rpg-engine/shared';
+import {
+  IInformationCenterNPC,
+  isMobileOrTablet,
+  MovementSpeed,
+  RangeTypes,
+} from '@rpg-engine/shared';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../../constants/uiColors';
@@ -6,10 +11,7 @@ import { Collapsible } from '../../../shared/Collapsible/Collapsible';
 import { Pagination } from '../../../shared/Pagination/Pagination';
 import { SearchBar } from '../../../shared/SearchBar/SearchBar';
 import { SpriteFromAtlas } from '../../../shared/SpriteFromAtlas';
-import {
-  IInformationCenterNPC,
-  MovementSpeed,
-} from '../../InformationCenterTypes';
+
 import { BaseInformationDetails } from '../../shared/BaseInformationDetails';
 
 interface INPCDetailsProps {
@@ -18,17 +20,35 @@ interface INPCDetailsProps {
   itemsAtlasIMG: string;
   entitiesAtlasJSON: Record<string, any>;
   entitiesAtlasIMG: string;
+  iconAtlasIMG?: any;
+  iconAtlasJSON?: any;
   onBack: () => void;
 }
 
 const ITEMS_PER_PAGE = 5;
 
+export const formatItemName = (itemPath: string): string => {
+  const cleanText =
+    itemPath
+      .split('/')
+      .pop()
+      ?.split('.')
+      .shift() || '';
+
+  return cleanText
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+};
+
 export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
   npc,
   itemsAtlasJSON,
   itemsAtlasIMG,
   entitiesAtlasJSON,
   entitiesAtlasIMG,
+  iconAtlasIMG,
+  iconAtlasJSON,
   onBack,
 }) => {
   const isMobile = isMobileOrTablet();
@@ -39,12 +59,14 @@ export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
     if (typeof text === 'number') {
       return text.toString();
     }
+
     return text
       .toString()
       .replace(/([A-Z])/g, ' $1')
       .trim()
       .replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2')
-      .replace(/\s+/g, ' ');
+      .replace(/\s+/g, ' ')
+      .replace(/^\w/, c => c.toUpperCase());
   };
 
   const formatRarity = (rarity: number): string => {
@@ -68,7 +90,7 @@ export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
 
   const filteredLoots =
     npc.loots?.filter(loot =>
-      formatText(loot.itemBlueprintKey)
+      formatItemName(loot.itemBlueprintKey)
         .toLowerCase()
         .includes(lootSearchQuery.toLowerCase())
     ) || [];
@@ -147,7 +169,7 @@ export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
                   imgScale={1}
                 />
                 <LootDetails>
-                  <LootName>{formatText(loot.itemBlueprintKey)}</LootName>
+                  <LootName>{formatItemName(loot.itemBlueprintKey)}</LootName>
                   <LootInfo>
                     <LootChance>{formatRarity(loot.chance)}</LootChance>
                     {loot.quantityRange && (
@@ -187,12 +209,24 @@ export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
           <SpellsList>
             {npc.areaSpells.map((spell, index) => (
               <SpellItem key={index}>
-                <SpellName>{formatText(spell.spellKey)}</SpellName>
-                <SpellDetails>
-                  Power: <SpellValue>{formatText(spell.power)}</SpellValue>
-                  <Separator>•</Separator>
-                  Chance: <SpellValue>{spell.probability}%</SpellValue>
-                </SpellDetails>
+                <SpellIconContainer>
+                  <SpriteFromAtlas
+                    atlasJSON={iconAtlasJSON}
+                    atlasIMG={iconAtlasIMG}
+                    spriteKey={spell.texturePath || spell.spellKey}
+                    width={24}
+                    height={24}
+                    imgScale={1}
+                  />
+                </SpellIconContainer>
+                <SpellContent>
+                  <SpellName>{formatText(spell.spellKey)}</SpellName>
+                  <SpellDetails>
+                    Power: <SpellValue>{formatText(spell.power)}</SpellValue>
+                    <Separator>•</Separator>
+                    Chance: <SpellValue>{spell.probability}%</SpellValue>
+                  </SpellDetails>
+                </SpellContent>
               </SpellItem>
             ))}
           </SpellsList>
@@ -271,13 +305,27 @@ const SpellsList = styled.div`
   padding: 12px;
 `;
 
-const SpellItem = styled.div`
+const SpellIconContainer = styled.div`
+  display: flex;
+  padding-right: 30px;
+  padding-bottom: 30px;
+`;
+
+const SpellContent = styled.div`
   display: flex;
   flex-direction: column;
   gap: 4px;
+  flex: 1;
+`;
+
+const SpellItem = styled.div`
+  display: flex;
+  gap: 8px;
   background: rgba(255, 255, 255, 0.05);
   padding: 8px;
+  padding-left: 10px;
   border-radius: 4px;
+  align-items: center;
 `;
 
 const SpellName = styled.div`

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

@@ -1,4 +1,8 @@
-import { RangeTypes } from '@rpg-engine/shared';
+import {
+  IInformationCenterNPC,
+  MovementSpeed,
+  RangeTypes,
+} from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../../constants/uiColors';
@@ -10,10 +14,7 @@ import BaseTooltip, {
   TooltipTitle,
 } from '../../../shared/BaseTooltip';
 import { SpriteFromAtlas } from '../../../shared/SpriteFromAtlas';
-import {
-  IInformationCenterNPC,
-  MovementSpeed,
-} from '../../InformationCenterTypes';
+import { formatItemName } from './InformationCenterNPCDetails';
 
 interface INPCTooltipProps {
   npc: IInformationCenterNPC;
@@ -191,7 +192,7 @@ export const InformationCenterNPCTooltip: React.FC<INPCTooltipProps> = ({
                   spriteKey={loot.itemBlueprintKey}
                   imgScale={1}
                 />
-                <LootName>{formatText(loot.itemBlueprintKey)}</LootName>
+                <LootName>{formatItemName(loot.itemBlueprintKey)}</LootName>
                 <LootChance>{formatRarity(loot.chance)}</LootChance>
               </LootItem>
             ))}

package/src/components/InformationCenter/sections/faq/InformationCenterFaqSection.tsx

@@ -1,9 +1,9 @@
+import { IFaqItem } from '@rpg-engine/shared';
 import React, { useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { Collapsible } from '../../../shared/Collapsible/Collapsible';
 import { PaginatedContent } from '../../../shared/PaginatedContent/PaginatedContent';
 import { SearchHeader } from '../../../shared/SearchHeader/SearchHeader';
-import { IFaqItem } from '../../InformationCenter';
 
 interface IFaqSectionProps {
   faqItems: IFaqItem[];

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

@@ -1,12 +1,12 @@
-import { isMobileOrTablet } from '@rpg-engine/shared';
+import {
+  IInformationCenterItem,
+  IInformationCenterNPC,
+  isMobileOrTablet,
+} from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../../constants/uiColors';
 import { Collapsible } from '../../../shared/Collapsible/Collapsible';
-import {
-  IInformationCenterItem,
-  IInformationCenterNPC,
-} from '../../InformationCenterTypes';
 import { BaseInformationDetails } from '../../shared/BaseInformationDetails';
 
 interface IInformationCenterItemDetailsProps {
@@ -130,7 +130,9 @@ export const InformationCenterItemDetails: React.FC<IInformationCenterItemDetail
           <BuffsList>
             {item.equippedBuff.map((buff, index) => (
               <BuffItem key={index}>
-                <BuffName>{buff.trait}</BuffName>
+                <BuffName>
+                  {buff.trait.replace(/^\w/, c => c.toUpperCase())}
+                </BuffName>
                 <BuffValue>+{buff.buffPercentage}%</BuffValue>
               </BuffItem>
             ))}

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

@@ -1,3 +1,4 @@
+import { IInformationCenterItem } from '@rpg-engine/shared';
 import React from 'react';
 import styled from 'styled-components';
 import { uiColors } from '../../../../constants/uiColors';
@@ -8,7 +9,6 @@ import BaseTooltip, {
   StatsContainer,
   TooltipTitle,
 } from '../../../shared/BaseTooltip';
-import { IInformationCenterItem } from '../../InformationCenterTypes';
 
 interface IItemTooltipProps {
   item: IInformationCenterItem;

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

@@ -1,17 +1,17 @@
-import { ItemType } from '@rpg-engine/shared';
+import {
+  IInformationCenterItem,
+  IInformationCenterNPC,
+  ItemType,
+} 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 { InformationCenterCell } from '../../InformationCenterCell';
-import {
-  IInformationCenterItem,
-  IInformationCenterNPC,
-} from '../../InformationCenterTypes';
 import { InformationCenterItemDetails } from './InformationCenterItemDetails';
 import { InformationCenterItemTooltip } from './InformationCenterItemTooltip';
 
-const TOOLTIP_OFFSET = 20;
+const TOOLTIP_OFFSET = 200;
 
 interface IItemsSectionProps {
   items: IInformationCenterItem[];
@@ -22,6 +22,23 @@ interface IItemsSectionProps {
   tabId: string;
 }
 
+export const formatItemType = (type: string): string => {
+  const words = type.split(/(?=[A-Z])/);
+
+  if (words.length === 1) {
+    return words[0];
+  }
+
+  return words
+    .map((word, index) => {
+      if (index === 0) {
+        return word.charAt(0) + '.';
+      }
+      return word;
+    })
+    .join(' ');
+};
+
 export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
   items,
   bestiaryItems,
@@ -45,9 +62,11 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
 
   const itemCategoryOptions: IOptionsProps[] = [
     { id: 0, value: 'all', option: 'All Items' },
-    { id: 1, value: ItemType.Consumable, option: 'Consumables' },
-    { id: 2, value: ItemType.Weapon, option: 'Weapons' },
-    { id: 3, value: ItemType.Armor, option: 'Armor' },
+    ...Object.values(ItemType).map((type, index) => ({
+      id: index + 1,
+      value: type,
+      option: formatItemType(type),
+    })),
   ];
 
   const filteredItems = items.filter(
@@ -108,6 +127,13 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
     setHoveredItem(null);
   };
 
+  const handleSearchChange = (newQuery: string) => {
+    setSearchQuery(newQuery);
+    if (newQuery && selectedItemCategory !== 'all') {
+      setSelectedItemCategory('all');
+    }
+  };
+
   const renderItem = (item: IInformationCenterItem) => (
     <InformationCenterCell
       key={item.key}
@@ -136,7 +162,7 @@ export const InformationCenterItemsSection: React.FC<IItemsSectionProps> = ({
         }}
         searchOptions={{
           value: searchQuery,
-          onChange: setSearchQuery,
+          onChange: handleSearchChange,
           placeholder: 'Search items...',
         }}
         dependencies={[selectedItemCategory]}