ProfileHeader.tsx

Обзор

Данный файл содержит React-компонент ProfileHeader, который отвечает за отображение шапки профиля игрока в пользовательском интерфейсе. Компонент отображает аватар, имя игрока и текущий доступный ману (ресурс в игре). Кроме того, он реализует плавное визуальное изменение прозрачности и положения шапки профиля при прокрутке страницы, улучшая пользовательский опыт за счет анимации.

Основная функциональность файла:

Визуализация информации о игроке (аватар, имя, манна).
Плавное скрытие (сдвиг и уменьшение прозрачности) шапки при прокрутке.
Обработка клика по профилю (если передан обработчик).

Описание компонентов и функций

Интерфейс `ProfileHeaderProps`

Интерфейс описывает свойства, принимаемые компонентом ProfileHeader.

Свойство	Тип	Описание
`player`	PlayerStats	Объект с данными игрока (имя, аватар, манна и т.д.)
`onClick?`	`() => void` (опционально)	Функция-обработчик клика по профилю

Компонент `ProfileHeader`

const ProfileHeader: React.FC<ProfileHeaderProps> = ({ player, onClick }) => { ... }

Параметры

player: объект с данными игрока, реализующий тип PlayerStats.
onClick (опционально): функция, вызываемая при клике по кнопке профиля.

Возвращаемое значение

JSX-элемент, визуально представляющий шапку профиля с анимацией при прокрутке.

Описание работы

Состояние hideProgress
Используется для хранения прогресса скрытия шапки — число от 0 до 1, которое вычисляется на основе прокрутки контейнера с классом .app. При прокрутке первые 60 пикселей прокрутки переводятся в значение прогресса.
Хук useEffect
При монтировании компонента добавляется обработчик события scroll на контейнер .app.
- Обработчик вычисляет прогресс скрытия (от 0 до 1) пропорционально прокрутке.
- При размонтировании обработчик удаляется.
Стиль анимации
На основе hideProgress рассчитываются CSS-свойства:
- opacity: изменяется от 1 до 0 (шапка постепенно становится прозрачной).
- transform: сдвигает шапку вверх и немного уменьшает ее размер.
Отображение аватара
Если у игрока есть аватар (player.avatar), отображается изображение, иначе — иконка меча.
Отображение маны
Значение доступной маны вычисляется с помощью функции getAvailableMana(player.mana, player.selectedLocation), импортированной из ../gameLogic.
Структура JSX
- Левая часть — кнопка с аватаром и именем игрока, реагирующая на клик (onClick).
- Правая часть — отображение текущей маны с иконкой 💎.

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

import ProfileHeader from './ProfileHeader';
import { PlayerStats } from '../types';

const playerData: PlayerStats = {
  name: 'Игрок1',
  avatar: 'https://example.com/avatar.png',
  mana: { fire: 10, water: 5 },
  selectedLocation: 'castle',
  // другие свойства...
};

function openProfile() {
  console.log('Профиль открыт');
}

<ProfileHeader player={playerData} onClick={openProfile} />

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

Плавная анимация при прокрутке реализована за счет отслеживания события scroll на контейнере с классом .app. Прогресс анимации рассчитывается только на первых 60 пикселях скролла, что обеспечивает аккуратное и предсказуемое поведение UI.
Оптимизация событий scroll — используется пассивный слушатель { passive: true } для повышения производительности.
Декларативный стиль React с хуками упрощает управление состоянием и жизненным циклом компонента.
Поддержка отсутствия аватара — компонент корректно отображает запасной символ, если изображение аватара не задано.

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

Использует типы из ../types, в частности PlayerStats, которые описывают структуру данных игрока. Это обеспечивает типобезопасность и согласованность данных.
Функция getAvailableMana из ../gameLogic отвечает за вычисление текущего доступного запаса маны с учетом выбранного местоположения игрока. Это позволяет отделить логику игры от UI.
Компонент, скорее всего, используется в верхних слоях интерфейса приложения, отображая профиль текущего игрока и предоставляя интерактивность (например, открытие подробностей профиля).

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

componentDiagram
    component ProfileHeader {
        +props: ProfileHeaderProps
        +state: hideProgress:number
        +useEffect(handleScroll)
        +render()
    }

    ProfileHeader -- uses --> PlayerStats
    ProfileHeader -- calls --> getAvailableMana

Итог

Файл ProfileHeader.tsx реализует современный, интерактивный заголовок профиля игрока с плавной анимацией при прокрутке. Он отделяет отображение от бизнес-логики, используя типы и внешние функции, что делает код поддерживаемым и расширяемым. Такой компонент улучшает UX, обеспечивая информативность и отзывчивость интерфейса.