StartPage.tsx

Обзор

Компонент StartPage.tsx представляет собой стартовую страницу веб-приложения, реализованную с использованием React и TypeScript. Его основная задача — предоставить пользователю приветственный интерфейс с анимациями и интерактивными эффектами, а также обеспечить запуск игры через кнопку "Start Game". Компонент динамически загружает и инициализирует внешние библиотеки анимаций (GSAP и AOS), создает визуальные частицы и реализует плавные переходы и реакции на взаимодействия пользователя (наведение мыши, клик, движение мыши). Также предусмотрена кнопка входа через социальные сети с сопутствующими анимациями.

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

Интерфейс StartPageProps

interface StartPageProps {
  onStartGame: () => void;
}

• onStartGame: функция обратного вызова, вызываемая при запуске игры (нажатие кнопки "Start Game").

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

Компонент StartPage

const StartPage: React.FC<StartPageProps> = ({ onStartGame }) => { ... }

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

Внутренние переменные и ссылки

• containerRef — ссылка на главный контейнер страницы.

• logoRef — ссылка на элемент с логотипом для анимаций.

• particlesRef — ссылка на контейнер для частиц.

Жизненный цикл и загрузка библиотек

useEffect(() => {
  const loadScripts = async () => { ... };
  loadScripts();

  return () => {
    if (window.gsap) {
      window.gsap.killTweensOf('*');
    }
  };
}, []);

• При монтировании компонента асинхронно загружаются внешние библиотеки GSAP и AOS, если они ещё не загружены.

• После загрузки вызывается initializeAnimations().

• При размонтировании останавливаются все GSAP-анимации.

Функция initializeAnimations

const initializeAnimations = () => { ... };

• Инициализирует анимации с помощью AOS (Animate On Scroll) и GSAP.

• Настраивает параметры анимации AOS: длительность, однократность, easing.

• Создает частицы через вызов createParticles.

• Запускает последовательность анимаций через GSAP timeline:

  • Анимация логотипа (масштаб, вращение)

  • Появление кнопок соц. входа и социальных иконок

  • Появление кнопки "Start Game"

• Запускает обработку интерактивных эффектов setupInteractiveEffects.

Функция createParticles

const createParticles = () => { ... };

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

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

• Частицы добавляются в контейнер, на который указывает particlesRef.

Функция setupInteractiveEffects

const setupInteractiveEffects = () => { ... };

• Добавляет интерактивные эффекты к логотипу:

  • Реакция на движение мыши: наклон логотипа по осям X и Y с помощью GSAP.

  • При наведении мыши — масштабирование и усиление тени.

  • При уходе мыши — возврат к исходным параметрам.

  • При клике — анимация уменьшения и возврата масштаба, а также создание эффекта "рябь" (createRippleEffect).

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

• Возвращает функцию очистки обработчиков (хотя вызов этой функции не происходит в текущей реализации).

Функция createRippleEffect

const createRippleEffect = (e: MouseEvent) => { ... };

• Создает элемент "рябь" (круг с анимацией масштабирования и затухания) в точке клика мыши.

• Использует GSAP для анимации увеличения размера и уменьшения прозрачности.

• После завершения анимации удаляет элемент из DOM.

Обработчик handleStartGameClick

const handleStartGameClick = () => { ... };

• Обрабатывает нажатие на кнопку запуска игры.

• Выполняет анимацию нажатия кнопки с помощью GSAP.

• Изменяет текст кнопки на "Starting..." и добавляет CSS-класс для пульсирующей анимации.

• Запускает эффект увеличения и затухания частиц вокруг.

• Через 800 мс вызывает onStartGame для запуска игры.

Обработчик handleSocialLogin

const handleSocialLogin = () => { ... };

• Обрабатывает нажатие кнопки входа через социальные сети.

• Выполняет анимацию нажатия кнопки.

• Анимирует появление контейнера с иконками соцсетей.

• Создает эффект частиц вокруг кнопки.

JSX-разметка

Компонент рендерит следующие основные части:

• Фоновое изображение с наложением (overlay).

• Жидкостный стеклянный эффект (div с классом start-liquid-glass).

• Контейнер с частицами (start-particles-container).

• Логотип игры (start-logo-container) с анимацией AOS.

• Кнопка входа через соцсети (start-social-login-button) с анимацией AOS.

• Иконки соцсетей (Telegram, YouTube, X) с внешними ссылками.

• Кнопка запуска игры (start-game-button) с анимацией AOS.

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

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

• Использует внешние библиотеки GSAP и AOS, загружаемые динамически.

• Содержит ссылки на ресурсы (логотип, фон) из папки /resources.

• Социальные иконки ведут на официальные страницы проекта в Telegram, YouTube и X.

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

• Динамическая загрузка скриптов и стилей через DOM-элементы <script> и <link>, что позволяет не включать библиотеки в основной бандл и загружать их только при необходимости.

• Использование GSAP для создания сложных анимаций с таймлайнами и плавными переходами.

• Использование AOS для анимаций при появлении элементов на экране.

• Частицы создаются как DOM-элементы с рандомными позициями и анимациями для создания эффекта живой динамики.

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

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

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

import React from 'react';
import StartPage from './StartPage';

const App = () => {
  const handleGameStart = () => {
    console.log('Игра запущена');
    // Здесь логика перехода на игровой экран
  };

  return <StartPage onStartGame={handleGameStart} />;
};

export default App;

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

componentDiagram
    StartPage <|-- React.FC

    StartPage : +props.onStartGame()
    StartPage : -containerRef: HTMLDivElement
    StartPage : -logoRef: HTMLImageElement
    StartPage : -particlesRef: HTMLDivElement
    StartPage : +useEffect(loadScripts)
    StartPage : +initializeAnimations()
    StartPage : +createParticles()
    StartPage : +setupInteractiveEffects()
    StartPage : +createRippleEffect(event)
    StartPage : +handleStartGameClick()
    StartPage : +handleSocialLogin()

    StartPage --> GSAP[GSAP (Animation Library)]
    StartPage --> AOS[AOS (Animate On Scroll)]
    StartPage --> DOM[DOM Elements (logo, particles, buttons)]

Итог

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