Visualization completed

Author: tarunk04

App.py

@@ -0,0 +1,28 @@
+from sudoku import *
+import eel
+
+current_sudoku_onboard = []
+
+# python functions exposed to javascript
+@eel.expose
+def generate_new_sudoku(level):
+ global current_sudoku_onboard
+ # generating sudoku for required level
+ current_sudoku_onboard = Sudoku().generate_sudoku(int(level))
+ # drawing sudoku by calling javascript function from python
+ eel.draw_sudoku(current_sudoku_onboard)
+
+
+@eel.expose
+def solve_sudoku(mode):
+ global current_sudoku_onboard
+ # solving the sudoku (quick mode or visualize)
+ Sudoku().solve(current_sudoku_onboard, int(mode))
+
+
+if __name__ == "__main__":
+ # initializing eel with the dir containing HTML resources
+ eel.init("www")
+
+ # starting eel server
+ eel.start('index.html', size=(540, 660))

README.md

@@ -1,6 +1,37 @@
-# Sudoku Backtracking Visualizer
-
-A simple programe to solve sudoku using backtracking algorithm and visulize the working of backtracking algorithm in real time.
+# Sudoku Backtracking Visualizer [![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)](https://github.com/tarunk04/sudoku-backtracking-visualizer/blob/master/LICENSE)
+A sudoku game with built-in feature to visualize the solving of sudoku using backtracking algorithm. 
+Game offer 4 difficulty levels: 
+* Easy
+* Medium
+* Hard
+* Expert
+<br>
 
+**Note: Game is not playable yet although visualization can done on any level of game.** 
 
+# Requirements
+* `eel` python library. Use `pip install eel` to install.
+* basic knowledge of HTML,CSS,JavaScript
 
