From fbeb7a673f33181e480db6bd8b00986b59265d16 Mon Sep 17 00:00:00 2001
From: Mufaddal Naguthanawala <m.nguthana@hotmail.com>
Date: Wed, 16 Aug 2023 08:11:17 -0700
Subject: [PATCH] Modify time start from 0:00 and alert with time

---
 sudoku-app/src/App.js     | 59 ++++++++++++++++++++++-----------------
 sudoku-app/src/Buttons.js |  2 +-
 2 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/sudoku-app/src/App.js b/sudoku-app/src/App.js
index 9aa047a..60af007 100644
--- a/sudoku-app/src/App.js
+++ b/sudoku-app/src/App.js
@@ -11,30 +11,29 @@ function App() {
   const [grid, setGrid] = useState(new Array(9).fill().map(() => new Array(9).fill('')));
   const [givenGrid, setGivenGrid] = useState(new Array(9).fill().map(() => new Array(9).fill('')));
   const [errorsGrid, setErrorsGrid] = useState(new Array(9).fill().map(() => new Array(9).fill(false)));
-  const [errorsVisibility, setErrorsVisibility] = useState(false)
+  const [errorsVisibility, setErrorsVisibility] = useState(false);
   const [solution, setSolution] = useState([]);
-  const [remainingTime, setRemainingTime] = useState(0);
-  const [timerId, setTimerId] = useState(null)
+  const [startTime, setStartTime] = useState(null);
+  const [elapsedTime, setElapsedTime] = useState(0);
 
   useEffect(() => {
-    if (remainingTime > 0) {
+    if (startTime !== null) {
       const timer = setInterval(() => {
-        setRemainingTime(prevTime => prevTime - 1);
+        const currentTime = Date.now();
+        const elapsedSeconds = Math.floor((currentTime - startTime) / 1000);
+        setElapsedTime(elapsedSeconds);
       }, 1000);
-      setTimerId(timer)
       return () => clearInterval(timer);
     }
-  }, [remainingTime]);
+  }, [startTime]);
 
+  const startTimer = () => {
+    setStartTime(Date.now());
+  };
 
-  const isFullyFilled = (grid) => {
-    for (let row = 0; row < 9; row++) {
-      for (let col = 0; col < 9; col++) {
-        if (grid[row][col] === "") return false;
-      }
-    }
-    return true;
-  }
+  const stopTimer = () => {
+    setStartTime(null);
+  };
 
   const handleGridChange = (row, col, value) => {
     if (!/^[1-9\b]*$/.test(value)) {
@@ -52,14 +51,30 @@ function App() {
 
     if (isFullyFilled(newGrid)) {
       if (sudokuChecker(newGrid.map(row => row.slice()))) {
-        alert("Sudoku solved!");
-        stopTimer()
+      const totalSeconds = elapsedTime;
+      const minutes = Math.floor(totalSeconds / 60);
+      const seconds = totalSeconds % 60;
+      const formattedTime = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+      alert(`Sudoku solved in ${formattedTime}`);
+      stopTimer();
       } else {
         alert("Sudoku wrong!");
       }
     }
   };
 
+
+  const isFullyFilled = (grid) => {
+    for (let row = 0; row < 9; row++) {
+      for (let col = 0; col < 9; col++) {
+        if (grid[row][col] === "") return false;
+      }
+    }
+    return true;
+  }
+
+  
+
   const handleDifficultySelection = (difficulty) => {
     let holes = 0;
 
@@ -101,13 +116,7 @@ function App() {
     setErrorsVisibility(!errorsVisibility)
   }
 
-  const startTimer = (minutes) => {
-    setRemainingTime(minutes * 60);
-  };
-
-  const stopTimer = () => {
-    clearInterval(timerId);
-  };
+  
 
   return (
     <div className="App">
@@ -126,7 +135,7 @@ function App() {
           handleDifficultySelection(difficulty)}
         solveForMe={solveForMe}
         startTimer={startTimer}
-        remainingTime={remainingTime}
+        remainingTime={elapsedTime}
         toggleErrors={toggleErrors}
         errorsVisibility={errorsVisibility}
       />
diff --git a/sudoku-app/src/Buttons.js b/sudoku-app/src/Buttons.js
index 7a778ea..45193f4 100644
--- a/sudoku-app/src/Buttons.js
+++ b/sudoku-app/src/Buttons.js
@@ -28,7 +28,7 @@ function Buttons({ startTimer, handleDifficultySelection, solveForMe, remainingT
         <button className="button" onClick={solveForMe}>Solve for Me</button>
         <button className="button" onClick={toggleErrors}>{errorsVisibility ? "Hide Errors" : "Show Errors"}</button>
       </div>
-      <div className="timer">Time remaining: {Math.floor(remainingTime / 60)}:{(remainingTime % 60).toString().padStart(2, '0')}</div>
+      <div className="timer">Time elapsed: {Math.floor(remainingTime / 60)}:{(remainingTime % 60).toString().padStart(2, '0')}</div>
 
     </div>
   );