function MainComponent() { const [diceValue, setDiceValue] = useState(1); const [isRolling, setIsRolling] = useState(false); const [sides, setSides] = useState(6); useEffect(()=>{ document.title = "Digitale dobbelsteen"; }, []); const rollDice = ()=>{ setIsRolling(true); setDiceValue(null); setTimeout(()=>{ const finalValue = Math.floor(Math.random() * sides) + 1; setDiceValue(finalValue); setIsRolling(false); }, 1000); }; const renderDots = (value)=>{ const dotClass = "w-6 h-6 bg-black rounded-full"; switch(value){ case 1: return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 28, columnNumber: 15 }, __self: this }))); case 2: return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-[25%] left-[25%]", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[25%] right-[25%]", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 39, columnNumber: 15 }, __self: this }))); case 3: return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-[25%] left-[25%]", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[25%] right-[25%]", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }))); case 4: return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-[25%] left-[25%]", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[25%] right-[25%]", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 64, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[25%] left-[25%]", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[25%] right-[25%]", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }))); case 5: return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-[25%] left-[25%]", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[25%] right-[25%]", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[25%] left-[25%]", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[25%] right-[25%]", __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 90, columnNumber: 15 }, __self: this }))); case 6: return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-[25%] left-[25%]", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 98, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[25%] right-[25%]", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[25%] left-[25%]", __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-[25%] right-[25%]", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 107, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[50%] left-[25%] transform -translate-y-1/2", __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 110, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-[50%] right-[25%] transform -translate-y-1/2", __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: dotClass, __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }))); default: return /*#__PURE__*/ React.createElement("span", { className: "text-6xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, value); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen p-8 relative", style: { backgroundColor: "#143f31" }, __source: { fileName: "", lineNumber: 125, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-12 flex items-center gap-4", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://robertsdigitaledidactiek.created.app/", className: "cursor-pointer text-3xl relative w-8 h-8 transform rotate-45", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "absolute left-0 top-0 transform -rotate-45", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, "🔨"), /*#__PURE__*/ React.createElement("span", { className: "absolute left-0 top-0 transform rotate-45", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, "🔧")), /*#__PURE__*/ React.createElement("a", { href: "https://www.digitaledidactiek.com", className: "text-white font-bold text-2xl hover:text-gray-200", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, "✕")), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-center font-roboto text-white mb-8", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, "🎲 Digitale dobbelsteen"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center gap-8", __source: { fileName: "", lineNumber: 149, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[150px]", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-white mb-2 font-roboto", __source: { fileName: "", lineNumber: 151, columnNumber: 13 }, __self: this }, "Aantal zijden:"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { value: sides, onChange: (e)=>setSides(parseInt(e.target.value)), className: "appearance-none w-full px-4 py-2 rounded-lg cursor-pointer text-center pr-8 border-2 border-black text-black", style: { backgroundColor: "#e0d4bc" }, __source: { fileName: "", lineNumber: 155, columnNumber: 15 }, __self: this }, Array.from({ length: 25 }, (_, i)=>i + 1).map((num)=>/*#__PURE__*/ React.createElement("option", { key: num, value: num, className: "text-center", __source: { fileName: "", lineNumber: 162, columnNumber: 19 }, __self: this }, num))), /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("svg", { className: "w-4 h-4 text-black", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __source: { fileName: "", lineNumber: 168, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M19 9l-7 7-7-7", __source: { fileName: "", lineNumber: 174, columnNumber: 19 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: `rounded-2xl shadow-xl p-8 ${isRolling ? "animate-roll" : ""} transform hover:scale-105 transition-transform duration-200`, style: { backgroundColor: "#1d4c3e" }, __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: rollDice, className: "w-[200px] h-[200px] mx-auto bg-white rounded-2xl border-2 border-black flex items-center justify-center hover:border-gray-400 transition-colors duration-200 shadow-lg cursor-pointer", __source: { fileName: "", lineNumber: 188, columnNumber: 13 }, __self: this }, diceValue === null ? /*#__PURE__*/ React.createElement("span", { className: "text-xl text-center text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 193, columnNumber: 17 }, __self: this }, "De dobbelsteen aan het rollen...") : renderDots(diceValue))), /*#__PURE__*/ React.createElement("button", { onClick: rollDice, disabled: isRolling, className: "w-full max-w-xs text-black font-bold py-4 px-8 rounded-lg transition duration-200 disabled:opacity-50 text-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1", style: { backgroundColor: "#e0d4bc" }, __source: { fileName: "", lineNumber: 201, columnNumber: 11 }, __self: this }, isRolling ? "🎲 Gooien..." : "🎲 Gooi Dobbelsteen"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 212, columnNumber: 7 }, __self: this }, ` @keyframes roll { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(90deg) scale(0.9); } 50% { transform: rotate(180deg) scale(1.1); } 75% { transform: rotate(270deg) scale(0.9); } 100% { transform: rotate(360deg) scale(1); } } .animate-roll { animation: roll 1s ease-in-out; } `)); }