diff --git a/src/App.jsx b/src/App.jsx index 3cd04dd..7873b73 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,7 +1,12 @@ import { useState } from "react"; -import { clickHandlerTurn, clickHandlerRestart, clickHandlerGamemode } from "./functions"; +import { + clickHandlerTurn, + clickHandlerRestart, + clickHandlerGamemode, + clickHandlerReturn, +} from "./functions"; -let params = {}; +const params = {}; export default function App() { const [colorBoard, setColorBoard] = useState( @@ -34,7 +39,6 @@ export default function App() { params.gamemode = gamemode; params.setGamemode = setGamemode; - return ( <> @@ -47,7 +51,10 @@ export default function App() { function Field({ row, col, style, disabled }) { const [pointer, setPointer] = useState(false); - const styling = { backgroundColor: style.backgroundColor, cursor: pointer && "pointer" }; + const styling = { + backgroundColor: style.backgroundColor, + cursor: pointer && "pointer", + }; return ( @@ -66,8 +77,7 @@ function Field({ row, col, style, disabled }) { } function Board() { - - let fields = params.colorBoard.map((subarr, row) => + const fields = params.colorBoard.map((subarr, row) => subarr.map((color, col) => { return ( ); }) @@ -89,39 +98,68 @@ function Board() {
{fields.map((subarr) => subarr.map((field) => field))}
+ +
); } function Restart() { - return (< button className="restart" hidden={!params.gameOver} onClick={() => clickHandlerRestart(params)}> - ↺ - ); + return ( + + ); +} + +function Return() { + return ( + + ); } function Gamemode() { - return + return ( + + ); } function Message() { const displayMem = params.menu ? "none" : ""; - return

- {params.message} -

+ return ( +

+ {params.message} +

+ ); } function Heading() { const displayMem = !params.menu ? "none" : ""; - return

- CONNECT4 -

-} \ No newline at end of file + return ( +

+ CONNECT4 +

+ ); +} diff --git a/src/functions.js b/src/functions.js index e441b3f..71671b9 100644 --- a/src/functions.js +++ b/src/functions.js @@ -26,12 +26,13 @@ async function putChip( } async function checkWin(colorBoard, setColorBoard, currentPlayer) { - const mem = colorBoard; for (let row = 0; row <= 5; row++) { for (let col = 0; col <= 6; col++) { - if (row <= 2 && mem[row][col] === currentPlayer && + if ( + row <= 2 && + mem[row][col] === currentPlayer && mem[row + 1][col] === currentPlayer && mem[row + 2][col] === currentPlayer && mem[row + 3][col] === currentPlayer @@ -41,7 +42,9 @@ async function checkWin(colorBoard, setColorBoard, currentPlayer) { } await setColorBoard(mem); return true; - } else if (col <= 3 && mem[row][col] === currentPlayer && + } else if ( + col <= 3 && + mem[row][col] === currentPlayer && mem[row][col + 1] === currentPlayer && mem[row][col + 2] === currentPlayer && mem[row][col + 3] === currentPlayer @@ -51,7 +54,10 @@ async function checkWin(colorBoard, setColorBoard, currentPlayer) { } await setColorBoard(mem); return true; - } else if (row <= 2 && col <= 3 && mem[row][col] === currentPlayer && + } 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 @@ -61,7 +67,10 @@ async function checkWin(colorBoard, setColorBoard, currentPlayer) { } await setColorBoard(mem); return true; - } else if (row <= 2 && col <= 3 && mem[row][col + 3] === currentPlayer && + } 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 @@ -76,12 +85,11 @@ async function checkWin(colorBoard, setColorBoard, currentPlayer) { } return false; - } function botChoice(colorBoard) { while (true) { - const rand = Math.floor(Math.random() * 7) + const rand = Math.floor(Math.random() * 7); if (colorBoard[0][rand] === "white") { return rand; } @@ -89,32 +97,36 @@ function botChoice(colorBoard) { } export async function clickHandlerTurn(col, params) { - const iMax = params.gamemode === 1 ? 2 : 1; for (let i = 0; i < iMax; i++) { - const memCurrentPlayer = params.currentPlayer; - const worked = i === 0 ? - await putChip( - col, - params.colorBoard, - params.currentPlayer, - params.setColorBoard, - params.setCurrentPlayer - ) : await putChip( - botChoice(params.colorBoard), - params.colorBoard, - params.currentPlayer, - params.setColorBoard, - params.setCurrentPlayer - ); + const worked = + i === 0 + ? await putChip( + col, + params.colorBoard, + params.currentPlayer, + params.setColorBoard, + params.setCurrentPlayer + ) + : await putChip( + botChoice(params.colorBoard), + params.colorBoard, + params.currentPlayer, + params.setColorBoard, + params.setCurrentPlayer + ); if (worked) { await params.setMessage(""); - const win = await checkWin(params.colorBoard, params.setColorBoard, memCurrentPlayer); + const win = await checkWin( + params.colorBoard, + params.setColorBoard, + memCurrentPlayer + ); await params.setTurns(params.turns + 1); @@ -124,11 +136,10 @@ export async function clickHandlerTurn(col, params) { await params.setGameOver(true); await params.setCurrentPlayer("red"); break; - } else if (params.turns === 42) { await params.setMessage("draw!"); await params.setGameOver(true); - await params.setCurrentPlayer("red") + await params.setCurrentPlayer("red"); break; } } else { @@ -136,8 +147,6 @@ export async function clickHandlerTurn(col, params) { break; } } - - } export function clickHandlerRestart(params) { @@ -151,3 +160,11 @@ export function clickHandlerGamemode(params, gamemode) { params.setMenu(false); params.setGamemode(gamemode); } + +export function clickHandlerReturn(params) { + params.setMenu(true); + params.setTurns(0); + 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 f301147..3565007 100644 --- a/src/index.css +++ b/src/index.css @@ -30,17 +30,21 @@ body { margin: 10px; } -.restart { +.inner-button { width: 100px; height: 60px; - font-size: xx-large; + font-size: larger; border: 3px solid black; background-color: white; margin-bottom: 30px; } -.restart:hover { +#restart{ + font-size: x-large; +} + +.inner-button:hover { cursor: pointer; background-color: lightgray; }