@rpg-engine/long-bow 0.8.18 → 0.8.19

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

@@ -18,190 +18,230 @@ interface INPCDetailsProps {
   itemsAtlasIMG: string;
   entitiesAtlasJSON: Record<string, any>;
   entitiesAtlasIMG: string;
+  iconAtlasIMG?: any;
+  iconAtlasJSON?: any;
   onBack: () => void;
 }
 
 const ITEMS_PER_PAGE = 5;
 
-export const InformationCenterNPCDetails: React.FC<INPCDetailsProps> = ({
-  npc,
-  itemsAtlasJSON,
-  itemsAtlasIMG,
-  entitiesAtlasJSON,
-  entitiesAtlasIMG,
-  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 =>
-      formatText(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>{formatText(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}>
-                <SpellName>{formatText(spell.spellKey)}</SpellName>
-                <SpellDetails>
-                  Power: <SpellValue>{formatText(spell.power)}</SpellValue>
-                  <Separator>•</Separator>
-                  Chance: <SpellValue>{spell.probability}%</SpellValue>
-                </SpellDetails>
-              </SpellItem>
-            ))}
-          </SpellsList>
-        </StyledCollapsible>
-      )}
-    </BaseInformationDetails>
-  );
+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();
+         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>
+         );
+       };
+
 const InfoSection = styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
@@ -271,13 +311,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/shared/PaginatedContent/PaginatedContent.tsx

@@ -30,7 +30,7 @@ interface IPaginatedContentProps<T> {
 
 export const PaginatedContent = <T extends unknown>({
   items,
-  itemsPerPage = 5,
+  itemsPerPage = 8,
   renderItem,
   emptyMessage = 'No items found',
   className,

package/src/mocks/informationCenter.mocks.ts

@@ -44,27 +44,29 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     entityEffects: [EntityEffectBlueprint.Burning],
     areaSpells: [
       {
-        spellKey: 'ThunderStorm',
+        spellKey: 'VampiricStorm',
+        texturePath: 'spell-icons/vampiric-storm.png',
         probability: 35,
         power: 'UltraHigh',
       },
       {
-        spellKey: 'LightningBreath',
+        spellKey: 'ArrowCreationSpell',
+        texturePath: 'spell-icons/arrow-creation-spell.png',
         probability: 45,
         power: 'High',
       },
     ],
     loots: [
       {
-        itemBlueprintKey: 'DragonScale',
+        itemBlueprintKey: 'maces/dragonscale-cleaver-club.png',
         chance: LootProbability.Uncommon,
       },
       {
-        itemBlueprintKey: 'ThunderStaff',
+        itemBlueprintKey: 'staffs/thunder-bolt-staff.png',
         chance: LootProbability.Rare,
       },
       {
-        itemBlueprintKey: 'DragonEssence',
+        itemBlueprintKey: 'crafting-resources/dragon-tooth.png',
         chance: LootProbability.Uncommon,
         quantityRange: [1, 3],
       },
@@ -93,15 +95,16 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'WarCry',
         probability: 25,
         power: 'Medium',
+        texturePath: ''
       },
     ],
     loots: [
       {
-        itemBlueprintKey: 'OrcishAxe',
+        itemBlueprintKey: 'crafting-resources/leather.png',
         chance: LootProbability.Uncommon,
       },
       {
-        itemBlueprintKey: 'HealingHerb',
+        itemBlueprintKey: 'crafting-resources/herb.png',
         chance: LootProbability.Common,
         quantityRange: [1, 4],
       },
@@ -133,6 +136,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'BoneShards',
         probability: 20,
         power: 'Medium',
+        texturePath: ''
       },
     ],
     loots: [
@@ -204,7 +208,8 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
     ],
     areaSpells: [
       {
-        spellKey: 'FrostBite',
+        spellKey: 'VampiricStorm',
+        texturePath: 'spell-icons/vampiric-storm.png',
         probability: 15,
         power: 'Medium',
       },
@@ -248,11 +253,13 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'DeathNova',
         probability: 30,
         power: 'VeryHigh',
+        texturePath: ''
       },
       {
         spellKey: 'SoulDrain',
         probability: 25,
         power: 'High',
+        texturePath: ''
       },
     ],
     loots: [
@@ -297,6 +304,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'BoulderThrow',
         probability: 40,
         power: 'High',
+        texturePath: ''
       },
     ],
     loots: [
@@ -341,6 +349,7 @@ export const mockBestiaryItems: IInformationCenterNPC[] = [
         spellKey: 'ToxicCloud',
         probability: 20,
         power: 'Medium',
+        texturePath: ''
       },
     ],
     loots: [

package/src/stories/UI/info/InformationCenter.stories.tsx

@@ -5,8 +5,11 @@ import { IInformationCenterItem } from '../../../components/InformationCenter/In
 import { RPGUIRoot } from '../../../components/RPGUI/RPGUIRoot';
 import entitiesAtlasJSON from '../../../mocks/atlas/entities/entities.json';
 import entitiesAtlasIMG from '../../../mocks/atlas/entities/entities.png';
+import iconsAtlasJSON from '../../../mocks/atlas/icons/icons.json';
+import iconsAtlasIMG from '../../../mocks/atlas/icons/icons.png';
 import itemsAtlasJSON from '../../../mocks/atlas/items/items.json';
 import itemsAtlasIMG from '../../../mocks/atlas/items/items.png';
+
 import { mockBestiaryItems, mockFaqItems, mockItems, mockTutorials } from '../../../mocks/informationCenter.mocks';
  
 
@@ -27,6 +30,8 @@ const Template: Story = args => (
       itemsAtlasIMG={itemsAtlasIMG}
       entitiesAtlasJSON={entitiesAtlasJSON}
       entitiesAtlasIMG={entitiesAtlasIMG}
+      iconsAtlasJSON={iconsAtlasJSON}
+      iconsAtlasIMG={iconsAtlasIMG}
       faqItems={mockFaqItems}
       bestiaryItems={mockBestiaryItems}
       videoGuides={mockTutorials}