avsudnichnikov / learme-vue-test

Вводная часть

Тестовое задание на позицию "Vue.js-разработчик"

Этот репозиторий создан для уменьшения времени, необходимого на выполнение задания.

Основные технологии для приложения: vue.js, pug, sass/scss, vue-cli. Рекомендуются к использованию axios. JQuery использовать при реализации нежелательно.

Интерфейс остается на усмотрение кандидата. Предполагаем, что целевая аудитория игры - умеющий читать ребенок 7-10 лет.

Если в задании отсутствуют какие-то уточнения, необходимые для выполнения работы, считать, что “Если что-то не запрещено, значит - разрешено”.

В качестве решения задания предоставляется ссылка на репозиторий, права доступа - публичные.

Тестовое задание не несёт никакой коммерческой ценности. После выполнения тестового задания вы можете разместить своё решение в своем портфолио.

При начале работы над заданием - не форкайте, пожалуйста, репозиторий, а скачайте и разместите как самостоятельный проект. Это снизит вероятность дублирования вашего кода другими кандидатами.

Информация о задании

Выбор слова для задания (без участия пользователя)

1. Простой пример алгоритма выбора случайного слова:
2. Случайным образом генерируется число от 1 до 15.
3. Происходит обращение к АПИ с запросом на получение объекта с указанным id.
4. Если этот объект не существует (не найден) или слово уже использовано в игре, повторяем процедуру с шага 1.
5. Преобразуем слово (параметр data.value полученного объекта) к верхнему регистру

Примечание 1: Не обязательно требуется использовать приведенный алгоритм, но результат должен быть тем же - слово из предложенно справочника, полученное по АПИ, в верхнем регистре.

Примечание 2: chosen: true - это слово уже использовалось в игре

Примечание 3: В ответ на запрос приходит корректный JSON-объект

Игровой процесс

Пользователю отображаются буквы из слова (набором букв, анаграммой или иным способом организации) и ему требуется воссоздать первоначальный вид слова.

В случае, если пользователь составил текст правильно - выводится сообщение “Вы выиграли! Повторить?” с кнопками “Конечно!” и “Я уже устал”

При нажатии “Конечно!” повторяется процесс выбора слова для игры и игровой процесс.

Примечание: В состав слов входят пробел, дефис, символы кириллицы.

Окончание игры

При нажатии “Я уже устал” выводится таблица с результатами игры (всех сыгранных попыток-слов):

• номер по порядку
• слово
• время выполнения

В таблице доступна сортировка по любому из этих полей.

Примеры игры на примере слова “Робототехника”

Ниже приведены различные варианты взаимодействия с пользователем с целью пояснения игрового процесса. Предполагается, что кандидат может выбрать один из этих способов или придумать собственный.

Пример 1. Плитки

Пользователю выводится верхней части экрана - изображение, подтянутое по параметру img_src. Ниже выводится ряд плиток с буквами “Т”, “О”, “Х”, “Е”, “А”, “О”, “Н”, “К”, ”И”, “Б”, “Р”, “О”, “Т”. Методом перетаскивания плиток с одного места на другое в этом ряду пользователю требуется составить слово “РОБОТОТЕХНИКА”.

Пример 2. Плитки с подсказкой

Аналогично примеру “Плитки”, только пользователю также выводится подсказка (поле hint).

Пример 3. Мини-клавиатура

В верхней части экрана - горизонтальная строка из 13 (по количеству букв) клеток. В нижней части экрана - кнопки с буквами: “Т”, “О”, “Х”, “Е”, “Н”, “К”, ”И”, “Б”, “Р”, “А” - и кнопка “Сбросить”. При нажатии на кнопки с буквами, буквы вводятся в клетки (по одной в клетку). При нажатии кнопки “Сбросить”, буквы стираются из клеток. Пользователю необходимо таким способом ввести слово “РОБОТОТЕХНИКА”

Пример 4. Мини-клавиатура со счетчиками

Аналогично примеру “Мини-клавиатура”, только на каждой буквенной кнопке присутствует надпись с доступным количеством нажатий, при 0 - кнопка блокируется.

Пример 5. Пазл

На экране разбросаны детали пазла (высота 1 элемент, ширина 13 элементов), на каждом элементе которого написана какая-то буква из “РОБОТОТЕХНИКА”. Требуется собрать перетаскиванием пазл в правильном порядке, чтоб получилось слово “РОБОТОТЕХНИКА”.

Пример 6. Шарики

Снизу вверх по экрану бесконечно поднимаются воздушные шарики с написанными на них буквами “Т”, “О”, “Х”, “Е”, “Н”, “К”, ”И”, “Б”, “Р”, “А”. При клике по шарику, шарик лопается, буква из шарика падает вниз, встает на последнюю свободную позицию (из 13 - по количеству букв в слове). Пользователь всегда может удалить любую букву из получающегося слова кликом. Требуется собрать таким способом слово “РОБОТОТЕХНИКА”.

Информация о репозитории

scripts

yarn install - установка зависимостей проекта

yarn serve- компиляция при разработке

yarn lint - линтер

yarn api - симуляция АПИ

api

Все данные, изначально заданные в АПИ находятся в файле api.json

Используется rest.

Существует только объект "words".

Поля:

• id - уникальный числовой идентификатор;
• hint - подсказка;
• value - слово;
• chosen - отгадывал ли пользователь уже это слово.