Tic Tac Toe, part 3: Undo / Redo with command storage

Tic Tac Toe, part 0: Comparison of Svelte and React
Tic Tac Toe, part 1: Svelte and Canvas 2D
Tic Tac Toe, part 2: Undo / Redo with state storage
Tic Tac Toe, part 3: Undo / Redo with storage of Tic Tac commands
Toe Part 4: Interacting with the Flask Backend Using HTTP

In this part, we discuss the implementation of the Tic Tac Toe game using the Command pattern, with storing Undo / Redo teams instead of storing individual states, with random access to each step of the game history.

Start code

The previous part of the article ended with the following code: REPL code .

We comment out all the code that will produce errors when making changes. We fill in all the cells of the playing field with units: Code on REPL

State storage

RELP Code

Added state storage . The playing field now displays the contents of the state repository . By default, the playing field was filled with deuces. Added status output in the App component .

Command Class

RELP Code

We added the Command class to the helpers.js file . The History class has been changed to store commands instead of states.

Here I was not able to perform the correct status update. If anyone knows, tell me, please. And, in general, is it possible to use state storage this way ?

Move translation

RELP Code

Added a ban on clicking on an already filled cell. The constructor of the Command class performed a translation of the move. Corrected status output.

State of the playing field

RELP Code

At the previous stages, there was doubt about the correct use of the separate state storage , so it was removed and the storage of the state of the playing field was transferred to the History class - the state field was added .

Random access

RELP code
Added list of steps. Random access to any step of the game is performed by sequential execution of the Undo or Redo commands to the selected team.

Winner determination

RELP code Winner
determined. Added status storage to display status.

Conclusion

Storing the history of moves using states is more convenient to use, but expensive in memory, because at each step, duplication of the entire state of the game is performed. In the case of applications with a large model size, it is better to use the storage of commands in the history.

GitHub repository

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

Installing the game on the local computer:

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

We launch the game in a browser at the address: http: // localhost: 5000 / .