RulesPage.tsx

Обзор

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

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

Подробное описание

Компонент `RulesPage`

const RulesPage: React.FC<RulesPageProps> = ({ onBackToSettings }) => { ... }

Назначение

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

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

Имя	Тип	Описание
`onBackToSettings`	`() => void`	Функция обратного вызова, вызываемая при нажатии кнопки "закрыть" для возврата в интерфейс настроек.

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

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

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

<RulesPage onBackToSettings={() => setShowRules(false)} />

В примере выше setShowRules — состояние, управляющее видимостью страницы с правилами. При нажатии на кнопку закрытия вызывается onBackToSettings, скрывая страницу.

Структура компонента

Внешний контейнер с классом rules-page.
Хедер страницы (rules-page-header):
- Заголовок (h1) с текстом "Game Rules".
- Кнопка закрытия (close-rules-button), при нажатии которой вызывается onBackToSettings.
Контейнер с прокруткой (rules-scroll-container), внутри которого рендерится компонент RulesTab.

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

Компонент RulesTab — отвечает за отображение детального содержимого правил игры. Он инкапсулирует логику и разметку самой инструкции или описания игровых механик.
Родительский компонент, скорее всего, SettingsTab или другое место в UI, из которого вызывается RulesPage. Передаёт в RulesPage функцию onBackToSettings для возврата к предыдущему экрану.
В рамках общей архитектуры модуля "Обучение и поддержка игрока" RulesPage служит страницей справочной информации, связанной с обучением игроков.

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

Используется функциональный компонент React.FC с типизацией пропсов через интерфейс RulesPageProps.
Обработчик onBackToSettings привязан к кнопке закрытия, что обеспечивает единообразный способ возврата в настройки.
Для стилизации применяются CSS-классы: rules-page, rules-page-header, rules-page-title, close-rules-button, close-icon, rules-scroll-container.
Компонент не содержит внутреннего состояния и полностью управляется через пропсы.

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

import React, { useState } from 'react';
import RulesPage from './RulesPage';

const SettingsTab = () => {
  const [showRules, setShowRules] = useState(false);

  return (
    <>
      {showRules ? (
        <RulesPage onBackToSettings={() => setShowRules(false)} />
      ) : (
        <button onClick={() => setShowRules(true)}>Показать правила</button>
      )}
    </>
  );
};

В этом примере при нажатии на кнопку происходит показ страницы с правилами. При нажатии на крестик внутри RulesPage происходит возврат к интерфейсу настроек.

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

componentDiagram
    component RulesPage {
      +onBackToSettings: () => void
      +render()
    }
    component RulesTab

    RulesPage --> RulesTab : рендерит
    RulesPage o-- "button.close-rules-button" : кнопка закрытия
    RulesPage o-- "div.rules-page-header" : заголовок страницы
    RulesPage o-- "div.rules-scroll-container" : контейнер с правилами

Итог

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