Фильтрация и отображение

Назначение

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

Функциональность

Основная функциональность реализована в компоненте CollectionTab, который:

• Поддерживает выбор фильтра по стихиям: земля, вода, огонь, а также показ всех элементалей.

• Позволяет фильтровать коллекцию по редкости: common, rare, epic, immortal и опция "все".

• Отображает отфильтрованные элементали в виде сетки карточек (CollectibleCard), отсортированных по редкости (сначала более редкие).

• Обрабатывает интерактивные события: запрос на повышение уровня или редкости элементаля с подтверждением через модальное окно.

• Обновляет таймеры и состояния каждую секунду для отображения оставшегося времени кулдауна элементалей.

• Управляет состоянием показа модального окна подтверждения прокачки с возможностью отмены через кнопку или клавишу Escape.

• Обеспечивает визуальную обратную связь в виде вибрации при успешном повышении уровня или редкости персонажа, интегрируясь с API Telegram Web App и Web Vibration API.

Компонент CollectibleCard отвечает за отображение каждой карточки элементаля и включает:

• Отрисовку изображения элементаля с резервным отображением эмодзи при ошибках загрузки.

• Визуальные индикаторы редкости и стихии с соответствующей цветовой схемой.

• Таймер кулдауна в верхней части карточки.

• Кнопку для повышения уровня или редкости с динамическим состоянием активности и подсказками.

• Генерацию уникального стабильного имени персонажа, основанного на хэше ID, стихии и редкости, для более живого интерфейса.

• Логическую проверку возможности прокачки через бизнес-логику из gameLogic.ts.

• Механизм вибрации карточки с разной интенсивностью для уровней и редкостных апгрейдов.

Пример вызова обновления уровня с подтверждением и последующей вибрацией:

const handleConfirmLevelUp = () => {
  if (selectedElemental && selectedDisplayData) {
    onLevelUpElemental(selectedElemental.id);
    setShowConfirmModal(false);
    // Запуск вибрации с учётом типа улучшения
    const vibrationFunc = window.triggerCardVibration?.[selectedElemental.id];
    if (vibrationFunc) {
      vibrationFunc(selectedDisplayData.canUpgradeRarity);
    }
  }
};

Взаимосвязь с родительской темой и другими подсистемами

Подтематика фильтрации и отображения является неотъемлемой частью управления коллекцией элементалей. Она дополняет остальные подсистемы родительской темы, такие как прокачка и улучшения, предоставляя визуальный и интерактивный интерфейс для взаимодействия с элементалями.

• Связь с прокачкой реализуется через модальное окно подтверждения и передачу события повышения уровня вверх к бизнес-логике.

• Использование данных о редкости и стихии берется из централизованной типизации и бизнес-логики (gameLogic.ts), обеспечивая консистентность.

• Взаимодействие с модулем вибрации и анимаций реализовано через глобальный интерфейс на объекте window, что позволяет синхронизировать визуальные эффекты с пользовательскими действиями.

• Обновление таймеров кулдауна карточек улучшает информативность и плавность UI, что важно для отображения состояния элементалей в реальном времени.

Таким образом, фильтрация и отображение выступают связующим звеном между хранением коллекции, её развитием и визуальной презентацией для игрока, создавая единый, удобный пользовательский опыт.

Диаграмма: Основной поток фильтрации и отображения коллекции

flowchart TD
    Start[Начало рендера CollectionTab]
    LoadCollection[Загрузка коллекции игрока]
    ApplyFilters[Применение фильтров по стихиям и редкости]
    SortElementals[Сортировка по редкости и стихии]
    RenderCards[Отрисовка карточек CollectibleCard]
    UserClicksLevelUp[Пользователь нажимает "Level Up" на карточке]
    ShowConfirmModal[Показ модального окна подтверждения]
    UserConfirms[Пользователь подтверждает прокачку]
    UpdateLevel[Вызов onLevelUpElemental из родителя]
    TriggerVibration[Запуск вибрации карточки]
    CloseModal[Закрытие модального окна]
    UpdateUI[Обновление UI с новой информацией]

    Start --> LoadCollection --> ApplyFilters --> SortElementals --> RenderCards
    RenderCards --> UserClicksLevelUp --> ShowConfirmModal
    ShowConfirmModal --> UserConfirms --> UpdateLevel --> TriggerVibration --> CloseModal --> UpdateUI

Данная диаграмма иллюстрирует ключевые шаги от загрузки коллекции и фильтрации до подтверждения прокачки и обновления интерфейса с визуальной обратной связью.