function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 9 }).fill(null)); const [isPlayerTurn, setIsPlayerTurn] = React.useState(true); const [winner, setWinner] = React.useState(null); const [playerWins, setPlayerWins] = React.useState(0); const [aiWins, setAiWins] = React.useState(0); const [gameRound, setGameRound] = React.useState(1); React.useEffect(()=>{ if (isPlayerTurn || winner) return; const playAITurn = ()=>{ const availablePositions = board.map((item, index)=>item === null ? index : null).filter((i)=>i !== null); if (availablePositions.length) { const delay = Math.floor(Math.random() * (3000 - 1000 + 1)) + 1000; setTimeout(()=>{ const position = availablePositions[Math.floor(Math.random() * availablePositions.length)]; makeMove(position, 'X'); }, delay); } }; playAITurn(); }, [ isPlayerTurn, board, winner ]); const checkForWinner = (squares)=>{ const lines = [ [ 0, 1, 2 ], [ 3, 4, 5 ], [ 6, 7, 8 ], [ 0, 3, 6 ], [ 1, 4, 7 ], [ 2, 5, 8 ], [ 0, 4, 8 ], [ 2, 4, 6 ] ]; for(let i = 0; i < lines.length; i++){ const [a, b, c] = lines[i]; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; }; React.useEffect(()=>{ const winner = checkForWinner(board); if (winner) { setWinner(winner === '0' ? 'Player' : 'AI'); if (winner === '0') { setPlayerWins(playerWins + 1); } else { setAiWins(aiWins + 1); } } }, [ board ]); React.useEffect(()=>{ if (playerWins === 3 || aiWins === 3) return; if (winner) { setTimeout(()=>{ resetGame(); setIsPlayerTurn(gameRound % 2 === 0); setGameRound(gameRound + 1); }, 2000); } }, [ winner ]); const makeMove = (position, player)=>{ if (board[position] !== null || winner) return; const newBoard = [ ...board ]; newBoard[position] = player; setBoard(newBoard); setIsPlayerTurn(!isPlayerTurn); }; const resetGame = ()=>{ setBoard(Array.from({ length: 9 }).fill(null)); setWinner(null); }; const handleSquareClick = (index)=>{ if (isPlayerTurn && !winner && board[index] === null) { makeMove(index, '0'); } }; if (playerWins === 3 || aiWins === 3) { return /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl m-4", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, playerWins === 3 ? 'Player' : 'AI', " wins the series!"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setPlayerWins(0); setAiWins(0); resetGame(); }, className: "rounded bg-blue-500 text-white p-2", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, "New Series")); } return /*#__PURE__*/ React.createElement("div", { className: "max-w-[480px] mx-auto", __source: { fileName: "", lineNumber: 96, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center font-roboto text-2xl my-4", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, winner ? `${winner} wins!` : isPlayerTurn ? "Player's turn" : "AI's turn"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this }, board.map((value, index)=>/*#__PURE__*/ React.createElement("div", { key: index, onClick: ()=>handleSquareClick(index), className: `w-24 h-24 flex items-center justify-center border-2 ${value === '0' ? 'text-red-500' : 'text-blue-500'} font-bold text-xl cursor-pointer`, "data-index": index, __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, value))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center my-4", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setPlayerWins(0); setAiWins(0); resetGame(); }, className: "rounded bg-[#004D40] text-white p-2", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, "New Series"))); }