@rpg-engine/long-bow 0.7.97 → 0.7.99

package/src/components/InformationCenter/InformationCenter.tsx

@@ -0,0 +1,155 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+import { InternalTabs } from '../InternalTabs/InternalTabs';
+import {
+  IInformationCenterItem,
+  IInformationCenterNPC,
+} from './InformationCenterTypes';
+import { BestiarySection } from './sections/bestiary/BestiarySection';
+import { FaqSection } from './sections/faq/FaqSection';
+import { InformationCenterItemDetails } from './sections/items/InformationCenterItemDetails';
+import { ItemsSection } from './sections/items/ItemsSection';
+import { TutorialsSection } from './sections/tutorials/TutorialsSection';
+
+export interface IFaqItem {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+export interface IVideoGuide {
+  id: string;
+  title: string;
+  description: string;
+  thumbnailUrl: string;
+  videoUrl: string;
+  category: 'Combat' | 'Crafting' | 'Exploration' | 'General';
+}
+
+export interface IInformationCenterProps {
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  entitiesAtlasJSON: Record<string, any>;
+  entitiesAtlasIMG: string;
+  faqItems?: IFaqItem[];
+  bestiaryItems?: IInformationCenterNPC[];
+  videoGuides?: IVideoGuide[];
+  items?: IInformationCenterItem[];
+  loading?: boolean;
+  error?: string;
+  initialSearchQuery?: string;
+}
+
+export const InformationCenter: React.FC<IInformationCenterProps> = ({
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  entitiesAtlasJSON,
+  entitiesAtlasIMG,
+  faqItems = [],
+  bestiaryItems = [],
+  videoGuides = [],
+  items = [],
+  loading = false,
+  error,
+  initialSearchQuery = '',
+}) => {
+  const [
+    selectedItem,
+    setSelectedItem,
+  ] = useState<IInformationCenterItem | null>(null);
+
+  if (loading) {
+    return <LoadingMessage>Loading...</LoadingMessage>;
+  }
+
+  if (error) {
+    return <ErrorMessage>{error}</ErrorMessage>;
+  }
+
+  const tabs = [
+    {
+      id: 'bestiary',
+      title: 'Bestiary',
+      content: (
+        <BestiarySection
+          bestiaryItems={bestiaryItems}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          entitiesAtlasJSON={entitiesAtlasJSON}
+          entitiesAtlasIMG={entitiesAtlasIMG}
+          initialSearchQuery={initialSearchQuery}
+        />
+      ),
+    },
+    {
+      id: 'items',
+      title: 'Items',
+      content: (
+        <ItemsSection
+          items={items}
+          bestiaryItems={bestiaryItems}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          initialSearchQuery={initialSearchQuery}
+        />
+      ),
+    },
+    {
+      id: 'faq',
+      title: 'FAQ',
+      content: (
+        <FaqSection
+          faqItems={faqItems}
+          initialSearchQuery={initialSearchQuery}
+        />
+      ),
+    },
+    {
+      id: 'tutorials',
+      title: 'Tutorials',
+      content: (
+        <TutorialsSection
+          videoGuides={videoGuides}
+          initialSearchQuery={initialSearchQuery}
+        />
+      ),
+    },
+  ];
+
+  return (
+    <Container>
+      <InternalTabs tabs={tabs} activeTextColor="#000000" />
+      {selectedItem && (
+        <InformationCenterItemDetails
+          item={selectedItem}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          droppedBy={bestiaryItems.filter(npc =>
+            npc.loots?.some(loot => loot.itemBlueprintKey === selectedItem.key)
+          )}
+          onBack={() => setSelectedItem(null)}
+        />
+      )}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 1rem;
+`;
+
+const LoadingMessage = styled.div`
+  text-align: center;
+  color: #ffffff;
+  padding: 2rem;
+`;
+
+const ErrorMessage = styled.div`
+  text-align: center;
+  color: #ef4444;
+  padding: 2rem;
+`;

package/src/components/InformationCenter/InformationCenterCell.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import styled from 'styled-components';
+import { SpriteFromAtlas } from '../shared/SpriteFromAtlas';
+
+interface IInformationCenterCellProps {
+  name: string;
+  spriteKey: string;
+  atlasJSON: any;
+  atlasIMG: string;
+  onClick?: () => void;
+  onMouseEnter?: (e: React.MouseEvent) => void;
+  onMouseLeave?: () => void;
+  onMouseMove?: (e: React.MouseEvent) => void;
+  onTouchStart?: (e: React.TouchEvent) => void;
+}
+
+export const InformationCenterCell: React.FC<IInformationCenterCellProps> = ({
+  name,
+  spriteKey,
+  atlasJSON,
+  atlasIMG,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseMove,
+  onTouchStart,
+}) => {
+  return (
+    <CellContainer
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onMouseMove={onMouseMove}
+      onTouchStart={onTouchStart}
+    >
+      <SpriteContainer>
+        <SpriteFromAtlas
+          atlasJSON={atlasJSON}
+          atlasIMG={atlasIMG}
+          spriteKey={spriteKey}
+          width={32}
+          height={32}
+          imgScale={1}
+        />
+      </SpriteContainer>
+      <CellName>{name}</CellName>
+    </CellContainer>
+  );
+};
+
+const CellContainer = styled.div`
+  position: relative;
+  background: rgba(0, 0, 0, 0.2);
+  padding: 0.75rem;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  min-height: 120px;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.3);
+  }
+`;
+
+const SpriteContainer = styled.div`
+  margin-bottom: 0.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 64px;
+  height: 64px;
+  position: relative;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+
+  .sprite-from-atlas-img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(2);
+    image-rendering: pixelated;
+  }
+`;
+
+const CellName = styled.h3`
+  font-size: 0.7rem;
+  color: #fef08a;
+  margin: 0;
+  text-align: center;
+  font-family: 'Press Start 2P', cursive;
+  line-height: 1.2;
+  word-break: break-word;
+`;

package/src/components/InformationCenter/InformationCenterTabView.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import styled from 'styled-components';
+import { usePagination } from '../CraftBook/hooks/usePagination';
+import { Dropdown, IOptionsProps } from '../Dropdown';
+import { Pagination } from '../shared/Pagination/Pagination';
+import { SearchBar } from '../shared/SearchBar/SearchBar';
+
+interface IInformationCenterTabViewProps<T> {
+  items: T[];
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+  filterItems: (items: T[]) => T[];
+  renderContent: (items: T[]) => React.ReactNode;
+  searchPlaceholder: string;
+  filterOptions?: {
+    options: IOptionsProps[];
+    selectedOption: string;
+    onOptionChange: (value: string) => void;
+  };
+  emptyMessage?: string;
+  dependencies?: any[];
+}
+
+const ITEMS_PER_PAGE = 5;
+
+export function InformationCenterTabView<T>({
+  items,
+  searchQuery,
+  onSearchChange,
+  filterItems,
+  renderContent,
+  searchPlaceholder,
+  filterOptions,
+  emptyMessage = 'No items found',
+  dependencies = [],
+}: IInformationCenterTabViewProps<T>): React.ReactElement {
+  const filteredItems = filterItems(items);
+
+  const {
+    currentPage,
+    setCurrentPage,
+    paginatedItems,
+    totalPages,
+  } = usePagination({
+    items: filteredItems,
+    itemsPerPage: ITEMS_PER_PAGE,
+    dependencies: [searchQuery, ...dependencies],
+  });
+
+  return (
+    <Section>
+      <HeaderContainer>
+        <StyledSearchBar
+          value={searchQuery}
+          onChange={onSearchChange}
+          placeholder={searchPlaceholder}
+        />
+        {filterOptions && (
+          <StyledDropdown
+            options={filterOptions.options}
+            onChange={filterOptions.onOptionChange}
+            width="200px"
+          />
+        )}
+      </HeaderContainer>
+
+      {paginatedItems.length === 0 ? (
+        <EmptyMessage>{emptyMessage}</EmptyMessage>
+      ) : (
+        <>
+          {renderContent(paginatedItems)}
+          <StyledPagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={setCurrentPage}
+          />
+        </>
+      )}
+    </Section>
+  );
+}
+
+const Section = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  height: 100%;
+  min-height: 400px;
+  overflow-y: auto;
+`;
+
+const HeaderContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 0 1rem;
+  margin-top: 1.5rem;
+`;
+
+const StyledSearchBar = styled(SearchBar)`
+  margin-bottom: 1rem;
+`;
+
+const StyledDropdown = styled(Dropdown)`
+  min-width: 150px;
+`;
+
+const StyledPagination = styled(Pagination)`
+  margin-top: 1rem;
+`;
+
+const EmptyMessage = styled.div`
+  text-align: center;
+  color: #9ca3af;
+  padding: 2rem;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

