Tic Tac Toe, часть 0: Сравнение Svelte и React
Tic Tac Toe, часть 1: Svelte и Canvas 2D
Tic Tac Toe, часть 2: Undo/Redo с хранением состояний
Tic Tac Toe, часть 3: Undo/Redo с хранением команд
Tic Tac Toe, часть 4: Взаимодействие с бэкендом на Flask с помощью HTTP
В этой части рассмотрена реализация игры Tic Tac Toe с помощью паттерна Command, с хранением команд Undo/Redo вместо хранения отдельных состояний, с произвольным доступом к каждому шагу истории игры.
Стартовый код
Прошлая часть статьи закончилась на таком коде: Код на REPL.
Закомментируем весь код, который при выполнении изменений будет выдавать ошибки. Все клетки игрового поля заполним единицами: Код на REPL
Хранилище state
Добавили хранилище state. В игровом поле теперь отображается содержимое хранилища state. Игровое поле по-умолчанию заполнили двойками. Добавили вывод статуса в компоненте App.
Класс Command
Добавили класс Command в файл helpers.js. Класс History изменен для хранения команд вместо состояний.
Здесь мне не удалось выполнить правильное обновление статуса. Если кто знает, подскажите, пожалуйста. И, вообще, возможно ли так использовать хранилище state?
Перевод хода
Добавили запрет клика по уже заполненной клетке. В конструкторе класса Command выполнили перевод хода. Исправили вывод статуса.
Состояние игрового поля
На предыдущих этапах возникло сомнение в правильности использования отдельного хранилища 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/.