Мы создаём Конные скачки на Реакт!
Прочитай задание до конца чтобы правильно спроектировать приложение.
(Совет: Делай комиты только работающего кода)
Создаём навигационное меню из трёх страниц
Game - здесь будет находиться главный функционал игры Конные скачки.
Profile - на этой странице будем выводить текущий капитал пользователя.
Pictures - страница, где будут приятные картинки (чтобы снять напряжение от игры).
Сами страницы пока оставляем пустыми. Начнём их заполнять в следующих релизах.
На странице Game выводим список из 4 лошадей
Информация о каждой лошади, должна быть в отдельном компоненте, в котором есть поле ввода суммы ставки и две кнопки "Сделать ставку" и "Снять ставку".
По желанию можно использовать библиотеку faker.js для генерации случайных имен лошадей:
Возможность делать ставки
Пользователь может делать ставки максимум на 2 лошади.
Общая сумма ставок пользователя и их количество нужно отображать в отдельном компоненте Monitor.
В этом компоненте также отображаем общее количество всех денег пользователя с учётом всех предыдущих забегов.
Запускаем гонку и получаем прибыль или... убыток
Гонка запускается кнопкой START RACE которая находится в отдельном компоненте Control.
Результат забега для каждой лошади определяем случайным образом.
По окончании забега список лошадей сортируем по результатам.
Если лошадь, на которую поставил пользователь пришла первой, то он получает вознаграждение 500% ставки на эту лошадь.
Новая Игра
В компоненте Control должна быть ещё кнопка NEW RACE - для подготовки к следующей игре.
Эта кнопка заново выводит список лошадей, обнуляет ставки, прибавляет выигрыш за забег к общим финансам пользователя.
Кнопки START RACE и NEW RACE - должны срабатывать только последовательно (сначала одна, потом другая).
Повторное нажатие на START RACE (без NEW RACE)- не должно ни к чему приводить.
Profile из Redux
Не забудем выводить информацию о деньгах пользователя и на этой странице.
Эти данные надо хранить в Redux.
Первоначальный капитал пользователя равен 50 000.
Сохраняем финансовый итог на Сервере
Поднимаем сервер на Express и общий финансовый итог сохраняем там.
При новой загрузке или перезагрузке приложения извлекаем и используем эту информацию.
Используем useContext для оформления
Делаем в интерфейсе возможность переключения оформления на светлую или тёмную тему.
Настройку темы храним и переключаем с использованием useContext.
Pictures на Thunk
На странице Pictures показываем случайные картинки, адреса которых получаем с помощью Redux-Thunk.
При переходе на эту страницу показываем случайную картинку.
При клике на картинку показываем новую.
Можно использовать такие API: