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/.
