npm install
npm run serve
npm run build
Внимание! Техническое задание указано в том виде в котором было получено от интервьюера.
Перед вами макет страницы Фабрики Биороботов.
Суть такова: у пользователя есть монеты, на которые он может покупать детали для производства биоробота (биомеханизм, процессор, душа). Ингредиенты накапливаются на складе, из которого и детали можно переложить в секцию производства, где будет создан биоробот.
Теперь о каждом блоке поподробнее.
В кошельке находятся монеты. Количество монет отображается монетами и текстом. При нажатии на ссылку «Нацыганить» в блок с монетами добавляется еще одна желтая монетка. В текстовом блоке количество тоже меняется,** с учетом падежей**. При включенном чекбоксе “Нацыганить по 5 монет”, в кошелек будет добавляться по 5 монет за раз. Максимум может быть 100 монет. Если каким либо образом (например, продажей) монет стало больше 100, нужно показать пользователю модальное окно с ошибкой (см макет).
При покупке детали, из кошелька вычитается указанное количество монет, а количество этой детали на складе увеличивается. Если денег в кошельке недостаточно на покупку какого-то ингредиента, кнопка покупки является неактивной.
При продаже детали, ее количество на складе уменьшается на 1, а в кошелек добавляется указанное количество монет. Если какого-то ингредиента нет в мешке кнопка продажи является неактивной.
Здесь можно выбрать пол и тип биоробота, добавить нужные для производства ингредиенты в производство и создать биоробота. При смене пола силуэт биоробота изменяется на соответствующий (см названия картинок справа). Добавить деталь в производство можно, щелкнув на силуэт соответствующей детали, при этом из силуэта она превращается в соответствующую картинку. Если какой-либо детали нет на складе, ее силуэт отображается другим цветом, и щелкнуть на него нельзя. Так же можно убрать деталь обратно на склад, щелкнув по нему. Когда все ингредиенты добавлены, кнопка «Произвести» становится активной (если конечно в кошельке есть нужная для создания сумма).
Справа от кнопки производства есть текст, который всегда сообщает о том, почему в данный момент нельзя создать биоробота. Когда в производство ничего не добавлено, текст будет таким: «Не хватает биомеханизмов, процессоров и души». Если при этом в кошельке будет находиться сумма, меньшая, чем цена за создание человечка, текст будет таким: «Не хватает биомеханизмов, процессоров, души и денег». Предлог «и» обязателен для всех случаев, где его можно использовать. Каждая деталь в тексте может быть как в множественном, так и в единственном числе. Если все детали будут добавлены, а нужной суммы в кошельке не будет, текст будет таким: «Не хватает денег», и так далее.
- Использовать сборщики Webpack.
- Использовать пакетные менеджеры: NPM, YARN.
- Использовать препроцессор SCSS.
- Использовать систему контроля версий - git.
- Использовать js-framework Vue.
- Использовать Vuex.
- Использовать спрайты для изображений.
- Все, что можно сделать через CSS, сделать через CSS.
- Текст сообщения должен меняться динамически.
- Верстка картинками запрещена.
- Для сборки и запуска в режиме разработки проект должен использовать npm скрипты.
- Код должен быть максимально читаемым и понятным (должен следовать https://github.com/airbnb/javascript).
- Результатом работы должна быть ссылка на репозиторий github или bitbucket.