! Код для создания персонажа в Three.js и ассеты для этого взяты из проекта в публичном доступе https://github.com/wass08/r3f-ultimate-character-configurator Стэк разработки - React, Mantine, React-hook-form, zod, zustand
В проэкте реализован основной функционал, также имеются экстрафичи
- Добавление тренировки в google календарь. На странице тренировок пользователь имеет несколько кнопок взаимодействия. Чтобы запланировать тренировку в google календарь нужно нажать на три точки -> запланировать. Перед пользователем появится модальное окно с DataPicker, в котором он может выбрать день, а также ввести время для тренировки. Для удобства в тренировка планируется на час. После подтвреждения пользователем даты и времени его переносит в гугл календарь где он может вписать подробности и сохранить эту дату.
- Аватара есть характеристики голода и жажды. Данные поля влияют на получение опыта и игровой валюты. Если голод или жажда падает ниже 30 процентов у пользователя отнимают часть получаемых денег за тренировку и другие активности.
- Ящики. Пользователь не может просто так купить аватару новые модели, ему нужно их выбивать посредством открытия ящиков. ящики делять по группам модели которых от туда могут выпасть. Каждый ящик стоит 100 монет.
- Drag-n-drop в создании тренировок позволяет пользователю с большим удобством создавать тренировки. Для того чтобы поменять местами карточки упражнений нужно потянуть за иконку с шести точками в верх карточки.
Реализованы все основные механики.
Структура Проект имеет модульную структуру, сложные компонент декомпозированы на более мелкие. Созданы много кастомных хуков. Сайт полностью адаптивен и расчитан для пользователей с любых поддерживаемых платформ.
Для начала взаимодействия с платформой пользователю нужно зарегистрироваться, без этого он не сможет зайти ни на одну страницу, кроме стартовой. Пользователю предлагается ввести основные параметры тела и также его стремление к занятиям. Дальше эти данные используются для создания персональных тренировок.
Каталог упражнений реализован в соответствии с ТЗ. Пользователь имеет 15 начальных упражнений и может создавать новые. Все данные хранятся в indexedDb (потребовалось для хранения больших данных, таких как фотографии) Все поля для упражнения провалидированы и подсказывают пользователю, если тот ошибся.
Конструктор тренировок: Пользователь может создавать тренировки самостоятельно, а может и заполнить автоматически по выбранным тегам, а также можно установить максимальное количество для тренировок. В тренировках можно изменять порядок с помощью захвата карточек. Для удоства пользователя используются карточки упражнений идентичные из каталога упражнений. Пользователь может сохранить тренировку или использовать ее единажды
Каталог тренировок: Пользователь может средактировать, удалить или запланировать тренировку (см. выше). при редактировании порядок и параметры сохраняются.
Запуск тренировок: Польностью соответствует ТЗ. пользователь имеет три типа заданий. Временное ( с таймером ), колличественное и весовое. Для удобства пользователь может одним кликом посмотреть на инструкции к упранению, а также видит прогресс бар, который сообщает ему о том, сколько еще осталось до конца (в частях) Упражнения с таймером можно запустить и сбросить для них таймер, чтобы попробовать еще раз. Между упражнениями пользователь должен отдохнуть, но может пропустить этот шаг ! если пользователь не выполняет какие либо упражнения, то в конце статистика по ним не покажется (это логично). Также по окончании тренировки пользователь получает опыт, зависящий от сложности и количества упражнений.
Аватар: Полностью геймифицирован. Реализован с помощью three js и оберткой для react - fiber Пользователь может выбрать пол персонажа Персонажа надо кормить, можно одевать в разные скины, а также следить за его прогрессом. Прогресс происходит по следующему сценарию. Пользователь выполняет тренировки, а мы высчитываем их итенсивность и сопоставляем с моделькой персонажа (более худой или толстой) и выдаем ее. Также профиль можно редактировать (на странице аватара)
Для тестирования предлагается меню теста в хедере.