CraftingSystem.tsx

Обзор

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

Основные функции файла:

Отображение списка рецептов с фильтрацией по категориям.
Управление процессом крафта с визуализацией прогресса.
Подробный просмотр выбранного рецепта и его материалов.
Индикация возможности крафта в зависимости от баланса маны игрока.
Информационный блок о преимуществах газлес крафта.

Классы, функции и методы

В файле используется функциональный React-компонент CraftingSystem и вспомогательные интерфейсы для описания данных.

Интерфейсы

`interface Recipe`

Определяет структуру рецепта крафта.

Свойство	Тип	Описание
`id`	`string`	Уникальный идентификатор рецепта
`name`	`string`	Название рецепта
`description`	`string`	Описание рецепта
`manaCost`	`number`	Стоимость маны для крафта
`craftTime`	`number`	Время крафта в секундах
`rarity`	`'common' \	'rare' \
`category`	`'weapon' \	'armor' \
`materials`	`{ name: string; quantity: number; icon: string }[]`	Список материалов с количеством и иконкой
`result`	`{ name: string; icon: string; stats?: string }`	Итоговый предмет с иконкой и опциональными характеристиками

`interface CraftingJob`

Структура активной задачи крафта.

Свойство	Тип	Описание
`recipeId`	`string`	Идентификатор рецепта
`startTime`	`number`	Время начала крафта в миллисекундах
`duration`	`number`	Длительность крафта в миллисекундах

Функция `CraftingSystem`

Основной React-компонент, реализующий интерфейс и логику системы крафта.

Используемые состояния (React hooks)

selectedRecipe: Recipe | null — выбранный рецепт для отображения деталей.
craftingJobs: CraftingJob[] — массив активных заданий крафта.
selectedCategory: string — выбранная категория фильтрации рецептов.

Взаимодействия с внешними данными

Использует useGame() из GameProvider, предоставляющий данные игрока (player), функцию для выполнения действий (performAction) и состояние загрузки (isLoading).

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

`getRarityColor(rarity: string): string`

Возвращает CSS-классы для цвета текста и границы в зависимости от редкости предмета.

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

<span className={`text-xs px-2 py-1 rounded border ${getRarityColor(recipe.rarity)}`}>
  {recipe.rarity.toUpperCase()}
</span>

`canCraft(recipe: Recipe): boolean`

Проверяет, достаточно ли у игрока маны для крафта данного рецепта.

Параметры: recipe — объект рецепта.
Возвращает: true, если у игрока хватает маны, иначе false.

`startCrafting(recipe: Recipe): Promise<void>`

Инициирует процесс крафта выбранного рецепта.

Проверяет возможность крафта через canCraft.
Добавляет задание в craftingJobs.
Вызывает асинхронную функцию performAction с типом действия 'CRAFT_ITEM' и параметрами предмета.
Запускает таймер, который по окончании убирает задание из списка.

Параметры:

recipe: Recipe — выбранный рецепт для крафта.

Пример вызова:

<button onClick={() => startCrafting(selectedRecipe!)}>Start Crafting</button>

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

Фильтр категорий: кнопки для выбора категории рецептов (все, оружие, броня, расходники).
Активные задания: отображение текущих заданий с прогрессбаром и отсчетом времени.
Сетка рецептов: карточки с краткой информацией о каждом рецепте, кликабельные для выбора.
Детали рецепта: подробное описание, материалы, стоимость маны и кнопка старта крафта.
Информационный блок: описание преимуществ газлес крафта.

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

Асинхронный крафт: после запуска крафта вызывается performAction для взаимодействия с игровым сервером или логикой, при этом UI сразу обновляется, показывая прогресс. По окончании таймера соответствующая задача удаляется.
Фильтрация рецептов: реализована простым фильтром массива по выбранной категории.
Стиль и визуализация: используется библиотека lucide-react для иконок и CSS-классы для стилизации, включая динамическое изменение цвета в зависимости от редкости.
Индикатор доступности: кнопки крафта блокируются, если у игрока недостаточно маны или идет загрузка.

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

Компонент зависит от GameProvider — контекста, предоставляющего состояние игрока и функции для выполнения игровых действий.
Использует иконки из lucide-react для визуального оформления.
Предполагается, что после успешного выполнения крафта предметы добавляются в инвентарь игрока через логику performAction.
Не содержит прямых вызовов API — все взаимодействия идут через performAction, что обеспечивает абстракцию и интеграцию с игровым движком.

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

import React from 'react';
import { CraftingSystem } from './CraftingSystem';

function GamePage() {
  return (
    <div>
      <h1>My Game</h1>
      <CraftingSystem />
    </div>
  );
}

export default GamePage;

Mermaid диаграмма: структура компонента `CraftingSystem`

componentDiagram
    CraftingSystem <|-- useGame
    CraftingSystem o-- Recipe
    CraftingSystem o-- CraftingJob

    CraftingSystem : +selectedRecipe: Recipe | null
    CraftingSystem : +craftingJobs: CraftingJob[]
    CraftingSystem : +selectedCategory: string
    CraftingSystem : +getRarityColor(rarity: string): string
    CraftingSystem : +canCraft(recipe: Recipe): boolean
    CraftingSystem : +startCrafting(recipe: Recipe): Promise<void>

    CraftingSystem --> "recipes[]" : содержит список рецептов
    CraftingSystem --> "categories[]" : содержит категории фильтрации
    CraftingSystem --> "UI Elements" : Рендерит фильтр, список рецептов, детали, прогресс

    class useGame {
        +player
        +performAction()
        +isLoading
    }

Заключение

CraftingSystem.tsx — это полнофункциональный компонент для реализации игровой системы крафта предметов с удобным UI, фильтрацией, визуализацией прогресса и интеграцией с игровым состоянием через контекст. Он обеспечивает плавный пользовательский опыт с мгновенным газлес крафтом и информативным интерфейсом.

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