Build SuDoKu game using ReactJs

I recently thought of creating a SuDoKu game using JavaScript. Having played the classic game and enjoyed it in the past, I did not think of how complex the process of generating an instance of a game would be in the beginning. I quickly realized even after generating the random completed state successfully, creating a solvable puzzle with a unique solution is a huge challenge.

I have so far set up a board with random complete states in this CodeSandbox https://codesandbox.io/s/sudoku-wjo1fs

And here is the GitHub repo https://github.com/dejavu1987/react-sudoku

Here is the DEMO

https://dejavu1987.github.io/react-sudoku/

Generating random complete board

I have used a method of generating the complete set from Yaling Zheng from her answer to a stack overflow question here

Sudoku UI

The UI now offers two modes SELECT mode where the user can select any cell and it will highlight all the occurrences of that number on the board.

The second mode is REMOVE mode. In this mode, the user can click on any cell to remove the number from that cell.

Currently, you can manually start removing numbers to create a game.

I have been thinking of creating a script that plays the completed sudoku in reverse so that it follows various techniques to reason the removal of any cell I however doubt if that will create a game with a unique solution every time though.

There is a RESET button to generate a new completed Sudoku board.

Issues with this method of generating random board

I see one issue with this method of generating Sudoku games. If you look closely the triplets are repeating in different squares, they have random order but still, it’s easy to guess the numbers once you start noticing these patterns.

I will continue developing it in the meantime watch this space for further updates.