function MainComponent() { const [minutesPerPerson, setMinutesPerPerson] = React.useState(0); const [groupSize, setGroupSize] = React.useState(0); const [intervalSeconds, setIntervalSeconds] = React.useState(0); const [isRunning, setIsRunning] = React.useState(false); const [timeLeft, setTimeLeft] = React.useState(0); const [currentPerson, setCurrentPerson] = React.useState(1); const [inInterval, setInInterval] = React.useState(false); const handleSubmit = (e)=>{ e.preventDefault(); setTimeLeft(minutesPerPerson * 60); setCurrentPerson(1); setIsRunning(true); }; React.useEffect(()=>{ if (!isRunning) return; if (timeLeft === 0) { if (!inInterval) { const audio = new Audio('/alarm.mp3'); audio.play(); if (currentPerson < groupSize) { setInInterval(true); setTimeout(()=>{ setTimeLeft(intervalSeconds); }, 1000); } else { setIsRunning(false); } } else { setTimeLeft(minutesPerPerson * 60); setCurrentPerson((prev)=>prev + 1); setInInterval(false); } } if (timeLeft > 0) { const timerId = setInterval(()=>{ setTimeLeft((prev)=>prev - 1); }, 1000); return ()=>clearInterval(timerId); } }, [ isRunning, timeLeft, currentPerson, groupSize, minutesPerPerson, intervalSeconds, inInterval ]); const formatTime = (seconds)=>{ const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${mins}:${secs < 10 ? '0' : ''}${secs}`; }; const displayTimeColor = timeLeft === 0 && isRunning ? "text-red-500" : "text-blue-500"; const finishMessage = currentPerson > groupSize ? "終了" : null; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, "ワークショップ用タイマー"), /*#__PURE__*/ React.createElement("form", { className: "mt-10 space-y-5", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "minutesPerPerson", className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "1人あたりの時間設定（分）"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "minutesPerPerson", name: "minutesPerPerson", value: minutesPerPerson, onChange: (e)=>setMinutesPerPerson(Number(e.target.value)), className: "mt-2 p-2 border border-gray-300 rounded-md w-[200px]", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "groupSize", className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "グループの人数が設定できる"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "groupSize", name: "groupSize", value: groupSize, onChange: (e)=>setGroupSize(Number(e.target.value)), className: "mt-2 p-2 border border-gray-300 rounded-md w-[200px]", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "intervalSeconds", className: "text-xl font-crimson-text", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, "インターバルの秒"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "intervalSeconds", name: "intervalSeconds", value: intervalSeconds, onChange: (e)=>setIntervalSeconds(Number(e.target.value)), className: "mt-2 p-2 border border-gray-300 rounded-md w-[200px]", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-5 p-2 bg-blue-500 text-white rounded-md text-xl font-roboto w-full", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, "開始")), isRunning && /*#__PURE__*/ React.createElement("div", { className: "mt-10 flex flex-col items-center", __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-crimson-text", __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, "現在の順番: ", currentPerson), /*#__PURE__*/ React.createElement("div", { className: `mt-5 text-6xl font-bold font-roboto ${displayTimeColor}`, __source: { fileName: "", lineNumber: 101, columnNumber: 11 }, __self: this }, inInterval ? formatTime(timeLeft) : `あと${formatTime(timeLeft)}`)), finishMessage && /*#__PURE__*/ React.createElement("div", { className: "mt-10 text-6xl font-bold text-red-500 font-roboto", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, finishMessage)); }