2048 Game - Next.js

Современная реализация классической игры 2048, построенная на Next.js с TypeScript и SCSS.

🎮 Особенности

• Современный UI/UX с плавными анимациями и отзывчивым дизайном
• 5 уникальных тем (GIF, Neon, Sunset, Forest, Classic)
• TypeScript для типобезопасности
• SCSS модули для стилизации
• Jest тесты для надежности кода
• CSS Variables для динамического переключения тем

🚀 Быстрый старт

Установка зависимостей

npm install

Разработка

npm run dev

Откройте http://localhost:3000 в браузере.

Сборка для продакшена

npm run build
npm start

Тестирование

# Запуск всех тестов
npm test

# Тесты в режиме наблюдения
npm run test:watch

# Тесты с покрытием
npm run test:coverage

🎯 Управление

• Клавиатура: Стрелки (↑↓←→)
• Свайпы: На мобильных устройствах
• Мышь: Клик по кнопкам

🎨 Темы

1. GIF Theme - Анимированные GIF плитки
2. Neon Theme - Неоновые цвета с градиентами
3. Sunset Theme - Теплые закатные тона
4. Forest Theme - Природные зеленые оттенки
5. Classic Theme - Классическая оригинальная тема

📱 PWA Возможности

• Установка на устройство как нативное приложение
• Оффлайн режим - игра работает без интернета
• Кэширование ресурсов для быстрой загрузки
• Адаптивные иконки для всех размеров экранов

🏗️ Архитектура

src/
├── components/          # React компоненты
│   ├── Board/          # Игровая доска
│   ├── Tile/           # Плитки (GIF версия)
│   ├── ColoredTile/    # Плитки (цветная версия)
│   ├── EmptyTile/      # Пустые ячейки
│   ├── ScoreCounter/   # Счетчик очков
│   ├── BestScore/      # Лучший счет
│   ├── NewGameButton/  # Кнопка новой игры
│   ├── RightPanel/     # Правая панель
│   └── ThemeSelector/  # Выбор темы
├── hooks/              # React хуки
│   ├── useTheme.ts     # Управление темами
│   └── useThemeStyles.ts # Стили тем
├── utils/              # Утилиты
│   ├── gameLogic.ts    # Логика игры
│   ├── useSwipe.ts     # Свайп жесты
│   └── types.ts        # TypeScript типы
├── styles/             # Глобальные стили
├── theme/              # Конфигурация тем
└── pages/              # Next.js страницы

🧪 Тестирование

Проект включает полный набор тестов для игровой логики:

• Инициализация доски
• Добавление новых плиток
• Движение плиток во всех направлениях
• Слияние плиток
• Проверка окончания игры
• Утилитарные функции

🎨 CSS Variables

Проект использует CSS Variables для динамического переключения тем:

:root {
	--app-bg: #57407c;
	--title-color: #ffffff;
	--board-bg: transparent;
	--board-border: #6b46c1;
	--empty-tile-bg: #3d2963;
	--score-counter-bg: linear-gradient(135deg, #6b46c1 0%, #805ad5 100%);
	/* ... и другие переменные */
}

🔧 Технологии

• Next.js 14 - React фреймворк
• TypeScript - Типизация
• SCSS Modules - Стилизация
• Jest + Testing Library - Тестирование
• Service Worker - PWA функциональность
• CSS Variables - Динамические темы
• Framer Motion - Анимации