function MainComponent() { const metals = [ 'Mg', 'Zn', 'Cu' ]; const solutions = [ 'MgSO₄', 'ZnSO₄', 'CuSO₄' ]; const ionizationTendencies = { 'Mg': 1, 'Zn': 2, 'Cu': 3 }; const [selectedMetal, setSelectedMetal] = React.useState(metals[0]); const [selectedSolution, setSelectedSolution] = React.useState(solutions[0]); const [reactionResult, setReactionResult] = React.useState(''); const [showIons, setShowIons] = React.useState(false); const [showMetal, setShowMetal] = React.useState(false); const [ions, setIons] = React.useState([]); const handleMetalChange = (e)=>{ setSelectedMetal(e.target.value); }; const handleSolutionChange = (e)=>{ setSelectedSolution(e.target.value); }; const startSimulation = ()=>{ if (!showIons) { setIons(Array.from({ length: 10 }).fill(`${selectedSolution.split('SO₄')[0]}²⁺`)); setShowIons(true); setReactionResult(''); } else if (!showMetal) { setShowMetal(true); } else { const solutionIon = selectedSolution.split('SO₄')[0]; if (ionizationTendencies[selectedMetal] < ionizationTendencies[solutionIon]) { setReactionResult(`${selectedMetal} has displaced ${solutionIon}²⁺ in solution, forming ${selectedMetal}²⁺ and ${solutionIon}.`); } else { setReactionResult('No reaction.'); } } }; const beakerContent = showIons ? /*#__PURE__*/ React.createElement(React.Fragment, null, ions.map((ion, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-xl text-blue-700", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, ion)), showMetal && /*#__PURE__*/ React.createElement("div", { className: "text-xl text-gray-700 mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 21 }, __self: this }, selectedMetal)) : /*#__PURE__*/ React.createElement("span", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, "ビーカー"); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 space-y-4", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-crimson-text", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, "金属の陽イオンシミュレーションゲーム"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "金属を選択:"), /*#__PURE__*/ React.createElement("select", { name: "metal", className: "p-2 border rounded", onChange: handleMetalChange, value: selectedMetal, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, metals.map((metal)=>/*#__PURE__*/ React.createElement("option", { key: metal, value: metal, __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, metal)))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, "溶液を選択:"), /*#__PURE__*/ React.createElement("select", { name: "solution", className: "p-2 border rounded", onChange: handleSolutionChange, value: selectedSolution, __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, solutions.map((solution)=>/*#__PURE__*/ React.createElement("option", { key: solution, value: solution, __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, solution))))), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[400px] border rounded flex flex-col items-center justify-center bg-blue-200", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, beakerContent), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-blue-500 text-white rounded font-roboto", onClick: startSimulation, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, "シミュレーション開始"), reactionResult && /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto mt-4", __source: { fileName: "", lineNumber: 74, columnNumber: 26 }, __self: this }, reactionResult)); }