Homework 5 JS

[andreyzagoruy-dev]

https://andreyzagoruy-dev.github.io/minesweeper/preview/

https://github.com/andreyzagoruy-dev/minesweeper

[VladislavChudak]

@andreyzagoruy-dev тут ти використав деструктуризацію для startGame - круто

handleSubmit(event) {
    const { startGame } = this.props;
    event.preventDefault();

    startGame(this.state);
  } 

тут ні, пропоную використать

handleChange(event) {
    const target = event.target;
    const name = target.name;
    const value = target.value;

    this.setState({
      [name]: value
    });
  }

[VladislavChudak]

також можна використати деструктуризацію для змінних зі стейту, а подібні списки винести в масив і рендерить через .map. Це дозволяє додавати і прибирати нові елементи списків дуже легко і швидко

            <select className="form-config__select" name="size" value={this.state.size} onChange={this.handleChange}>
              <option value="6">Tiny</option>
              <option value="8">Normal</option>
              <option value="10">Huge</option>
            </select>

[VladislavChudak]

я форматував би кожну умову в один рядок, але це чисто косметичне, типу if (isMarked) return 'cell--marked'

  getCellModifier() {
    const { value, isOpened, isMarked, isMine } = this.props;

    if (isMarked) {
      return 'cell--marked';
    }
    if (isMine && isOpened) {
      return 'cell--mine';
    }
    if (!isMarked && isOpened && !value) {
      return 'cell--empty';
    }
    if (!isOpened) {
      return 'cell--closed';
    }

    return '';
  }

[VladislavChudak]

не зовсім розумію для чого тобі інішиал стейт і тут

    const initialBoardState = {
      isGameOver: false,
      isWon: false,
      markersLeft: this.props.mines
    }

і тут

    this.state = {
      markersLeft: props.mines,
      isGameOver: false,
      isWon: false,
      board: null
    }

[VladislavChudak]

mines = mines - 1;

mines--

http://jsben.ch/LXSZN

[andreyzagoruy-dev]

не зовсім розумію для чого тобі інішиал стейт і тут

    const initialBoardState = {
      isGameOver: false,
      isWon: false,
      markersLeft: this.props.mines
    }

і тут

    this.state = {
      markersLeft: props.mines,
      isGameOver: false,
      isWon: false,
      board: null
    }

В первом случае - при окончании игры и нажатии кнопки рестарт чтобы убрать флаги и можно было сыграть заново. Во втором случае чисто формально обьявляю чтобы было понятно что в стейте хранится

[andreyzagoruy-dev]

http://jsben.ch/LXSZN

mines = mines - 1;

mines--

http://jsben.ch/LXSZN

Не задумывался что они по скорости отличаются, думал сугубо вкусовщина :) интересно, спасибо!

[andreyzagoruy-dev]

не зовсім розумію для чого тобі інішиал стейт і тут

    const initialBoardState = {
      isGameOver: false,
      isWon: false,
      markersLeft: this.props.mines
    }

і тут

    this.state = {
      markersLeft: props.mines,
      isGameOver: false,
      isWon: false,
      board: null
    }

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

[andreyzagoruy-dev]

Спасибо за ревью! Текущие правки учел и запушил

[VladislavChudak]

Взагалі, дуже непогано зроблена домашка, в логіку я не дуже детально вчитувався, можливо там можна ще шось знайти. Прикольний дизайн, добре підібрані кольори, я навіть на обіді пограв трохи, більше того, один раз навіть виграв. Мені подобається

[andreyzagoruy-dev]

Взагалі, дуже непогано зроблена домашка, в логіку я не дуже детально вчитувався, можливо там можна ще шось знайти. Прикольний дизайн, добре підібрані кольори, я навіть на обіді пограв трохи, більше того, один раз навіть виграв. Мені подобається

Дякую! Дуже приємно це чути :)