@rpg-engine/long-bow 0.7.97 → 0.7.98

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

@@ -0,0 +1,323 @@
+import { 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 {
+  item: IInformationCenterItem;
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  droppedBy: IInformationCenterNPC[];
+  onBack: () => void;
+}
+
+export const InformationCenterItemDetails: React.FC<IInformationCenterItemDetailsProps> = ({
+  item,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  droppedBy,
+  onBack,
+}) => {
+  const isMobile = isMobileOrTablet();
+
+  const renderAllowedSlots = () => {
+    if (!item.allowedEquipSlotType?.length) return null;
+    return (
+      <InfoItem>
+        <Label>Equip Slots:</Label>
+        <Value>{item.allowedEquipSlotType.join(', ')}</Value>
+      </InfoItem>
+    );
+  };
+
+  const renderRequirements = () => {
+    if (!item.minRequirements) return null;
+    return (
+      <StyledCollapsible title="Requirements" defaultOpen={!isMobile}>
+        <RequirementsGrid>
+          {item.minRequirements.level && (
+            <RequirementItem>
+              <Label>Level:</Label>
+              <Value>{item.minRequirements.level}</Value>
+            </RequirementItem>
+          )}
+          {item.minRequirements.skill && (
+            <RequirementItem>
+              <Label>{item.minRequirements.skill.name}:</Label>
+              <Value>{item.minRequirements.skill.level}</Value>
+            </RequirementItem>
+          )}
+        </RequirementsGrid>
+      </StyledCollapsible>
+    );
+  };
+
+  return (
+    <BaseInformationDetails
+      name={item.name}
+      spriteKey={item.texturePath}
+      atlasJSON={itemsAtlasJSON}
+      atlasIMG={itemsAtlasIMG}
+      onBack={onBack}
+    >
+      <InfoSection>
+        <InfoItem>
+          <Label>Type:</Label>
+          <Value>{item.type}</Value>
+        </InfoItem>
+        <InfoItem>
+          <Label>Subtype:</Label>
+          <Value>{item.subType}</Value>
+        </InfoItem>
+        <InfoItem>
+          <Label>Tier:</Label>
+          <Value>{item.tier}</Value>
+        </InfoItem>
+        <InfoItem>
+          <Label>Rarity:</Label>
+          <Value>{item.rarity}</Value>
+        </InfoItem>
+        {renderAllowedSlots()}
+      </InfoSection>
+
+      <StyledCollapsible title="Description" defaultOpen={!isMobile}>
+        <Description>
+          {item.description || 'No description available.'}
+        </Description>
+      </StyledCollapsible>
+
+      <StyledCollapsible title="Stats" defaultOpen={!isMobile}>
+        <StatGrid>
+          <StatItem>Weight: {item.weight}</StatItem>
+          <StatItem>Stack Size: {item.maxStackSize}</StatItem>
+          {item.rangeType && <StatItem>Range Type: {item.rangeType}</StatItem>}
+          {item.basePrice > 0 && (
+            <StatItem>Base Price: {item.basePrice}</StatItem>
+          )}
+        </StatGrid>
+      </StyledCollapsible>
+
+      {renderRequirements()}
+
+      {item.entityEffects && item.entityEffects.length > 0 && (
+        <StyledCollapsible title="Effects" defaultOpen={!isMobile}>
+          <EffectsList>
+            {item.entityEffects.map((effect, index) => (
+              <EffectItem key={index}>
+                {effect}
+                {item.entityEffectChance && (
+                  <EffectChance>({item.entityEffectChance}%)</EffectChance>
+                )}
+              </EffectItem>
+            ))}
+          </EffectsList>
+          {item.usableEffectDescription && (
+            <EffectDescription>
+              {item.usableEffectDescription}
+            </EffectDescription>
+          )}
+        </StyledCollapsible>
+      )}
+
+      {item.equippedBuff && item.equippedBuff.length > 0 && (
+        <StyledCollapsible title="Equipped Buffs" defaultOpen={!isMobile}>
+          <BuffsList>
+            {item.equippedBuff.map((buff, index) => (
+              <BuffItem key={index}>
+                <BuffName>{buff.trait}</BuffName>
+                <BuffValue>+{buff.buffPercentage}%</BuffValue>
+              </BuffItem>
+            ))}
+          </BuffsList>
+          {item.equippedBuffDescription && (
+            <BuffDescription>{item.equippedBuffDescription}</BuffDescription>
+          )}
+        </StyledCollapsible>
+      )}
+
+      {droppedBy.length > 0 && (
+        <StyledCollapsible title="Dropped By" defaultOpen={!isMobile}>
+          <DropList>
+            {droppedBy.map(npc => {
+              const loot = npc.loots.find(l => l.itemBlueprintKey === item.key);
+              return (
+                <DropItem key={npc.id}>
+                  <NPCName>{npc.name}</NPCName>
+                  <DropRate>{loot?.chance}%</DropRate>
+                </DropItem>
+              );
+            })}
+          </DropList>
+        </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 Description = styled.p`
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+  margin: 0;
+  padding: 12px;
+  line-height: 1.5;
+`;
+
+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`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+  background: rgba(255, 255, 255, 0.1);
+  padding: 4px 8px;
+  border-radius: 4px;
+`;
+
+const EffectChance = styled.span`
+  color: ${uiColors.yellow};
+  opacity: 0.8;
+`;
+
+const BuffsList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+`;
+
+const BuffItem = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 8px;
+  border-radius: 4px;
+`;
+
+const BuffName = styled.span`
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+`;
+
+const BuffValue = styled.span`
+  color: ${uiColors.yellow};
+  font-size: 0.5rem;
+`;
+
+const BuffDescription = styled.p`
+  color: ${uiColors.lightGray};
+  font-size: 0.45rem;
+  margin: 0;
+  padding: 0 12px 12px;
+  font-style: italic;
+`;
+
+const DropList = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 12px;
+`;
+
+const DropItem = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+`;
+
+const NPCName = styled.span`
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+`;
+
+const DropRate = styled.span`
+  color: ${uiColors.yellow};
+  font-size: 0.5rem;
+`;
+
+const RequirementsGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+  gap: 8px;
+  padding: 12px;
+`;
+
+const RequirementItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: rgba(255, 255, 255, 0.05);
+  padding: 8px;
+  border-radius: 4px;
+`;
+
+const EffectDescription = styled.p`
+  color: ${uiColors.lightGray};
+  font-size: 0.45rem;
+  margin: 8px 0 0;
+  padding: 0 12px;
+  font-style: italic;
+`;

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

@@ -0,0 +1,88 @@
+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 { IInformationCenterItem } from '../../InformationCenterTypes';
+
+interface IItemTooltipProps {
+  item: IInformationCenterItem;
+}
+
+const ItemHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const Description = styled.div`
+  color: ${uiColors.white};
+  font-size: 0.5rem;
+  line-height: 1.4;
+  margin-top: 8px;
+  opacity: 0.8;
+`;
+
+const RarityText = styled.span<{ rarity: string }>`
+  color: ${props => {
+    switch (props.rarity.toLowerCase()) {
+      case 'legendary':
+        return '#ff8c00';
+      case 'rare':
+        return '#0070dd';
+      case 'uncommon':
+        return '#1eff00';
+      default:
+        return '#ffffff';
+    }
+  }};
+  font-size: 0.5rem;
+`;
+
+export const InformationCenterItemTooltip: React.FC<IItemTooltipProps> = ({
+  item,
+}) => {
+  return (
+    <BaseTooltip>
+      <ItemHeader>
+        <TooltipTitle>{item.name}</TooltipTitle>
+      </ItemHeader>
+
+      <Description>{item.description}</Description>
+
+      <Section>
+        <SectionTitle>Details</SectionTitle>
+        <StatsContainer>
+          <StatItem>Type: {item.type}</StatItem>
+          <StatItem>Weight: {item.weight}</StatItem>
+          {item.attack !== undefined && (
+            <StatItem>Attack: {item.attack}</StatItem>
+          )}
+          {item.defense !== undefined && (
+            <StatItem>Defense: {item.defense}</StatItem>
+          )}
+          {item.tier !== undefined && <StatItem>Tier: {item.tier}</StatItem>}
+          {item.rangeType && <StatItem>Range: {item.rangeType}</StatItem>}
+        </StatsContainer>
+      </Section>
+
+      <Section>
+        <SectionTitle>Market</SectionTitle>
+        <StatsContainer>
+          <StatItem>Price: {item.basePrice}</StatItem>
+          {item.rarity && (
+            <StatItem>
+              Rarity:{' '}
+              <RarityText rarity={item.rarity}>{item.rarity}</RarityText>
+            </StatItem>
+          )}
+        </StatsContainer>
+      </Section>
+    </BaseTooltip>
+  );
+};

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

@@ -0,0 +1,180 @@
+import { ItemType } from '@rpg-engine/shared';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { IOptionsProps } from '../../../Dropdown';
+import { InformationCenterCell } from '../../InformationCenterCell';
+import { InformationCenterTabView } from '../../InformationCenterTabView';
+import {
+  IInformationCenterItem,
+  IInformationCenterNPC,
+} from '../../InformationCenterTypes';
+import { InformationCenterItemDetails } from './InformationCenterItemDetails';
+import { InformationCenterItemTooltip } from './InformationCenterItemTooltip';
+
+const TOOLTIP_OFFSET = 20;
+
+interface IItemsSectionProps {
+  items: IInformationCenterItem[];
+  bestiaryItems: IInformationCenterNPC[];
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  initialSearchQuery: string;
+}
+
+export const ItemsSection: React.FC<IItemsSectionProps> = ({
+  items,
+  bestiaryItems,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  initialSearchQuery,
+}) => {
+  const [itemsSearchQuery, setItemsSearchQuery] = useState(initialSearchQuery);
+  const [selectedItemCategory, setSelectedItemCategory] = useState<string>(
+    'all'
+  );
+  const [hoveredItem, setHoveredItem] = useState<IInformationCenterItem | null>(
+    null
+  );
+  const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
+  const [
+    selectedItem,
+    setSelectedItem,
+  ] = useState<IInformationCenterItem | null>(null);
+
+  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' },
+  ];
+
+  const filterItems = (items: IInformationCenterItem[]) => {
+    return items.filter(
+      item =>
+        (selectedItemCategory === 'all' ||
+          item.type === selectedItemCategory) &&
+        item.name.toLowerCase().includes(itemsSearchQuery.toLowerCase())
+    );
+  };
+
+  const getDroppedByNPCs = (
+    itemId: string,
+    npcs: IInformationCenterNPC[]
+  ): IInformationCenterNPC[] => {
+    return (
+      npcs.filter(npc =>
+        npc.loots?.some(loot => loot.itemBlueprintKey === itemId)
+      ) || []
+    );
+  };
+
+  const handleMouseEnter = (
+    e: React.MouseEvent,
+    item: IInformationCenterItem
+  ) => {
+    setTooltipPosition({
+      x: e.clientX + TOOLTIP_OFFSET,
+      y: e.clientY,
+    });
+    setHoveredItem(item);
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (hoveredItem) {
+      setTooltipPosition({
+        x: e.clientX + TOOLTIP_OFFSET,
+        y: e.clientY,
+      });
+    }
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredItem(null);
+  };
+
+  const handleTouchStart = (
+    e: React.TouchEvent,
+    item: IInformationCenterItem
+  ) => {
+    const touch = e.touches[0];
+    setTooltipPosition({
+      x: touch.clientX + TOOLTIP_OFFSET,
+      y: touch.clientY,
+    });
+    setHoveredItem(item);
+  };
+
+  const handleItemClick = (item: IInformationCenterItem) => {
+    setSelectedItem(item);
+    setHoveredItem(null);
+  };
+
+  const renderContent = (items: IInformationCenterItem[]) => (
+    <ItemsGrid>
+      {items.map(item => (
+        <InformationCenterCell
+          key={item.key}
+          name={item.name}
+          spriteKey={item.texturePath}
+          atlasJSON={itemsAtlasJSON}
+          atlasIMG={itemsAtlasIMG}
+          onMouseEnter={e => handleMouseEnter(e, item)}
+          onMouseMove={handleMouseMove}
+          onMouseLeave={handleMouseLeave}
+          onTouchStart={e => handleTouchStart(e, item)}
+          onClick={() => handleItemClick(item)}
+        />
+      ))}
+    </ItemsGrid>
+  );
+
+  return (
+    <>
+      <InformationCenterTabView
+        items={items}
+        searchQuery={itemsSearchQuery}
+        onSearchChange={setItemsSearchQuery}
+        filterItems={filterItems}
+        renderContent={renderContent}
+        searchPlaceholder="Search items..."
+        filterOptions={{
+          options: itemCategoryOptions,
+          selectedOption: selectedItemCategory,
+          onOptionChange: setSelectedItemCategory,
+        }}
+        emptyMessage="No items found"
+        dependencies={[selectedItemCategory]}
+      />
+      {hoveredItem && (
+        <TooltipWrapper
+          style={{ top: tooltipPosition.y, left: tooltipPosition.x }}
+        >
+          <InformationCenterItemTooltip item={hoveredItem} />
+        </TooltipWrapper>
+      )}
+      {selectedItem && (
+        <InformationCenterItemDetails
+          item={selectedItem}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          droppedBy={getDroppedByNPCs(selectedItem.key, bestiaryItems)}
+          onBack={() => setSelectedItem(null)}
+        />
+      )}
+    </>
+  );
+};
+
+const ItemsGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+  padding: 0 1rem;
+`;
+
+const TooltipWrapper = styled.div`
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+  transition: transform 0.1s ease;
+`;