- PVSM.RU - https://www.pvsm.ru -

Tic Tac Toe, часть 3: Undo-Redo с хранением команд

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

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

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

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

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

Хранилище state

Код на RELP [6]

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

Класс Command

Код на RELP [7]

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

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

Перевод хода

Код на RELP [8]

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

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

Код на RELP [9]

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

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

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

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

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

Заключение

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

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

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

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

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

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

Автор: Владимир Номхоев

Источник [14]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/323907

Ссылки в тексте:

[1] Tic Tac Toe, часть 0: Сравнение Svelte и React: https://habr.com/ru/post/456474/

[2] Tic Tac Toe, часть 1: Svelte и Canvas 2D: https://habr.com/ru/post/458752/

[3] Tic Tac Toe, часть 2: Undo/Redo с хранением состояний: https://habr.com/ru/post/459630/

[4] Код на REPL: https://svelte.dev/repl/b18067ae927246e790f5c3b4be185396?version=3.6.4

[5] Код на REPL: https://svelte.dev/repl/c44c1da834334d9a8d668c4ed41005d3?version=3.6.7

[6] Код на RELP: https://svelte.dev/repl/43c48c7ebaa843c1961f20774df1f317?version=3.6.7

[7] Код на RELP: https://svelte.dev/repl/3ef95b6c4f5a4c35bb0a481dbc0776cc?version=3.6.7

[8] Код на RELP: https://svelte.dev/repl/7e7078bf3a3448b99691355aa4f08d7b?version=3.6.7

[9] Код на RELP: https://svelte.dev/repl/b6fe3bcacd6f401bb871334631c5d1f7?version=3.6.7

[10] Код на RELP: https://svelte.dev/repl/297ab5efef2443dab621bab3e9a24844?version=3.6.7

[11] Код на RELP: https://svelte.dev/repl/2be218ff7e0941d4ba4f74c9809f8877?version=3.6.7

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

[13] http://localhost:5000/: http://localhost:5000/

[14] Источник: https://habr.com/ru/post/459906/?utm_source=habrahabr&utm_medium=rss&utm_campaign=459906