Обучение и поддержка игрока

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

Основные компоненты модуля

1. Пошаговые туториалы (StepByStepTutorial.tsx и TutorialTooltip.tsx)

Концепция и назначение

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

Как работает StepByStepTutorial

Компонент StepByStepTutorial реализует интерактивный туториал с подсветкой элементов и позиционированными подсказками (tooltip). Он:

• Принимает набор шагов (TutorialStep[]), каждый из которых содержит:

  • Идентификатор шага (id)

  • CSS-селектор для подсветки элемента (targetSelector)

  • Заголовок и описание шага

  • Фазу игры, в которой актуален шаг (phase)

  • Позицию подсказки относительно элемента (position)

  • Флаг необходимости действия пользователя (actionRequired)

  • Механизм перехода к следующему шагу (triggerNext — клик по элементу или автопереход)

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

• Поддерживает логику перехода между шагами:

  • Автоматический переход через таймаут для информационных шагов

  • Переход по клику на выделенный элемент, если требуется действие пользователя

• Управляет классами CSS для затемнения фона (tutorial-active) и подсветки целевого элемента (tutorial-target).

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

// Пример описания шага туториала
{
  id: 'element-select',
  targetSelector: '.element-grid .element-btn.focused',
  title: 'Step 2: Choose Element',
  description: 'Click on Fire to select it!',
  phase: 'elementSelection',
  position: 'bottom',
  actionRequired: true,
  triggerNext: 'click',
}

Особенности StepByStepTutorial

• Реагирует на динамическое появление элементов (например, ожидание рендера сетки элементалей).

• Использует ResizeObserver и requestAnimationFrame для плавного и точного позиционирования подсветки и подсказок.

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

Компонент TutorialTooltip

В дополнение к StepByStepTutorial существует более простой компонент TutorialTooltip, который отображает последовательность подсказок без подсветки элементов. Он служит для общих обучающих сообщений и может использоваться для других разделов, например, коллекции.

2. Уведомления о достижениях (AchievementNotification.tsx)

Назначение

Компонент отвечает за отображение коротких всплывающих уведомлений при получении игроком нового достижения. Это повышает вовлечённость и информирует пользователя о прогрессе.

Принцип работы

• При появлении уведомления оно плавно показывается (через изменение состояния isVisible).

• Через 4 секунды уведомление автоматически скрывается.

• После скрытия вызывается коллбэк onDismiss для удаления уведомления из состояния.

// Структура уведомления
<div className={`achievement-notification ${isVisible ? 'show' : ''}`}>
  <div className='achievement-popup'>
    <div className='achievement-popup-icon'>{achievement.icon}</div>
    <div className='achievement-popup-text'>
      <div className='achievement-popup-title'>Achievement Unlocked!</div>
      <div className='achievement-popup-name'>{achievement.name}</div>
      <div className='achievement-popup-desc'>{achievement.desc}</div>
    </div>
  </div>
</div>

3. Настройки и справка (SettingsTab.tsx и RulesPage.tsx)

Назначение

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

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

• Регулировка громкости музыки с визуальной индикацией уровня.

• Кнопка для открытия страницы с правилами игры (RulesPage).

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

• Кнопка для сброса всех игровых данных с подтверждением.

Компонент RulesPage

Отображает подробные правила игры с возможностью возврата в настройки.

Взаимодействие компонентов и логика работы модуля

• Компонент SettingsTab служит точкой доступа к обучению и справке, позволяя пользователю самостоятельно запускать нужный туториал (onShowBattleTutorial, onShowCollectionTutorial).

• При активации туториала в StepByStepTutorial или TutorialTooltip происходит последовательное отображение шагов, подсветка элементов и блокировка интерфейса, чтобы направлять внимание пользователя.

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

• Все эти компоненты интегрированы в корневой компонент приложения и взаимодействуют с остальными частями через пропсы и состояние.

Визуализация работы пошагового туториала

sequenceDiagram
    participant User as Игрок
    participant UI as Интерфейс
    participant Tutorial as StepByStepTutorial
    participant DOM as DOM-элементы страницы

    User->>UI: Запускает туториал через настройки
    UI->>Tutorial: Активирует с набором шагов
    Tutorial->>DOM: Ищет целевой элемент (targetSelector)
    DOM-->>Tutorial: Возвращает элемент
    Tutorial->>DOM: Подсвечивает элемент, отображает подсказку
    User->>DOM: Кликает на выделенный элемент (если требуется)
    DOM->>Tutorial: Передаёт событие клика
    Tutorial->>Tutorial: Переходит к следующему шагу
    Tutorial->>DOM: Обновляет подсветку и подсказку
    loop Повторяется для всех шагов
    Tutorial->>UI: Сообщает о завершении
    UI->>User: Убирает туториал, разблокирует интерфейс

Ключевые особенности модуля "Обучение и поддержка игрока"

• Интерактивность: Подсветка и позиционирование подсказок направляют пользователя в процессе обучения.

• Гибкость: Шаги туториала можно изменять и расширять, задавая разные фазы и требования к действиям.

• Доступность: Включает инструкции по навигации с клавиатуры и упрощённые подсказки.

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

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

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