diff --git a/package-lock.json b/package-lock.json index 4b58d31..1cb9893 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", - "vite": "^6.0.5" + "vite": "^6.0.6" } }, "node_modules/@ampproject/remapping": { diff --git a/package.json b/package.json index 35e2965..bc99278 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,6 @@ "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.14.0", - "vite": "^6.0.5" + "vite": "^6.0.6" } } diff --git a/src/App.jsx b/src/App.jsx index fd6bfa6..e1f8896 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,35 +1,38 @@ import { useState } from "react"; -import { checkWin, putChip } from "./fns"; +import { clickHandler } from "./fns"; -let [getColorBoard, setColorBoard] = [null, null]; -let [getGameOver, setGameOver] = [null, null]; -let [getCurrentPlayer, setCurrentPlayer] = [null, null]; -let [getMessage, setMessage] = [null, null]; +let params = {}; export default function App() { - const [colorBoard, sColorBoard] = useState( + const [colorBoard, setColorBoard] = useState( Array.from(Array(6), () => new Array(7).fill("white")) ); - getColorBoard = colorBoard; - setColorBoard = sColorBoard; + params.colorBoard = colorBoard; + params.setColorBoard = setColorBoard; - const [gameOver, sGameOver] = useState(false); - getGameOver = gameOver; - setGameOver = sGameOver; + const [gameOver, setGameOver] = useState(false); + params.gameOver = gameOver; + params.setGameOver = setGameOver; + + const [currentPlayer, setCurrentPlayer] = useState("red"); + params.currentPlayer = currentPlayer; + params.setCurrentPlayer = setCurrentPlayer; + + const [message, setMessage] = useState(""); + params.message = message; + params.setMessage = setMessage; + + const [turns, setTurns] = useState(1); + params.turns = turns; + params.setTurns = setTurns; - const [currentPlayer, sCurrentPlayer] = useState("red"); - getCurrentPlayer = currentPlayer; - setCurrentPlayer = sCurrentPlayer; - const [message, sMessage] = useState(""); - getMessage = message; - setMessage = sMessage; return ( <>
{getMessage}
+{params.message}
> ); } @@ -41,22 +44,7 @@ function Field({ row, col, backgroundColor, disabled }) { row={row} col={col} style={backgroundColor} - onClick={() => { - let currentChip = putChip( - col, - getColorBoard, - getCurrentPlayer, - setColorBoard, - setCurrentPlayer - ); - - let win = checkWin(currentChip, col, getColorBoard, getCurrentPlayer); - - if (win) { - setMessage(getCurrentPlayer + " wins!"); - setGameOver(true); - } - }} + onClick={() => clickHandler(col, params)} disabled={disabled} > @@ -65,7 +53,7 @@ function Field({ row, col, backgroundColor, disabled }) { } function Board() { - var fields = getColorBoard.map((subarr, row) => + var fields = params.colorBoard.map((subarr, row) => subarr.map((color, col) => { return (