@rpg-engine/long-bow 0.8.19 → 0.8.20

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

@@ -18,229 +18,189 @@ interface INPCDetailsProps {
   itemsAtlasIMG: string;
   entitiesAtlasJSON: Record<string, any>;
   entitiesAtlasIMG: string;
-  iconAtlasIMG?: any;
-  iconAtlasJSON?: any;
   onBack: () => void;
 }
 
 const ITEMS_PER_PAGE = 5;
 
-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>
-         );
-       };
+  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 InfoSection = styled.div`
   display: grid;
@@ -311,27 +271,13 @@ const SpellsList = styled.div`
   padding: 12px;
 `;
 
-const SpellIconContainer = styled.div`
-  display: flex;
-  padding-right: 30px;
-  padding-bottom: 30px;
-`;
-
-const SpellContent = styled.div`
+const SpellItem = 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 = 8,
+  itemsPerPage = 5,
   renderItem,
   emptyMessage = 'No items found',
   className,

package/src/mocks/informationCenter.mocks.ts

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

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

@@ -5,11 +5,8 @@ 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';
  
 
@@ -30,8 +27,6 @@ const Template: Story = args => (
       itemsAtlasIMG={itemsAtlasIMG}
       entitiesAtlasJSON={entitiesAtlasJSON}
       entitiesAtlasIMG={entitiesAtlasIMG}
-      iconsAtlasJSON={iconsAtlasJSON}
-      iconsAtlasIMG={iconsAtlasIMG}
       faqItems={mockFaqItems}
       bestiaryItems={mockBestiaryItems}
       videoGuides={mockTutorials}