@rpg-engine/long-bow 0.8.21 → 0.8.23

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 {
@@ -25,7 +27,7 @@ interface INPCDetailsProps {
 
 const ITEMS_PER_PAGE = 5;
 
-const formatItemName = (itemPath: string): string => {
+export const formatItemName = (itemPath: string): string => {
   const cleanText =
     itemPath
       .split('/')
@@ -40,207 +42,199 @@ const formatItemName = (itemPath: string): string => {
 };
 
 export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
-         npc,
-         itemsAtlasJSON,
-         itemsAtlasIMG,
-         entitiesAtlasJSON,
-         entitiesAtlasIMG,
-         iconAtlasIMG,
-         iconAtlasJSON,
-         onBack,
-       }) => {
-         const isMobile = isMobileOrTablet();
-         const [lootSearchQuery, setLootSearchQuery] = useState('');
-         const [currentLootPage, setCurrentLootPage] = useState(1);
-
-         const formatText = (
-           text: string | RangeTypes | MovementSpeed
-         ): string => {
-           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, ' ');
-         };
-
-         const formatRarity = (rarity: number): string => {
-           switch (rarity) {
-             case 0.5:
-               return 'Very Rare';
-             case 1:
-               return 'Rare';
-             case 10:
-               return 'Uncommon';
-             case 15:
-               return 'Semi Common';
-             case 20:
-               return 'Common';
-             case 35:
-               return 'Very Common';
-             default:
-               return 'Unknown';
-           }
-         };
-
-         const filteredLoots =
-           npc.loots?.filter(loot =>
-             formatItemName(loot.itemBlueprintKey)
-               .toLowerCase()
-               .includes(lootSearchQuery.toLowerCase())
-           ) || [];
-
-         const totalLootPages = Math.ceil(
-           filteredLoots.length / ITEMS_PER_PAGE
-         );
-         const paginatedLoots = filteredLoots.slice(
-           (currentLootPage - 1) * ITEMS_PER_PAGE,
-           currentLootPage * ITEMS_PER_PAGE
-         );
-
-         return (
-           <BaseInformationDetails
-             name={npc.name}
-             spriteKey={npc.key}
-             atlasJSON={entitiesAtlasJSON}
-             atlasIMG={entitiesAtlasIMG}
-             onBack={onBack}
-           >
-             <InfoSection>
-               <InfoItem>
-                 <Label>Type:</Label>
-                 <Value>{formatText(npc.subType)}</Value>
-               </InfoItem>
-               <InfoItem>
-                 <Label>Alignment:</Label>
-                 <Value>{formatText(npc.alignment)}</Value>
-               </InfoItem>
-               <InfoItem>
-                 <Label>Attack Type:</Label>
-                 <Value>{formatText(npc.attackType)}</Value>
-               </InfoItem>
-               <InfoItem>
-                 <Label>Range:</Label>
-                 <Value>{formatText(npc.maxRangeAttack)}</Value>
-               </InfoItem>
-               <InfoItem>
-                 <Label>Speed:</Label>
-                 <Value>{formatText(npc.speed)}</Value>
-               </InfoItem>
-             </InfoSection>
-
-             <StyledCollapsible title="Stats" defaultOpen={!isMobile}>
-               <StatGrid>
-                 <StatItem>HP: {npc.baseHealth}</StatItem>
-                 <StatItem>Level: {npc.skills.level}</StatItem>
-                 {npc.skills.strength?.level && (
-                   <StatItem>Strength: {npc.skills.strength.level}</StatItem>
-                 )}
-                 {npc.skills.dexterity?.level && (
-                   <StatItem>Dexterity: {npc.skills.dexterity.level}</StatItem>
-                 )}
-                 {npc.skills.resistance?.level && (
-                   <StatItem>
-                     Resistance: {npc.skills.resistance.level}
-                   </StatItem>
-                 )}
-               </StatGrid>
-             </StyledCollapsible>
-
-             {npc.loots && npc.loots.length > 0 && (
-               <StyledCollapsible title="Loot" defaultOpen={!isMobile}>
-                 <LootSearchContainer>
-                   <StyledSearchBar
-                     value={lootSearchQuery}
-                     onChange={setLootSearchQuery}
-                     placeholder="Search loot..."
-                   />
-                 </LootSearchContainer>
-                 <LootGrid>
-                   {paginatedLoots.map((loot, index) => (
-                     <LootItem key={index}>
-                       <SpriteFromAtlas
-                         atlasJSON={itemsAtlasJSON}
-                         atlasIMG={itemsAtlasIMG}
-                         spriteKey={loot.itemBlueprintKey}
-                         width={24}
-                         height={24}
-                         imgScale={1}
-                       />
-                       <LootDetails>
-                         <LootName>
-                           {formatItemName(loot.itemBlueprintKey)}
-                         </LootName>
-                         <LootInfo>
-                           <LootChance>{formatRarity(loot.chance)}</LootChance>
-                           {loot.quantityRange && (
-                             <LootQuantity>
-                               x{loot.quantityRange[0]}-{loot.quantityRange[1]}
-                             </LootQuantity>
-                           )}
-                         </LootInfo>
-                       </LootDetails>
-                     </LootItem>
-                   ))}
-                 </LootGrid>
-                 {filteredLoots.length > ITEMS_PER_PAGE && (
-                   <PaginationContainer>
-                     <StyledPagination
-                       currentPage={currentLootPage}
-                       totalPages={totalLootPages}
-                       onPageChange={setCurrentLootPage}
-                     />
-                   </PaginationContainer>
-                 )}
-               </StyledCollapsible>
-             )}
-
-             {npc.entityEffects && npc.entityEffects.length > 0 && (
-               <StyledCollapsible title="Effects" defaultOpen={!isMobile}>
-                 <EffectsList>
-                   {npc.entityEffects.map((effect, index) => (
-                     <EffectItem key={index}>{formatText(effect)}</EffectItem>
-                   ))}
-                 </EffectsList>
-               </StyledCollapsible>
-             )}
-
-             {npc.areaSpells && npc.areaSpells.length > 0 && (
-               <StyledCollapsible title="Spells" defaultOpen={!isMobile}>
-                 <SpellsList>
-                   {npc.areaSpells.map((spell, index) => (
-                     <SpellItem key={index}>
-                       <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>
-               </StyledCollapsible>
-             )}
-           </BaseInformationDetails>
-         );
-       };
+  npc,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  entitiesAtlasJSON,
+  entitiesAtlasIMG,
+  iconAtlasIMG,
+  iconAtlasJSON,
+  onBack,
+}) => {
+  const isMobile = isMobileOrTablet();
+  const [lootSearchQuery, setLootSearchQuery] = useState('');
+  const [currentLootPage, setCurrentLootPage] = useState(1);
+
+  const formatText = (text: string | RangeTypes | MovementSpeed): string => {
+    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(/^\w/, c => c.toUpperCase());
+  };
+
+  const formatRarity = (rarity: number): string => {
+    switch (rarity) {
+      case 0.5:
+        return 'Very Rare';
+      case 1:
+        return 'Rare';
+      case 10:
+        return 'Uncommon';
+      case 15:
+        return 'Semi Common';
+      case 20:
+        return 'Common';
+      case 35:
+        return 'Very Common';
+      default:
+        return 'Unknown';
+    }
+  };
+
+  const filteredLoots =
+    npc.loots?.filter(loot =>
+      formatItemName(loot.itemBlueprintKey)
+        .toLowerCase()
+        .includes(lootSearchQuery.toLowerCase())
+    ) || [];
+
+  const totalLootPages = Math.ceil(filteredLoots.length / ITEMS_PER_PAGE);
+  const paginatedLoots = filteredLoots.slice(
+    (currentLootPage - 1) * ITEMS_PER_PAGE,
+    currentLootPage * ITEMS_PER_PAGE
+  );
+
+  return (
+    <BaseInformationDetails
+      name={npc.name}
+      spriteKey={npc.key}
+      atlasJSON={entitiesAtlasJSON}
+      atlasIMG={entitiesAtlasIMG}
+      onBack={onBack}
+    >
+      <InfoSection>
+        <InfoItem>
+          <Label>Type:</Label>
+          <Value>{formatText(npc.subType)}</Value>
+        </InfoItem>
+        <InfoItem>
+          <Label>Alignment:</Label>
+          <Value>{formatText(npc.alignment)}</Value>
+        </InfoItem>
+        <InfoItem>
+          <Label>Attack Type:</Label>
+          <Value>{formatText(npc.attackType)}</Value>
+        </InfoItem>
+        <InfoItem>
+          <Label>Range:</Label>
+          <Value>{formatText(npc.maxRangeAttack)}</Value>
+        </InfoItem>
+        <InfoItem>
+          <Label>Speed:</Label>
+          <Value>{formatText(npc.speed)}</Value>
+        </InfoItem>
+      </InfoSection>
+
+      <StyledCollapsible title="Stats" defaultOpen={!isMobile}>
+        <StatGrid>
+          <StatItem>HP: {npc.baseHealth}</StatItem>
+          <StatItem>Level: {npc.skills.level}</StatItem>
+          {npc.skills.strength?.level && (
+            <StatItem>Strength: {npc.skills.strength.level}</StatItem>
+          )}
+          {npc.skills.dexterity?.level && (
+            <StatItem>Dexterity: {npc.skills.dexterity.level}</StatItem>
+          )}
+          {npc.skills.resistance?.level && (
+            <StatItem>Resistance: {npc.skills.resistance.level}</StatItem>
+          )}
+        </StatGrid>
+      </StyledCollapsible>
+
+      {npc.loots && npc.loots.length > 0 && (
+        <StyledCollapsible title="Loot" defaultOpen={!isMobile}>
+          <LootSearchContainer>
+            <StyledSearchBar
+              value={lootSearchQuery}
+              onChange={setLootSearchQuery}
+              placeholder="Search loot..."
+            />
+          </LootSearchContainer>
+          <LootGrid>
+            {paginatedLoots.map((loot, index) => (
+              <LootItem key={index}>
+                <SpriteFromAtlas
+                  atlasJSON={itemsAtlasJSON}
+                  atlasIMG={itemsAtlasIMG}
+                  spriteKey={loot.itemBlueprintKey}
+                  width={24}
+                  height={24}
+                  imgScale={1}
+                />
+                <LootDetails>
+                  <LootName>{formatItemName(loot.itemBlueprintKey)}</LootName>
+                  <LootInfo>
+                    <LootChance>{formatRarity(loot.chance)}</LootChance>
+                    {loot.quantityRange && (
+                      <LootQuantity>
+                        x{loot.quantityRange[0]}-{loot.quantityRange[1]}
+                      </LootQuantity>
+                    )}
+                  </LootInfo>
+                </LootDetails>
+              </LootItem>
+            ))}
+          </LootGrid>
+          {filteredLoots.length > ITEMS_PER_PAGE && (
+            <PaginationContainer>
+              <StyledPagination
+                currentPage={currentLootPage}
+                totalPages={totalLootPages}
+                onPageChange={setCurrentLootPage}
+              />
+            </PaginationContainer>
+          )}
+        </StyledCollapsible>
+      )}
+
+      {npc.entityEffects && npc.entityEffects.length > 0 && (
+        <StyledCollapsible title="Effects" defaultOpen={!isMobile}>
+          <EffectsList>
+            {npc.entityEffects.map((effect, index) => (
+              <EffectItem key={index}>{formatText(effect)}</EffectItem>
+            ))}
+          </EffectsList>
+        </StyledCollapsible>
+      )}
+
+      {npc.areaSpells && npc.areaSpells.length > 0 && (
+        <StyledCollapsible title="Spells" defaultOpen={!isMobile}>
+          <SpellsList>
+            {npc.areaSpells.map((spell, index) => (
+              <SpellItem key={index}>
+                <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>
+        </StyledCollapsible>
+      )}
+    </BaseInformationDetails>
+  );
+};
 
 const InfoSection = styled.div`
   display: grid;

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