page.tsx

Обзор файла

Данный файл реализует страницу маркетплейса для внутриигровой торговли предметами на базе React и TypeScript. Компонент MarketplacePage предоставляет пользователю интерфейс для покупки и продажи игровых предметов за игровую валюту MANA. Все операции выполняются без комиссий за газ (gasless), а взаимодействие с игровым состоянием происходит через кастомный хук useGame. Пользователь может фильтровать предметы по категории, редкости и поисковому запросу, а также переключаться между вкладками покупки и продажи.

Подробное описание компонентов и функций

Интерфейс MarketItem

interface MarketItem {
  id: string;
  name: string;
  description: string;
  price: number;
  rarity: 'common' | 'rare' | 'epic' | 'legendary';
  category: 'weapon' | 'armor' | 'consumable' | 'material';
  seller: string;
  image: string;
}

Определяет структуру объекта игрового предмета, включающую:

• id — уникальный идентификатор предмета.

• name — название предмета.

• description — описание.

• price — цена в MANA.

• rarity — редкость (обычный, редкий, эпический, легендарный).

• category — категория предмета (оружие, броня, расходник, материал).

• seller — продавец предмета.

• image — эмодзи или иконка для визуализации.

Компонент MarketplacePage

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

Состояния (useState)

• searchTerm — строка поиска по названию и описанию предметов.

• selectedCategory — выбранная категория предметов для фильтра.

• selectedRarity — выбранный уровень редкости для фильтра.

• activeTab — активная вкладка: 'buy' (покупка) или 'sell' (продажа).

Использование хуков

• useGame() — кастомный хук, предоставляющий объект игрока (player), функцию для совершения действий (performAction), и флаг загрузки (isLoading).

Основные данные

• marketItems: MarketItem[] — список предметов, доступных для покупки на маркетплейсе.

• playerItems: MarketItem[] — имитация инвентаря игрока с предметами для продажи.

Вспомогательные функции

• getRarityColor(rarity: string): string — Возвращает CSS классы для цветового оформления в зависимости от редкости предмета.

const getRarityColor = (rarity) => {
  switch (rarity) {
    case 'common': return 'text-gray-400 border-gray-400';
    case 'rare': return 'text-blue-400 border-blue-400';
    case 'epic': return 'text-purple-400 border-purple-400';
    case 'legendary': return 'text-yellow-400 border-yellow-400';
    default: return 'text-gray-400 border-gray-400';
  }
};

• filteredItems — отфильтрованный массив предметов с учетом поискового запроса, выбранной категории и редкости.

Обработчики действий

• handlePurchase(item: MarketItem): Promise<void> — асинхронная функция для покупки предмета. Проверяет наличие игрока и достаточный баланс MANA, вызывает действие MARKETPLACE_TRADE с параметрами покупки. После успешного действия выводит оповещение.

• handleSell(item: MarketItem, price: number): Promise<void> — асинхронная функция для продажи предмета из инвентаря игрока. Аналогично вызывает MARKETPLACE_TRADE с параметрами продажи и показывает подтверждение.

Рендеринг интерфейса

• Заголовок страницы с информацией о балансе MANA игрока.

• Вкладки переключения между режимами покупки и продажи.

• Боковая панель с фильтрами:

  • Поиск по названию/описанию.

  • Категории предметов.

  • Редкости предметов.

• Основная зона с сеткой предметов:

  • При активной вкладке "Buy Items" — отображаются отфильтрованные предметы для покупки с кнопками покупки.

  • При вкладке "Sell Items" — отображается инвентарь игрока с кнопками продажи.

• Информационный блок о преимуществах gasless торговли с иконками и описаниями.

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

• Фильтрация предметов: Фильтрация происходит по трем критериям — поисковая строка, категория и редкость. Все условия объединены через логический оператор AND.

• Обработка покупок и продаж: Используется одно универсальное действие MARKETPLACE_TRADE с разными параметрами для покупки и продажи. Асинхронность сопровождается блокировкой кнопок и простым уведомлением об успешной операции.

• UI/UX: Использованы иконки из библиотеки lucide-react для визуального улучшения интерфейса. Стилизация выполнена с помощью Tailwind CSS.

• Моковые данные: Для демонстрации инвентаря игрока и предметов на продаже используются статические массивы.

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

• Компонент зависит от провайдера игры GameProvider и хука useGame, которые обеспечивают доступ к состоянию игрока и функции для выполнения игровых действий.

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

• Действия покупки/продажи передаются в performAction, что предполагает взаимодействие с бэкендом или блокчейн-валидатором для обработки транзакций.

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

import MarketplacePage from './page';

// Пример интеграции в роутинг приложения
function App() {
  return (
    <div>
      <MarketplacePage />
    </div>
  );
}

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

componentDiagram
    MarketplacePage --> useGame
    MarketplacePage --> MarketItem[]
    MarketplacePage --> Filter Controls
    MarketplacePage --> BuyItemsGrid
    MarketplacePage --> SellItemsGrid
    MarketplacePage --> Actions: handlePurchase(), handleSell()
    MarketplacePage --> UI Elements: Tabs, Filters, Info Section

Итог

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

Документация подготовлена экспертом по техническому написанию и анализу систем.