App.css

Обзор

Файл App.css представляет собой основной каскадный файл стилей для веб-приложения, обеспечивающий визуальное оформление, адаптивность и пользовательский опыт. Он содержит:

• Определения CSS-переменных для цветовой палитры, шрифтов, отступов, размеров и анимаций.

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

• Поддержку доступности (accessibility) с улучшенными фокусами и скрытым содержимым для экранных читалок.

• Медиазапросы для адаптации интерфейса под широкий спектр устройств — от больших мониторов до мобильных экранов.

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

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

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

Структура и основные блоки стилей

CSS-переменные (:root)

Определены базовые переменные для цветов (золото, синий, темный фон и пр.), размеров шрифтов, отступов, размеров и анимаций.

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

color: var(--secondary-gold);
padding: var(--spacing-md);
font-size: var(--font-size-lg);

Это упрощает поддержку, масштабирование и настройку тем оформления.

Общие стили

• Сброс отступов и размеров через * { margin: 0; padding: 0; box-sizing: border-box; }.

• Скрытие полос прокрутки для всех элементов с сохранением прокрутки.

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

• Основные стили для html и body задают высоту, фон и шрифты.

Компоненты интерфейса

Кнопки

• .btn-primary, .btn-secondary, .battle-btn, .secondary-btn — стилизация с градиентами, тенями, изменениями при наведении, активном состоянии и отключении.

• .toggle-button и .toggle-switch — для переключателей с разными состояниями (включено/выключено).

• .compact-action-btn — компактные кнопки действий с разным стилем для уровней и улучшений.

Карточки

• .card, .profile-card, .stat-card, .achievement-card-modern, .collectible-card, .elemental-card — визуальные блоки с полупрозрачным фоном, размытием, тенями и радиусами скруглений.

• Включают анимации при наведении и уникальные стили для разных редкостей (common, rare, epic, immortal).

• Особые эффекты для границ и свечения в зависимости от элемента и редкости.

• .card-artwork и .artwork-image — область для отображения изображения или эмодзи персонажа/элемента.

Профиль

• .profile-header, .profile-header-modern, .profile-container, .profile-hero — стили для отображения информации пользователя, включая аватар, имя, уровень, маны и ранга.

• Используются эффекты размытия, градиенты и тени для выделения элементов.

Боевая секция

• .battle-section, .battle-display, .battle-choice, .battle-emoji, .battle-vs, .battle-btn — стили для боевых интерфейсов с анимациями пульсации, градиентами и тенями.

• .battle-navigation — навигационные кнопки для боя.

• Анимации battlePulse, battle-intro, эффекты для выбора и отображения боя.

Элементы и элементали

• .element-grid, .elemental-grid, .element-btn, .elemental-btn — сетки и кнопки для выбора элементов с визуальными эффектами, подсветкой и состояниями (выбран, на откате).

• Специфичные стили для редкостей и элементов.

• Индикаторы прогресса, уровней и защиты.

Модальные окна и настройки

• .modal-overlay, .modal, .settings-menu, .settings-overlay — стили для модальных окон и меню настроек с эффектами размытия и плавным появлением.

• Контролы настроек: переключатели, слайдеры громкости, кнопки сохранения.

• Скроллбар с кастомным стилем.

Учебные подсказки и оверлеи

• .tutorial-overlay, .tutorial-tooltip, .tutorial-step-tooltip — стили для пошаговых подсказок, включая затемнение фона и выделение элементов.

• Анимации пульсации и плавных появлений.

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

Коллекция и статистика

• .collection-container, .collection-header, .collection-filters, .collectible-card, .stats-grid-modern — стили для отображения коллекций, фильтров и статистики игрока.

• Адаптивные сетки и карточки с деталями персонажей, с анимациями и эффектами свечения.

Медиа-запросы (адаптивность)

Файл содержит множество медиазапросов, обеспечивающих поддержку экранов различных размеров:

• От ультра-мобильных (<360px) до десктопных (>1024px).

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

• Поддержка особенностей платформ (iOS Safari, Android Chrome).

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

Анимации

Определены ключевые кадры для анимаций:

• battlePulse, pulse, slide-in-left/right, fade-in, tutorialPulse, golden-shimmer, levelUpVibration, shine и многие другие.

• Используются для плавных переходов, эффекта пульсации, мерцания, подсветки и др.

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

• Использование CSS-переменных упрощает темизацию и масштабирование.

• Продуманная поддержка доступности: улучшенные фокусы, скрытый текст для экранных читалок.

• Сложное взаимодействие с React-компонентами и динамическим содержимым (например, динамический текст уровня добавляется через React).

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

• Поддержка различных состояний кнопок и карточек (на откате, выбранные, заблокированные).

• Стилизация различных игровых механик — мана, защита, прогресс, достижения.

• Интерактивные элементы имеют плавные анимации и визуальные отклики.

• Многоуровневая адаптивность для разных устройств и предпочтений пользователей.

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

• React-компоненты используют классы и стили из этого файла для рендеринга UI-элементов (карточек, кнопок, модалей, боевых сцен и т.д.).

• JavaScript/TypeScript код динамически добавляет и убирает классы (например, .selected, .on-cooldown, .active), контролируя визуальный статус компонентов.

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

• Стили для модальных окон и оверлеев взаимодействуют с системами управления состоянием модальных окон и обучающих подсказок.

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

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

<button className="btn-primary" disabled={isDisabled}>
  Играть
</button>

<div className="profile-card">
  <div className="profile-header">
    <div className="profile-avatar">👤</div>
    <div className="profile-info">
      <h2 className="player-name">Игрок 1</h2>
      <p className="player-title">Воин</p>
    </div>
  </div>
</div>

<div className="element-grid">
  <button className="element-btn selected">🔥</button>
  <button className="element-btn">💧</button>
</div>

Визуальная диаграмма структуры файла

flowchart TD
    A[App.css] --> B[CSS-переменные :root]
    A --> C[Общие стили и сброс]
    A --> D[Компоненты интерфейса]
    D --> D1[Кнопки (btn-primary, toggle-button)]
    D --> D2[Карточки (card, profile-card, collectible-card)]
    D --> D3[Профиль (profile-header, profile-container)]
    D --> D4[Боевая секция (battle-section, battle-btn)]
    D --> D5[Элементы и элементали (element-grid, elemental-grid)]
    D --> D6[Модальные окна и настройки (modal, settings-menu)]
    D --> D7[Учебные подсказки (tutorial-overlay, tutorial-tooltip)]
    D --> D8[Коллекция и статистика (collection-container, stats-grid)]
    A --> E[Медиазапросы и адаптивность]
    A --> F[Анимации и ключевые кадры]
    A --> G[Доступность и UX улучшения]

Заключение

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