У игры есть два поля, в первом поле будет девятнадцать клеток, во втором две клетки. От участника лотереи требуется отметить в первом поле восемь цифр, во втором одну цифру. При вычисление результата потребуется сравнить отмеченные участником числа с двумя случайно сгенерированными, в соответствиями с правилами игры (восемь чисел в первом массиве, одно во втором массиве), массивами чисел. В случае совпадения четырех и более цифр в первом поле, либо трех и более чисел в первом поле и одного во втором, пользователь считается победителем лотереи и получает причитающиеся ему лавры (ничего не получает).
- В качестве вёрстки, если вы будете её делать, возможно использовать вложенный макет.
- Аккуратный, чистый код. Использование линтеров (eslint) приветствуется.
- React любой предпочитаемой вами версии. Для быстрой первоначальной настройки проекта возможно использовать Create React App.
- Минимальная визуализацию описанного выше
Задания со звёздочкой не обязательные, но мы будем рады, если вы их выполните. Альтернативно, мы просто зададим похожие вопросы уже на собеседовании.
- (*) Адаптивная mobile-first вёрстка, условно приближенная к макету. (https://www.figma.com/file/VDraSBJhGzDKP33eS4IBbp6Z/Finch_test).
- (*) Реализовать генерацию случайно выбранных полей в билете (в соответствие с правилами лотереи) по нажатию на значок волшебной палочки.
- (*) Реализовать логику отправки выбранных чисел на сервер по любому url'у (предлагаем использовать фейковый url, чтобы не иметь дела с CORS). Отправка должна происходить после нажатия на кнопку "Показать результат". В данных отправки должен быть объект
{
"selectedNumber": {
{ "firstField": [ "first field numbers" ], "secondField": [ "second field numbers" ] },
"isTicketWon": "Boolean(true||false)"
}
}Нужно предусмотреть ситуацию, что в ответ придет код ответ не 200 OK, а любой другой. В таком случае требуется отправлять запрос еще два раза с интервалом 2 секунды. Если ответ 200 OK так и не пришел, то выдать какое-либо уведомление об ошибке.
Для работы с post запросом на фейковый url использовался json-server, запускающийся на 3001 порту.
Для запуска проекта можно воспользоваться скриптом: npm run dev,
который запустит и фейковый json-server на 3001 порту и клиентское приложение на 3000 порту (используется concurrently)