read only

Hack-Weekly · Aug 16, 2023 · 4b35ef1 · 4b35ef1
1 parent a383417
commit 4b35ef1
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 21 deletions.
diff --git a/sudoku-app/src/App.js b/sudoku-app/src/App.js
@@ -12,6 +12,7 @@ function App() {
   const [grid, setGrid] = useState(Array(9).fill(Array(9).fill('')));
   const [solution, setSolution] = useState([]);
   const [remainingTime, setRemainingTime] = useState(0);
+
 
   useEffect(() => {
     if (remainingTime > 0) {
@@ -71,16 +72,16 @@ function App() {
     sudoku.fillValues();
 
     setGrid(sudoku.mat);
-    setSolution([]); // Clear any existing solution when a new puzzle is generated
+    setSolution([]); 
   };
   const solveForMe = () => {
     if (grid.length === 0) {
       alert("Generate a puzzle first!");
       return;
     }
-    const solutionGrid = JSON.parse(JSON.stringify(grid)); // Create a copy of the current grid
-    sudokuSolver(solutionGrid); // Calculate the solution
-    setSolution(solutionGrid); // Store the solution in the state
+    const solutionGrid = JSON.parse(JSON.stringify(grid)); 
+    sudokuSolver(solutionGrid); 
+    setSolution(solutionGrid);
   };
 
   const startTimer = (minutes) => {

diff --git a/sudoku-app/src/SudokuGrid.css b/sudoku-app/src/SudokuGrid.css
@@ -21,6 +21,14 @@
     border-top: 2px solid rgb(49, 43, 51);
 }
 
+.sudoku-cell-given {
+    color: black;
+  }
+
+  .sudoku-cell-new {
+    color: red;
+  }
+
 @media(max-width:600px){
     h1{
         font-size: clamp(1rem, calc(1rem + 2vw), 2rem);

diff --git a/sudoku-app/src/SudokuGrid.js b/sudoku-app/src/SudokuGrid.js
@@ -1,26 +1,30 @@
 import React, { useState } from 'react';
 import './SudokuGrid.css';
 const SudokuGrid = ({ grid, solution, handleInputChange }) => {
-  return (
+   return (
     <div className="sudoku-grid">
       {grid.map((rowArray, rowIndex) => (
         <div key={rowIndex} className="sudoku-row">
-          {rowArray.map((cellValue, colIndex) => (
-            <input
-              key={colIndex}
-              type="text"
-              className={
-                `sudoku-cell 
-                ${rowIndex == 3 || rowIndex == 6 ? "t-border" : ""} 
-                ${colIndex + 1 == 3 || colIndex + 1 == 6 ? "r-border" : ""}`}
-              value={solution.length > 0 ? solution[rowIndex][colIndex] : cellValue}
-              maxLength="1"
-              readOnly={solution.length > 0}
-              onChange={(e) =>
-                handleInputChange(rowIndex, colIndex, e.target.value)
-              }
-            />
-          ))}
+          {rowArray.map((cellValue, colIndex) => {
+            const isGiven = grid[rowIndex][colIndex] !== ''; // Check if the cell is part of the initial grid
+
+            return (
+              <input
+                key={colIndex}
+                type="text"
+                className={
+                  `sudoku-cell 
+                  ${rowIndex === 2 || rowIndex === 5 ? "t-border" : ""} 
+                  ${colIndex === 2 || colIndex === 5 ? "r-border" : ""}`}
+                value={solution.length > 0 ? solution[rowIndex][colIndex] : cellValue}
+                maxLength="1"
+                readOnly={solution.length > 0 || isGiven}
+                onChange={(e) =>
+                  handleInputChange(rowIndex, colIndex, e.target.value)
+                }
+              />
+            );
+          })}
         </div>
       ))}
     </div>