Создать онлайн комнату для проведения торгов как на скриншоте:
Необходимо организовать только синхронную работу таймера для всех подключенных участников.
Дополнительные параметры:
- Время на ход - фиксированное: 2 минуты
- Для примера можно создать 3-5 участников и сформировать ссылку для просмотра работы комнаты.
- Функционал участников не нужно реализовывать. Они только наблюдают за ходом таймера.
- Таймер должен работать не зависимо от наличия подлкюченных участников.
Стек для реализации открытый, но предпочтительно использовать React.
Дизайн можно не соблюдать строго. Важно реализовать работу таймера, который не зависит от присутствия в комнате участников!
Результат необходимо выхожить в облако для демонстрации работы в реальном времени.
В ветке master
состояние фронтенда хранится в контексте, однако есть дополнительные ветки redux
и hooks
, где состояние хранится в redux и в хуках соответственно.
Реализована имитация совершения ставок четырьмя виртуальными участниками (только переход хода через случайное время до истечения таймера). Плюс есть некоторый интерактив - можно передавать ход какому-либо участнику (кроме того, у которого активный таймер), кликая на его название.
!!! Внимание !!!
Участника четыре, таблица с ними может не вмещаться на экране, а активный ход может быть у третьего/четвертого участника и таймер можно сначала не заметить, если не прокрутить до них.
http://discoserver.ru:3333/room/123
Более того, существует возможность добавления комнат со своими независимыми счетчиками (виртуальные участники будут те же). Комнаты также можно удалять, кроме комнаты по умолчанию. Для этого нужно пройти на главную страницу (ссылка есть и на страницах комнат):
Демо после проверки задания прекратит работу.
Правда, для него обязательно создать в корне проекта файл .env
с переменными окружения (в качестве примера использовать .env.example).
docker compose up
# или
docker-compose up
(конфигурация через .env
тоже возможна, но необязательна)
Сначала установите зависимости
npm ci
Для сборки введите
npx nx build react
npx nx build nest
Для разработки введите
npx nx serve react
npx nx serve nest