diff --git a/js/sudoku.js b/js/sudoku.js index cfa9022..79ba8b3 100644 --- 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 index 6a47d88..b313709 100644 --- 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; } \ No newline at end of file