Navbar.tsx

Обзор

Файл Navbar.tsx содержит React-компонент Navbar, который реализует верхнюю навигационную панель для веб-приложения игры "Mana Game". Этот компонент отвечает за отображение основного меню сайта, информации о подключённом игроке и кнопки для подключения к игре. Навигационная панель адаптирована под разные состояния пользователя (подключен или нет) и обеспечивает быстрый доступ к ключевым разделам приложения.

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

Компонент Navbar

Назначение

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

Используемые хуки и импорты

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

• Иконки Zap, User, Settings из библиотеки lucide-react.

• Компонент Link из next/link для навигации по страницам.

Локальная функция

• handleConnect: Генерирует уникальный идентификатор игрока в формате player_<случайная_строка> и вызывает функцию connectPlayer для установки подключения.

Параметры

Компонент не принимает пропсы, все данные берутся из контекста useGame.

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

JSX-разметка, описывающая структуру навигационной панели.

Описание JSX

• Обертка <nav> с классами для стилизации и фиксированного позиционирования.

• Логотип с иконкой молнии (Zap) и названием игры.

• Основное меню с ссылками: Game, Dashboard, Marketplace, Cross-Chain, Monitoring.

• Блок, отображающий либо:

  • Информацию о подключённом игроке: баланс MANA, имя и уровень.

  • Или кнопку "Start Playing" для подключения.

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

import { Navbar } from './Navbar';

function App() {
  return (
    <>
      <Navbar />
      {/* другие компоненты */}
    </>
  );
}

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

• Генерация ID игрока происходит локально через Math.random().toString(36).substr(2, 9), что обеспечивает уникальность с высокой степенью вероятности.

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

• Навигация реализована с помощью компонента Link из Next.js, что обеспечивает клиентскую маршрутизацию без перезагрузки страницы.

• Стилизация выполнена с использованием Tailwind CSS классов, включая эффекты наведения и адаптивное скрытие элементов (hidden md:flex).

• Навигационная панель фиксирована сверху (sticky top-0) и имеет эффект размытия фона (backdrop-blur-sm).

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

• GameProvider: Компонент Navbar напрямую зависит от контекста GameProvider, из которого получает данные о текущем игроке и методы управления подключением.

• Страницы приложения: Ссылки на разделы (Game, Dashboard, Marketplace и др.) ведут к соответствующим страницам, обеспечивая навигацию внутри SPA.

• Логика подключения: При нажатии кнопки "Start Playing" генерируется уникальный ID игрока, который передается в connectPlayer из useGame, инициируя процесс подключения игрока к игровой сессии.

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

componentDiagram
    component Navbar {
        +handleConnect()
        +useGame() -> { player, isConnected, connectPlayer }
    }
    component Link
    component Zap
    component User

    Navbar --> Link : навигация
    Navbar --> Zap : иконка логотипа
    Navbar --> User : иконка пользователя
    Navbar --> useGame : получение данных игрока и управление подключением

Итог

Navbar.tsx — ключевой UI-компонент верхней навигационной панели веб-приложения игры. Он интуитивно информирует пользователя о состоянии подключения, предоставляет удобный доступ к основным разделам и поддерживает динамическое поведение в зависимости от статуса игрока. Благодаря использованию React, Next.js и Tailwind CSS, компонент легок и адаптивен. Его интеграция с GameProvider обеспечивает синхронизацию с состоянием игры и пользовательскими данными.