function MainComponent() { const [difficulty, setDifficulty] = React.useState("easy"); const [puzzle, setPuzzle] = React.useState(Array.from({ length: 81 }).fill(".")); const [userInput, setUserInput] = React.useState(Array.from({ length: 81 }).fill("")); const [solution, setSolution] = React.useState(null); const [message, setMessage] = React.useState(""); const handleGeneratePuzzle = async ()=>{ const response = await fetch(`https://sudoku-api.com/generate?difficulty=${difficulty}`); const puzzleData = await response.json(); setPuzzle(puzzleData); setUserInput(puzzleData.map((cell)=>cell === "." ? "" : cell)); setSolution(null); setMessage(""); }; const handleInputChange = (index, value)=>{ const newInput = [ ...userInput ]; newInput[index] = value; setUserInput(newInput); }; const handleCheckSolution = async ()=>{ const response = await fetch("https://sudoku-api.com/check", { method: "POST", body: JSON.stringify({ puzzle: userInput }) }); const checkResult = await response.json(); setMessage(checkResult.valid ? "正解です" : "誤りがあります"); }; const handleResetPuzzle = ()=>{ setUserInput(puzzle.map((cell)=>cell === "." ? "" : cell)); setMessage(""); }; const handleGenerateSolution = async ()=>{ const response = await fetch("https://sudoku-api.com/solve", { method: "POST", body: JSON.stringify({ puzzle }) }); const solutionData = await response.json(); setSolution(solutionData.solution); }; return /*#__PURE__*/ React.createElement("div", { className: "font-arial bg-[#ffffff] text-[#000000] min-h-screen flex flex-col", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between p-4 bg-[#007bff] text-white", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "ナンプレジェネレーター"), /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "ホーム"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "パズル生成"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "解答チェック"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "設定"))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow p-4", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "ナンプレを生成"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "difficulty", className: "mr-2", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "難易度:"), /*#__PURE__*/ React.createElement("select", { name: "difficulty", value: difficulty, onChange: (e)=>setDifficulty(e.target.value), className: "border px-2 py-1", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "easy", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "簡単"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "中級"), /*#__PURE__*/ React.createElement("option", { value: "hard", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, "難しい"))), /*#__PURE__*/ React.createElement("button", { onClick: handleGeneratePuzzle, className: "bg-[#007bff] text-[#ffffff] px-4 py-2 rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "生成"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-9 gap-[2px] mt-4", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, puzzle.map((cell, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[40px] h-[40px] flex items-center justify-center border", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, cell === "." ? "" : cell)))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "ナンプレを解く"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-9 gap-[2px]", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, userInput.map((cell, index)=>/*#__PURE__*/ React.createElement("input", { key: index, name: `input-${index}`, type: "text", value: cell, onChange: (e)=>handleInputChange(index, e.target.value), className: "w-[40px] h-[40px] text-center border", maxLength: "1", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 107, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCheckSolution, className: "bg-[#007bff] text-[#ffffff] px-4 py-2 rounded mr-2", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, "解答をチェック"), /*#__PURE__*/ React.createElement("button", { onClick: handleResetPuzzle, className: "bg-[#007bff] text-[#ffffff] px-4 py-2 rounded", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "リセット"), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-[#ff0000]", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, message))), /*#__PURE__*/ React.createElement("section", { className: "mb-8", __source: { fileName: "", lineNumber: 123, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, "解答を生成"), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateSolution, className: "bg-[#007bff] text-[#ffffff] px-4 py-2 rounded", __source: { fileName: "", lineNumber: 125, columnNumber: 11 }, __self: this }, "解答を表示"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-9 gap-[2px] mt-4", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, solution && solution.map((cell, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[40px] h-[40px] flex items-center justify-center border", __source: { fileName: "", lineNumber: 133, columnNumber: 15 }, __self: this }, cell))))), /*#__PURE__*/ React.createElement("footer", { className: "flex justify-between p-4 bg-[#007bff] text-white", __source: { fileName: "", lineNumber: 143, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, "© 2023 ナンプレジェネレーター"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 146, columnNumber: 51 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 147, columnNumber: 51 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "hover:underline", __source: { fileName: "", lineNumber: 148, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 148, columnNumber: 51 }, __self: this }))))); }