From 7b33a70d23845722a7c2c1b3ea807580828b9a26 Mon Sep 17 00:00:00 2001
From: Aryaman Gupta <144788392+Aryam2121@users.noreply.github.com>
Date: Tue, 8 Oct 2024 18:19:45 +0530
Subject: [PATCH] Update App.js

Cell Styling: Each cell now has a class based on its value (X or O), allowing you to style them conditionally in your CSS.
Game Ending Logic: The game properly checks for winners or a draw after each move, resetting the state as needed.
User Interface: Maintains a clear UI structure for both the game selection and game play modes, enhancing user experience.
Mouse Tracking: Uses the Sparkle component to display visual feedback based on mouse position solve issue #95
---
 paras/src/App.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/paras/src/App.js b/paras/src/App.js
index 864570e..fef884d 100644
--- a/paras/src/App.js
+++ b/paras/src/App.js
@@ -51,14 +51,14 @@ const App = () => {
   const renderCell = (index) => {
     const value = board[index];
     return (
-      <div className="cell" onClick={() => handleCellClick(index)}>
+      <div className={`cell ${value}`} onClick={() => handleCellClick(index)}>
         {value}
       </div>
     );
   };
 
   const toggleTheme = () => {
-    setIsDarkMode((prevMode) => !prevMode);
+    setIsDarkMode(prevMode => !prevMode);
   };
 
   useEffect(() => {
@@ -195,6 +195,13 @@ const App = () => {
         ← Back to Mode Selection
       </button>
 
+      {/* Turn indicator */}
+      {!winner && !draw && (
+        <div className="turn-indicator">
+          <p>Player {currentPlayer}'s turn</p>
+        </div>
+      )}
+
       <div className="board">
         {board.map((cell, index) => renderCell(index))}
       </div>
@@ -230,4 +237,4 @@ const App = () => {
   );
 };
 
-export default App;
\ No newline at end of file
+export default App;