function MainComponent() { const nowRef = React.useRef(new Date()); const [tasks, setTasks] = React.useState([ { id: 1, time: '05:30', task: 'PCを使用可能', completed: false, points: 0 }, { id: 2, time: '05:50', task: '起きる', completed: false, points: 0 }, { id: 12, time: '17:35', task: '手を洗う', completed: false, points: 0 }, { id: 13, time: '17:40', task: '着替え終わる', completed: false, points: 0 }, { id: 14, time: '17:45', task: 'トイレに行って帰る', completed: false, points: 0 }, { id: 15, time: '19:00', task: '夕食を食べ終わる', completed: false, points: 0 }, { id: 16, time: '19:30', task: '今やっていることをやめてお風呂へ行く', completed: false, points: 0 }, { id: 17, time: '20:10', task: 'お風呂から出る', completed: false, points: 0 }, { id: 18, time: '20:25', task: '布団に入る', completed: false, points: 0 }, { id: 19, time: '20:30', task: 'PCを終了してください。', completed: false, points: 0 }, { id: 20, time: '23:55', task: 'チェック用', completed: false, points: 0 } ]); const [showModal, setShowModal] = React.useState(false); const [modalTaskId, setModalTaskId] = React.useState(null); const [lateReason, setLateReason] = React.useState(''); const [showPointViewer, setShowPointViewer] = React.useState(false); const completeTask = (taskId)=>{ const now = new Date(); const updatedTasks = tasks.map((task)=>{ if (task.id === taskId) { const taskTime = new Date(now.getFullYear(), now.getMonth(), now.getDate(), ...task.time.split(':')); const pointsGained = now < taskTime ? 10 : 0; setModalTaskId(taskId); setShowModal(true); return { ...task, completed: true, points: pointsGained }; } return task; }); setTasks(updatedTasks); }; const handleLateReasonChange = (e)=>setLateReason(e.target.value); const closeModal = ()=>{ setShowModal(false); setModalTaskId(null); setLateReason(''); }; React.useEffect(()=>{ const intervalId = setInterval(()=>{ nowRef.current = new Date(); }, 250); return ()=>clearInterval(intervalId); }, []); const renderModalContent = ()=>{ const task = tasks.find((task)=>task.id === modalTaskId); if (!task) return ''; const content = [ `タスク完了!`, `獲得ポイント: ${task.points}` ]; if (task.points === 0) { content.push(`遅刻しました`, `遅刻の理由を入力してください:`); } else { content.push(`おめでとうございます！`, `素晴らしい達成です！`); } return content.join('\n'); }; const totalPoints = tasks.reduce((sum, task)=>sum + task.points, 0); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen p-4 bg-gradient-to-r from-blue-400 to-indigo-600", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "current-time", className: "fixed top-5 left-5 text-white text-lg font-bold", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, nowRef.current.toLocaleTimeString("ja-JP", { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowPointViewer(!showPointViewer), className: "fixed top-5 right-5 bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, "ポイント履歴"), /*#__PURE__*/ React.createElement("h1", { className: "text-2xl md:text-3xl lg:text-4xl font-roboto text-white mb-10", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, "タイムスケジュール"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl bg-white rounded-lg shadow-lg p-6", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "space-y-4", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, tasks.map((task)=>/*#__PURE__*/ React.createElement("li", { key: task.id, className: `flex items-center justify-between p-4 rounded-lg ${task.completed ? task.points === 0 ? 'bg-red-100' : 'bg-blue-100' : 'bg-gray-100'}`, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this }, task.time, " - ", task.task), !task.completed && /*#__PURE__*/ React.createElement("button", { onClick: ()=>completeTask(task.id), className: `px-6 py-2 text-white ${new Date() < new Date(nowRef.current.getFullYear(), nowRef.current.getMonth(), nowRef.current.getDate(), ...task.time.split(':')) ? 'bg-blue-500 hover:bg-blue-700' : 'bg-green-500 hover:bg-green-700'} rounded-lg font-roboto font-medium`, __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, new Date() < new Date(nowRef.current.getFullYear(), nowRef.current.getMonth(), nowRef.current.getDate(), ...task.time.split(':')) ? '達成' : '完了'), task.completed && /*#__PURE__*/ React.createElement("span", { className: `px-6 py-2 rounded-lg font-roboto font-medium text-white ${task.points === 0 ? 'bg-red-500' : 'bg-blue-500'}`, __source: { fileName: "", lineNumber: 86, columnNumber: 17 }, __self: this }, task.points === 0 ? '遅刻' : '達成'))))), showModal && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-96 p-5 bg-white rounded-lg shadow-lg flex flex-col items-center", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-roboto break-words", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, renderModalContent().split('\n').map((line, index)=>/*#__PURE__*/ React.createElement(React.Fragment, { key: index, __source: { fileName: "", lineNumber: 97, columnNumber: 115 }, __self: this }, line, /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 97, columnNumber: 149 }, __self: this })))), tasks.find((task)=>task.id === modalTaskId)?.points === 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { type: "text", name: "lateReason", value: lateReason, onChange: handleLateReasonChange, className: "mt-2 p-2 w-full border-2 border-gray-200 rounded", placeholder: "遅刻の理由", __source: { fileName: "", lineNumber: 100, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>closeModal(), className: "mt-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700 focus:outline-none", __source: { fileName: "", lineNumber: 108, columnNumber: 17 }, __self: this }, "提出")), tasks.find((task)=>task.id === modalTaskId)?.points !== 0 && /*#__PURE__*/ React.createElement("button", { onClick: closeModal, className: "mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 focus:outline-none", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "閉じる"))), showPointViewer && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-96 p-5 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-roboto mb-4", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "獲得ポイント: ", totalPoints), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, tasks.filter((task)=>task.completed).map((task, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-base font-roboto", __source: { fileName: "", lineNumber: 127, columnNumber: 17 }, __self: this }, task.time, ": ", task.task, " - ", task.points === 0 ? '遅刻' : '達成', " ", task.points, "ポイント"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowPointViewer(false), className: "mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 focus:outline-none", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "閉じる")))); }