function MainComponent() { const [input, setInput] = React.useState({ bossName: '', time: '' }); const [bossRecords, setBossRecords] = React.useState({}); const [loading, setLoading] = React.useState(false); const [recordedBosses, setRecordedBosses] = React.useState([]); const handleSubmit = ()=>{ if (!input.bossName.trim() || !input.time.trim()) return; const updatedBossRecords = { ...bossRecords }; const { bossName, time } = input; if (!updatedBossRecords[bossName]) { updatedBossRecords[bossName] = []; } updatedBossRecords[bossName].push(time); setBossRecords(updatedBossRecords); if (!recordedBosses.includes(bossName)) { setRecordedBosses([ ...recordedBosses, bossName ]); } setInput({ bossName: '', time: '' }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "メイプルストーリーボス記録"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "bossName", className: "w-full p-2 border border-gray-300 rounded mb-2", value: input.bossName, onChange: (e)=>setInput({ ...input, bossName: e.target.value }), placeholder: "ボス名を入力してください", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", name: "time", className: "w-full p-2 border border-gray-300 rounded mb-2", value: input.time, onChange: (e)=>setInput({ ...input, time: e.target.value }), placeholder: "討伐時間（分）", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, disabled: loading, className: "mt-2 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, loading ? '送信中...' : '送信')), recordedBosses.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mb-4 overflow-x-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "記録されたボス"), /*#__PURE__*/ React.createElement("table", { className: "w-full table-auto", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 61, columnNumber: 17 }, __self: this }, "ボス名"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "前回の時間"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "最新の時間"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "差分（分）"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, recordedBosses.map((bossName)=>{ const times = bossRecords[bossName]; const latestTime = times[times.length - 1]; const previousTime = times.length > 1 ? times[times.length - 2] : ''; const timeDifference = previousTime !== '' ? latestTime - previousTime : ''; return /*#__PURE__*/ React.createElement("tr", { key: bossName, __source: { fileName: "", lineNumber: 77, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 78, columnNumber: 21 }, __self: this }, bossName), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 79, columnNumber: 21 }, __self: this }, previousTime), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }, latestTime), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 81, columnNumber: 21 }, __self: this }, timeDifference !== '' ? `${timeDifference} 分` : '')); }))))); }