function MainComponent() { const [diceCount, setDiceCount] = useState(3); const [rolledDice, setRolledDice] = useState([]); const storyIcons = [ "fas fa-user", "fas fa-graduation-cap", "fas fa-crown", "fas fa-users", "fas fa-dog", "fas fa-cat", "fas fa-dragon", "fas fa-horse", "fas fa-building", "fas fa-home", "fas fa-school", "fas fa-tree", "fas fa-mountain", "fas fa-umbrella-beach", "fas fa-campground", "fas fa-water", "fas fa-ship", "fas fa-leaf", "fas fa-book", "fas fa-palette", "fas fa-gamepad", "fas fa-football", "fas fa-theater-masks", "fas fa-ticket", "fas fa-music", "fas fa-sun", "fas fa-moon", "fas fa-star", "fas fa-cloud", "fas fa-cloud-rain", "fas fa-snowflake", "fas fa-seedling", "fas fa-apple-alt", "fas fa-gift", "fas fa-magic", "fas fa-heart", "fas fa-fish", "fas fa-robot", "fas fa-rocket", "fas fa-ghost", "fas fa-spider", "fas fa-dove", "fas fa-frog", "fas fa-kiwi-bird", "fas fa-hippo", "fas fa-otter", "fas fa-candy-cane", "fas fa-ice-cream", "fas fa-cookie", "fas fa-pizza-slice", "fas fa-hamburger", "fas fa-hotdog", "fas fa-drum", "fas fa-guitar", "fas fa-hat-wizard", "fas fa-wand-magic-sparkles", "fas fa-broom", "fas fa-compass", "fas fa-map", "fas fa-rainbow", "fas fa-fire", "fas fa-bolt", "fas fa-skull", "fas fa-meteor", "fas fa-microscope", "fas fa-atom", "fas fa-brain", "fas fa-lightbulb" ]; const [theme, setTheme] = useState("purple"); const rollDice = ()=>{ const newRoll = []; for(let i = 0; i < diceCount; i++){ const randomIndex = Math.floor(Math.random() * storyIcons.length); newRoll.push(storyIcons[randomIndex]); } setRolledDice(newRoll); }; const getThemeColors = ()=>{ switch(theme){ case "blue": return { gradient: "from-blue-50 to-blue-100", button: "bg-blue-600", hover: "hover:bg-blue-100", text: "text-blue-600", gradientButton: "from-blue-500 to-blue-600", gradientHover: "hover:from-blue-600 hover:to-blue-700" }; case "green": return { gradient: "from-green-50 to-green-100", button: "bg-green-600", hover: "hover:bg-green-100", text: "text-green-600", gradientButton: "from-green-500 to-green-600", gradientHover: "hover:from-green-600 hover:to-green-700" }; case "bw": return { gradient: "from-gray-50 to-gray-100", button: "bg-gray-900", hover: "hover:bg-gray-100", text: "text-gray-900", gradientButton: "from-gray-800 to-gray-900", gradientHover: "hover:from-gray-900 hover:to-black" }; default: return { gradient: "from-purple-50 to-purple-100", button: "bg-purple-600", hover: "hover:bg-purple-100", text: "text-purple-600", gradientButton: "from-purple-500 to-indigo-500", gradientHover: "hover:from-purple-600 hover:to-indigo-600" }; } }; const colors = getThemeColors(); return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen bg-gradient-to-br ${colors.gradient} p-8 relative`, __source: { fileName: "", lineNumber: 127, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto pb-16", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-end mb-4", __source: { fileName: "", lineNumber: 131, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 132, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTheme("purple"), className: "w-8 h-8 rounded-full bg-purple-600 border-2 border-white", "aria-label": "Purple theme", __source: { fileName: "", lineNumber: 133, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTheme("blue"), className: "w-8 h-8 rounded-full bg-blue-600 border-2 border-white", "aria-label": "Blue theme", __source: { fileName: "", lineNumber: 138, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTheme("green"), className: "w-8 h-8 rounded-full bg-green-600 border-2 border-white", "aria-label": "Green theme", __source: { fileName: "", lineNumber: 143, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTheme("bw"), className: "w-8 h-8 rounded-full bg-gray-900 border-2 border-white", "aria-label": "Black and white theme", __source: { fileName: "", lineNumber: 148, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("h1", { className: `text-4xl font-bold text-center mb-8 ${colors.text} font-roboto`, __source: { fileName: "", lineNumber: 155, columnNumber: 9 }, __self: this }, "Story Dice"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mb-8", __source: { fileName: "", lineNumber: 160, columnNumber: 9 }, __self: this }, [ 3, 5, 9 ].map((count)=>/*#__PURE__*/ React.createElement("button", { key: count, onClick: ()=>setDiceCount(count), className: `px-6 py-3 rounded-lg font-semibold transition-all ${diceCount === count ? `${colors.button} text-white` : `bg-white ${colors.text} ${colors.hover}`}`, __source: { fileName: "", lineNumber: 162, columnNumber: 13 }, __self: this }, count, " Dice"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 176, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: rollDice, className: `w-full bg-gradient-to-r ${colors.gradientButton} text-white py-4 rounded-lg text-xl font-bold ${colors.gradientHover} transition-all shadow-lg`, __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }, "Roll the Dice!")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 184, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `grid ${diceCount === 3 ? "grid-cols-3 w-[600px]" : diceCount === 5 ? "grid-cols-3 md:grid-cols-5 w-[800px]" : "grid-cols-3 w-[600px]"} gap-4`, __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, rolledDice.map((dice, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "aspect-square bg-white rounded-xl shadow-lg flex items-center justify-center text-4xl md:text-5xl p-4 transform hover:scale-105 transition-all", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${dice} ${colors.text}`, __source: { fileName: "", lineNumber: 199, columnNumber: 17 }, __self: this }))))), rolledDice.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center text-gray-600 text-lg font-roboto", __source: { fileName: "", lineNumber: 206, columnNumber: 11 }, __self: this }, "Use these symbols to create your story!")), /*#__PURE__*/ React.createElement("footer", { className: "absolute bottom-0 left-0 right-0 p-4 text-center text-sm text-gray-600", __source: { fileName: "", lineNumber: 211, columnNumber: 7 }, __self: this }, "Made with ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-red-500", __source: { fileName: "", lineNumber: 212, columnNumber: 19 }, __self: this }), " and the help of AI by James Abela and Sethi De Clercq to promote storytelling")); }