@rpg-engine/long-bow 0.7.97 → 0.7.98

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

@@ -0,0 +1,366 @@
+import { isMobileOrTablet, RangeTypes } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../../constants/uiColors';
+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 {
+  npc: IInformationCenterNPC;
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  entitiesAtlasJSON: Record<string, any>;
+  entitiesAtlasIMG: string;
+  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 InfoSection = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 12px;
+  border-radius: 4px;
+`;
+
+const InfoItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const Label = styled.span`
+  color: ${uiColors.yellow};
+  font-size: 0.5rem;
+  opacity: 0.8;
+`;
+
+const Value = styled.span`
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+`;
+
+const StyledCollapsible = styled(Collapsible)`
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  overflow: hidden;
+`;
+
+const StatGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 8px;
+  padding: 12px;
+`;
+
+const StatItem = styled.div`
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 8px;
+  border-radius: 4px;
+`;
+
+const EffectsList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 12px;
+`;
+
+const EffectItem = styled.div`
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 4px 8px;
+  border-radius: 4px;
+`;
+
+const SpellsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+`;
+
+const SpellItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 8px;
+  border-radius: 4px;
+`;
+
+const SpellName = styled.div`
+  color: ${uiColors.yellow};
+  font-size: 0.5rem;
+`;
+
+const SpellDetails = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: ${uiColors.white};
+  font-size: 0.45rem;
+  opacity: 0.8;
+`;
+
+const SpellValue = styled.span`
+  color: ${uiColors.yellow};
+`;
+
+const Separator = styled.span`
+  color: ${uiColors.yellow};
+  opacity: 0.5;
+`;
+
+const LootSearchContainer = styled.div`
+  padding: 12px 12px 0;
+`;
+
+const StyledSearchBar = styled(SearchBar)`
+  width: 100%;
+`;
+
+const LootGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 8px;
+  padding: 12px;
+`;
+
+const LootItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 8px;
+  border-radius: 4px;
+`;
+
+const LootDetails = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const LootName = styled.div`
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+`;
+
+const LootInfo = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const LootChance = styled.span`
+  color: ${uiColors.yellow};
+  font-size: 0.45rem;
+`;
+
+const LootQuantity = styled.span`
+  color: ${uiColors.lightGray};
+  font-size: 0.45rem;
+`;
+
+const PaginationContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 12px;
+`;
+
+const StyledPagination = styled(Pagination)`
+  font-size: 0.6rem;
+`;

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

@@ -0,0 +1,204 @@
+import { RangeTypes } from '@rpg-engine/shared';
+import React from 'react';
+import styled from 'styled-components';
+import { uiColors } from '../../../../constants/uiColors';
+import BaseTooltip, {
+  Section,
+  SectionTitle,
+  StatItem,
+  StatsContainer,
+  TooltipTitle,
+} from '../../../shared/BaseTooltip';
+import { SpriteFromAtlas } from '../../../shared/SpriteFromAtlas';
+import {
+  IInformationCenterNPC,
+  MovementSpeed,
+} from '../../InformationCenterTypes';
+
+interface INPCTooltipProps {
+  npc: IInformationCenterNPC;
+  itemsAtlasJSON: any;
+  itemsAtlasIMG: string;
+}
+
+const EffectsList = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const EffectItem = styled.span`
+  font-size: 0.5rem;
+  color: ${uiColors.white};
+  background: rgba(255, 255, 255, 0.1);
+  padding: 2px 6px;
+  border-radius: 4px;
+`;
+
+const SpellList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const SpellItem = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 0.5rem;
+  color: ${uiColors.white};
+  background: rgba(255, 255, 255, 0.05);
+  padding: 2px 6px;
+  border-radius: 4px;
+`;
+
+const SpellInfo = styled.span`
+  color: ${uiColors.yellow};
+  margin-left: 8px;
+  opacity: 0.8;
+`;
+
+const LootList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+
+const LootItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 4px 6px;
+  border-radius: 4px;
+
+  .sprite-from-atlas-img {
+    top: 0px;
+    left: 0px;
+  }
+`;
+
+const LootName = styled.span`
+  color: ${uiColors.white};
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 4px;
+`;
+
+const LootChance = styled.span`
+  color: ${uiColors.yellow};
+  font-size: 0.45rem;
+  text-transform: lowercase;
+  opacity: 0.8;
+`;
+
+const MoreIndicator = styled.div`
+  color: ${uiColors.yellow};
+  font-size: 0.45rem;
+  text-align: center;
+  margin-top: 2px;
+  opacity: 0.7;
+`;
+
+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';
+  }
+};
+
+export const InformationCenterNPCTooltip: React.FC<INPCTooltipProps> = ({
+  npc,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+}) => {
+  return (
+    <BaseTooltip>
+      <TooltipTitle>{npc.name}</TooltipTitle>
+
+      <StatsContainer>
+        <StatItem>HP: {npc.baseHealth}</StatItem>
+        <StatItem>LVL: {npc.skills.level}</StatItem>
+        <StatItem>STR: {npc.skills.strength?.level || '-'}</StatItem>
+        <StatItem>DEX: {npc.skills.dexterity?.level || '-'}</StatItem>
+        <StatItem>RES: {npc.skills.resistance?.level || '-'}</StatItem>
+        <StatItem>SPD: {formatText(npc.speed)}</StatItem>
+      </StatsContainer>
+
+      {npc.entityEffects && npc.entityEffects.length > 0 && (
+        <Section>
+          <SectionTitle>Effects</SectionTitle>
+          <EffectsList>
+            {npc.entityEffects.map(effect => (
+              <EffectItem key={effect}>{formatText(effect)}</EffectItem>
+            ))}
+          </EffectsList>
+        </Section>
+      )}
+
+      {npc.areaSpells && npc.areaSpells.length > 0 && (
+        <Section>
+          <SectionTitle>Spells</SectionTitle>
+          <SpellList>
+            {npc.areaSpells.map(spell => (
+              <SpellItem key={spell.spellKey}>
+                {formatText(spell.spellKey)}
+                <SpellInfo>
+                  {formatText(spell.power)}, {spell.probability}%
+                </SpellInfo>
+              </SpellItem>
+            ))}
+          </SpellList>
+        </Section>
+      )}
+
+      {npc.loots && npc.loots.length > 0 && (
+        <Section>
+          <SectionTitle>Possible Loot</SectionTitle>
+          <LootList>
+            {npc.loots.slice(0, 4).map(loot => (
+              <LootItem key={loot.itemBlueprintKey}>
+                <SpriteFromAtlas
+                  atlasIMG={itemsAtlasIMG}
+                  atlasJSON={itemsAtlasJSON}
+                  spriteKey={loot.itemBlueprintKey}
+                  imgScale={1}
+                />
+                <LootName>{formatText(loot.itemBlueprintKey)}</LootName>
+                <LootChance>{formatRarity(loot.chance)}</LootChance>
+              </LootItem>
+            ))}
+            {npc.loots.length > 4 && <MoreIndicator>...</MoreIndicator>}
+          </LootList>
+        </Section>
+      )}
+    </BaseTooltip>
+  );
+};

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

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { IFaqItem } from '../../InformationCenter';
+import { InformationCenterTabView } from '../../InformationCenterTabView';
+
+interface IFaqSectionProps {
+  faqItems: IFaqItem[];
+  initialSearchQuery: string;
+}
+
+export const FaqSection: React.FC<IFaqSectionProps> = ({
+  faqItems,
+  initialSearchQuery,
+}) => {
+  const [faqSearchQuery, setFaqSearchQuery] = useState(initialSearchQuery);
+
+  const filterItems = (items: IFaqItem[]) => {
+    return items.filter(
+      item =>
+        item.question.toLowerCase().includes(faqSearchQuery.toLowerCase()) ||
+        item.answer.toLowerCase().includes(faqSearchQuery.toLowerCase())
+    );
+  };
+
+  const renderContent = (items: IFaqItem[]) => (
+    <FaqContainer>
+      {items.map(item => (
+        <FaqItem key={item.id}>
+          <Question>{item.question}</Question>
+          <Answer>{item.answer}</Answer>
+        </FaqItem>
+      ))}
+    </FaqContainer>
+  );
+
+  return (
+    <InformationCenterTabView
+      items={faqItems}
+      searchQuery={faqSearchQuery}
+      onSearchChange={setFaqSearchQuery}
+      filterItems={filterItems}
+      renderContent={renderContent}
+      searchPlaceholder="Search FAQ..."
+      emptyMessage="No FAQ items found"
+    />
+  );
+};
+
+const FaqContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 0 1rem;
+`;
+
+const FaqItem = styled.div`
+  background: rgba(0, 0, 0, 0.2);
+  padding: 1rem;
+  border-radius: 4px;
+`;
+
+const Question = styled.h3`
+  font-size: 1rem;
+  color: #fef08a;
+  margin-bottom: 0.5rem;
+`;
+
+const Answer = styled.p`
+  font-size: 0.9rem;
+  color: #ffffff;
+`;