function MainComponent() { const [turn, setTurn] = React.useState("○"); const [grid, setGrid] = React.useState(Array.from({ length: 9 }).fill(null)); const [result, setResult] = React.useState(""); const [history, setHistory] = React.useState([]); const checkWinner = (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 line of lines){ const [a, b, c] = line; if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) { return squares[a]; } } return null; }; const handleClick = (index)=>{ if (grid[index] || result) return; const newGrid = grid.slice(); newGrid[index] = turn; const nextTurn = turn === "○" ? "✕" : "○"; setGrid(newGrid); const winner = checkWinner(newGrid); if (winner) { setResult(`Winner: ${winner}`); setHistory([ ...history, `Winner: ${winner}, Board: ${JSON.stringify(newGrid)}` ]); } else if (newGrid.every((cell)=>cell)) { setResult("Draw"); setHistory([ ...history, `Draw, Board: ${JSON.stringify(newGrid)}` ]); } else { setTurn(nextTurn); } }; const renderGrid = ()=>{ return grid.map((cell, i)=>/*#__PURE__*/ React.createElement("div", { key: i, className: "w-[80px] h-[80px] flex items-center justify-center border-2 border-gray-400 text-3xl cursor-pointer font-mono bg-white", onClick: ()=>handleClick(i), __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, cell)); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gradient-to-b from-blue-200 to-blue-400", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-mono mb-6 text-white", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "まるばつゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-1", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, renderGrid()), /*#__PURE__*/ React.createElement("div", { className: "ml-6 text-xl font-mono text-white", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "結果履歴:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, history.map((entry, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-1", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, entry))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-2xl font-mono text-white", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, "結果: ", result)); }