package/src/components/InformationCenter/InformationCenterTypes.ts

@@ -0,0 +1,87 @@
+import {
+  EntityAttackType,
+  ICharacterPermanentBuff,
+  IEquippableItemBlueprint,
+  INPCLoot,
+  ItemRarities,
+  NPCAlignment,
+  NPCSubtype,
+  RangeTypes,
+} from '@rpg-engine/shared';
+
+export enum MovementSpeed {
+  ExtraSlow = 1.5,
+  Slow = 2.25,
+  Standard = 2.6,
+  Fast = 3,
+  ExtraFast = 3.5,
+}
+
+export enum EntityEffectBlueprint {
+  Poison = 'poison',
+  Bleeding = 'bleeding',
+  Freezing = 'freezing',
+  Burning = 'burning',
+  Corruption = 'corruption',
+  VineGrasp = 'vine-grasp',
+  Curse = 'curse',
+  Drain = 'drain',
+  Shadow = 'shadow',
+  Stun = 'stun',
+  Knockback = 'knockback',
+  Rage = 'rage',
+  Weakness = 'weakness',
+  Cripple = 'cripple',
+  Regeneration = 'regeneration',
+}
+
+export enum LootProbability {
+  VeryRare = 0.5,
+  Rare = 1,
+  Uncommon = 10,
+  SemiCommon = 15,
+  Common = 20,
+  VeryCommon = 35,
+}
+
+interface INPCBlueprintSpellArea {
+  spellKey: string;
+  probability: number;
+  power: string;
+}
+
+export interface IInformationCenterNPC {
+  id: string;
+  name: string;
+  key: string;
+  subType: NPCSubtype;
+  alignment: NPCAlignment;
+  attackType: EntityAttackType;
+  maxRangeAttack: RangeTypes;
+  speed: MovementSpeed;
+  baseHealth: number;
+  skills: {
+    level: number;
+    strength?: { level: number };
+    dexterity?: { level: number };
+    resistance?: { level: number };
+  };
+  fleeOnLowHealth: boolean;
+  entityEffects: EntityEffectBlueprint[];
+  areaSpells: INPCBlueprintSpellArea[];
+  loots: INPCLoot[];
+}
+
+export interface IInformationCenterItem extends IEquippableItemBlueprint {
+  tier: number;
+  rarity: ItemRarities;
+  rangeType?: EntityAttackType;
+  basePrice: number;
+  canSell: boolean;
+  maxStackSize: number;
+  usableEffectDescription?: string;
+  entityEffects?: [EntityEffectBlueprint];
+  entityEffectChance?: number;
+  equippedBuff?: ICharacterPermanentBuff[];
+  equippedBuffDescription?: string;
+}

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

