Задача

Требуется реализовать фронтенд для игры Roll Towers с акцентом на качественную анимацию и строгую адаптацию под мобильные устройства.

Стек и ключевые требования

Разрешено использовать:

  • Чистый Vanilla JS / React / VueJs (на выбор)
  • TailwindCSS или SCSS для стилизации
  • SVG или WebP для статики (ипользуйте всё это в графике)
  • GSAP для анимаций башенок, баннеров, палочек
  • Howler.js для управления всеми звуками

Адаптивность и ориентация

  • Адаптивная верстка без использования графического скейлинга (через grid).
  • Только портретный режим; альбом принудительно блокируется.
  • При повороте гаджета - на весь экран показывается анимация с пиктограммой и текстом 'Поверните телефон вертикально'.

Инфраструктурные моменты

  • Код форматирован по ESLint + Prettier.
  • Использовать Docker для единообразной сборки (создай docker-файл для контейнеризации).
  • Обязательно настроен CI/CD с автотестами вся релизного цикла.

Анимации.

  • Подвисшие блоки падают с присадкой или скольжением/ колыханиями (GSAP).
  • Баннеры - с 'roll-out' эффектом или поочередным включением слева-направо или zoom-in.
  • Все действия сопровождаются кратковременными звуками (через Howler).
  • Паттерн анимации должен выглядеть плавно, минимум резких переключений.

Программные проверки корректным.

  • Запуск верстки.и 100% проверка максимальной breakpoint ширину в 480px чтобы ничего не «плыло».
  • JavaScript - непрерывное полное проятие main point логики игры (мягкая проверка типов).
  • Тесты GPU-friendly.