+# Setup
+ * Clone this repository: 
+ ```console
+ git clone https://github.com/tarunk04/sudoku-backtracking-visualizer.git
+ ```
+ or click `Download ZIP` in right panel of repository and extract it.
+ * Run the `App.py`.
+ 
+ # Preview
+ ![GUI](screenshots/Sudoku%20-%20Backtracking%20Algorithm%20visualizer.png)
+ 
+ # Backtracking in Action
+ ![visualizer](screenshots/visualizer.gif)
+ 
+ # Author
+ Tarun Kumar
+ 
+**Author's Note**
+ 
+The author is not responsible for any misuse the program. Any commercial use of the code is not permissible however any contribution or suggestions are most welcome. Read the LICENSE carefully.
+ # License
+ The MIT License, see the included, see the [License](https://github.com/tarunk04/sudoku-backtracking-visualizer/blob/master/LICENSE) file.

screenshots/Sudoku - Backtracking Algorithm visualizer.png

@@ -40,11 +40,13 @@ def __solve_backtrack__(self, i, j, visualize=False):
  i += 1
  # end condition
  if i > 8:
+ if visualize == False:
+ eel.draw_sudoku(self.sudoku_solved)
  return True
 
  # skipping cell if the cell has already a number
  if self.sudoku_solved[i][j] != 0:
- if self.__solve_backtrack__(i, (j + 1),visualize):
+ if self.__solve_backtrack__(i, (j + 1), visualize):
  return True
  # solving for the cell if the cell is empty
  else:
@@ -59,7 +61,7 @@ def __solve_backtrack__(self, i, j, visualize=False):
  time.sleep(0.2)
  eel.update_sudoku(val, 9 * i + j)
  time.sleep(0.2)
- if self.__solve_backtrack__(i, (j + 1),visualize):
+ if self.__solve_backtrack__(i, (j + 1), visualize):
  return True
  # it the current validated number fails reset the cell
  self.sudoku_solved[i][j] = 0
@@ -95,11 +97,13 @@ def __count_solutions__(self, i, j):
  self.__count_solutions__(i, (j + 1))
  # it the current validated number fails reset the cell
  self.sudoku_solved[i][j] = 0
+ if self.counter > 1:
+ return
 
  def solve(self, sudoku, visualize=False):
  self.sudoku_matrix = copy.deepcopy(sudoku)
  self.sudoku_solved = copy.deepcopy(sudoku)
- self.__solve_backtrack__(0, 0, visualize=True)
+ self.__solve_backtrack__(0, 0, visualize=visualize)
  return self.sudoku_solved
 
  def solution_count(self, sudoku):
@@ -150,19 +154,20 @@ def generate_sudoku(self, level=2):
  # generate solved sudoku
  self.generate_solved_sudoku()
  if level == 1:
- remove_cell = random.randint(18, 30)
+ remove_cell = random.randint(32, 38)
  if level == 2:
- remove_cell = random.randint(33, 44)
+ remove_cell = random.randint(40, 46)
  if level == 3:
- remove_cell = random.randint(46, 52)
+ remove_cell = random.randint(48, 52)
  if level == 4:
- remove_cell = random.randint(54, 57)
+ remove_cell = random.randint(54, 56)
  if level == 5:
  remove_cell = random.randint(59, 61)
 
  sudoku_board = copy.deepcopy(self.new_sudoku)
-
+ print(remove_cell)
  while remove_cell > 0:
+ # print(remove_cell)
  while True:
  row = random.randint(0, 8)
  col = random.randint(0, 8)
@@ -179,7 +184,7 @@ def generate_sudoku(self, level=2):
  remove_cell -= 1
  self.counter = 0
  # break
- # self.__print_board__(sudoku_board)
+ self.__print_board__(sudoku_board)
  return sudoku_board
 
  def __print_board__(self, board):

screenshots/visualizer.gif

@@ -2,23 +2,31 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
- <title>Sudoku - Backtracking Algorithm visualizer</title>
+ <title>Sudoku - Backtracking Algorithm Visualizer</title>
  <script src="/jquery.js"></script>
  <script src="/eel.js"></script>
  <script src="/script.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
+<div class="action_message" style="display: none">
+</div>
 <div class="container">
+ <!-- header containing buttons and game infos -->
  <div class="header">
  <div class="buttoms">
  <div class="btn" id="new_btn">New Puzzle</div>
  <div class="btn" id="solve_btn">Solve</div>
  </div>
- <div class="timer"></div>
+ <div class="game_info">
+ <div class="level"></div>
+ <div class="timer"></div>
+ </div>
  </div>
  <div class="body">
+ <!-- Sudoku Borad -->
  <div class="sudoku_board">
+ <!-- 9 3x3 grids -->
  <div class="grid" id="grid0"></div>
  <div class="grid" id="grid1"></div>
  <div class="grid" id="grid2"></div>

algo.py sudoku.pyalgo.py renamed to sudoku.py

@@ -11,7 +11,6 @@ function format_sudoku_data() {
  return data
 }
 
-
 $(function () {
  var i = 0
  html = ""
@@ -23,36 +22,91 @@ $(function () {
  }
 
  $('#new_btn').click(function () {
- eel.generate_new_sudoku()
+ var level = ["Easy", "Medium", "Hard", "Expert"]
+ var i = 1
+ html = ""
+ $(".action_message").html("");
+ for (; i < 5; i++) {
+ temp = `<div class="btn btn_margin select_level" id="level${i}" data-level="${i}">${level[i - 1]}</div>`
+ html = $(".action_message").html() + temp;
+ $(".action_message").html(html);
+ }
+ close_btn = "<div class='close'>x</div>"
+ html = $(".action_message").html() + close_btn;
+ $(".action_message").html(html);
+ $(".action_message").toggle(20);
+ $('.close').on("click", function () {
+ $(".action_message").toggle(20);
+ });
+ $('.select_level').on("click", function () {
+ eel.generate_new_sudoku($(this).attr("data-level"));
+ $(".level").html(level[$(this).attr("data-level") - 1]);
+ $(".cell").removeClass("empty")
+ });
+
  });
  $('#solve_btn').click(function () {
- eel.solve_sudoku()
+ var level = ["Quick Solve", "Visualize"]
+ var i = 1
+ html = ""
+ $(".action_message").html("");
+ for (; i < 3; i++) {
+ temp = `<div class="btn btn_margin solve_mode" data-mode="${i - 1}">${level[i - 1]}</div>`
+ html = $(".action_message").html() + temp;
+ $(".action_message").html(html);
+ }
+ close_btn = "<div class='close'>x</div>"
+ html = $(".action_message").html() + close_btn;
+ $(".action_message").html(html);
+ $(".action_message").toggle(20);
+ $('.close').on("click", function () {
+ $(".action_message").toggle(20);
+ });
+ $('.solve_mode').on("click", function () {
+ eel.solve_sudoku($(this).attr("data-mode"));
+ if ($(this).attr("data-mode") == 1)
+ $(".action_message").toggle(20);
+ });
+
  });
 
 });
 
 
+// JavaScript functions exposed to python
 eel.expose(draw_sudoku)
 eel.expose(update_sudoku)
 
+// Function for drawing sudoku
 function draw_sudoku(data) {
  for (i = 0; i < 81; i++) {
- row = ~~(i / 9)
- col = i % 9
- if (data[row][col] != 0) $("#" + i).text(data[row][col])
- else $("#" + i).text("")
+ // row and col values for corresponding i values
+ row = ~~(i / 9);
+ col = i % 9;
+
+ // filling sudoku board with values
+ if (data[row][col] != 0) { // cell in not empty
+ if ($("#" + i).html() != "") $("#" + i).removeClass("empty");
+ $("#" + i).text(data[row][col]);
+ } else { // cell is empty
+ $("#" + i).addClass("empty");
+ $("#" + i).text("");
+ }
  }
+ // toggle level selector pane
+ $(".action_message").toggle(20);
 }
 
+// Function updating sudoku board during visualiztion
 function update_sudoku(val, i) {
- if (val == 0) {
+ if (val == 0) { // if cell value wrong during backtracking
  $("#" + i).removeClass("solved");
  $("#" + i).addClass("error");
  setTimeout(function () {
  $("#" + i).removeClass("error");
  $("#" + i).text("")
  }, 200);
- } else {
+ } else { // one of the valid cell value
  $("#" + i).addClass("solved");
  $("#" + i).text(val);
  }