Winning condition shown with offset outline instead of color

src/App.jsx

@@ -15,6 +15,12 @@ export default function App() {
   params.colorBoard = colorBoard;
   params.setColorBoard = setColorBoard;
 
+  const [outlineBoard, setOutlineBoard] = useState(
+    Array.from(Array(6), () => new Array(7).fill("0px solid black"))
+  );
+  params.outlineBoard = outlineBoard;
+  params.setOutlineBoard = setOutlineBoard;
+
   const [gameOver, setGameOver] = useState(false);
   params.gameOver = gameOver;
   params.setGameOver = setGameOver;
@@ -51,15 +57,18 @@ export default function App() {
 
 function Field({ row, col, style, disabled }) {
   const [pointer, setPointer] = useState(false);
-  const [color, setColor] = useState("white");
+  const [hoverColor, setHoverColor] = useState("white");
 
   const styling = {
     backgroundColor: !pointer
       ? style.backgroundColor
       : params.currentPlayer === "red" && row === 0
-      ? color
-      : params.currentPlayer === "yellow" && row === 0 && color,
+      ? hoverColor
+      : params.currentPlayer === "yellow" && row === 0 && hoverColor,
     cursor: pointer && "pointer",
+    outlineWidth: style.outlineWidth,
+    outlineColor: style.outlineColor,
+    outlineStyle: style.outlineStyle,
   };
 
   return (
@@ -69,26 +78,24 @@ function Field({ row, col, style, disabled }) {
       col={col}
       style={styling}
       onClick={async () => {
-        await clickHandlerTurn(col, params);
+        await clickHandlerTurn(params, col);
         if (params.gamemode === 2) {
           params.currentPlayer === "red"
-            ? setColor("lightcoral")
-            : setColor("#f2f28d");
+            ? setHoverColor("hsla(0, 100%, 80%, 1)")
+            : setHoverColor("hsla(60, 100%, 80%, 1)");
         }
       }}
       disabled={disabled}
       onMouseEnter={() => {
-        params.gameOver && setPointer(false);
-
-        if (!disabled && !params.gameOver) {
-          setPointer(true);
+        if (!disabled) {
+          setPointer(!params.gameOver);
         }
         params.currentPlayer === "red"
-          ? setColor("lightcoral")
-          : setColor("#f2f28d");
+          ? setHoverColor("hsla(0, 100%, 80%, 1)")
+          : setHoverColor("hsla(60, 100%, 80%, 1)");
       }}
       onMouseLeave={() => {
-        setColor(style.backgroundColor);
+        setHoverColor(style.backgroundColor);
         setPointer(false);
       }}
     >
@@ -105,7 +112,12 @@ function Board() {
           key={row.toString() + col.toString()}
           row={row}
           col={col}
-          style={{ backgroundColor: color }}
+          style={{
+            backgroundColor: color,
+            outlineWidth: params.outlineBoard[row][col].split(" ")[0],
+            outlineColor: params.outlineBoard[row][col].split(" ")[2],
+            outlineStyle: params.outlineBoard[row][col].split(" ")[1],
+          }}
           disabled={row === 0 ? params.gameOver : true}
         />
       );

src/functions.js

@@ -25,60 +25,65 @@ async function putChip(
   return false;
 }
 
-async function checkWin(colorBoard, setColorBoard, currentPlayer) {
-  const mem = colorBoard;
+async function checkWin(
+  colorBoard,
+  currentPlayer,
+  outlineBoard,
+  setOutlineBoard
+) {
+  const memOutlineBoard = outlineBoard;
 
   for (let row = 0; row <= 5; row++) {
     for (let col = 0; col <= 6; col++) {
       if (
         row <= 2 &&
-        mem[row][col] === currentPlayer &&
-        mem[row + 1][col] === currentPlayer &&
-        mem[row + 2][col] === currentPlayer &&
-        mem[row + 3][col] === currentPlayer
+        colorBoard[row][col] === currentPlayer &&
+        colorBoard[row + 1][col] === currentPlayer &&
+        colorBoard[row + 2][col] === currentPlayer &&
+        colorBoard[row + 3][col] === currentPlayer
       ) {
         for (let i = 0; i <= 3; i++) {
-          mem[row + i][col] = "orange";
+          memOutlineBoard[row + i][col] = "7px outset black";
         }
-        await setColorBoard(mem);
+        await setOutlineBoard(memOutlineBoard);
         return true;
       } else if (
         col <= 3 &&
-        mem[row][col] === currentPlayer &&
-        mem[row][col + 1] === currentPlayer &&
-        mem[row][col + 2] === currentPlayer &&
-        mem[row][col + 3] === currentPlayer
+        colorBoard[row][col] === currentPlayer &&
+        colorBoard[row][col + 1] === currentPlayer &&
+        colorBoard[row][col + 2] === currentPlayer &&
+        colorBoard[row][col + 3] === currentPlayer
       ) {
         for (let i = 0; i <= 3; i++) {
-          mem[row][col + i] = "orange";
+          memOutlineBoard[row][col + i] = "7px outset black";
         }
-        await setColorBoard(mem);
+        await setOutlineBoard(memOutlineBoard);
         return true;
       } else if (
         row <= 2 &&
         col <= 3 &&
-        mem[row][col] === currentPlayer &&
-        mem[row + 1][col + 1] === currentPlayer &&
-        mem[row + 2][col + 2] === currentPlayer &&
-        mem[row + 3][col + 3] === currentPlayer
+        colorBoard[row][col] === currentPlayer &&
+        colorBoard[row + 1][col + 1] === currentPlayer &&
+        colorBoard[row + 2][col + 2] === currentPlayer &&
+        colorBoard[row + 3][col + 3] === currentPlayer
       ) {
         for (let i = 0; i <= 3; i++) {
-          mem[row + i][col + i] = "orange";
+          memOutlineBoard[row + i][col + i] = "7px outset black";
         }
-        await setColorBoard(mem);
+        await setOutlineBoard(memOutlineBoard);
         return true;
       } else if (
         row <= 2 &&
         col <= 3 &&
-        mem[row][col + 3] === currentPlayer &&
-        mem[row + 1][col + 2] === currentPlayer &&
-        mem[row + 2][col + 1] === currentPlayer &&
-        mem[row + 3][col] === currentPlayer
+        colorBoard[row][col + 3] === currentPlayer &&
+        colorBoard[row + 1][col + 2] === currentPlayer &&
+        colorBoard[row + 2][col + 1] === currentPlayer &&
+        colorBoard[row + 3][col] === currentPlayer
       ) {
         for (let i = 0; i <= 3; i++) {
-          mem[row + i][col + 3 - i] = "orange";
+          memOutlineBoard[row + i][col + 3 - i] = "7px outset black";
         }
-        await setColorBoard(mem);
+        await setOutlineBoard(memOutlineBoard);
         return true;
       }
     }
@@ -106,7 +111,7 @@ export function colFull(col, colorBoard) {
   }
 }
 
-export async function clickHandlerTurn(col, params) {
+export async function clickHandlerTurn(params, col) {
   const iMax = params.gamemode === 1 ? 2 : 1;
 
   for (let i = 0; i < iMax; i++) {
@@ -134,8 +139,9 @@ export async function clickHandlerTurn(col, params) {
 
       const win = await checkWin(
         params.colorBoard,
-        params.setColorBoard,
-        memCurrentPlayer
+        memCurrentPlayer,
+        params.outlineBoard,
+        params.setOutlineBoard
       );
 
       await params.setTurns(params.turns + 1);
@@ -163,6 +169,9 @@ export function clickHandlerRestart(params) {
   params.setTurns(0);
   params.setGameOver(false);
   params.setColorBoard(Array.from(Array(6), () => new Array(7).fill("white")));
+  params.setOutlineBoard(
+    Array.from(Array(6), () => new Array(7).fill("0px solid black"))
+  );
   params.setMessage("");
 }
 
@@ -176,5 +185,8 @@ export function clickHandlerReturn(params) {
   params.setTurns(0);
   params.setGameOver(false);
   params.setColorBoard(Array.from(Array(6), () => new Array(7).fill("white")));
+  params.setOutlineBoard(
+    Array.from(Array(6), () => new Array(7).fill("0px solid black"))
+  );
   params.setMessage("");
 }

src/index.css

@@ -28,6 +28,7 @@ body {
     border: 3px solid black;
     border-radius: 100%;
     margin: 10px;
+    outline-offset: -7px;
 }
 
 .inner-button {