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 версии и docker
2. Выполните команду yarn bootstrap
3. Выполните команду docker compose build
4. Выполните команду docker compose up
5. Вы великолепны!

Как запускать SSR вручную?

Для development:

1. cd packages/client
2. yarn build:ssr
3. yarn build
4. cd ../server
5. yarn dev Открыть в браузере http://localhost:8000/

Для production:

1. cd packages/client
2. yarn build:ssr
3. yarn build
4. cd ../server
5. yarn build
6. yarn preview Открыть в браузере http://localhost:8000/

Как запускать Backend вручную?

После 3 пункта верхних инструкций делаем следующее:

1. В корне проекта вызываем docker compose up postgres
2. Переходим в папку сервера cd packages/server
3. Накатываем миграции node migrate up
4. Далее следуем по верхним инструкциям

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

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

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

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

Линтинг

yarn lint

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

yarn format