Jetzt mit Auswertung des Sudokus

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

public/isValid.js

+// 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 };

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;
 }

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 {