GALAXY SPACESHIP🚀

Учебный командный проект, разработанный в рамках курса Мидл фронтенд разработчик
Реализация веб-игры, похожей на Space Invaders или Arkanoid
Сайт задеплоен на сервисе Яндекс.Облако

Механика игры

Представьте, что вы попали в открытый космос...какие там водятся обитатели? 👽👽👽
Мы представляем наш личный взгляд на пришельцев, которых можно там встретить (они достаточно милые, просто слегка кровожадные)
Цель игры - перестрелять как можно больше космических монстров и набрать за это как можно больше очков.
Изначально игроку даётся три жизни. При столкновении с пулей врага - забирается одна жизнь, при столкновении с астероидом или сеткой врагов - все жизни.
Но не отчаивайтесь! В игре в рандомное время появляются бонусы, которые могут прибавить жизнь (или восстановить ее полностью) или предоставить ещё какие-нибудь плюшки наподобие щита или режима кибер-атаки⚡
Для движения корабля необходимо использовать стрелки вправо-влево, для стрельбы - пробел.
Если хотите поставить игру на паузу - нажмите Esc: откроется меню, где вы можете посмотреть набранные очки, прочитать правила еще раз, возобновить игру или выйти из неё.
Желаем удачи!

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

• Игра с ее механикой
• Бэкенд и фронтенд форума, возможность создавать топики и комментарии к ним, оставлять реакции
• Бэкенд и фронтенд темизации, возможность переключения темы и сохранение ее на сервере
• Авторизация и регистрация пользователя через backend Яндекса
• Возможность просмотра и извменения профиля через бэкенд Яндекса
• Просмотр и обновление рейтинга игроков
• Возможность играть offline

Стек технологий

• TypeScript
• React
• React Router
• Material UI
• Formik
• Yup
• RTK Query
• Redux Toolkit
• Redux Persist
• Express
• Postgres
• Sequelize
• Axios
• Jest
• OAuth
• Docker
• Yandex Cloud
• Prettier
• Eslint
• Vite
• Service Workers
• SSR

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

• Canvas API - основа игры
• Web Audio API - для звукового сопровождения игры
• Fullscreen API - для возможности играть в FullScreen режиме
• Drag and Drop API - для удобства загрузки аватара в профиль
• Cache API - кэширование файлов для работы offline

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

Как запускать через docker?

1. Убедитесь что у вас установлен node версии 16.20.2 или больше и docker
2. Выполните команду yarn bootstrap
3. Выполните команду docker compose build
4. Выполните команду docker compose up
5. Вы великолепны!

Как запускать вручную (c SSR и базой данных)?

1. Установка пакетов и инициализация проекта

   yarn bootstrap

2. Запуск базы данных через docker

   docker compose up postgres

3. Миграция базы данных

   yarn migrate

4. Сборка клиента

   yarn build:client

Для development:

5. Запуск проекта в режиме разработки (с hot reloading)

   yarn dev

Для production:

5. Сборка сервера

   yarn build:server

6. Запуск проекта в режиме продакшен

   yarn preview

Открыть в браузере http://localhost:8000/

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

Для клиента используется react-testing-library

Для тестирования введите команду yarn test

Наши тесты написаны на снапшотах, поэтому если написано что-то новое (обычно в верстке) - необходимо обновить нужный снапшот. Есть два варианта: cd packages/client yarn test:file **/{название файла с тестом} -u Или в интерактивном режиме: cd packages/client yarn test --watch

Линтинг

yarn lint

Форматирование prettier

yarn format

Lefthook

При коммите производится проверка отмеченных для коммита файлов с помощью eslint и форматирование с помощью prettier