function MainComponent() { const [genre, setGenre] = React.useState(null); const [quizData, setQuizData] = React.useState([]); const [currentQuestion, setCurrentQuestion] = React.useState(0); const [score, setScore] = React.useState(0); const [isLoading, setIsLoading] = React.useState(false); const [showResult, setShowResult] = React.useState(false); const [showCorrect, setShowCorrect] = React.useState(false); const [showIncorrect, setShowIncorrect] = React.useState(false); const genres = [ '歴史', '地理', '科学', 'スポーツ', '芸能' ]; const fetchQuizData = async (selectedGenre)=>{ setIsLoading(true); const response = await fetch('/api/quiz-generator-function', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ genre: selectedGenre, questionCount: 5 }) }); const data = await response.json(); setQuizData(data.map((question, index)=>({ ...question, choices: shuffleArray([ { text: question.ans1, isCorrect: true }, { text: question.ans2, isCorrect: false }, { text: question.ans3, isCorrect: false } ]), correctAnswerIndex: 0 }))); setIsLoading(false); }; const shuffleArray = (array)=>{ const shuffledIndices = [ ...Array(array.length).keys() ].sort(()=>Math.random() - 0.5); return shuffledIndices.map((i)=>array[i]); }; const handleAnswer = (index)=>{ const isCorrect = quizData[currentQuestion].choices[index].isCorrect; if (isCorrect) { setScore(score + 1); setShowCorrect(true); } else { setShowIncorrect(true); } setTimeout(()=>{ setShowCorrect(false); setShowIncorrect(false); if (currentQuestion < 4) { setCurrentQuestion(currentQuestion + 1); } else { setShowResult(true); } }, 2000); }; const resetQuiz = ()=>{ setGenre(null); setQuizData([]); setCurrentQuestion(0); setScore(0); setShowResult(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#333] text-white py-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "クイズを楽しもう！"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, genres.map((g, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `px-4 py-2 rounded ${genre === g ? 'bg-[#555]' : 'bg-[#777]'}`, onClick: ()=>{ setGenre(g); fetchQuizData(g); }, __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, g))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto py-8", __source: { fileName: "", lineNumber: 89, columnNumber: 7 }, __self: this }, isLoading ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-[100px] h-[100px] mb-4", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin rounded-full h-full w-full border-t-4 border-[#333]", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-child text-4xl text-[#333] animate-dance", __source: { fileName: "", lineNumber: 95, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, "ロード中...")) : quizData.length > 0 && !showResult ? /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-lg", __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, "問題 ", currentQuestion + 1), /*#__PURE__*/ React.createElement("img", { src: `data:image/jpeg;base64,${quizData[currentQuestion].image}`, alt: `${genre}に関する問題の画像`, className: "w-full h-[200px] object-cover mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, quizData[currentQuestion].question), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, quizData[currentQuestion].choices.map((choice, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "bg-[#007bff] text-white px-4 py-2 rounded", onClick: ()=>handleAnswer(index), __source: { fileName: "", lineNumber: 115, columnNumber: 17 }, __self: this }, choice.text)))) : showResult ? /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-lg text-center", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 127, columnNumber: 13 }, __self: this }, "結果"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 128, columnNumber: 13 }, __self: this }, score, " / 5 問正解！"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#28a745] text-white px-4 py-2 rounded", onClick: resetQuiz, __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, "もう一度遊ぶ")) : null, showCorrect && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 w-full h-full flex items-center justify-center bg-[rgba(0,0,0,0.5)]", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-lg text-center animate-correct", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check-circle text-6xl text-[#28a745] mb-4", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 144, columnNumber: 15 }, __self: this }, "正解！"))), showIncorrect && /*#__PURE__*/ React.createElement("div", { className: "fixed top-0 left-0 w-full h-full flex items-center justify-center bg-[rgba(0,0,0,0.5)]", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded shadow-lg text-center animate-incorrect", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times-circle text-6xl text-[#dc3545] mb-4", __source: { fileName: "", lineNumber: 152, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 153, columnNumber: 15 }, __self: this }, "残念！不正解")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, ` @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .animate-spin { animation: spin 1s linear infinite; } @keyframes dance { 0%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-10px) rotate(10deg); } 75% { transform: translateY(-10px) rotate(-10deg); } } .animate-dance { animation: dance 1s ease-in-out infinite; } @keyframes correct { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .animate-correct { animation: correct 0.5s ease-in-out; } @keyframes incorrect { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } } .animate-incorrect { animation: incorrect 0.5s ease-in-out; } `)); }