https://habr.com/ru/post/459906/

• JavaScript
• Программирование
• Проектирование и рефакторинг
• SvelteJS

Tic Tac Toe, часть 1: Svelte и Canvas 2D
Tic Tac Toe, часть 2: Undo/Redo с хранением состояний
Tic Tac Toe, часть 3: Undo/Redo с хранением команд

В этой части рассмотрена реализация игры Tic Tac Toe с помощью паттерна Command, с хранением команд Undo/Redo вместо хранения отдельных состояний, с произвольным доступом к каждому шагу истории игры.

Стартовый код

Прошлая часть статьи закончилась на таком коде: Код на REPL.

Закомментируем весь код, который при выполнении изменений будет выдавать ошибки. Все клетки игрового поля заполним единицами: Код на REPL

Хранилище state

Код на RELP

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

Класс Command

Код на RELP

Добавили класс Command в файл helpers.js. Класс History изменен для хранения команд вместо состояний.

Здесь мне не удалось выполнить правильное обновление статуса. Если кто знает, подскажите, пожалуйста. И, вообще, возможно ли так использовать хранилище state?

Перевод хода

Код на RELP

Добавили запрет клика по уже заполненной клетке. В конструкторе класса Command выполнили перевод хода. Исправили вывод статуса.

Состояние игрового поля

Код на RELP

На предыдущих этапах возникло сомнение в правильности использования отдельного хранилища state, поэтому оно было убрано, и хранение состояния игрового поля перенесено в класс History — добавлено поле state.

Произвольный доступ

Код на RELP
Добавлен вывод списка шагов. Произвольный доступ к любому шагу игры выполняется последовательным выполнением команд Undo или Redo до выбранной команды.

Определение победителя

Код на RELP
Выполнено определение победителя. Добавлено хранилище status для вывода статуса.

Заключение

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

Репозиторий на GitHub

https://github.com/nomhoi/tic-tac-toe-part3

Установка игры на локальном компьютере:

git clone https://github.com/nomhoi/tic-tac-toe-part3.git
cd tic-tac-toe-part3
npm install
npm run dev

Запускаем игру в браузере по адресу: http://localhost:5000/.