Тестовое задание для React-разработчика

Крестики-нолики на большой плоскости (5 в ряд).

Версия: 1.0

Цель

Убедиться в навыках работы с React, понимания компонентов, управления состоянием, логикой, UI-взаимодействиями, вёрсткой, способности находить решения в нетривиальных ситуациях.

Задача

Разработать интерактивную игру крестики-нолики на большой плоскости (без ограничения на размер сетки) для двух игроков.

Функционал

1. Страница «Логина»:
   • Ввод имени пользователей двух игроков, для которых сейчас будет этот матч.
2. Страница «Игры»:
   • Сетка, размер не ограничен (т.е. до Number.MAX_SAFE_INTEGER).
   • Поочерёдные ходы «X» и «O» ставят в какой угодно не занятой «ячейке».
   • Автоматическое определение победителя: 5 одинаковых в ряд (в линию или диагональ).
3. Страница «История»:
   • Отображение истории сыгранных матчей (кто против кого, дата).
   • Просмотр каждого матча (итоговое состояние поля, т.е. где «x» и «o» стоят).

Хранение данных можно реализовать через LocalStorage или на усмотрение разработчика.

Внешний вид

Должен быть обеспечен современный внешний вид (на усмотрение разработчика), адаптивность.

Допускается использование MUI.

Минимум:

(в PDF без текста)

Бонусное

• Использование для получения/отдачи данных REST API через внешний сервер.
• Анимации ходов/победы.
• Использование линтера.
• При просмотре матча из истории: добавить возможность перемотки ходов.
• Возможность игры против ИИ (простейшего).
• Статистика побед/поражений пользователя.

Стек

• HTML5, CSS3
• React 18+ (и React Hooks)
• TypeScript
• MUI/TailwindCSS/SASS/SCSS (на усмотрение разработчика)

Оценивается

• Архитектура: обоснованность/разумность принятых решений/подходов/etc.
• Корректная логика и в целом функционирование.
• Чистота и читаемость кода.
• Структура компонентов.
• UI/UX и оформление.
• Бонусные фичи (необязательно).

Ожидаемый итог

• Время выполнения: ~1-5 часов (по желанию).
• Срок выполнения: 1 неделя с момента получения задания.
• Выполненное задание ожидается ссылкой на GitHub репозиторий с выложенными исходниками решения, или же архивом на адрес (email удален).
• В README.md должно быть указано, как собрать и запустить локально.
• Решение должно быть выполнено полностью Вами, без использования помощников, ассистентов (т.е. ИИ или подобного).
• Без использования сторонних «игровых» библиотек или подобного.

Контакты для связи:

• По поводу выполнения: (email удален)