function MainComponent() { const [step, setStep] = React.useState(0); const [selectedBloodType, setSelectedBloodType] = React.useState(null); const [answers, setAnswers] = React.useState({}); const [analysisResult, setAnalysisResult] = React.useState(null); const questions = [ "小さい頃から片付けが得意でしたか？", "物事を深く考え込むタイプですか？", "急な変化に柔軟に対応できますか？", "計画を立てて行動するのが好きですか？", "他人の感情に敏感ですか？", "人前で話すのは得意ですか？", "自由な時間を大切にしていますか？", "いつも何かを考えているタイプですか？", "新しいことに挑戦するのが好きですか？", "周囲の期待に応えようと努力することが多いですか？" ]; const bloodTypeCharacteristics = { A: [ "几帳面", "真面目", "計画的", "慎重", "他人に対して思いやりが強い" ], B: [ "自由奔放", "自己主張が強い", "創造的", "楽観的" ], O: [ "リーダーシップがある", "社交的", "決断力がある", "行動的" ], AB: [ "個性的", "理性的", "感情に左右されず", "合理的" ] }; const handleBloodTypeSelection = (type)=>{ setSelectedBloodType(type); setStep(1); }; const handleAnswer = (question, answer)=>{ setAnswers((prev)=>({ ...prev, [question]: answer })); }; const analyzeResults = ()=>{ const totalQuestions = questions.length; const bloodTypes = [ 'A', 'B', 'O', 'AB' ]; const scores = {}; bloodTypes.forEach((type)=>{ const typeCharacteristics = bloodTypeCharacteristics[type]; let score = 0; questions.forEach((question, index)=>{ if (answers[question] === 'はい') { if (index < typeCharacteristics.length) { score++; } } }); scores[type] = score / totalQuestions; }); const analyzedType = Object.keys(scores).reduce((a, b)=>scores[a] > scores[b] ? a : b); setAnalysisResult(analyzedType); setStep(2); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f0f0] bg-opacity-50 font-sans", style: { backgroundImage: "url('data:image/svg+xml;utf8,')" }, __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-8", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, step === 0 && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0ebb2557-8b2c-44fd-aba8-485eb8065868/-/format/auto/", alt: "血液型別性格分析アプリ", className: "mx-auto mb-8 w-64 h-auto", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-8", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "あなたの血液型を選択してください"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-4", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, [ 'A', 'B', 'O', 'AB' ].map((type)=>/*#__PURE__*/ React.createElement("a", { key: type, onClick: ()=>handleBloodTypeSelection(type), className: "relative inline-block px-8 py-4 border-2 border-[#fefefe] uppercase text-[#fefefe] no-underline font-semibold text-xl cursor-pointer", __source: { fileName: "", lineNumber: 68, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "relative z-10", __source: { fileName: "", lineNumber: 69, columnNumber: 19 }, __self: this }, type, "型"))))), step === 1 && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 text-center", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "あなたの習慣を教えてください"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, questions.map((question, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-4 rounded shadow", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 19 }, __self: this }, question), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4", __source: { fileName: "", lineNumber: 83, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAnswer(question, 'はい'), className: `px-4 py-2 rounded ${answers[question] === 'はい' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 84, columnNumber: 21 }, __self: this }, "はい"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAnswer(question, 'いいえ'), className: `px-4 py-2 rounded ${answers[question] === 'いいえ' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`, __source: { fileName: "", lineNumber: 90, columnNumber: 21 }, __self: this }, "いいえ"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: analyzeResults, className: "bg-blue-500 text-white px-6 py-3 rounded font-bold text-lg hover:bg-blue-600 transition duration-300", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, "送信して分析結果を見る"))), step === 2 && /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 112, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 113, columnNumber: 13 }, __self: this }, "分析結果"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 114, columnNumber: 13 }, __self: this }, "あなたの血液型: ", selectedBloodType, "型"), /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-8", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }, "あなたの回答を分析した結果:", selectedBloodType === analysisResult ? `あなたの性格は${selectedBloodType}型と一致しています。` : `あなたの生まれながらの血液型は${selectedBloodType}型ですが、分析結果、あなたの性格は${analysisResult}型の特徴に近いです。`), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/0ebb2557-8b2c-44fd-aba8-485eb8065868/-/format/auto/", alt: "血液型別性格分析アプリ", className: "mx-auto mt-8 w-32 h-auto", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 125, columnNumber: 7 }, __self: this }, ` a::before { content: ''; position: absolute; top: 6px; left: -2px; width: calc(100% + 4px); height: calc(100% - 12px); background-color: #212121; transition: 0.3s ease-in-out; transform: scaleY(1); } a:hover::before { transform: scaleY(0); } a::after { content: ''; position: absolute; left: 6px; top: -2px; height: calc(100% + 4px); width: calc(100% - 12px); background-color: #212121; transition: 0.3s ease-in-out; transform: scaleX(1); transition-delay: 0.5s; } a:hover::after { transform: scaleX(0); } `)); }