Added hover to some components

src/App.jsx

@@ -51,8 +51,14 @@ export default function App() {
 
 function Field({ row, col, style, disabled }) {
   const [pointer, setPointer] = useState(false);
+  const [color, setColor] = useState("white");
+
   const styling = {
-    backgroundColor: style.backgroundColor,
+    backgroundColor: !pointer
+      ? style.backgroundColor
+      : params.currentPlayer === "red" && row === 0
+      ? color
+      : params.currentPlayer === "yellow" && row === 0 && color,
     cursor: pointer && "pointer",
   };
 
@@ -62,13 +68,28 @@ function Field({ row, col, style, disabled }) {
       row={row}
       col={col}
       style={styling}
-      onClick={() => clickHandlerTurn(col, params)}
+      onClick={async () => {
+        await clickHandlerTurn(col, params);
+        if (params.gamemode === 2) {
+          params.currentPlayer === "red"
+            ? setColor("lightcoral")
+            : setColor("#f2f28d");
+        }
+      }}
       disabled={disabled}
       onMouseEnter={() => {
-        !disabled && !params.gameOver && setPointer(true);
+        params.gameOver && setPointer(false);
+
+        if (!disabled && !params.gameOver) {
+          setPointer(true);
+        }
+        params.currentPlayer === "red"
+          ? setColor("lightcoral")
+          : setColor("#f2f28d");
       }}
       onMouseLeave={() => {
-        params.gameOver && setPointer(false);
+        setColor(style.backgroundColor);
+        setPointer(false);
       }}
     >
        

src/functions.js

@@ -96,6 +96,16 @@ function botChoice(colorBoard) {
   }
 }
 
+export function colFull(col, colorBoard) {
+  for (let row = 5; row >= 0; row--) {
+    if (colorBoard[row][col] === "white") {
+      return false;
+    } else {
+      return true;
+    }
+  }
+}
+
 export async function clickHandlerTurn(col, params) {
   const iMax = params.gamemode === 1 ? 2 : 1;
 

src/index.css

@@ -77,4 +77,12 @@ body {
 
 .message {
     font-size: larger;
+}
+
+.heading{
+    transition: font-size 1s ease-out 100ms;
+}
+
+.heading:hover{
+    font-size:3em;
 }