CollectionTab.tsx

Обзор

Файл CollectionTab.tsx реализует React-компонент CollectionTab, который является ключевым элементом пользовательского интерфейса для управления коллекцией элементалей игрока в игре. Компонент отвечает за отображение всех элементалей игрока, предоставляет удобный интерфейс фильтрации по стихиям и редкостям, а также обеспечивает механизмы прокачки выбранных элементалей с подтверждением через модальное окно.

Основная задача компонента — предоставить игроку функциональность для просмотра и сортировки своих элементалей, а также безопасно и наглядно выполнять повышение уровня или редкости с учётом доступных ресурсов (маны).

Описание компонента и его функциональности

Компонент: CollectionTab

const CollectionTab: React.FC<CollectionTabProps> = ({ player, onLevelUpElemental }) => { ... }

Подробное описание ключевых частей и методов

1. Фильтрация и сортировка коллекции

const ownedElementals = Object.values(player.elementalCollection.elementals).filter(e => e.isOwned);

const sortByRarity = (a: CollectedElemental, b: CollectedElemental) => { ... }

const filteredElementals = ownedElementals
  .filter(elemental => {
    if (selectedElement !== 'all' && elemental.element !== selectedElement)
      return false;
    if (selectedRarity !== 'all' && elemental.rarity !== selectedRarity)
      return false;
    return true;
  })
  .sort(sortByRarity);

2. Обновление состояния и таймер кулдаунов

useEffect(() => {
  const interval = setInterval(() => {
    forceUpdate(prev => prev + 1);
  }, 1000);
  return () => clearInterval(interval);
}, [forceUpdate]);

3. Управление модальным окном подтверждения прокачки

useEffect(() => {
  if (showConfirmModal) {
    document.body.classList.add('modal-open');
  } else {
    document.body.classList.remove('modal-open');
  }
  return () => {
    document.body.classList.remove('modal-open');
  };
}, [showConfirmModal]);

useEffect(() => {
  const handleEscape = (e: KeyboardEvent) => {
    if (e.key === 'Escape' && showConfirmModal) {
      handleCancelLevelUp();
    }
  };
  if (showConfirmModal) {
    document.addEventListener('keydown', handleEscape);
  }
  return () => {
    document.removeEventListener('keydown', handleEscape);
  };
}, [showConfirmModal]);

4. Обработка выбора прокачки элементаля

const handleLevelUpClick = (
  elemental: CollectedElemental,
  displayData: ElementalDisplayData
) => {
  setSelectedElemental(elemental);
  setSelectedDisplayData(displayData);
  setShowConfirmModal(true);
};

5. Подтверждение прокачки

const handleConfirmLevelUp = () => {
  if (selectedElemental && selectedDisplayData) {
    onLevelUpElemental(selectedElemental.id);
    setShowConfirmModal(false);
    setSelectedElemental(null);
    setSelectedDisplayData(null);

    // Запуск вибрации с небольшой задержкой после закрытия модального окна
    setTimeout(() => {
      const windowWithVibration = window as Window & {
        triggerCardVibration?: Record<string, (isUpgrade?: boolean) => void>;
      };
      if (windowWithVibration.triggerCardVibration && selectedElemental) {
        const cardVibrationFunction =
          windowWithVibration.triggerCardVibration[selectedElemental.id];
        if (cardVibrationFunction) {
          cardVibrationFunction(selectedDisplayData.canUpgradeRarity);
        }
      }
    }, 100);
  }
};

6. Отмена прокачки

const handleCancelLevelUp = () => {
  setShowConfirmModal(false);
  setSelectedElemental(null);
  setSelectedDisplayData(null);
};

7. Рендеринг интерфейса

Взаимодействие с другими частями системы

Пример использования

<CollectionTab
  player={currentPlayerStats}
  onLevelUpElemental={(elementalId) => {
    // Обработать повышение уровня элементаля с id = elementalId
    // Обновить состояние игрока и коллекции
  }}
/>

Важные детали реализации

Диаграмма структуры компонента CollectionTab

componentDiagram
    direction TB
    CollectionTab <|-- CollectibleCard : использует
    CollectionTab o-- "PlayerStats" : получает данные игрока
    CollectionTab o-- "CollectedElemental[]" : обрабатывает коллекцию
    CollectionTab o-- "ElementalDisplayData" : отображает данные
    CollectionTab --> ReactDOM.createPortal : рендерит модальное окно

    class CollectionTab {
      +player: PlayerStats
      +onLevelUpElemental(elementalId: string): void
      -selectedElement: 'earth'|'water'|'fire'|'all'
      -selectedRarity: 'common'|'rare'|'epic'|'immortal'|'all'
      -showConfirmModal: boolean
      -selectedElemental: CollectedElemental|null
      -selectedDisplayData: ElementalDisplayData|null
      -handleLevelUpClick()
      -handleConfirmLevelUp()
      -handleCancelLevelUp()
    }

    class CollectibleCard {
      +elemental: CollectedElemental
      +onLevelUpClick()
      +playerMana: number
    }

Заключение

CollectionTab.tsx — это ключевой UI-компонент для управления коллекцией элементалей в игре, обеспечивающий:

Такой подход обеспечивает удобство, прозрачность и погружение пользователя в игровой процесс развития персонажей.

Дополнительная информация

Для полного понимания работы прокачки стоит ознакомиться с бизнес-логикой в gameLogic.ts и компонентом карточек CollectibleCard.tsx, так как именно там реализованы алгоритмы определения стоимости, проверки возможности прокачки и визуализация каждого элементаля.

Если нужна более подробная документация по связанным компонентам или бизнес-логике, пожалуйста, дайте знать.