Все команды запускаются из корня проекта:
# Шаг 1 — Клонируем репозиторий
$ https://github.com/M4XPRD/word-chain-game
# Шаг 2 — Устанавливаем зависимости и одновременно запускаем проект
$ make start
# Шаг 2.5 — Если нужно просто запустить проект, пишем make dev
$ make dev
# Если у вас yarn, то перед командой пишем "y"
$ make y-startПривет!
Это страничка тестового задания для вакансии на frontend-разработчика.
Задание расчитано на ~3-4 часа. Что мы проверяем:
- Вёрстка, (кроссбраузерная, адаптивная), применение Tailwind
- Умение работать с макетом в Figma
- Умение разделять код на компоненты
- Умение писать осознанные коммиты
- Умение предлагать варианты для решения поставленной задачи
- Код стайл, аккуратность (желательно использование prettier)
- Стремление к развитию, не бойся делать ошибки
Необходимо разработать "легкую" версию онлайн-игры в "Города".
В качестве аппонента, мы предлагаем тебе написать функцию (искуственный интеллект, если можно так это назвать), которая будет брать города из заготовленного списка (список городов прилагается в репозитории). Главное не забудь учитывать правила игры – города не могут повторяться.
Для имитации живого игрока нужно написать функцию так, чтобы ответ от нее приходил с задержкой.
В репозитории есть макет Figma, в котором ты можешь найти финальный дизайн для игры. Обрати внимание на отступы, выравнивания по центру, на размерности.
В первой вкладке расположен макет, во второй tailwindcss конфигурация (она соответсвует конфигурации по умолчанию).
Все размеры в макете подходят под размеры tailwind-классов. Например: максимальная ширина окна - 576px, соответствует классу max-w-xl.
Для работы над текстом в первом слайде рекомендую использовать класс .prose из tailwind плагина Typography.
Так же необходимо реализовать таймер обратного отсчета, по умолчанию на 2 минуты. Если игрок или функция "ИИ" не успеет дать нужный ответ, мы можем определить победителя и проигравшего.
Для более качественной работы необходимо добавить валидацию вводимых городов на существование (1), по первой букве (2) и на повторение (3). (для упрощения проверяй существование города по имеющимуся списку городов)
- React 18 (можно с Next, можно без)
- Tailwind
- Использование Typescript в проекте будет жирным плюсом
Роутинг делать не обязательно, если тебе будет достаточно работы в одном родительском компоненте.
Pixel Perfect оценивать не будем, но жирным плюсом будет, если классы из tailwind будут верно подобраны и подходить под размеры макета.
Решение должно быть выложено в публичном репозитории на github, чтобы можно было его проверить.
В остальном требований к проекту нет, можно использовать любые вспомогательные библиотеки на твой вкус (такие как day.js для работы с датой и тд). Будет плюсом, если ты умеешь обходится без "готовых React компонентов".
Деплой приложения.
- Приложение построено в стеке
React+TypeScript - Для хранения состояния использован
React Context - Весь CSS написан с помощью
Tailwind - Игра адаптирована для любых разрешений экрана
- Игра имеет сложную логику обработки городов и бота, который реагирует на ответ пользователя с интервалом от 3 до 7 секунд, имитируя человека
- Победить можно двумя путями: достичь момента, когда города на определённую букву закончатся или победить по времени. В случае с ботом проиграть можно только первым путём
- После окончания игры бот прекращает свою работу и при начале новой игры все данные обнуляются