2211482
/
CONNECT4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed checkWin logic and added new components

main
selim 2024-12-28 09:58:34 +01:00
parent 73261476ee
commit 5059ec687c
4 changed files with 83 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title> <title>CONNECT4 in React</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

29
src/App.jsx
View File

@ -35,14 +35,13 @@ export default function App() {
params.setGamemode = setGamemode; params.setGamemode = setGamemode;
return ( return (
<> <>
<h1>CONNECT4</h1> <Heading />
<Gamemode /> <Gamemode />
{!params.menu && <Board />} <Board />
{!params.menu && <Restart />} <Restart />
{!params.menu && <p>{params.message}</p>} <Message />
</> </>
); );
} }
@ -63,7 +62,7 @@ function Field({ row, col, backgroundColor, disabled }) {
} }
function Board() { function Board() {
var fields = params.colorBoard.map((subarr, row) => let fields = params.colorBoard.map((subarr, row) =>
subarr.map((color, col) => { subarr.map((color, col) => {
return ( return (
<Field <Field
@ -77,8 +76,10 @@ function Board() {
}) })
); );
const displayMem = params.menu ? "none" : "";
return ( return (
<div className="board"> <div className="board" style={{ display: displayMem }}>
{fields.map((subarr) => subarr.map((field) => field))} {fields.map((subarr) => subarr.map((field) => field))}
</div> </div>
); );
@ -101,3 +102,17 @@ function Gamemode() {
</button> </button>
</div> </div>
} }
function Message() {
const displayMem = params.menu ? "none" : "";
return <p className="message" style={{ display: displayMem }}>
{params.message}
</p>
}
function Heading() {
const displayMem = !params.menu ? "none" : "";
return <h1 className="heading" style={{ display: displayMem }}>
CONNECT4
</h1>
}

115
src/functions.js
View File

@ -12,70 +12,71 @@ async function putChip(
mem[row][col] = "red"; mem[row][col] = "red";
await setColorBoard(mem); await setColorBoard(mem);
await setCurrentPlayer("yellow"); await setCurrentPlayer("yellow");
return [true, row]; return true;
} else { } else {
let mem = colorBoard; let mem = colorBoard;
mem[row][col] = "yellow"; mem[row][col] = "yellow";
await setColorBoard(mem); await setColorBoard(mem);
await setCurrentPlayer("red"); await setCurrentPlayer("red");
return [true, row]; return true;
} }
} }
} }
return [false, null]; return false;
} }
function checkWin(row, col, colorBoard, currentPlayer) { async function checkWin(colorBoard, setColorBoard, currentPlayer) {
if (
(row <= 2 && const mem = colorBoard;
colorBoard[row][col] === currentPlayer &&
colorBoard[row + 1][col] === currentPlayer && for (let row = 0; row <= 5; row++) {
colorBoard[row + 2][col] === currentPlayer && for (let col = 0; col <= 6; col++) {
colorBoard[row + 3][col] === currentPlayer) || if (row <= 2 && mem[row][col] === currentPlayer &&
(col <= 3 && mem[row + 1][col] === currentPlayer &&
colorBoard[row][col] === currentPlayer && mem[row + 2][col] === currentPlayer &&
colorBoard[row][col + 1] === currentPlayer && mem[row + 3][col] === 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; for (let i = 0; i <= 3; i++) {
} else { mem[row + i][col] = "orange";
return false;
} }
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) { function botChoice(colorBoard) {
@ -95,9 +96,7 @@ export async function clickHandlerTurn(col, params) {
const memCurrentPlayer = params.currentPlayer; const memCurrentPlayer = params.currentPlayer;
const botMove = i !== 0 && botChoice(params.colorBoard); const worked = i === 0 ?
const [worked, currentChip] = i === 0 ?
await putChip( await putChip(
col, col,
params.colorBoard, params.colorBoard,
@ -105,7 +104,7 @@ export async function clickHandlerTurn(col, params) {
params.setColorBoard, params.setColorBoard,
params.setCurrentPlayer params.setCurrentPlayer
) : await putChip( ) : await putChip(
botMove, botChoice(params.colorBoard),
params.colorBoard, params.colorBoard,
params.currentPlayer, params.currentPlayer,
params.setColorBoard, params.setColorBoard,
@ -115,9 +114,7 @@ export async function clickHandlerTurn(col, params) {
if (worked) { if (worked) {
await params.setMessage(""); await params.setMessage("");
const actualMove = i === 0 ? col : botMove; const win = await checkWin(params.colorBoard, params.setColorBoard, memCurrentPlayer);
const win = checkWin(currentChip, actualMove, params.colorBoard, memCurrentPlayer);
await params.setTurns(params.turns + 1); await params.setTurns(params.turns + 1);

4
src/index.css
View File

@ -9,7 +9,9 @@ body {
height: 600px; height: 600px;
display: grid; display: grid;
grid-template-columns: repeat(7, auto [col-start]); grid-template-columns: repeat(7, auto [col-start]);
margin: auto; margin-top: 50px;
margin-left: auto;
margin-right: auto;
border: 5px solid black; border: 5px solid black;
background-color: blue; background-color: blue;
} }