From 1b5bae32a7b21c66ee4ae2b788a6024fb93cc301 Mon Sep 17 00:00:00 2001
From: Selim Eser <2211482@stud.hs-mannheim.de>
Date: Sat, 28 Dec 2024 22:17:47 +0100
Subject: [PATCH] Added hover to some components

---
 src/App.jsx      | 29 +++++++++++++++++++++++++----
 src/functions.js | 10 ++++++++++
 src/index.css    |  8 ++++++++
 3 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 7873b73..0a6228a 100644
--- a/src/App.jsx
+++ b/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);
       }}
     >
       &nbsp;
diff --git a/src/functions.js b/src/functions.js
index 71671b9..475f756 100644
--- a/src/functions.js
+++ b/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;
 
diff --git a/src/index.css b/src/index.css
index 3565007..353de0f 100644
--- a/src/index.css
+++ b/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;
 }
\ No newline at end of file