Tic Tac Toe, Part 3: Undo / Redo with commands storage

Tic Tac Toe, Part 0: Comparing 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 commands storage
Tic Tac Toe, Part 4: Interacting with the Flask backend using HTTP

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

Start code

The last part of the article ended with this code: Code for REPL .

Let's comment out all the code that, when making changes, will produce errors. All the cells of the playing field fill the units: Code for REPL

State repository

RELP code

Added state storage. The playing field now displays the contents of the state repository. The game field is filled with twos by default. Added status display in the App component.

Command Class

RELP code

Added the Command class to the helpers.js file. The History class is changed to store commands instead of states.

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

Move translation

RELP code

Added ban on clicking on an already filled cell. In the constructor of the Command class, the translation was performed. Corrected status output.

State of the playing field

RELP code

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

Random access

RELP code
Added list of steps. Random access to any step of the game is performed by sequentially executing Undo or Redo commands to the selected command.

Determination of the winner

RELP code
The winner is determined. Added status repository to display status.

Conclusion

Storing the history of moves with the help of states is more convenient to use, but costly from memory, because at each step the entire game state is duplicated. In the case of applications with a large model size, it is better to use command storage in 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 

Run the game in the browser at: http: // localhost: 5000 / .