Sudoku completamente terminado

UO291047 · Nov 19, 2023 · db636dd · db636dd
1 parent 641b82f
commit db636dd
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/js/sudoku.js b/js/sudoku.js
@@ -81,12 +81,25 @@ class Sudoku{
 
             // Llama al método introduceNumber con el número obtenido
             this.introduceNumber(number);
+        }else if (keyCode === 8) {
+            // Si la tecla pulsada es Backspace, llama al método introduceNumber con el valor 0
+            this.introduceNumber(0);
         }
     }
 
     introduceNumber(number) {
+
         const { row, column } = this.selectedCell;
 
+        const selectedCellElement = document.querySelector(`[data-row='${row}'][data-column='${column}']`);
+
+        if(number === 0){
+            this.tablero[row][column] = number;
+            selectedCellElement.dataset.state = 'clicked';
+            selectedCellElement.textContent = "";
+            return;
+        }
+
         // Comprobar si el número es válido en la fila
         const isNumberValidInRow = !this.tablero[row].includes(number);
 
@@ -100,17 +113,15 @@ class Sudoku{
 
         // Si el número es válido, realizar acciones necesarias
         if (isNumberValidInRow && isNumberValidInColumn && isNumberValidInSubgrid) {
-            // Obtener el elemento del DOM correspondiente
-            const selectedCellElement = document.querySelector(`[data-row='${row}'][data-column='${column}']`);
 
-            // Modificar el valor del atributo data-state a correct
+            this.tablero[row][column] = number;
             selectedCellElement.dataset.state = 'correct';
-            // También puedes modificar el contenido del párrafo para mostrar el número
             selectedCellElement.textContent = number;
 
             // Comprobar si ya están rellenas todas las cuadrículas del sudoku
             if (this.isSudokuCompleted()) {
                 alert('¡Sudoku completado!');
+                return;
             }
         } else {
             alert('Número no válido para la casilla seleccionada.');

diff --git a/sudoku.css b/sudoku.css
@@ -19,4 +19,20 @@ p {
     box-sizing: border-box;
     text-align: center;
     border: 1px solid gray;
+}
+
+/* Estilo para las celdas en el borde derecho de cada bloque 3x3 */
+p:nth-child(3n) {
+    border-right: 2px solid #333;
+}
+
+/* Estilos para las celdas en el borde inferior de cada bloque 3x3 */
+p[data-row="2"],
+p[data-row="5"],
+p[data-row="8"]{
+    border-bottom: 2px solid #333;
+}
+
+p[data-state="blocked"] {
+    background-color: #d6d8c0;
 }