Skip to content

Latest commit

 

History

History
76 lines (63 loc) · 4.66 KB

README.md

File metadata and controls

76 lines (63 loc) · 4.66 KB

Deploy on https://ivankozhyn.github.io/infotech-mortal-kombat

Task

Разработать приложение, для демонстрации 2х интерактивных экранов из игры MortalCombat mc_choose_hero: при загрузке страницы, показывается экран - выбор бойца arrowKeys

  • подтверждение enter + переход на 2ой экран (mc_vs_screen) mc_vs_screen: после подтверждения выбранного героя нужно показывать этот экран на 10sec
  • 6 иконок внизу страницы являются интерактивными, должны меняться по нажатию на QWERTY
  • в качестве иконок использовать fontIcon (напр., https://fontawesome.com/icons/fonticons)

доп. уровни сложности (не обязательно):

  • список героев на сервере
  • ws: синхронизация игровых экранов у 2х игроков
  • mc_vs_screen: определенные комбинации должны выкидывать popup'ы со смешными фразами
  • тесты:
  • выбор героев через arrowKeys, выход за пределы
  • отрисовка списка героев, если ничего не пришло techstack:
  • react / react-router
  • racer (https://github.com/derbyjs/racer)
  • jest / mocha

условия приема:

  • задание разместить на github'e
  • наличие рабочего приложения
  • readme с пояснением, как запустить локально

Запустить локально

  • Необходим Node.js v14.
  • Склонировать репозиторий https://github.com/ivankozhyn/infotech-mortal-kombat.
  • Установить зависимости npm install или yarn install.
  • Запустить проект npm start или yarn start.

Реализовано

  • основное задание
  • мобильная адаптация для девайсов от ширины экрана 408px(Iphone 6/7/8 Plus)
  • работает логика выбора персонажа и выхода стрелками за пределы экрана для всех экранов(сетка выбора персонажа меняет структуру на разном размере экрана)
  • написаны тесты для utils
  • при старте битвы показывается надпись 'FIGHT' до момента нажатия на любую QWERTY кнопку
  • если нажать кнопки QWERTY от 3 до 5 раз(работает рандом) появляется надпись 'FINISH HIM'
  • если нажать кнопки QWERTY от 6 до 8 раз(работает рандом) и более появляется вопрос 'FATALITY ?'
  • если иконки QWERTY содержат 3 одинаковые, то появляется надпись 'SUPER'
  • при загрузке страницы с выбором персонажа, начальный персонаж выбирается рандомно
  • QWERTY клавиши работают в EN-UA-RU раскладке, есть поддержка и включенного CAPS LOCK
  • бой всегда заканчивается победой дружбы

Использовано

  • react / react-router / redux / typescript
  • react-tsparticles для анимации интерактивного фона
  • jest/enzyme для тестов
  • хуки: useRef, useEffect, useState, useCallback, useMemo, useHistory, useDispatch, useSelector, useReducer
  • разделение логики и view с помощью кастомных hooks
  • использовалась рекурсия для генерации иконок при нажатии QWERTY(чтоб следующая иконка точно не была такая как предыдущая, генерация следующей иконки рамдомная)