function MainComponent() { const [selectedTime, setSelectedTime] = useState(0); const [isRunning, setIsRunning] = useState(false); const [timeLeft, setTimeLeft] = useState(0); const [customHours, setCustomHours] = useState(""); const [customMinutes, setCustomMinutes] = useState(""); const [customSeconds, setCustomSeconds] = useState(""); const [isPaused, setIsPaused] = useState(false); const [isSidebarOpen, setSidebarOpen] = useState(true); const [showConfirm, setShowConfirm] = useState(false); const [confirmMessage, setConfirmMessage] = useState(""); const [pendingAction, setPendingAction] = useState(null); const [isStopwatch, setIsStopwatch] = useState(false); const [laps, setLaps] = useState([]); const [showTimerComplete, setShowTimerComplete] = useState(false); // Set page title useEffect(()=>{ document.title = "Visuele timer / stopwatch"; }, []); const presetTimes = [ { label: "10 seconden", value: 10 / 60 }, { label: "30 seconden", value: 30 / 60 }, { label: "45 seconden", value: 45 / 60 }, { label: "1 minuut", value: 1 }, { label: "2 minuten", value: 2 }, { label: "5 minuten", value: 5 }, { label: "10 minuten", value: 10 }, { label: "15 minuten", value: 15 }, { label: "30 minuten", value: 30 }, { label: "1 uur", value: 60 } ]; useEffect(()=>{ let timer; if (isRunning) { timer = setInterval(()=>{ if (isStopwatch) { setTimeLeft((prev)=>prev + 1); } else if (timeLeft > 0) { setTimeLeft((prev)=>prev - 1); } else if (timeLeft === 0 && !isStopwatch) { const audio = new Audio("data:audio/wav;base64,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qJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU="); // Speel het geluid 3 keer af met een interval van 1 seconde audio.play(); setTimeout(()=>audio.play(), 1000); setTimeout(()=>audio.play(), 2000); setShowTimerComplete(true); setIsRunning(false); } }, 1000); } return ()=>clearInterval(timer); }, [ isRunning, timeLeft, isStopwatch ]); const startTimer = ()=>{ const totalSeconds = parseInt(customHours || "0") * 3600 + parseInt(customMinutes || "0") * 60 + parseInt(customSeconds || "0"); if (selectedTime > 0 || totalSeconds > 0) { if (isRunning || isPaused) { const timeString = selectedTime > 0 ? presetTimes.find((t)=>t.value === selectedTime)?.label : `${customHours ? `${customHours} uur ` : ""}${customMinutes ? `${customMinutes} minuten ` : ""}${customSeconds ? `${customSeconds} seconden` : ""}`; setConfirmMessage(`Wil je de huidige timer stoppen en een nieuwe van ${timeString} starten?`); setPendingAction(()=>()=>{ setTimeLeft(selectedTime > 0 ? selectedTime * 60 : totalSeconds); setIsRunning(true); setIsPaused(false); setLaps([]); }); setShowConfirm(true); } else { setTimeLeft(selectedTime > 0 ? selectedTime * 60 : totalSeconds); setIsRunning(true); setIsPaused(false); setLaps([]); } } }; const pauseTimer = ()=>{ setIsPaused(true); setIsRunning(false); }; const resumeTimer = ()=>{ setIsPaused(false); setIsRunning(true); }; const stopTimer = ()=>{ setIsRunning(false); setIsPaused(false); setTimeLeft(0); setSelectedTime(0); setCustomHours(""); setCustomMinutes(""); setCustomSeconds(""); setLaps([]); }; const formatTime = (seconds)=>{ const hours = Math.floor(seconds / 3600); const minutes = Math.floor(seconds % 3600 / 60); const remainingSeconds = seconds % 60; if (hours > 0) { return `${hours}:${minutes.toString().padStart(2, "0")}:${remainingSeconds.toString().padStart(2, "0")}`; } return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`; }; const handleCustomHoursChange = (e)=>{ const value = e.target.value; if (!isNaN(value) && value >= 0) { setCustomHours(value); setSelectedTime(0); } }; const handleCustomMinutesChange = (e)=>{ const value = e.target.value; if (!isNaN(value) && value >= 0 && value < 60) { setCustomMinutes(value); setSelectedTime(0); } }; const handleCustomSecondsChange = (e)=>{ const value = e.target.value; if (!isNaN(value) && value >= 0 && value < 60) { setCustomSeconds(value); setSelectedTime(0); } }; const getPercentage = ()=>{ if (!isRunning && !isPaused) return 100; const totalTime = selectedTime > 0 ? selectedTime * 60 : parseInt(customHours || "0") * 3600 + parseInt(customMinutes || "0") * 60 + parseInt(customSeconds || "0"); return (totalTime - timeLeft) / totalTime * 100; }; const addLap = ()=>{ setLaps((prev)=>[ timeLeft, ...prev ]); }; const handlePresetTimeClick = (time)=>{ if (isRunning || isPaused) { setConfirmMessage(`Wil je de huidige timer stoppen en een nieuwe van ${time.label} instellen?`); setPendingAction(()=>()=>{ setSelectedTime(time.value); setTimeLeft(time.value * 60); setIsRunning(false); setIsPaused(false); setCustomHours(""); setCustomMinutes(""); setCustomSeconds(""); setIsStopwatch(false); }); setShowConfirm(true); } else { setSelectedTime(time.value); setTimeLeft(time.value * 60); setIsRunning(false); setIsPaused(false); setCustomHours(""); setCustomMinutes(""); setCustomSeconds(""); setIsStopwatch(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen font-roboto bg-[#143f31] relative", __source: { fileName: "", lineNumber: 181, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-8 flex items-center gap-4 z-50", __source: { fileName: "", lineNumber: 182, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://robertsdigitaledidactiek.created.app/", className: "text-2xl", __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tools text-[#e0d4bc]", __source: { fileName: "", lineNumber: 187, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://www.digitaledidactiek.com", className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 189, columnNumber: 9 }, __self: this }, "✕")), /*#__PURE__*/ React.createElement("div", { className: `${isSidebarOpen ? "w-1/3" : "w-[60px]"} bg-[#143f31] relative transition-all duration-300 ease-in-out`, __source: { fileName: "", lineNumber: 197, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSidebarOpen(!isSidebarOpen), className: "absolute -right-4 top-4 z-10 bg-[#143f31] text-white p-2 rounded-full shadow-md", __source: { fileName: "", lineNumber: 200, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isSidebarOpen ? "fa-chevron-left" : "fa-chevron-right"}`, __source: { fileName: "", lineNumber: 204, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `${isSidebarOpen ? "opacity-100 p-8" : "opacity-0 invisible"} transition-opacity duration-300 bg-[#143f31]`, __source: { fileName: "", lineNumber: 208, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-6 text-white", __source: { fileName: "", lineNumber: 211, columnNumber: 11 }, __self: this }, "Visuele timer / stopwatch"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 214, columnNumber: 11 }, __self: this }, presetTimes.map((time)=>/*#__PURE__*/ React.createElement("button", { key: time.value, onClick: ()=>handlePresetTimeClick(time), className: `p-4 rounded-lg ${selectedTime === time.value ? "bg-[#e3f2fd] text-black border-2 border-[#4caf50] shadow-md" : "bg-[#e0d4bc] text-black hover:bg-[#decaa2] border border-gray-200"} transition-colors`, __source: { fileName: "", lineNumber: 216, columnNumber: 15 }, __self: this }, time.label))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-6 mt-8 text-white", __source: { fileName: "", lineNumber: 229, columnNumber: 11 }, __self: this }, "Custom Timer"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 232, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 233, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2 text-white", __source: { fileName: "", lineNumber: 234, columnNumber: 15 }, __self: this }, "Uren"), /*#__PURE__*/ React.createElement("input", { type: "number", value: customHours, onChange: handleCustomHoursChange, className: "w-full p-4 rounded-lg border border-gray-300 bg-[#e0d4bc] text-black", min: "0", __source: { fileName: "", lineNumber: 235, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 243, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2 text-white", __source: { fileName: "", lineNumber: 244, columnNumber: 15 }, __self: this }, "Minuten"), /*#__PURE__*/ React.createElement("input", { type: "number", value: customMinutes, onChange: handleCustomMinutesChange, className: "w-full p-4 rounded-lg border border-gray-300 bg-[#e0d4bc] text-black", min: "0", max: "59", __source: { fileName: "", lineNumber: 245, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 254, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm mb-2 text-white", __source: { fileName: "", lineNumber: 255, columnNumber: 15 }, __self: this }, "Seconden"), /*#__PURE__*/ React.createElement("input", { type: "number", value: customSeconds, onChange: handleCustomSecondsChange, className: "w-full p-4 rounded-lg border border-gray-300 bg-[#e0d4bc] text-black", min: "0", max: "59", __source: { fileName: "", lineNumber: 256, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4 bg-[#143f31]", __source: { fileName: "", lineNumber: 266, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsStopwatch(false); startTimer(); }, className: "mt-6 p-4 w-full bg-[#1d4c3e] text-white rounded-lg hover:bg-[#143f31] transition-colors border-2 border-white", __source: { fileName: "", lineNumber: 267, columnNumber: 13 }, __self: this }, "Start Timer"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setIsStopwatch(true); setTimeLeft(0); setIsRunning(true); setIsPaused(false); setLaps([]); }, className: "p-4 w-full bg-[#decaa2] text-black rounded-lg hover:bg-[#e0d4bc] transition-colors", __source: { fileName: "", lineNumber: 276, columnNumber: 13 }, __self: this }, "Start Stopwatch"))), !isSidebarOpen && /*#__PURE__*/ React.createElement("div", { className: "h-full flex items-center justify-center", __source: { fileName: "", lineNumber: 292, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "transform -rotate-90 whitespace-nowrap text-white font-bold text-lg", __source: { fileName: "", lineNumber: 293, columnNumber: 13 }, __self: this }, "Timer Keuzes"))), /*#__PURE__*/ React.createElement("div", { className: `${isSidebarOpen ? "w-2/3" : "flex-1"} transition-all duration-300 flex items-center justify-center bg-[#1d4c3e] p-8`, __source: { fileName: "", lineNumber: 300, columnNumber: 7 }, __self: this }, (isRunning || isPaused) && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-[#1d4c3e]", __source: { fileName: "", lineNumber: 304, columnNumber: 11 }, __self: this }, !isStopwatch && /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[60px] bg-[#e0d4bc] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 306, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 h-full bg-white transition-all duration-1000", style: { width: `${getPercentage()}%` }, __source: { fileName: "", lineNumber: 307, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-6xl font-bold text-center text-white bg-[#1d4c3e]", __source: { fileName: "", lineNumber: 313, columnNumber: 13 }, __self: this }, formatTime(timeLeft)), isStopwatch && /*#__PURE__*/ React.createElement("div", { className: "bg-[#1d4c3e]", __source: { fileName: "", lineNumber: 317, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mt-8", __source: { fileName: "", lineNumber: 318, columnNumber: 17 }, __self: this }, isRunning && /*#__PURE__*/ React.createElement("button", { onClick: addLap, className: "p-4 bg-[#e0d4bc] text-black rounded-lg hover:bg-[#decaa2] transition-colors", __source: { fileName: "", lineNumber: 320, columnNumber: 21 }, __self: this }, "Ronde"), /*#__PURE__*/ React.createElement("button", { onClick: isPaused ? resumeTimer : pauseTimer, className: "p-4 bg-[#e0d4bc] text-black rounded-lg hover:bg-[#decaa2] transition-colors", __source: { fileName: "", lineNumber: 327, columnNumber: 19 }, __self: this }, isPaused ? "Hervat" : "Pauzeer"), /*#__PURE__*/ React.createElement("button", { onClick: stopTimer, className: "p-4 bg-[#e0d4bc] text-black rounded-lg hover:bg-[#decaa2] transition-colors", __source: { fileName: "", lineNumber: 333, columnNumber: 19 }, __self: this }, "Stop")), laps.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8 max-h-[200px] overflow-y-auto bg-[#1d4c3e]", __source: { fileName: "", lineNumber: 341, columnNumber: 19 }, __self: this }, laps.map((lap, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex justify-between items-center p-4 bg-[#e0d4bc] rounded-lg mb-2", __source: { fileName: "", lineNumber: 343, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-black", __source: { fileName: "", lineNumber: 347, columnNumber: 25 }, __self: this }, "Ronde ", laps.length - index), /*#__PURE__*/ React.createElement("span", { className: "text-black font-mono", __source: { fileName: "", lineNumber: 350, columnNumber: 25 }, __self: this }, formatTime(lap)))))))), showConfirm && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 363, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#e0d4bc] p-6 rounded-lg shadow-lg max-w-md w-full mx-4", __source: { fileName: "", lineNumber: 364, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-black text-lg mb-6", __source: { fileName: "", lineNumber: 365, columnNumber: 13 }, __self: this }, confirmMessage), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-4", __source: { fileName: "", lineNumber: 366, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowConfirm(false); if (pendingAction) { pendingAction(); setPendingAction(null); } }, className: "px-4 py-2 bg-[#1d4c3e] text-white rounded hover:bg-[#143f31]", __source: { fileName: "", lineNumber: 367, columnNumber: 15 }, __self: this }, "Ja"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ setShowConfirm(false); setPendingAction(null); }, className: "px-4 py-2 bg-[#e0d4bc] text-black rounded hover:bg-[#decaa2]", __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }, "Nee")))), showTimerComplete && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", __source: { fileName: "", lineNumber: 393, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white p-6 rounded-lg shadow-lg max-w-md w-full mx-4", __source: { fileName: "", lineNumber: 394, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-black text-lg mb-6", __source: { fileName: "", lineNumber: 395, columnNumber: 13 }, __self: this }, "De timer is afgelopen."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end", __source: { fileName: "", lineNumber: 396, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowTimerComplete(false), className: "px-4 py-2 bg-[#1d4c3e] text-white rounded hover:bg-[#143f31]", __source: { fileName: "", lineNumber: 397, columnNumber: 15 }, __self: this }, "OK"))))); }