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

29
src/App.jsx
View File

@ -35,14 +35,13 @@ export default function App() {
params.setGamemode = setGamemode;
return (
<>
<h1>CONNECT4</h1>
<Heading />
<Gamemode />
{!params.menu && <Board />}
{!params.menu && <Restart />}
{!params.menu && <p>{params.message}</p>}
<Board />
<Restart />
<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 (
<Field
@ -77,8 +76,10 @@ function Board() {
})
);
const displayMem = params.menu ? "none" : "";
return (
<div className="board">
<div className="board" style={{ display: displayMem }}>
{fields.map((subarr) => subarr.map((field) => field))}
</div>
);
@ -100,4 +101,18 @@ function Gamemode() {
multiplayer
</button>
</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>
}

117
src/functions.js
View File

@ -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);

4
src/index.css
View File

@ -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;
}