The Sandworms

Реализация игры Slither io использованием Canvas, Typescript и React

Проект создан в учебных целях в рамках курса Мидл фронтенд разработчик от Яндекс Практикума

---

Документация проекта

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

Утечки памяти

Технологии

Проект создан на базе:

• React
• React Router
• React Hook Form
• Redux
• RTK Query
• Typescript
• Vite
• SASS/SCSS
• Jest
• Browser API

Используемые Web API

• Canvas API - реализация движка игры.
• Full screen API - реализация полноэкранного режима.

Реализованный функционал

• Главная страница.
• Страница с игрой.
• Форум.
• Рейтинг игроков.

Запуск проекта

Все команды выполняются из корня проекта.

Команды запускают SPA сборку на 3000 порту.

Первичная настройка

1. Убедитесь что у вас установлен node.
2. Установите docker и docker-compose.
3. Установите yarn глобально.
4. Склонируйте репозиторий theSandworms и перейдите в каталог проекта.
5. Выполните команду yarn install
6. Выполните команду yarn bootstrap - обновление всех зависимостей

Режим разработки

yarn dev:client - запуск проекта для разработки в dev-режиме.

Сборка production

yarn build - команда выполняет сборку проекта.

Linters

yarn lint - проверка типов и стилей (eslint, stylelint).

Тесты

yarn test - запуск тестов.

Форматирование кода

yarn format - форматирование с помощью prettier. Данная команда автоматически запускается перед commit изменений в git.

Добавление зависимостей

yarn lerna add {your_dep} --dev --scope client

Флаг --dev для установки dev-зависимости.

Флаг --scope {PACKAGE_NAME} для выбора пакета (client или server).

Настройка переменных окружения

Значения переменных в .env:

CLIENT_PORT - номер порта клиента. Рекомендуемый порт 3000. SERVER_PORT - номер порта сервера. Рекомендуемый порт 3001. POSTGRES_USER - имя суперпользователя БД PostgreSQL. POSTGRES_PASSWORD - пароль суперпользователя БД PostgreSQL. POSTGRES_DB - имя БД PostgreSQL приложения при инициализации контейнера. POSTGRES_PORT - номер порта сервера PostgreSQL.

Развёртывания и управления приложениями средствами Docker

docker-compose up --build

Ссылка на видео с демонстрацией работоспособности и функциональности приложения (5-6 спринты)

text

Ссылка на видео с демонстрацией работоспособности и функциональности приложения (7-8 спринты)

text