diff --git a/public/index.html b/public/index.html
index 7f93b9c7ccfad575872454d15edac616fe22e953..b977bcd029bd6f61a7d552595c6233792382110c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,46 +10,78 @@
<label for="difficultySelector">Select a Difficulty:</label>
<select id="difficultySelector">
- <option value="easy">easy 20 empty cells</option>
- <option value="mid">mid 40 empty cells</option>
- <option value="hard">hard 55 empty cells</option>
+ <option value="super-easy">super easy (1 empty cell)</option>
+ <option value="easy">easy (20 empty cells)</option>
+ <option value="mid">mid (40 empty cells)</option>
+ <option value="hard">hard (55 empty cells)</option>
+
</select>
<button id="generateButton">Generate new Sudoku</button>
<table id="noSolutionBoard"></table>
+
+ <button id="Auswerten">Auswerten</button>
<br>
<button id="toggleButton" onclick="solveTable('noSolutionBoard')">Generate Solution</button>
- <table id="solutionTable"></table>
<script type="module" src="./scripts.js"></script>
<script defer type="module" src="./generateSudoku.js"></script>
<script defer type="module" src="./solver.js"></script>
+ <script defer type="module" src="./isValid.js"></script>
<script type="module">
// Import necessary functions from modules
import { GetNumberofZeroes } from "./scripts.js";
import { solveSudoku } from "./solver.js";
import { generateSudoku } from "./generateSudoku.js";
-
+ import { isValid } from "./isValid.js";
let sudokuBoard;
+ function collectUserInputs() {
+ let userInputArray = sudokuBoard.map((row, rowIndex) => {
+ return row.map((num, colIndex) => {
+ let inputField = document.getElementById(`cell_${rowIndex}_${colIndex}`);
+ return inputField ? (inputField.value !== '' ? parseInt(inputField.value, 10) : num) : num;
+ });
+ });
+
+ console.log("User Input Array:", userInputArray);
+ const table = document.querySelector('table');
+ const element = document.querySelector('input');
+ if(isValid(userInputArray)){
+ table.style.backgroundColor = 'green';
+ element.style.backgroundColor = "green";
+ } else {
+ table.style.backgroundColor = "red";
+ element.style.backgroundColor = "red";
+ }
+ setTimeout(() => {
+ table.style.backgroundColor = "white"; // Set to original or your desired color
+ try {
+ element.style.backgroundColor = "white";
+ } catch (TypeError) {
+ console.log("caught not able to read input Error")
+ }
+ }, 600);
+ }
+
+
+
function updateTable(tableId) {
let table = document.getElementById(tableId);
let numberOfZeros = GetNumberofZeroes();
sudokuBoard = generateSudoku(numberOfZeros);
let rawString = sudokuBoard
- .map((row) => row.map((num) => `<td>${num}</td>`).join(""))
- .map((row) => `<tr>${row}</tr>`)
- .join("");
+ .map((row, rowIndex) => row.map((num, colIndex) => `<td>${num === 0 ? `<input type="number" max="9" min="1" value="" id="cell_${rowIndex}_${colIndex}">` : num}</td>`).join(""))
+ .map((row) => `<tr>${row}</tr>`)
+ .join("");
-console.log(rawString);
-
-let str = rawString.replace(/<td>0<\/td>/g, '<td><input type="number" max="9" min"1" value=""></td>');
-table.innerHTML = str;
+ let str = rawString.replace(/<td>0<\/td>/g, '<td><input type="number" max="9" min"1" value=""></td>');
+ table.innerHTML = str;
console.log("Number of cells to figure out: " + numberOfZeros + ".");
}
@@ -74,6 +106,9 @@ table.innerHTML = str;
document.getElementById("toggleButton").onclick = function () {
solveTable("noSolutionBoard");
}
+ document.getElementById("Auswerten").onclick = function () {
+ collectUserInputs();
+ }
</script>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/isValid.js b/public/isValid.js
new file mode 100644
index 0000000000000000000000000000000000000000..99391c25ecd3d3f32f99c535ef46fe65b19da0cc
--- /dev/null
+++ b/public/isValid.js
@@ -0,0 +1,66 @@
+// A function that returns the result for the entire sudoku board.
+function isValid(board) {
+ for (let i = 0; i < 9; i++) {
+ for (let j = 0; j < 9; j++) {
+ const value = board[i][j];
+ if(value==0 || value=="")return false;
+
+ if (value !== 0) {
+ if (!validRow(board, i, j, value) || !validColumn(board, i, j, value) || !validBox(board, i, j, value)) {
+ return false;
+ }
+ }
+ }
+ }
+ return true;
+}
+
+// The row function.
+function validRow(board, row, col, value) {
+ // j represents on column
+ for (let j = 0; j < 9; j++) {
+ // check if the current column matches the passed-in column
+ if (j !== col) {
+ if (board[row][j] === value) {
+ return false;
+ }
+ }
+ }
+
+ return true;
+}
+
+// The column function.
+function validColumn(board, row, col, value) {
+ // i represents on row
+ for (let i = 0; i < 9; i++) {
+ // check if the current row matches the passed-in row
+ if (i !== row) {
+ if (board[i][col] === value) {
+ return false;
+ }
+ }
+ }
+
+ return true;
+}
+
+// The sub-boxes function.
+function validBox(board, row, col, value) {
+ const startRow = row - (row % 3),
+ startCol = col - (col % 3);
+
+ for (let i = startRow; i < startRow + 3; i++) {
+ for (let j = startCol; j < startCol + 3; j++) {
+ if (i !== row || j !== col) {
+ if (board[i][j] === value) {
+ return false;
+ }
+ }
+ }
+ }
+
+ return true;
+}
+
+export { isValid };
diff --git a/public/scripts.js b/public/scripts.js
index ade22c81afeb82ddb3b5a588ab028940504897e9..8029cac8abf807cef319269b18f839c46f3d164c 100644
--- a/public/scripts.js
+++ b/public/scripts.js
@@ -16,7 +16,9 @@ function GetNumberofZeroes() {
} else if (selectedOption.value === "mid") {
numberOfZeros = 40;
} else if (selectedOption.value === "easy"){
- numberOfZeros = 20;
+ numberOfZeros = 20;
+ } else if (selectedOption.value === "super-easy"){
+ numberOfZeros = 1;
}
return numberOfZeros;
}
diff --git a/public/styles.css b/public/styles.css
index d1f614fc176ad112f50c0d30ba5851cd43c92957..5f6106e7e52065a73ef6dedb9e42c5c56cc6d074 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -5,6 +5,11 @@ margin-bottom: 10px;
button {
margin-top: 0px;
margin-bottom: 5px;
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 302px;
+ background-color: #04AA6D;
+ color: white;
}
#difficultySelector {
@@ -14,6 +19,7 @@ button {
table {
border-collapse: collapse;
margin-bottom: 5px;
+
}
td {