AchievementNotification.tsx

Обзор

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

Подробное описание компонента

AchievementNotification

Тип: React Functional Component
Назначение: Визуализация уведомления о достижении с автоматическим контролем времени показа и скрытия.

Параметры (props)

• achievement: Achievement
  Объект достижения, содержащий данные для отображения.
  Тип Achievement импортируется из общего файла типов и включает, как минимум, следующие свойства:

  • icon — JSX-элемент или иконка достижения

  • name — название достижения (строка)

  • desc — описание достижения (строка)

• onDismiss: () => void
  Коллбэк-функция, вызываемая после полного скрытия уведомления. Позволяет родительскому компоненту удалить уведомление из состояния и DOM.

Внутреннее состояние

• isVisible: boolean
  Управляет классом CSS для анимации показа/скрытия уведомления. Изначально false, после задержки устанавливается в true (появление), затем через 4 секунды переходит обратно в false (исчезновение).

Логика работы

• При монтировании компонента запускается useEffect, который устанавливает два таймера:

  • showTimer с задержкой 100 мс для плавного показа уведомления (установка isVisible в true).

  • hideTimer через 4000 мс для скрытия уведомления (установка isVisible в false) и запуска onDismiss через 500 мс после начала скрытия для полного удаления компонента.

• При размонтировании компонента оба таймера очищаются, чтобы избежать утечек памяти и некорректного поведения.

JSX-разметка

<div className={`achievement-notification ${isVisible ? 'show' : ''}`}>
  <div className='achievement-popup'>
    <div className='achievement-popup-icon'>{achievement.icon}</div>
    <div className='achievement-popup-text'>
      <div className='achievement-popup-title'>Achievement Unlocked!</div>
      <div className='achievement-popup-name'>{achievement.name}</div>
      <div className='achievement-popup-desc'>{achievement.desc}</div>
    </div>
  </div>
</div>

• Внешний контейнер получает класс show при isVisible === true, что запускает CSS-анимацию появления.

• Внутри отображается иконка достижения, фиксированный заголовок "Achievement Unlocked!", название и описание достижения.

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

import AchievementNotification from './AchievementNotification';
import { Achievement } from '../types';

const someAchievement: Achievement = {
  icon: <img src="/icons/achievement-star.svg" alt="Star" />,
  name: 'First Victory',
  desc: 'You won your first battle!',
};

function ParentComponent() {
  const [showNotification, setShowNotification] = React.useState(true);

  return (
    <>
      {showNotification && (
        <AchievementNotification
          achievement={someAchievement}
          onDismiss={() => setShowNotification(false)}
        />
      )}
    </>
  );
}

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

• Использование двух таймеров с разделением на показ и скрытие улучшает плавность анимации.

• Задержка в 100 мс перед показом уведомления позволяет избежать резкого появления и даёт время браузеру на отрисовку.

• Задержка в 500 мс после скрытия уведомления перед вызовом onDismiss нужна для завершения анимации скрытия.

• Очистка таймеров в useEffect предотвращает ошибки, если компонент будет размонтирован до срабатывания таймеров.

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

Взаимодействие с другими частями приложения

• Передача данных: Компонент получает объект achievement из родительского компонента, который формирует данные на основе игровой логики (например, при выполнении условий достижения).

• Управление видимостью: Родитель контролирует появление компонента в дереве React, удаляя его после вызова onDismiss.

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

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

• Стили и анимации: Для плавного показа и скрытия используются CSS-классы, которые должны быть определены в стилях приложения.

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

classDiagram
    class AchievementNotification {
        - isVisible: boolean
        + achievement: Achievement
        + onDismiss(): void
        + useEffect(): void
        + render(): JSX.Element
    }

Заключение

AchievementNotification.tsx — простой, но эффективный компонент для отображения кратковременных уведомлений об игровых достижениях. Его функционал ориентирован на удобство пользователя: автоматическое появление, фиксированное время показа и плавное скрытие без необходимости дополнительного взаимодействия. Благодаря простой архитектуре и чистому API, он легко интегрируется в более крупные системы обучения и поддержки игроков, повышая их вовлечённость и удовлетворённость.

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