Уведомления о достижениях

Назначение

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

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

Компонент отображает всплывающее окно с информацией о достижении — иконкой, названием и описанием. Процесс работы включает следующие ключевые этапы:

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

• Уведомление остаётся видимым в течение фиксированного времени (около 4 секунд).

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

• Внутреннее состояние isVisible управляет классами CSS для анимации показа/скрытия.

Такой подход обеспечивает автоматическое и кратковременное отображение достижений без необходимости действий со стороны пользователя.

Пример ключевого кода из AchievementNotification.tsx:

useEffect(() => {
  const showTimer = setTimeout(() => setIsVisible(true), 100);
  const hideTimer = setTimeout(() => {
    setIsVisible(false);
    setTimeout(onDismiss, 500);
  }, 4000);
  return () => {
    clearTimeout(showTimer);
    clearTimeout(hideTimer);
  };
}, [onDismiss]);

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

Уведомления о достижениях тесно интегрированы с общей системой поддержки игрока, дополняя пошаговые туториалы и настройки:

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

• Игровая логика: модуль gameLogic.ts формирует информацию о новых достижениях и передаёт их в UI, где AchievementNotification визуализирует эти события.

• UI-компоненты: уведомления рендерятся в корневом компоненте приложения (App.tsx), совместно с другими элементами интерфейса, обеспечивая единый пользовательский опыт без излишнего навязывания.

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

Диаграмма: последовательность отображения уведомления о достижении

sequenceDiagram
    participant GameLogic as Игровая логика
    participant App as Корневой компонент
    participant AchievementNotification as Уведомление

    GameLogic->>App: Новое достижение
    App->>AchievementNotification: Передать данные достижения
    AchievementNotification->>AchievementNotification: Инициализация (isVisible = false)
    AchievementNotification-->>AchievementNotification: Задержка 100мс
    AchievementNotification->>AchievementNotification: Показать уведомление (isVisible = true)
    Note right of AchievementNotification: Уведомление отображается 4 секунды
    AchievementNotification->>AchievementNotification: Скрыть уведомление (isVisible = false)
    AchievementNotification-->>App: Вызов onDismiss для удаления уведомления

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

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