function MainComponent() { const [board, setBoard] = React.useState(Array.from({ length: 9 }).fill(null)); const [xIsNext, setXIsNext] = React.useState(true); const [scores, setScores] = React.useState({ X: 0, O: 0 }); const winner = calculateWinner(board); function handleClick(i) { const boardCopy = [ ...board ]; if (winner || boardCopy[i]) return; boardCopy[i] = xIsNext ? 'X' : 'O'; setBoard(boardCopy); setXIsNext(!xIsNext); } function resetGame(winner) { if (winner) { setScores((prevScores)=>({ ...prevScores, [winner]: prevScores[winner] + 1 })); } setBoard(Array.from({ length: 9 }).fill(null)); } function calculateWinner(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(()=>{ if (winner) { setTimeout(()=>resetGame(winner), 1500); } }, [ winner ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mx-auto my-8 p-4 flex flex-col items-center bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full mb-4", __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-left font-bold", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "X: ", scores.X), /*#__PURE__*/ React.createElement("div", { className: "text-right font-bold", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, "O: ", scores.O)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, board.map((cell, i)=>/*#__PURE__*/ React.createElement("button", { key: i, className: `w-16 h-16 bg-[#f4f4f4] flex items-center justify-center rounded-lg text-2xl font-bold ${cell && 'cursor-default'}`, onClick: ()=>handleClick(i), disabled: !!cell, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, cell))), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-semibold", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, winner ? `Winner: ${winner}` : `Next player: ${xIsNext ? 'X' : 'O'}`), /*#__PURE__*/ React.createElement("button", { className: "mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition-colors", onClick: ()=>resetGame(null), __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, "Restart")); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 82, columnNumber: 1 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation: fadeIn 0.5s ease; } `);