function MainComponent() { const [selectedWordList, setSelectedWordList] = React.useState(""); const [words, setWords] = React.useState([]); const [newWord, setNewWord] = React.useState({ term: "", definition: "", listName: "" }); const [showAddForm, setShowAddForm] = React.useState(false); const [activeTab, setActiveTab] = React.useState("wordlist"); const [isTranslating, setIsTranslating] = React.useState(false); const [showNewFolderModal, setShowNewFolderModal] = React.useState(false); const [newFolderName, setNewFolderName] = React.useState(""); const [wordLists, setWordLists] = React.useState([]); const [currentQuestion, setCurrentQuestion] = React.useState(0); const [score, setScore] = React.useState(0); const [showScore, setShowScore] = React.useState(false); const [options, setOptions] = React.useState([]); const [selectedAnswer, setSelectedAnswer] = React.useState(null); const [streamingDefinition, setStreamingDefinition] = React.useState(""); const [isGeneratingDefinition, setIsGeneratingDefinition] = React.useState(false); const [formErrors, setFormErrors] = React.useState({}); const [showSuccess, setShowSuccess] = React.useState(false); const [incorrectQuestions, setIncorrectQuestions] = React.useState([]); const [loadingOptions, setLoadingOptions] = React.useState(false); const [totalQuestions, setTotalQuestions] = React.useState(0); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingDefinition, onFinish: (message)=>{ setNewWord((prev)=>({ ...prev, definition: message })); setIsGeneratingDefinition(false); setStreamingDefinition(""); } }); const generateDefinition = async (term)=>{ setIsGeneratingDefinition(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "あなたは用語の意味を簡潔に言い換える専門家です。" }, { role: "user", content: `「${term}」の意味を短い言葉で言い換えてください。` } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error(error); setIsGeneratingDefinition(false); } }; const generateWrongAnswers = async (term, correctDefinition)=>{ try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "あなたは教育コンテンツ作成の専門家です。" }, { role: "user", content: `「${term}」の誤った定義を3つ生成してください。正しい定義は「${correctDefinition}」です。誤った定義は、一見正しそうに見えるが実際は間違っているものにしてください。各定義は20文字以内でお願いします。` } ], json_schema: { name: "wrong_answers", schema: { type: "object", properties: { answers: { type: "array", items: { type: "string" } } }, required: [ "answers" ], additionalProperties: false } } }) }); const data = await response.json(); return JSON.parse(data.choices[0].message.content).answers; } catch (error) { console.error(error); return []; } }; const handleAddWord = async ()=>{ const errors = {}; if (!newWord.term) errors.term = "用語を入力してください"; if (!newWord.definition) errors.definition = "定義を入力してください"; if (!newWord.listName) errors.listName = "教材を選択してください"; setFormErrors(errors); if (Object.keys(errors).length === 0) { const updatedLists = wordLists.map((list)=>{ if (list.name === newWord.listName) { return { ...list, words: [ ...list.words, { term: newWord.term, definition: newWord.definition } ] }; } return list; }); try { await fetch("/api/db/039", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `terms` (term, definition, list_name) VALUES (?, ?, ?)", values: [ newWord.term, newWord.definition, newWord.listName ] }) }); setWordLists(updatedLists); setNewWord({ term: "", definition: "", listName: "" }); setShowAddForm(false); setShowSuccess(true); setTimeout(()=>setShowSuccess(false), 3000); localStorage.setItem("wordLists", JSON.stringify(updatedLists)); } catch (error) { console.error(error); } } }; const handleDeleteList = async (listName, e)=>{ e.preventDefault(); try { await fetch("/api/db/039", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `terms` WHERE list_name = ?", values: [ listName ] }) }); const updatedLists = wordLists.filter((list)=>list.name !== listName); setWordLists(updatedLists); localStorage.setItem("wordLists", JSON.stringify(updatedLists)); } catch (error) { console.error(error); } }; const generateOptions = async (questionIndex)=>{ setLoadingOptions(true); const correctAnswer = words[questionIndex]?.definition || ""; const wrongAnswers = await generateWrongAnswers(words[questionIndex]?.term || "", correctAnswer); const allOptions = [ ...wrongAnswers, correctAnswer ].sort(()=>Math.random() - 0.5); setOptions(allOptions); setLoadingOptions(false); }; const fetchWordLists = async ()=>{ try { const response = await fetch("/api/db/039", { method: "POST", body: JSON.stringify({ query: "SELECT DISTINCT list_name FROM `terms`" }) }); const data = await response.json(); const lists = data.map((item)=>({ name: item.list_name, words: [] })); setWordLists(lists); localStorage.setItem("wordLists", JSON.stringify(lists)); } catch (error) { console.error(error); } }; const handleCreateNewFolder = ()=>{ if (newFolderName.trim()) { const newList = { name: newFolderName, words: [] }; const updatedLists = [ ...wordLists, newList ]; setWordLists(updatedLists); setNewFolderName(""); setShowNewFolderModal(false); localStorage.setItem("wordLists", JSON.stringify(updatedLists)); } }; const startPractice = async ()=>{ setCurrentQuestion(0); setScore(0); setShowScore(false); setIncorrectQuestions([]); setTotalQuestions(words.length); await generateOptions(0); setActiveTab("quiz"); }; const retryIncorrectQuestions = async ()=>{ if (incorrectQuestions.length > 0) { setWords(incorrectQuestions); setCurrentQuestion(0); setSelectedAnswer(null); setIncorrectQuestions([]); setTotalQuestions(incorrectQuestions.length); await generateOptions(0); setActiveTab("quiz"); } }; const handleDeleteWord = async (term, listName)=>{ if (window.confirm("本当に削除してもよろしいですか？")) { try { await fetch("/api/db/039", { method: "POST", body: JSON.stringify({ query: "DELETE FROM `terms` WHERE term = ? AND list_name = ?", values: [ term, listName ] }) }); const updatedWords = words.filter((word)=>word.term !== term); setWords(updatedWords); const updatedLists = wordLists.map((list)=>{ if (list.name === listName) { return { ...list, words: list.words.filter((w)=>w.term !== term) }; } return list; }); setWordLists(updatedLists); localStorage.setItem("wordLists", JSON.stringify(updatedLists)); } catch (error) { console.error(error); } } }; React.useEffect(()=>{ const initializeWordList = async ()=>{ const initialList = "楽語"; const defaultWords = [ { term: "Andante", definition: "歩くような速さで" }, { term: "più mosso", definition: "今までより速く" }, { term: "animato", definition: "活気をもって" }, { term: "cantabile", definition: "歌うように" }, { term: "espressivo", definition: "表情豊かに" }, { term: "grandioso", definition: "壮大に" }, { term: "grazioso", definition: "優美に" }, { term: "tutti", definition: "総奏で" }, { term: "G.P.", definition: "全声部の休止" }, { term: "a2", definition: "２重奏で" } ]; try { const response = await fetch("/api/db/039", { method: "POST", body: JSON.stringify({ query: "SELECT * FROM `terms` WHERE list_name = ?", values: [ initialList ] }) }); const data = await response.json(); if (data.length === 0) { for (const word of defaultWords){ await fetch("/api/db/039", { method: "POST", body: JSON.stringify({ query: "INSERT INTO `terms` (term, definition, list_name) VALUES (?, ?, ?)", values: [ word.term, word.definition, initialList ] }) }); } } fetchWordLists(); } catch (error) { console.error(error); } }; const storedLists = localStorage.getItem("wordLists"); if (storedLists) { setWordLists(JSON.parse(storedLists)); } else { initializeWordList(); } }, []); React.useEffect(()=>{ const defaultList = { name: "楽語", words: [ { term: "Andante", definition: "歩くような速さで" }, { term: "più mosso", definition: "今までより速く" }, { term: "animato", definition: "活気をもって" }, { term: "cantabile", definition: "歌うように" }, { term: "espressivo", definition: "表情豊かに" }, { term: "grandioso", definition: "壮大に" }, { term: "grazioso", definition: "優美に" }, { term: "tutti", definition: "総奏で" }, { term: "G.P.", definition: "全声部の休止" }, { term: "a2", definition: "２重奏で" } ] }; setWordLists((prevLists)=>{ if (!prevLists.some((list)=>list.name === "楽語")) { return [ ...prevLists, defaultList ]; } return prevLists; }); }, []); const renderContent = ()=>{ switch(activeTab){ case "wordlist": return /*#__PURE__*/ React.createElement("div", { className: "space-y-2 relative", __source: { fileName: "", lineNumber: 334, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-end mb-4", __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowNewFolderModal(true), className: "bg-[#FFB347] w-12 h-12 rounded-full hover:bg-[#FF9F1C] transition-colors duration-200 shadow-md flex items-center justify-center mb-1", __source: { fileName: "", lineNumber: 337, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-folder-plus text-xl", __source: { fileName: "", lineNumber: 341, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 343, columnNumber: 17 }, __self: this }, "新規作成"))), wordLists.map((list, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `bg-[#F5F5F5] text-black p-6 rounded-lg shadow-sm flex items-center justify-between mb-4 cursor-pointer ${selectedWordList === list.name ? "ring-2 ring-[#FFB347]" : ""}`, onClick: ()=>{ setSelectedWordList(list.name); setWords(list.words); setActiveTab("practice"); }, __source: { fileName: "", lineNumber: 347, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center flex-grow", __source: { fileName: "", lineNumber: 358, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-12 h-12 mr-4 flex-shrink-0", __source: { fileName: "", lineNumber: 359, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-folder text-4xl text-[#8B4513]", __source: { fileName: "", lineNumber: 360, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 362, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text text-xl", __source: { fileName: "", lineNumber: 363, columnNumber: 21 }, __self: this }, list.name))), /*#__PURE__*/ React.createElement("button", { onClick: (e)=>{ e.stopPropagation(); if (window.confirm("本当に削除してもよろしいですか？")) { handleDeleteList(list.name, e); } }, className: "text-red-500 hover:text-red-700 ml-4", __source: { fileName: "", lineNumber: 368, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 377, columnNumber: 19 }, __self: this })))), showNewFolderModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 382, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 w-[90%] max-w-md", __source: { fileName: "", lineNumber: 383, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl mb-4 font-bold", __source: { fileName: "", lineNumber: 384, columnNumber: 19 }, __self: this }, "新規フォルダの作成"), /*#__PURE__*/ React.createElement("input", { type: "text", value: newFolderName, onChange: (e)=>setNewFolderName(e.target.value), placeholder: "フォルダ名を入力", className: "w-full p-2 border-2 rounded-lg mb-4 focus:outline-none focus:border-[#FFB347]", __source: { fileName: "", lineNumber: 385, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end space-x-2", __source: { fileName: "", lineNumber: 392, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowNewFolderModal(false), className: "px-4 py-2 rounded-lg bg-gray-200 hover:bg-gray-300", __source: { fileName: "", lineNumber: 393, columnNumber: 21 }, __self: this }, "キャンセル"), /*#__PURE__*/ React.createElement("button", { onClick: handleCreateNewFolder, className: "px-4 py-2 rounded-lg bg-[#FFB347] hover:bg-[#FF9F1C] text-white", __source: { fileName: "", lineNumber: 399, columnNumber: 21 }, __self: this }, "作成"))))); case "add": return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-4 max-w-md mx-auto overflow-y-auto max-h-[calc(100vh-200px)]", __source: { fileName: "", lineNumber: 413, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl mb-6 font-crimson-text text-center", __source: { fileName: "", lineNumber: 414, columnNumber: 13 }, __self: this }, "用語登録"), showSuccess && /*#__PURE__*/ React.createElement("div", { className: "bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4", __source: { fileName: "", lineNumber: 418, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block sm:inline", __source: { fileName: "", lineNumber: 419, columnNumber: 17 }, __self: this }, "用語を追加しました")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 422, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: newWord.listName, onChange: (e)=>setNewWord({ ...newWord, listName: e.target.value }), className: `w-full p-2 border-2 rounded-lg focus:outline-none focus:border-[#FFB347] ${formErrors.listName ? "border-red-500" : ""}`, __source: { fileName: "", lineNumber: 423, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 432, columnNumber: 17 }, __self: this }, "教材を選択"), wordLists.map((list)=>/*#__PURE__*/ React.createElement("option", { key: list.name, value: list.name, __source: { fileName: "", lineNumber: 434, columnNumber: 19 }, __self: this }, list.name))), formErrors.listName && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 440, columnNumber: 17 }, __self: this }, formErrors.listName)), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 445, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "term", placeholder: "用語を入力", value: newWord.term, onChange: (e)=>setNewWord({ ...newWord, term: e.target.value }), onBlur: (e)=>{ if (e.target.value) { generateDefinition(e.target.value); } }, className: `w-full p-2 border-2 rounded-lg focus:outline-none focus:border-[#FFB347] ${formErrors.term ? "border-red-500" : ""}`, __source: { fileName: "", lineNumber: 446, columnNumber: 15 }, __self: this }), formErrors.term && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 464, columnNumber: 17 }, __self: this }, formErrors.term)), /*#__PURE__*/ React.createElement("div", { className: "relative mb-4", __source: { fileName: "", lineNumber: 467, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "definition", placeholder: "定義", value: isGeneratingDefinition ? streamingDefinition : newWord.definition, onChange: (e)=>setNewWord({ ...newWord, definition: e.target.value }), className: `w-full p-3 border-2 rounded-lg focus:outline-none focus:border-[#FFB347] min-h-[100px] ${formErrors.definition ? "border-red-500" : ""}`, disabled: isGeneratingDefinition, __source: { fileName: "", lineNumber: 468, columnNumber: 15 }, __self: this }), formErrors.definition && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mt-1", __source: { fileName: "", lineNumber: 485, columnNumber: 17 }, __self: this }, formErrors.definition), isGeneratingDefinition && /*#__PURE__*/ React.createElement("div", { className: "absolute right-3 top-3", __source: { fileName: "", lineNumber: 490, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#FFB347]", __source: { fileName: "", lineNumber: 491, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleAddWord, disabled: isGeneratingDefinition, className: "w-full bg-[#FFB347] py-3 rounded-lg hover:bg-[#FF9F1C] transition-colors duration-200 font-bold shadow-md disabled:opacity-50", __source: { fileName: "", lineNumber: 495, columnNumber: 13 }, __self: this }, "追加")); case "practice": return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full overflow-hidden", __source: { fileName: "", lineNumber: 506, columnNumber: 11 }, __self: this }, !showScore && words.length > 0 && options.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto px-4", __source: { fileName: "", lineNumber: 508, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 509, columnNumber: 17 }, __self: this }, words.map((word, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-50 p-4 rounded-lg shadow-sm flex justify-between items-center", __source: { fileName: "", lineNumber: 511, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 515, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 516, columnNumber: 25 }, __self: this }, word.term), /*#__PURE__*/ React.createElement("div", { className: "text-gray-600", __source: { fileName: "", lineNumber: 517, columnNumber: 25 }, __self: this }, word.definition)), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteWord(word.term, selectedWordList), className: "text-red-500 hover:text-red-700 ml-4", __source: { fileName: "", lineNumber: 519, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trash", __source: { fileName: "", lineNumber: 525, columnNumber: 25 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 530, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: startPractice, className: "bg-[#FFB347] px-8 py-3 rounded-lg hover:bg-[#FF9F1C] transition-colors duration-200 font-bold shadow-md", __source: { fileName: "", lineNumber: 531, columnNumber: 19 }, __self: this }, "学習を始める"))) : showScore ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 overflow-y-auto", __source: { fileName: "", lineNumber: 540, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl mb-6", __source: { fileName: "", lineNumber: 541, columnNumber: 17 }, __self: this }, "結果"), /*#__PURE__*/ React.createElement("p", { className: "text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 542, columnNumber: 17 }, __self: this }, score, "問正解"), score === totalQuestions ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 544, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 545, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trophy text-6xl text-yellow-500 mb-4", __source: { fileName: "", lineNumber: 546, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-green-600 mb-4", __source: { fileName: "", lineNumber: 547, columnNumber: 23 }, __self: this }, "おめでとうございます！", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 549, columnNumber: 25 }, __self: this }), "全問正解です！")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveTab("wordlist"); setShowScore(false); setOptions([]); setCurrentQuestion(0); setScore(0); setSelectedAnswer(null); }, className: "bg-[#FFB347] px-8 py-3 rounded-lg hover:bg-[#FF9F1C] transition-colors duration-200 font-bold shadow-md", __source: { fileName: "", lineNumber: 553, columnNumber: 21 }, __self: this }, "教材一覧に戻る")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 568, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 569, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo text-6xl text-blue-500 mb-4", __source: { fileName: "", lineNumber: 570, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-blue-600 mb-4", __source: { fileName: "", lineNumber: 571, columnNumber: 23 }, __self: this }, "もう一度チャレンジしましょう！")), /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ await retryIncorrectQuestions(); setScore(0); }, className: "bg-[#FFB347] px-8 py-3 rounded-lg hover:bg-[#FF9F1C] transition-colors duration-200 font-bold shadow-md", __source: { fileName: "", lineNumber: 575, columnNumber: 21 }, __self: this }, "間違えた問題に再挑戦"))) : words.length === 0 ? /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col justify-center items-center", __source: { fileName: "", lineNumber: 588, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl text-gray-600 mb-4", __source: { fileName: "", lineNumber: 589, columnNumber: 17 }, __self: this }, "この教材にはまだ用語が登録されていません。"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("add"), className: "bg-[#FFB347] px-8 py-3 rounded-lg hover:bg-[#FF9F1C] transition-colors duration-200 font-bold shadow-md", __source: { fileName: "", lineNumber: 592, columnNumber: 17 }, __self: this }, "用語を登録する")) : /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col overflow-hidden", __source: { fileName: "", lineNumber: 600, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFB347] p-4 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 601, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 602, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 603, columnNumber: 21 }, __self: this }, "問題 ", currentQuestion + 1, " / ", totalQuestions), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 606, columnNumber: 21 }, __self: this }, "スコア: ", score))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col justify-center px-4 overflow-y-auto mb-8", __source: { fileName: "", lineNumber: 609, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 610, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 611, columnNumber: 21 }, __self: this }, words[currentQuestion]?.term || "")), loadingOptions ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 616, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#FFB347] text-2xl", __source: { fileName: "", lineNumber: 617, columnNumber: 23 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-2 max-w-md mx-auto w-full", __source: { fileName: "", lineNumber: 620, columnNumber: 21 }, __self: this }, options.map((option, index)=>{ const isCorrect = option === words[currentQuestion]?.definition; const buttonStyle = selectedAnswer ? isCorrect ? "bg-green-100 text-green-600" : "bg-red-100 text-red-600" : "bg-white"; return /*#__PURE__*/ React.createElement("button", { key: index, onClick: async ()=>{ if (!selectedAnswer) { setSelectedAnswer(option); if (option !== words[currentQuestion]?.definition) { setIncorrectQuestions((prev)=>{ const newQuestion = words[currentQuestion]; return prev.some((q)=>q.term === newQuestion.term) ? prev : [ ...prev, newQuestion ]; }); } else { setScore(score + 1); } setTimeout(async ()=>{ setSelectedAnswer(null); const nextQuestion = currentQuestion + 1; if (nextQuestion < words.length) { setCurrentQuestion(nextQuestion); await generateOptions(nextQuestion); } else { setShowScore(true); setActiveTab("result"); } }, 1000); } }, disabled: selectedAnswer !== null, className: `p-3 text-left border-2 rounded-xl transition-all duration-200 shadow-sm ${buttonStyle} ${!selectedAnswer && "hover:bg-gray-50 hover:shadow-md"}`, __source: { fileName: "", lineNumber: 630, columnNumber: 27 }, __self: this }, option, selectedAnswer && /*#__PURE__*/ React.createElement("span", { className: "float-right", __source: { fileName: "", lineNumber: 670, columnNumber: 31 }, __self: this }, isCorrect ? "〇" : "✖")); }))))); case "quiz": return /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col overflow-hidden", __source: { fileName: "", lineNumber: 686, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFB347] p-4 rounded-lg shadow-md mb-4", __source: { fileName: "", lineNumber: 687, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 688, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-lg", __source: { fileName: "", lineNumber: 689, columnNumber: 17 }, __self: this }, "問題 ", currentQuestion + 1, " / ", totalQuestions), /*#__PURE__*/ React.createElement("span", { className: "text-sm", __source: { fileName: "", lineNumber: 692, columnNumber: 17 }, __self: this }, "スコア: ", score))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col justify-center px-4 overflow-y-auto mb-8", __source: { fileName: "", lineNumber: 695, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-4", __source: { fileName: "", lineNumber: 696, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 697, columnNumber: 17 }, __self: this }, words[currentQuestion]?.term || "")), loadingOptions ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 702, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#FFB347] text-2xl", __source: { fileName: "", lineNumber: 703, columnNumber: 19 }, __self: this })) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-2 max-w-md mx-auto w-full", __source: { fileName: "", lineNumber: 706, columnNumber: 17 }, __self: this }, options.map((option, index)=>{ const isCorrect = option === words[currentQuestion]?.definition; const buttonStyle = selectedAnswer ? isCorrect ? "bg-green-100 text-green-600" : "bg-red-100 text-red-600" : "bg-white"; return /*#__PURE__*/ React.createElement("button", { key: index, onClick: async ()=>{ if (!selectedAnswer) { setSelectedAnswer(option); if (option !== words[currentQuestion]?.definition) { setIncorrectQuestions((prev)=>{ const newQuestion = words[currentQuestion]; return prev.some((q)=>q.term === newQuestion.term) ? prev : [ ...prev, newQuestion ]; }); } else { setScore(score + 1); } setTimeout(async ()=>{ setSelectedAnswer(null); const nextQuestion = currentQuestion + 1; if (nextQuestion < words.length) { setCurrentQuestion(nextQuestion); await generateOptions(nextQuestion); } else { setShowScore(true); setActiveTab("result"); } }, 1000); } }, disabled: selectedAnswer !== null, className: `p-3 text-left border-2 rounded-xl transition-all duration-200 shadow-sm ${buttonStyle} ${!selectedAnswer && "hover:bg-gray-50 hover:shadow-md"}`, __source: { fileName: "", lineNumber: 716, columnNumber: 23 }, __self: this }, option, selectedAnswer && /*#__PURE__*/ React.createElement("span", { className: "float-right", __source: { fileName: "", lineNumber: 753, columnNumber: 27 }, __self: this }, isCorrect ? "〇" : "✖")); })))); case "result": return /*#__PURE__*/ React.createElement("div", { className: "text-center py-12 overflow-y-auto", __source: { fileName: "", lineNumber: 767, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl mb-6", __source: { fileName: "", lineNumber: 768, columnNumber: 13 }, __self: this }, "結果"), /*#__PURE__*/ React.createElement("p", { className: "text-4xl font-bold mb-6", __source: { fileName: "", lineNumber: 769, columnNumber: 13 }, __self: this }, score, "問正解"), score === totalQuestions ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 771, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 772, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-trophy text-6xl text-yellow-500 mb-4", __source: { fileName: "", lineNumber: 773, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-green-600 mb-4", __source: { fileName: "", lineNumber: 774, columnNumber: 19 }, __self: this }, "おめでとうございます！", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 776, columnNumber: 21 }, __self: this }), "全問正解です！")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveTab("wordlist"); setShowScore(false); setOptions([]); setCurrentQuestion(0); setScore(0); setSelectedAnswer(null); }, className: "bg-[#FFB347] px-8 py-3 rounded-lg hover:bg-[#FF9F1C] transition-colors duration-200 font-bold shadow-md", __source: { fileName: "", lineNumber: 780, columnNumber: 17 }, __self: this }, "教材一覧に戻る")) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 795, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 796, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo text-6xl text-blue-500 mb-4", __source: { fileName: "", lineNumber: 797, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-blue-600 mb-4", __source: { fileName: "", lineNumber: 798, columnNumber: 19 }, __self: this }, "もう一度チャレンジしましょう！")), /*#__PURE__*/ React.createElement("button", { onClick: async ()=>{ await retryIncorrectQuestions(); setScore(0); }, className: "bg-[#FFB347] px-8 py-3 rounded-lg hover:bg-[#FF9F1C] transition-colors duration-200 font-bold shadow-md", __source: { fileName: "", lineNumber: 802, columnNumber: 17 }, __self: this }, "間違えた問題に再挑戦"))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#FDF6E9] flex flex-col", __source: { fileName: "", lineNumber: 821, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#8B4513] text-white p-2 shadow-lg", __source: { fileName: "", lineNumber: 822, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-2xl font-crimson-text tracking-wider", __source: { fileName: "", lineNumber: 823, columnNumber: 9 }, __self: this }, "OboeRu")), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-2 flex-grow overflow-hidden", __source: { fileName: "", lineNumber: 827, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-xl p-4 h-[calc(100vh-140px)]", __source: { fileName: "", lineNumber: 828, columnNumber: 9 }, __self: this }, renderContent())), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#8B4513] text-white p-2 w-full shadow-lg", __source: { fileName: "", lineNumber: 832, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-1 max-w-md mx-auto", __source: { fileName: "", lineNumber: 833, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setActiveTab("wordlist"); setShowScore(false); setOptions([]); setCurrentQuestion(0); setScore(0); setSelectedAnswer(null); }, className: `py-3 rounded-lg text-center transition-colors duration-200 ${activeTab === "wordlist" ? "bg-white text-[#8B4513]" : "bg-[#A0522D] text-white hover:bg-[#8B4513]"}`, __source: { fileName: "", lineNumber: 834, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-book mb-1", __source: { fileName: "", lineNumber: 849, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-xs", __source: { fileName: "", lineNumber: 850, columnNumber: 13 }, __self: this }, "教材一覧")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveTab("add"), className: `py-3 rounded-lg text-center transition-colors duration-200 ${activeTab === "add" ? "bg-white text-[#8B4513]" : "bg-[#A0522D] text-white hover:bg-[#8B4513]"}`, __source: { fileName: "", lineNumber: 852, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus mb-1", __source: { fileName: "", lineNumber: 860, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "text-xs", __source: { fileName: "", lineNumber: 861, columnNumber: 13 }, __self: this }, "用語登録"))))); }