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

И эта статья об одном из них.

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

Это была одна из тех задач, где у меня был почти полный контроль над тем, что я хочу использовать для ее разработки — единственными требованиями было использование веб-пакета в качестве сборщика модулей, html5, ES6, некоторого препроцессора CSS3 и пакета json-server для обслуживания/хранения. очки игрока.

Уроки выучены

Я решил использовать один из существующих шаблонов Vue.js (веб-пакет). Я настроил его для работы с препроцессором sass и загрузчиком ресурсов (поэтому я могу использовать переменные css без необходимости импортировать весь файл в отдельные файловые компоненты Vue).

Использование слотов для повторно используемых компонентов

Когда я начал работать над этой задачей, я планировал создать максимально (легко) повторно используемые компоненты. Одним из них был компонент всплывающего окна, который использует <slot></slot> для передачи своего содержимого непосредственно в шаблон.

Вьюекс

Другое дело, что я решил использовать Vuex для управления состоянием. Сначала я подумал, что это приложение слишком маленькое, чтобы его использовать, но после создания пары первых компонентов я был очень доволен своим решением. Vuex избавил меня от взлома нескольких шин событий и сделал мой код более чистым и понятным. Кроме того, я узнал об его ограничениях при работе с массивами:

И я разбил основной магазин на несколько модулей:

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

Миксины

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

Высокие баллы

Чтобы получить список лучших результатов с 10 лучшими результатами, я использовал axios (от которого я должен наконец отказаться ради fetch API, о котором я постоянно забываю).

К счастью, json-server уже имеет встроенные фильтры, так что я могу получить необходимые данные в нужном мне виде: /scores?_sort=score&_order=asc&_limit=10.

Основная концепция приложения

Когда я впервые прочитал требования к задаче, я думал о том, как решить создание плиток головоломки из реального изображения. Первая идея заключалась в том, чтобы немного повозиться с холстом HTML5, но при втором запуске я подумал, что это будет излишним. Я немного погуглил на эту тему и нашел очень простое решение: изменить свойство background-position css! :)

Заключительные слова

В целом я очень довольна конечным эффектом. На завершение у меня ушло не так много времени, а код довольно чистый и читабельный. Как (почти) всегда, мне жалко, что я не заставил себя написать к нему какие-то тесты. Но может когда-нибудь.. ;)

Весь код доступен на github — не стесняйтесь делиться своим мнением по этому поводу.

Лучший,

— ммммм

Привет! Я mrmnmly — недавно я сменил свое основное имя пользователя в Интернете — теперь вы можете подписаться на меня в социальных сетях с этим ником (twitter, instagram, github). Мой веб-сайт в настоящее время находится в стадии интенсивной разработки (и одновременно я делаю тысячу других дел!), так что следите за обновлениями, чтобы узнать больше ;)