function MainComponent() { const defaultPomodoroTime = 25 * 60; const defaultShortBreakTime = 5 * 60; const defaultLongBreakTime = 15 * 60; const [time, setTime] = React.useState(defaultPomodoroTime); const [isRunning, setIsRunning] = React.useState(false); const [sessionType, setSessionType] = React.useState('pomodoro'); const [sessionCount, setSessionCount] = React.useState(0); const [completedSessions, setCompletedSessions] = React.useState({ today: 0, thisWeek: 0, thisMonth: 0 }); const [pomodoroTime, setPomodoroTime] = React.useState(defaultPomodoroTime); const [shortBreakTime, setShortBreakTime] = React.useState(defaultShortBreakTime); const [longBreakTime, setLongBreakTime] = React.useState(defaultLongBreakTime); const [isMuted, setIsMuted] = React.useState(false); React.useEffect(()=>{ let interval; if (isRunning) { interval = setInterval(()=>{ setTime((prevTime)=>{ if (prevTime <= 0) { clearInterval(interval); notify(); if (sessionType === 'pomodoro') { setSessionCount((prevCount)=>prevCount + 1); updateCompletedSessions(); setSessionType(sessionCount % 4 === 3 ? 'longBreak' : 'shortBreak'); return sessionCount % 4 === 3 ? longBreakTime : shortBreakTime; } else { setSessionType('pomodoro'); return pomodoroTime; } } return prevTime - 1; }); }, 1000); } return ()=>clearInterval(interval); }, [ isRunning, sessionType, sessionCount, pomodoroTime, shortBreakTime, longBreakTime ]); const updateCompletedSessions = ()=>{ const today = new Date().toLocaleDateString(); setCompletedSessions((prev)=>{ const sessionsToday = prev[today] ? prev[today] + 1 : 1; return { ...prev, today: sessionsToday, thisWeek: sessionsToday, thisMonth: sessionsToday }; }); }; const notify = ()=>{ if (!isMuted) { new Audio('/notification.mp3').play(); } alert('時間です!'); }; const formatTime = (timeInSeconds)=>{ const minutes = String(Math.floor(timeInSeconds / 60)).padStart(2, '0'); const seconds = String(timeInSeconds % 60).padStart(2, '0'); return `${minutes}:${seconds}`; }; const handleStart = ()=>setIsRunning(true); const handlePause = ()=>setIsRunning(false); const handleReset = ()=>{ setIsRunning(false); setTime(pomodoroTime); setSessionType('pomodoro'); }; const handlePomodoroTimeChange = (e)=>{ const newTime = e.target.value * 60; setPomodoroTime(newTime); if (sessionType === 'pomodoro') { setTime(newTime); } }; const handleShortBreakTimeChange = (e)=>{ const newTime = e.target.value * 60; setShortBreakTime(newTime); if (sessionType === 'shortBreak') { setTime(newTime); } }; const handleLongBreakTimeChange = (e)=>{ const newTime = e.target.value * 60; setLongBreakTime(newTime); if (sessionType === 'longBreak') { setTime(newTime); } }; const toggleMute = ()=>{ setIsMuted((prev)=>!prev); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 103, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white w-full max-w-[400px] p-6 rounded-lg shadow-lg text-center", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stopwatch mr-2 text-red-500", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }), "ポモドーロタイマー"), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-5xl font-medium", __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, formatTime(time)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mb-6", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleStart, className: "px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play mr-2", __source: { fileName: "", lineNumber: 115, columnNumber: 13 }, __self: this }), "開始"), /*#__PURE__*/ React.createElement("button", { onClick: handlePause, className: "px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pause mr-2", __source: { fileName: "", lineNumber: 119, columnNumber: 13 }, __self: this }), "一時停止"), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600", __source: { fileName: "", lineNumber: 122, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-undo mr-2", __source: { fileName: "", lineNumber: 123, columnNumber: 13 }, __self: this }), "リセット")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 items-center", __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "pomodoro", className: "font-medium", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "ポモドーロセッション:"), /*#__PURE__*/ React.createElement("input", { id: "pomodoro", name: "pomodoro", type: "number", value: pomodoroTime / 60, onChange: handlePomodoroTimeChange, className: "w-[50px] px-2 py-1 border rounded", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 139, columnNumber: 13 }, __self: this }, "分")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 items-center", __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "shortBreak", className: "font-medium", __source: { fileName: "", lineNumber: 142, columnNumber: 13 }, __self: this }, "短い休憩:"), /*#__PURE__*/ React.createElement("input", { id: "shortBreak", name: "shortBreak", type: "number", value: shortBreakTime / 60, onChange: handleShortBreakTimeChange, className: "w-[50px] px-2 py-1 border rounded", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, "分")), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 items-center", __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "longBreak", className: "font-medium", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, "長い休憩:"), /*#__PURE__*/ React.createElement("input", { id: "longBreak", name: "longBreak", type: "number", value: longBreakTime / 60, onChange: handleLongBreakTimeChange, className: "w-[50px] px-2 py-1 border rounded", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, "分"))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mt-6", __source: { fileName: "", lineNumber: 167, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toggleMute, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 168, columnNumber: 11 }, __self: this }, isMuted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-mute mr-2", __source: { fileName: "", lineNumber: 171, columnNumber: 17 }, __self: this }), "ミュート解除") : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up mr-2", __source: { fileName: "", lineNumber: 176, columnNumber: 17 }, __self: this }), "ミュート"))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, "完了したセッション"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 187, columnNumber: 15 }, __self: this }, "今日"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 188, columnNumber: 15 }, __self: this }, completedSessions.today)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 191, columnNumber: 15 }, __self: this }, "今週"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 192, columnNumber: 15 }, __self: this }, completedSessions.thisWeek)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 194, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, "今月"), /*#__PURE__*/ React.createElement("p", { className: "text-2xl", __source: { fileName: "", lineNumber: 196, columnNumber: 15 }, __self: this }, completedSessions.thisMonth)))))); }