added restart button

src/App.jsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { clickHandler } from "./functions";
+import { clickHandlerTurn, clickHandlerRestart } from "./functions";
 
 let params = {};
 
@@ -32,6 +32,7 @@ export default function App() {
     <>
       <h1>CONNECT4</h1>
       <Board />
+      <Restart />
       <p>{params.message}</p>
     </>
   );
@@ -44,7 +45,7 @@ function Field({ row, col, backgroundColor, disabled }) {
       row={row}
       col={col}
       style={backgroundColor}
-      onClick={() => clickHandler(col, params)}
+      onClick={() => clickHandlerTurn(col, params)}
       disabled={disabled}
     >
       &nbsp;
@@ -73,3 +74,9 @@ function Board() {
     </div>
   );
 }
+
+function Restart() {
+  return (< button className="restart" disabled={!params.gameOver} hidden={!params.gameOver} onClick={() => clickHandlerRestart(params)}>
+    &#8634;
+  </button >);
+}

src/functions.js

@@ -78,7 +78,7 @@ export function checkWin(row, col, colorBoard, currentPlayer) {
   }
 }
 
-export function clickHandler(col, params) {
+export function clickHandlerTurn(col, params) {
   const [worked, currentChip] = putChip(
     col,
     params.colorBoard,
@@ -104,3 +104,10 @@ export function clickHandler(col, params) {
     params.setMessage("column is full!");
   }
 }
+
+export function clickHandlerRestart(params) {
+  params.setTurns(1);
+  params.setGameOver(false);
+  params.setColorBoard(Array.from(Array(6), () => new Array(7).fill("white")));
+  params.setMessage("");
+}

src/index.css

@@ -1,19 +1,31 @@
-body{
+body {
     text-align: center;
     font-family: Arial, Helvetica, sans-serif;
 }
-.board{
-    width:700px;
-    height:600px;
-    display:grid;
+
+.board {
+    width: 700px;
+    height: 600px;
+    display: grid;
     grid-template-columns: repeat(7, auto [col-start]);
     margin: auto;
-    border: 3px solid black;
+    border: 5px solid black;
     background-color: blue;
 }
 
-.board .field{
+.board .field {
     border: 3px solid black;
     border-radius: 100%;
     margin: 10px;
 }
+
+.restart {
+    width: 100px;
+    height: 60px;
+    font-size: xx-large;
+    border: 5px solid black;
+    color: white;
+    background-color: blue;
+    margin-top: 20px;
+
+}