ponomarenko-alex-otus

А.Пономаренко. Домашние задания к курсам OTUS / Д/З к курсу React.js-2021-09 OTUS / Домашнее задание 5

Домашнее задание 5. Components lifecycle. Списки, события, формы

Цель:

Используем styled-components для разработки и манипуляции стилями.
Добавим стили в компоненты, разработанные в рамках предыдущего ДЗ.

При работе с проектами типа крестики-нолики/Игра Жизнь:

В поле пробрасываются параметры с размерами x/y - сделать так, чтобы размеры поля менялись, при изменении этих параметров. При этом состояние отмеченных клеток должно сохраняться (игра не сбрасывается) Добавить анимацию в любом виде для клеток - для клеток, которые меняют свое состояние
В случае, если вы реализуете другой проект, выбираете динамическую часть вашего приложения и реализуете несколько компонентов из неё.

Добавляем элементы управления в приложение

добавить методы жизненного цикла в компоненты, разработанные ранее
покрыть новый функционал тестами
добавить stories для отображения изменений

Разработать элементы управления приложением

Пример https://codepen.io/freeCodeCamp/full/reGdqx

Какие элементы управления нужны в приложении?

размер поля
начальный процент заполнености
управление скоростью - пауза, ускорить, замедлить, текущая скорость
остановить / сбросить
разрабатываем форму для ввода имени и кнопкой “start”, поле и кнопка должны быть отцентрованы
покрываем тестами обработчики событий

Реализуем элементы управления в storybook

Элементы управления должны быть удобны для взаимодействия с пользователем, продумать UX

Критерии оценки:

использование минимум 2 разных методов жизненного цикла, в минимум 2х компонентах, за реализацию всех элементов управления
покрытие нового функционала тестами, за форму для входа
тесты
stories демонстрирующие изменения, за UX

Выполнение д/з №5

В компонент GameField передаются пропсы data(одномерный массив ячеек) и width (ширина поля в ячейках). Текущая версия программы поддерживает изменение размера поля при нажатии на кнопки “small 5x5”, “medium 10x10”, “large 20x15” в UI. нажатие на эти кнопки приводит к соответствующему изменению размера поля. Реализовано сохранение состояния клеток при изменении размера поля. Реализована анимация изменения состояния клеток.
Добавлены методы жизненного цикла в компоненты AppStateManager (constructor(), render()), GameField (render(), shouldComponentUpdate())
Добавлены элементы управления:
- размером поля - компонент FieldSize
- начальный процент заполнености - FillPercent
- управление скоростью (отображение текущей скорости) - DefineSpeed
- запустить/поставить на паузу игру (отображение текущего состояния) - DefineMode
- форма для ввода имени - UserNameForm
Добавлено оформление компонентов, UX
Дополнены тесты и сторибук.

--------------------------------|---------|----------|---------|---------|-------------------
File                            | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
--------------------------------|---------|----------|---------|---------|-------------------
All files                       |     100 |      100 |     100 |     100 |                   
 src                            |     100 |      100 |     100 |     100 |                   
  consts.ts                     |     100 |      100 |     100 |     100 |                   
 src/components/AppStateManager |     100 |      100 |     100 |     100 |                   
  AppStateManager.tsx           |     100 |      100 |     100 |     100 |                   
  appReducer.ts                 |     100 |      100 |     100 |     100 |                   
  playField.consts.ts           |     100 |      100 |     100 |     100 |                   
  playFieldUtils.ts             |     100 |      100 |     100 |     100 |                   
 src/components/AppStateView    |     100 |      100 |     100 |     100 |                   
  AppStateView.tsx              |     100 |      100 |     100 |     100 |                   
 src/components/Button          |     100 |      100 |     100 |     100 |                   
  Button.tsx                    |     100 |      100 |     100 |     100 |                   
 src/components/Cell            |     100 |      100 |     100 |     100 |                   
  Cell.tsx                      |     100 |      100 |     100 |     100 |                   
 src/components/DefineMode      |     100 |      100 |     100 |     100 |                   
  DefineMode.tsx                |     100 |      100 |     100 |     100 |                   
 src/components/DefineSpeed     |     100 |      100 |     100 |     100 |                   
  DefineSpeed.tsx               |     100 |      100 |     100 |     100 |                   
 src/components/FieldSize       |     100 |      100 |     100 |     100 |                   
  FieldSize.tsx                 |     100 |      100 |     100 |     100 |                   
 src/components/FlllPercent     |     100 |      100 |     100 |     100 |                   
  FlllPercent.tsx               |     100 |      100 |     100 |     100 |                   
 src/components/GameField       |     100 |      100 |     100 |     100 |                   
  GameField.tsx                 |     100 |      100 |     100 |     100 |                   
 src/components/UserNameForm    |     100 |      100 |     100 |     100 |                   
  UserNameForm.tsx              |     100 |      100 |     100 |     100 |                   
 src/testFramework/lib          |     100 |      100 |     100 |     100 |                   
  reducer.ts                    |     100 |      100 |     100 |     100 |                   
--------------------------------|---------|----------|---------|---------|-------------------

Test Suites: 10 passed, 10 total
Tests:       37 passed, 37 total
Snapshots:   0 total
Time:        4.881 s
Ran all test suites.

Текущая версия сторибук в chromatic: https://6168a14038f17a003a388098-potjdfcfaf.chromatic.com/?path=/story/appstatemanager–game

Тесты в chromatic: https://www.chromatic.com/build?appId=6168a14038f17a003a388098&number=9