function MainComponent() { const [grid, setGrid] = React.useState(Array.from({ length: 9 }).fill(null)); const [isXNext, setIsXNext] = React.useState(true); const [winner, setWinner] = React.useState(null); const [isAI, setIsAI] = React.useState(false); const handleClick = (index)=>{ if (grid[index] || winner) return; const newGrid = grid.slice(); newGrid[index] = isXNext ? 'X' : 'O'; setGrid(newGrid); setIsXNext(!isXNext); checkWinner(newGrid); }; const AIPlay = ()=>{ let availableSpots = grid.reduce((acc, val, index)=>val === null ? acc.concat(index) : acc, []); let randomSpot = availableSpots[Math.floor(Math.random() * availableSpots.length)]; handleClick(randomSpot); }; React.useEffect(()=>{ if (isAI && !isXNext && !winner) { setTimeout(()=>{ AIPlay(); }, 500); } }, [ isXNext, isAI, winner ]); const checkWinner = (grid)=>{ 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 line of lines){ const [a, b, c] = line; if (grid[a] && grid[a] === grid[b] && grid[a] === grid[c]) { setWinner(grid[a]); return; } } }; const resetGame = ()=>{ setGrid(Array.from({ length: 9 }).fill(null)); setIsXNext(true); setWinner(null); }; const startAI = ()=>{ setIsAI(true); resetGame(); }; const startHuman = ()=>{ setIsAI(false); resetGame(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "Tic Tac Toe"), /*#__PURE__*/ React.createElement("button", { className: "mb-4 px-4 py-2 bg-blue-500 text-white rounded", onClick: startAI, __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, "Play Against AI"), /*#__PURE__*/ React.createElement("button", { className: "mb-4 px-4 py-2 bg-green-500 text-white rounded", onClick: startHuman, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, "Play Against Human"), /*#__PURE__*/ React.createElement("div", { className: `grid grid-cols-3 gap-2 w-[300px] h-[300px] ${winner ? 'animate-bounce' : ''}`, __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, grid.map((value, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-full h-full flex items-center justify-center bg-white border border-gray-400 text-4xl font-bold cursor-pointer", onClick: ()=>handleClick(index), __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, value))), winner && /*#__PURE__*/ React.createElement("div", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl text-green-500 font-bold", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, "Winner: ", winner), /*#__PURE__*/ React.createElement("button", { className: "mt-2 px-4 py-2 bg-blue-500 text-white rounded", onClick: resetGame, __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, "Start New Game")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .animate-bounce { animation: bounce 2s infinite; } `)); }