From 5059ec687c062dfd55ef23dbef27b485d7a360bf Mon Sep 17 00:00:00 2001 From: selim Date: Sat, 28 Dec 2024 09:58:34 +0100 Subject: [PATCH] Fixed checkWin logic and added new components --- index.html | 2 +- src/App.jsx | 29 +++++++++--- src/functions.js | 117 +++++++++++++++++++++++------------------------ src/index.css | 4 +- 4 files changed, 83 insertions(+), 69 deletions(-) diff --git a/index.html b/index.html index 0c589ec..76d0971 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - Vite + React + CONNECT4 in React
diff --git a/src/App.jsx b/src/App.jsx index 01beac8..25f7bd9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -35,14 +35,13 @@ export default function App() { params.setGamemode = setGamemode; - return ( <> -

CONNECT4

+ - {!params.menu && } - {!params.menu && } - {!params.menu &&

{params.message}

} + + + ); } @@ -63,7 +62,7 @@ function Field({ row, col, backgroundColor, disabled }) { } function Board() { - var fields = params.colorBoard.map((subarr, row) => + let fields = params.colorBoard.map((subarr, row) => subarr.map((color, col) => { return ( +
{fields.map((subarr) => subarr.map((field) => field))}
); @@ -100,4 +101,18 @@ function Gamemode() { multiplayer +} + +function Message() { + const displayMem = params.menu ? "none" : ""; + return

+ {params.message} +

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

+ CONNECT4 +

} \ No newline at end of file diff --git a/src/functions.js b/src/functions.js index 4ea86e6..e441b3f 100644 --- a/src/functions.js +++ b/src/functions.js @@ -12,70 +12,71 @@ async function putChip( mem[row][col] = "red"; await setColorBoard(mem); await setCurrentPlayer("yellow"); - return [true, row]; + return true; } else { let mem = colorBoard; mem[row][col] = "yellow"; await setColorBoard(mem); await setCurrentPlayer("red"); - return [true, row]; + return true; } } } - return [false, null]; + return false; } -function checkWin(row, col, colorBoard, currentPlayer) { - if ( - (row <= 2 && - colorBoard[row][col] === currentPlayer && - colorBoard[row + 1][col] === currentPlayer && - colorBoard[row + 2][col] === currentPlayer && - colorBoard[row + 3][col] === currentPlayer) || - (col <= 3 && - colorBoard[row][col] === currentPlayer && - colorBoard[row][col + 1] === currentPlayer && - colorBoard[row][col + 2] === currentPlayer && - colorBoard[row][col + 3] === currentPlayer) || - (row >= 3 && - colorBoard[row][col] === currentPlayer && - colorBoard[row - 1][col] === currentPlayer && - colorBoard[row - 2][col] === currentPlayer && - colorBoard[row - 3][col] === currentPlayer) || - (col >= 3 && - colorBoard[row][col] === currentPlayer && - colorBoard[row][col - 1] === currentPlayer && - colorBoard[row][col - 2] === currentPlayer && - colorBoard[row][col - 3] === currentPlayer) || - (row <= 2 && - col <= 3 && - colorBoard[row][col] === currentPlayer && - colorBoard[row + 1][col + 1] === currentPlayer && - colorBoard[row + 2][col + 2] === currentPlayer && - colorBoard[row + 3][col + 3] === currentPlayer) || - (row >= 3 && - col >= 3 && - colorBoard[row][col] === currentPlayer && - colorBoard[row - 1][col - 1] === currentPlayer && - colorBoard[row - 2][col - 2] === currentPlayer && - colorBoard[row - 3][col - 3] === currentPlayer) || - (row <= 2 && - col >= 3 && - colorBoard[row][col] === currentPlayer && - colorBoard[row + 1][col - 1] === currentPlayer && - colorBoard[row + 2][col - 2] === currentPlayer && - colorBoard[row + 3][col - 3] === currentPlayer) || - (row >= 3 && - col <= 3 && - colorBoard[row][col] === currentPlayer && - colorBoard[row - 1][col + 1] === currentPlayer && - colorBoard[row - 2][col + 2] === currentPlayer && - colorBoard[row - 3][col + 3] === currentPlayer) - ) { - return true; - } else { - return false; +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 && + mem[row + 1][col] === currentPlayer && + mem[row + 2][col] === currentPlayer && + mem[row + 3][col] === currentPlayer + ) { + for (let i = 0; i <= 3; i++) { + mem[row + i][col] = "orange"; + } + await setColorBoard(mem); + 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 + ) { + for (let i = 0; i <= 3; i++) { + mem[row][col + i] = "orange"; + } + await setColorBoard(mem); + 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 + ) { + for (let i = 0; i <= 3; i++) { + mem[row + i][col + i] = "orange"; + } + await setColorBoard(mem); + 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 + ) { + for (let i = 0; i <= 3; i++) { + mem[row + i][col + 3 - i] = "orange"; + } + await setColorBoard(mem); + return true; + } + } } + + return false; + } function botChoice(colorBoard) { @@ -95,9 +96,7 @@ export async function clickHandlerTurn(col, params) { const memCurrentPlayer = params.currentPlayer; - const botMove = i !== 0 && botChoice(params.colorBoard); - - const [worked, currentChip] = i === 0 ? + const worked = i === 0 ? await putChip( col, params.colorBoard, @@ -105,7 +104,7 @@ export async function clickHandlerTurn(col, params) { params.setColorBoard, params.setCurrentPlayer ) : await putChip( - botMove, + botChoice(params.colorBoard), params.colorBoard, params.currentPlayer, params.setColorBoard, @@ -115,9 +114,7 @@ export async function clickHandlerTurn(col, params) { if (worked) { await params.setMessage(""); - const actualMove = i === 0 ? col : botMove; - - const win = checkWin(currentChip, actualMove, params.colorBoard, memCurrentPlayer); + const win = await checkWin(params.colorBoard, params.setColorBoard, memCurrentPlayer); await params.setTurns(params.turns + 1); diff --git a/src/index.css b/src/index.css index feb60fa..2036c26 100644 --- a/src/index.css +++ b/src/index.css @@ -9,7 +9,9 @@ body { height: 600px; display: grid; grid-template-columns: repeat(7, auto [col-start]); - margin: auto; + margin-top: 50px; + margin-left: auto; + margin-right: auto; border: 5px solid black; background-color: blue; }