QRCodeGenerator.tsx

Обзор

Файл QRCodeGenerator.tsx реализует React-компонент, который позволяет генерировать и отображать QR-коды для доступа к интерактивной мобильной демонстрации игрового проекта с Web3-технологиями. Компонент поддерживает выбор различных "персон" пользователя, добавление кастомных параметров в URL, создание QR-кодов по произвольному URL, а также функции копирования ссылки, скачивания QR-кода и шаринга через Web API.

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

Описание компонента и его интерфейса

Компонент: QRCodeGenerator

Функциональный React-компонент.

Параметры (props)

• baseUrl?: string — базовый URL, который будет использоваться для генерации ссылки на демонстрацию. Если не задан, используется текущий origin окна браузера.

• persona?: string — идентификатор выбранной персоны для демонстрации (например, 'casual_gamer'). По умолчанию 'casual_gamer'.

• customParams?: Record<string, string> — объект с дополнительными параметрами, которые будут добавлены к URL в виде query-параметров.

Внутренние состояния (useState)

• qrCodeUrl: string — Data URL с изображением сгенерированного QR-кода.

• demoUrl: string — текущий URL демо, который отображается и копируется.

• copied: boolean — индикатор, что ссылка была скопирована в буфер обмена.

• selectedPersona: string — выбранная персона для демо.

• customUrl: string — URL для генерации кастомного QR-кода.

• isGenerating: boolean — индикатор процесса генерации QR-кода.

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

generateQRCode()

Асинхронная функция, генерирует QR-код для URL демонстрации с учетом выбранной персоны, кастомных параметров и базового URL.

• Формирует URL с параметрами: persona, mobile=true, demo=interactive и переданными customParams.

• Использует библиотеку qrcode для генерации Data URL изображения QR-кода.

• Обновляет состояния qrCodeUrl и demoUrl.

• Обрабатывает ошибки генерации и меняет индикатор загрузки isGenerating.

Пример использования: вызывается автоматически при изменении selectedPersona, customParams или baseUrl.

generateCustomQRCode()

Асинхронная функция для генерации QR-кода по пользовательскому URL, введенному в текстовое поле.

• Проверяет, что customUrl не пустой.

• Генерирует QR-код с теми же параметрами, что и основная генерация.

• Обновляет состояния qrCodeUrl и demoUrl.

• Обрабатывает ошибки и индикатор загрузки.

Пример использования: вызывается при нажатии кнопки "Generate" рядом с полем кастомного URL.

copyToClipboard()

Асинхронная функция копирует demoUrl в буфер обмена с помощью Web API navigator.clipboard.

• Устанавливает флаг copied = true на 2 секунды для отображения подтверждения.

• Логирует ошибки при неудаче.

Пример использования: вызывается при нажатии кнопки "Copy" рядом с URL.

downloadQRCode()

Функция инициирует скачивание изображения QR-кода как PNG-файла.

• Создает временную ссылку <a>, устанавливает атрибут download с именем файла, кликает по ней программно.

• Работает только если QR-код уже сгенерирован.

shareUrl()

Функция для шаринга ссылки на демонстрацию через API navigator.share (если поддерживается) или fallback — копирование ссылки в буфер.

• Передает в шаринг заголовок, текст и URL.

• Логирует ошибки при неудаче.

Работа с интерфейсом

• Выбор персоны: кнопки с тремя персонами (Alex, Jordan, Sam), каждая с цветовой индикацией.

• Отображение QR-кода: показывает загрузочный индикатор во время генерации, затем изображение QR-кода.

• URL демонстрации: поле с текущей ссылкой и кнопка копирования.

• Действия: кнопки скачивания QR-кода, шаринга, и открытия в новой вкладке.

• Кастомный QR-код: поле для ввода URL и кнопка генерации.

• Инструкции по использованию: пошаговое руководство для пользователей.

• Особенности демо: описание преимуществ и фич мобильного демо.

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

• Использует библиотеку qrcode для генерации QR-кодов.

• Использует иконки из lucide-react.

• Ориентирован на работу в клиентском окружении React (Next.js с 'use client').

• Может использоваться в любом месте приложения для быстрого создания QR-кодов на основе URL и параметров.

• Интегрируется с системой маршрутизации через базовый URL и параметры.

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

• Генерация QR-кода происходит при изменении выбранной персоны или параметров.

• Используется URLSearchParams для корректного формирования query-параметров.

• Высокий уровень отзывчивости UI: индикаторы загрузки, блокировка кнопок при генерации.

• Использование современных Web API: Clipboard API и Web Share API.

• Скачивание QR-кода реализовано через создание временной ссылки и программный клик.

• Обработка ошибок с выводом в консоль для отладки.

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

import QRCodeGenerator from './QRCodeGenerator';

function DemoPage() {
  return (
    <QRCodeGenerator 
      baseUrl="https://example.com"
      persona="power_user"
      customParams={{ utm_source: 'newsletter', campaign: 'summer' }}
    />
  );
}

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

componentDiagram
    QRCodeGenerator <|-- React.FC
    QRCodeGenerator : +props baseUrl?: string
    QRCodeGenerator : +props persona?: string
    QRCodeGenerator : +props customParams?: Record<string,string>
    QRCodeGenerator : -state qrCodeUrl: string
    QRCodeGenerator : -state demoUrl: string
    QRCodeGenerator : -state copied: boolean
    QRCodeGenerator : -state selectedPersona: string
    QRCodeGenerator : -state customUrl: string
    QRCodeGenerator : -state isGenerating: boolean
    QRCodeGenerator : +generateQRCode()
    QRCodeGenerator : +generateCustomQRCode()
    QRCodeGenerator : +copyToClipboard()
    QRCodeGenerator : +downloadQRCode()
    QRCodeGenerator : +shareUrl()

Итог

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