CollectibleCard.tsx

Обзор

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

Кроме визуализации, компонент содержит логику управления интерактивностью:

Компонент тесно интегрирован с бизнес-логикой игры (gameLogic.ts) через импорт вспомогательных функций и типов.

Детальное описание

Интерфейс CollectibleCardProps

Определяет свойства, передаваемые в компонент:

Свойство

Тип

Описание

elemental

CollectedElemental

Объект элементаля с его текущими характеристиками

onLevelUpClick

(elemental: CollectedElemental, displayData: ElementalDisplayData) => void

Коллбек при клике на кнопку прокачки/улучшения

playerMana

number

Текущий запас маны игрока

Компонент CollectibleCard

React функциональный компонент:

const CollectibleCard: React.FC<CollectibleCardProps> = ({ elemental, onLevelUpClick, playerMana }) => { ... }

Локальное состояние

Основные методы и функции

handleLevelUpClick()

Обработчик клика по кнопке прокачки.

Эффект вибрации (React.useEffect)
getRarityColor(rarity: ElementalRarity): string

Возвращает цвет, соответствующий редкости элементаля.

Редкость

Цвет

common

#9ca3af

rare

#3b82f6

epic

#8b5cf6

immortal

#f59e0b

default

#9ca3af

getElementColor(element: Element): string

Возвращает цвет, соответствующий стихии элементаля.

Стихия

Цвет

earth

#059669

water

#0ea5e9

fire

#dc2626

default

#6b7280

getRarityClass(rarity: ElementalRarity): string

Возвращает CSS-класс для стилизации редкости.

Редкость

CSS класс

common

rarity-common

rare

rarity-rare

epic

rarity-epic

immortal

rarity-immortal

default

rarity-common

getStableCharacterName(element: string, rarity: string, elementalId: string): string

Генерирует стабильное уникальное имя персонажа на основе ID, стихии и редкости.

const name = getStableCharacterName('earth', 'rare', 'abc123');
// => "Mighty Guardian" (пример)
getElementalDisplayData(elemental: CollectedElemental): ElementalDisplayData

Формирует объект с данными для отображения элементаля, включая:

JSX-разметка

Структура карточки:

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

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

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

import CollectibleCard from './CollectibleCard';

const onLevelUp = (elemental, displayData) => {
  if (displayData.canLevelUp) {
    // логика прокачки, например, вызвать API или обновить состояние
    console.log(`Прокачка ${elemental.id}`);
  }
};

const playerMana = 500;

const elemental = {
  id: 'abc123',
  element: 'fire',
  rarity: 'rare',
  level: 2,
  // ...другие поля
};

<CollectibleCard
  elemental={elemental}
  onLevelUpClick={onLevelUp}
  playerMana={playerMana}
/>;

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

classDiagram
    class CollectibleCard {
        -isVibrating: boolean
        +handleLevelUpClick(): void
        +getRarityColor(rarity: ElementalRarity): string
        +getElementColor(element: Element): string
        +getRarityClass(rarity: ElementalRarity): string
        +getStableCharacterName(element: string, rarity: string, elementalId: string): string
        +getElementalDisplayData(elemental: CollectedElemental): ElementalDisplayData
        +render(): JSX.Element
    }
    CollectibleCard ..> CollectedElemental : uses
    CollectibleCard ..> ElementalDisplayData : uses
    CollectibleCard ..> gameLogic : imports functions

Заключение

CollectibleCard.tsx — ключевой компонент UI для отображения и управления отдельным элементалем в коллекции игрока. Он сочетает в себе визуализацию, бизнес-логику по отображению состояния элементаля и интерактивность (прокачка, вибрация). Его дизайн ориентирован на удобство пользователя, поддержку мобильных устройств (вибрация), а также тесную интеграцию с остальной системой, включая бизнес-логику и обработку коллекции.

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