function MainComponent() { const [balance, setBalance] = React.useState(100); const [stocks, setStocks] = React.useState({ usa: { price: 100, owned: 0 }, japan: { price: 100, owned: 0 }, germany: { price: 100, owned: 0 } }); const [inputValues, setInputValues] = React.useState({ usa: 0, japan: 0, germany: 0 }); const [trading, setTrading] = React.useState(false); const [timer, setTimer] = React.useState(600); React.useEffect(()=>{ if (trading) { const interval = setInterval(()=>{ setStocks((prevStocks)=>({ usa: { ...prevStocks.usa, price: Math.random() * 200 }, japan: { ...prevStocks.japan, price: Math.random() * 200 }, germany: { ...prevStocks.germany, price: Math.random() * 200 } })); }, 10000); return ()=>clearInterval(interval); } }, [ trading ]); React.useEffect(()=>{ if (trading && timer > 0) { const countdown = setInterval(()=>{ setTimer((prevTimer)=>prevTimer - 1); }, 1000); return ()=>clearInterval(countdown); } if (timer === 0) { setTrading(false); } }, [ trading, timer ]); const buyStock = (country)=>{ let amount = parseInt(inputValues[country], 10); if (balance >= stocks[country].price * amount) { setBalance(balance - stocks[country].price * amount); setStocks({ ...stocks, [country]: { ...stocks[country], owned: stocks[country].owned + amount } }); } }; const sellStock = (country)=>{ let amount = parseInt(inputValues[country], 10); if (stocks[country].owned >= amount) { setBalance(balance + stocks[country].price * amount); setStocks({ ...stocks, [country]: { ...stocks[country], owned: stocks[country].owned - amount } }); } }; const startTrading = ()=>{ setBalance(100); setStocks({ usa: { price: 100, owned: 0 }, japan: { price: 100, owned: 0 }, germany: { price: 100, owned: 0 } }); setTimer(600); setTrading(true); }; const handleChange = (e)=>{ setInputValues({ ...inputValues, [e.target.name]: e.target.value }); }; const formatTime = (seconds)=>{ const minutes = Math.floor(seconds / 60); const remainingSeconds = seconds % 60; return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, "デモトレード"), /*#__PURE__*/ React.createElement("button", { className: "mb-4 p-2 bg-green-500 text-white rounded", onClick: startTrading, __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, "スタート"), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 97, columnNumber: 7 }, __self: this }, "元本: $", balance.toFixed(2)), trading && /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, "タイマー: ", formatTime(timer)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, Object.entries(stocks).map(([country, { price, owned }])=>{ const countryName = country === "usa" ? "アメリカ" : country === "japan" ? "日本" : "ドイツ"; return /*#__PURE__*/ React.createElement("div", { key: country, className: "p-4 border rounded bg-gray-100", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, countryName), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "株価: $", price.toFixed(2)), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 106, columnNumber: 15 }, __self: this }, "保有数: ", owned), /*#__PURE__*/ React.createElement("input", { type: "number", name: country, value: inputValues[country], onChange: handleChange, className: "mb-2 p-1 border rounded w-full", __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "mr-2 p-2 bg-blue-500 text-white rounded", onClick: ()=>buyStock(country), __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "買う"), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-red-500 text-white rounded", onClick: ()=>sellStock(country), __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, "売る")); }))); }