@@ -0,0 +1,170 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Portal } from '../../../shared/Portal/Portal';
+import { InformationCenterCell } from '../../InformationCenterCell';
+import { InformationCenterTabView } from '../../InformationCenterTabView';
+import { IInformationCenterNPC } from '../../InformationCenterTypes';
+import { InformationCenterNPCDetails } from './InformationCenterNPCDetails';
+import { InformationCenterNPCTooltip } from './InformationCenterNPCTooltip';
+
+interface IBestiarySectionProps {
+  bestiaryItems: IInformationCenterNPC[];
+  itemsAtlasJSON: Record<string, any>;
+  itemsAtlasIMG: string;
+  entitiesAtlasJSON: Record<string, any>;
+  entitiesAtlasIMG: string;
+  initialSearchQuery: string;
+}
+
+export const BestiarySection: React.FC<IBestiarySectionProps> = ({
+  bestiaryItems,
+  itemsAtlasJSON,
+  itemsAtlasIMG,
+  entitiesAtlasJSON,
+  entitiesAtlasIMG,
+  initialSearchQuery,
+}) => {
+  const [bestiarySearchQuery, setBestiarySearchQuery] = useState(
+    initialSearchQuery
+  );
+  const [tooltipData, setTooltipData] = useState<{
+    npc: IInformationCenterNPC;
+    position: { x: number; y: number };
+  } | null>(null);
+  const [
+    selectedMonster,
+    setSelectedMonster,
+  ] = useState<IInformationCenterNPC | null>(null);
+  const [isTouchDevice] = useState('ontouchstart' in window);
+
+  const filterItems = (items: IInformationCenterNPC[]) => {
+    return items.filter(item =>
+      item.name.toLowerCase().includes(bestiarySearchQuery.toLowerCase())
+    );
+  };
+
+  const handleMouseEnter = (
+    monster: IInformationCenterNPC,
+    event: React.MouseEvent
+  ) => {
+    if (!isTouchDevice && !selectedMonster) {
+      setTooltipData({
+        npc: monster,
+        position: { x: event.clientX, y: event.clientY },
+      });
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (!isTouchDevice) {
+      setTooltipData(null);
+    }
+  };
+
+  const handleMouseMove = (event: React.MouseEvent) => {
+    if (!isTouchDevice && tooltipData) {
+      setTooltipData({
+        ...tooltipData,
+        position: { x: event.clientX, y: event.clientY },
+      });
+    }
+  };
+
+  const handleTouchStart = (
+    monster: IInformationCenterNPC,
+    event: React.TouchEvent
+  ) => {
+    if (isTouchDevice) {
+      event.preventDefault();
+      const touch = event.touches[0];
+      if (tooltipData?.npc.id === monster.id) {
+        setTooltipData(null);
+      } else {
+        setTooltipData({
+          npc: monster,
+          position: { x: touch.clientX, y: touch.clientY },
+        });
+      }
+    }
+  };
+
+  const handleMonsterClick = (monster: IInformationCenterNPC) => {
+    setSelectedMonster(monster);
+    setTooltipData(null);
+  };
+
+  const renderContent = (items: IInformationCenterNPC[]) => (
+    <BestiaryGrid>
+      {items.map(item => (
+        <InformationCenterCell
+          key={item.id}
+          name={item.name}
+          spriteKey={item.key}
+          atlasJSON={entitiesAtlasJSON}
+          atlasIMG={entitiesAtlasIMG}
+          onClick={() => handleMonsterClick(item)}
+          onMouseEnter={e => handleMouseEnter(item, e)}
+          onMouseLeave={handleMouseLeave}
+          onMouseMove={handleMouseMove}
+          onTouchStart={e => handleTouchStart(item, e)}
+        />
+      ))}
+    </BestiaryGrid>
+  );
+
+  return (
+    <>
+      <InformationCenterTabView
+        items={bestiaryItems}
+        searchQuery={bestiarySearchQuery}
+        onSearchChange={setBestiarySearchQuery}
+        filterItems={filterItems}
+        renderContent={renderContent}
+        searchPlaceholder="Search monsters..."
+        emptyMessage="No monsters found"
+      />
+      {tooltipData && (
+        <Portal>
+          <TooltipWrapper
+            style={{
+              position: 'fixed',
+              left: tooltipData.position.x + 10,
+              top: tooltipData.position.y + 10,
+            }}
+          >
+            <InformationCenterNPCTooltip
+              npc={tooltipData.npc}
+              itemsAtlasJSON={itemsAtlasJSON}
+              itemsAtlasIMG={itemsAtlasIMG}
+            />
+          </TooltipWrapper>
+        </Portal>
+      )}
+      {selectedMonster && (
+        <InformationCenterNPCDetails
+          npc={selectedMonster}
+          itemsAtlasJSON={itemsAtlasJSON}
+          itemsAtlasIMG={itemsAtlasIMG}
+          entitiesAtlasJSON={entitiesAtlasJSON}
+          entitiesAtlasIMG={entitiesAtlasIMG}
+          onBack={() => setSelectedMonster(null)}
+        />
+      )}
+    </>
+  );
+};
+
+const BestiaryGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+  padding: 0 1rem;
+  min-height: 300px;
+`;
+
+const TooltipWrapper = styled.div`
+  position: fixed;
+  z-index: 1000;
+  pointer-events: none;
+  width: 300px;
+`;