SettingsMenu.tsx

Обзор файла

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

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

Интерфейс `SettingsMenuProps`

Определяет свойства, которые принимает компонент SettingsMenu.

Свойство	Тип	Описание
`isOpen`	`boolean`	Флаг, определяющий, открыт ли меню настроек
`onClose`	`() => void`	Функция закрытия меню
`musicVolume`	`number`	Текущий уровень громкости музыки в диапазоне от 0 до 1
`onMusicVolumeChange`	`(volume: number) => void`	Callback для изменения уровня громкости
`onOpenRules?`	`() => void` (опционально)	Callback для открытия правил игры (если есть)
`onResetCache`	`() => void`	Callback для сброса кеша и данных игры

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

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

Параметры

Принимает пропсы, описанные в интерфейсе SettingsMenuProps.

Локальное состояние

previousVolume (number): хранит предыдущий уровень громкости до отключения звука.
isMuted (boolean): флаг, указывающий, находится ли звук в режиме отключения.

Основные методы и логика

useEffect для управления классом body
При открытии меню добавляет класс modal-open к <body>, предотвращая прокрутку страницы. При закрытии — удаляет этот класс.
handleVolumeClick
Обрабатывает клик по значению громкости. При включенном mute восстанавливает предыдущую громкость, при выключенном — сохраняет текущую громкость и устанавливает громкость в 0.
Обработка слайдера громкости
Значение громкости переводится из диапазона 0-100 в 0-1. При изменении слайдера вызывается onMusicVolumeChange, а также обновляется состояние isMuted, если громкость стала больше 0.
Условный рендеринг
Если меню не открыто (isOpen === false), компонент возвращает null и не отображается.

Структура JSX

Обертка с классом settings-overlay, при клике на которую меню закрывается (onClose).
Внутренний контейнер settings-menu с остановкой всплытия клика.
Заголовок с кнопкой закрытия.
Блок настроек музыки с иконкой, слайдером и кликабельным процентным значением.
Кнопка для просмотра правил игры (если передан onOpenRules).
Кнопка для сброса кеша с подтверждением через window.confirm.

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

<SettingsMenu
  isOpen={isSettingsOpen}
  onClose={() => setIsSettingsOpen(false)}
  musicVolume={currentVolume}
  onMusicVolumeChange={(vol) => setCurrentVolume(vol)}
  onOpenRules={() => openRulesModal()}
  onResetCache={() => resetGameData()}
/>

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

Использование локального состояния previousVolume позволяет реализовать удобное поведение переключения звука без потери предыдущего уровня громкости.
Управление классом modal-open у <body> предотвращает прокрутку контента страницы при открытом меню.
Принцип разделения ответственности: родительский компонент управляет состоянием громкости и открытием/закрытием меню, SettingsMenu — предоставляет UI и логику переключения.
При сбросе кеша используется встроенный диалог подтверждения браузера для предотвращения случайных действий.

Взаимодействие с системой

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

Диаграмма компонентов

Ниже представлена диаграмма компонентов, отражающая структуру и ключевые взаимодействия внутри SettingsMenu:

componentDiagram
    component SettingsMenu {
        +props: SettingsMenuProps
        +state: previousVolume: number
        +state: isMuted: boolean
        +useEffect(handleBodyClass)
        +handleVolumeClick()
        +render()
    }

    SettingsMenu --|> React.FC

    SettingsMenu o-- "props.isOpen" : boolean
    SettingsMenu o-- "props.onClose" : () => void
    SettingsMenu o-- "props.musicVolume" : number
    SettingsMenu o-- "props.onMusicVolumeChange" : (volume: number) => void
    SettingsMenu o-- "props.onOpenRules?" : () => void
    SettingsMenu o-- "props.onResetCache" : () => void

Заключение

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