function MainComponent() { const [time, setTime] = React.useState(0); const [isRunning, setIsRunning] = React.useState(false); const [isModeB, setIsModeB] = React.useState(false); const intervalRef = React.useRef(null); const startTimer = ()=>{ setIsRunning(true); intervalRef.current = setInterval(()=>{ setTime((prev)=>prev + 10); }, 10); }; const stopTimer = ()=>{ setIsRunning(false); clearInterval(intervalRef.current); }; const resetTimer = ()=>{ stopTimer(); setTime(0); }; const toggleMode = ()=>{ resetTimer(); setIsModeB(!isModeB); }; const displayTime = isModeB && !isRunning && time > 0 ? 5000 : time; React.useEffect(()=>{ return ()=>clearInterval(intervalRef.current); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-3 sm:p-7 md:p-10 bg-white rounded-lg shadow-lg m-4 w-[81vw] sm:w-auto scale-90 sm:scale-110", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg sm:text-2xl md:text-3xl font-bold mb-3 sm:mb-5 md:mb-7 text-center", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, "5秒ジャストを目指せ", /*#__PURE__*/ React.createElement("span", { className: "cursor-pointer", onClick: toggleMode, __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, "！")), !isRunning && /*#__PURE__*/ React.createElement("div", { className: "text-4xl sm:text-6xl md:text-8xl font-mono mb-5 sm:mb-7 md:mb-10", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, ("0" + Math.floor(displayTime / 1000 % 60)).slice(-2), ":"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, ("0" + Math.floor(displayTime / 10 % 100)).slice(-2))), isRunning && /*#__PURE__*/ React.createElement("div", { className: "text-4xl sm:text-6xl md:text-8xl font-mono mb-5 sm:mb-7 md:mb-10", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "--:--")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-3 sm:gap-5 w-full sm:w-auto", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: isRunning ? stopTimer : startTimer, className: "bg-blue-500 hover:bg-blue-600 text-white text-sm sm:text-lg font-semibold py-2 sm:py-3 px-3 sm:px-7 rounded-lg w-full sm:w-auto", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isRunning ? "fa-pause" : "fa-play"} mr-2`, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }), isRunning ? "停止" : "スタート"), /*#__PURE__*/ React.createElement("button", { onClick: resetTimer, className: "bg-red-500 hover:bg-red-600 text-white text-sm sm:text-lg font-semibold py-2 sm:py-3 px-3 sm:px-7 rounded-lg w-full sm:w-auto", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-redo mr-2", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), "リセット"))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex items-center justify-center", __source: { fileName: "", lineNumber: 78, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this })); }

5秒ジャストを目指せ！