function MainComponent({ isLocked, coinBalance, timerHours, timerMinutes, onTimerChange, onStartStudy }) { const timerText = `${String(timerHours).padStart(2, '0')}:${String(timerMinutes).padStart(2, '0')}`; const lockButtonText = isLocked ? 'Kilidi Aç' : 'Kilitli'; const handleDecrease = ()=>{ if (isLocked) { const totalMinutes = timerHours * 60 + timerMinutes - 15; const newHours = Math.floor(totalMinutes / 60); const newMinutes = totalMinutes % 60; onTimerChange(Math.max(newHours, 0), Math.max(newMinutes, 0)); } }; const handleIncrease = ()=>{ if (isLocked) { const totalMinutes = timerHours * 60 + timerMinutes + 15; const newHours = Math.floor(totalMinutes / 60); const newMinutes = totalMinutes % 60; onTimerChange(newHours, newMinutes); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center h-screen bg-[#4CAF50]", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center w-full p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white text-lg mx-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-hourglass-start", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: `text-lg mx-2 bg-[#FFC107] rounded-full p-2 ${coinBalance > 0 ? '' : 'cursor-not-allowed'}`, disabled: coinBalance === 0, __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${coinBalance > 0 ? 'fa-plus' : 'fa-ban'}`, __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center bg-[#FFC107] text-white rounded-full px-3 py-1 mx-2", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-coins", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-1", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, coinBalance)))), /*#__PURE__*/ React.createElement("div", { className: "text-center my-10", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white text-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Hemen bugün ağaç dikmeye başla!"), /*#__PURE__*/ React.createElement("div", { className: "relative my-4", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] mx-auto bg-white rounded-full p-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./pixel-cat.png", alt: "Cute pixel cat filling the interior of the circle.", className: "w-full h-full rounded-full", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "text-center w-full px-6", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white text-4xl font-semibold rounded-full p-4 mx-4 bg-[#8BC34A]", onClick: handleDecrease, disabled: !isLocked, __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-minus", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-white text-8xl font-semibold", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, timerText), /*#__PURE__*/ React.createElement("button", { className: "text-white text-4xl font-semibold rounded-full p-4 mx-4 bg-[#8BC34A]", onClick: handleIncrease, disabled: !isLocked, __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: `my-4 text-lg font-semibold rounded-md py-2 px-4 ${isLocked ? 'bg-[#8BC34A]' : 'bg-gray-400 cursor-not-allowed'}`, disabled: !isLocked, onClick: isLocked ? onStartStudy : null, __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Ders Çalışma"), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }))); } function StoryComponent() { const [isLocked, setIsLocked] = React.useState(true); const [coinBalance] = React.useState(547); const [timerHours, setTimerHours] = React.useState(0); const [timerMinutes, setTimerMinutes] = React.useState(0); const handleTimerChange = (hours, minutes)=>{ setTimerHours(hours); setTimerMinutes(minutes); }; const handleStartStudy = ()=>{ if (!isLocked) { // Countdown function to be executed every minute const countdown = setInterval(()=>{ setTimerMinutes((minutes)=>{ if (minutes > 0) return minutes - 1; if (timerHours > 0) setTimerHours(timerHours - 1); if (timerHours === 0 && minutes === 0) clearInterval(countdown); return minutes; }); if (timerHours === 0 && timerMinutes === 0) setIsLocked(true); }, 60000); } }; React.useEffect(()=>{ if (timerHours === 0 && timerMinutes === 0) setIsLocked(true); }, [ timerHours, timerMinutes ]); return /*#__PURE__*/ React.createElement(MainComponent, { isLocked: isLocked, coinBalance: coinBalance, timerHours: timerHours, timerMinutes: timerMinutes, onTimerChange: handleTimerChange, onStartStudy: handleStartStudy, __source: { fileName: "", lineNumber: 111, columnNumber: 5 }, __self: this }); }