diff --git a/src/App.jsx b/src/App.jsx index 13822ef..0a35ae1 100644 --- a/src/App.jsx +++ b/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() { <>

CONNECT4

+

{params.message}

); @@ -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} >   @@ -73,3 +74,9 @@ function Board() { ); } + +function Restart() { + return (< button className="restart" disabled={!params.gameOver} hidden={!params.gameOver} onClick={() => clickHandlerRestart(params)}> + ↺ + ); +} diff --git a/src/functions.js b/src/functions.js index 524bb1f..902e4d2 100644 --- a/src/functions.js +++ b/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(""); +} diff --git a/src/index.css b/src/index.css index 97e9e4e..4fa2857 100644 --- a/src/index.css +++ b/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; + +} \ No newline at end of file