function MainComponent() { const [village, setVillage] = React.useState({ gold: 0, elixir: 0, trophies: 0 }); const [army, setArmy] = React.useState({ velociraptors: 0, triceratops: 0, tRex: 0 }); const handleResourceCollect = (resource, amount)=>()=>{ setVillage((prev)=>({ ...prev, [resource]: prev[resource] + amount })); }; const handleRecruitTroops = (type)=>()=>{ setArmy((prev)=>({ ...prev, [type]: prev[type] + 1 })); }; const handleAttack = ()=>{ const successChance = Math.random(); if (successChance > 0.5) { setVillage((prev)=>({ ...prev, trophies: prev.trophies + 30 })); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 bg-[#7FAF81] min-h-screen", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#3D3522] mb-8 font-serif", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, "Dino Clash"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 items-center w-full mb-8", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleResourceCollect('gold', 50), className: "bg-[#EAD979] p-4 rounded text-[#3D3522] shadow-lg font-mono w-[150px]", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "🪙 Gold Mine"), /*#__PURE__*/ React.createElement("button", { onClick: handleResourceCollect('elixir', 50), className: "bg-[#6DDCCF] p-4 rounded text-[#3D3522] shadow-lg font-mono w-[150px]", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "💧 Elixir Collector")), /*#__PURE__*/ React.createElement("div", { className: "text-xl text-[#3D3522] mb-4 font-sans", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Gold: ", village.gold), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, "Elixir: ", village.elixir), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Trophies: 🏆 ", village.trophies)), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 gap-4 items-center w-full mb-8", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleRecruitTroops('velociraptors'), className: "bg-[#F2B3A7] p-4 rounded text-[#3D3522] shadow-lg font-mono w-[125px]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Recruit Velociraptors"), /*#__PURE__*/ React.createElement("button", { onClick: handleRecruitTroops('triceratops'), className: "bg-[#F2B3A7] p-4 rounded text-[#3D3522] shadow-lg font-mono w-[125px]", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Recruit Triceratops"), /*#__PURE__*/ React.createElement("button", { onClick: handleRecruitTroops('tRex'), className: "bg-[#F2B3A7] p-4 rounded text-[#3D3522] shadow-lg font-mono w-[125px]", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, "Recruit T-Rex")), /*#__PURE__*/ React.createElement("div", { className: "text-xl text-[#3D3522] mb-4 font-sans", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Velociraptors: ", army.velociraptors), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Triceratops: ", army.triceratops), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "T-Rex: ", army.tRex)), /*#__PURE__*/ React.createElement("button", { onClick: handleAttack, className: "bg-red-600 text-white p-4 rounded shadow-lg font-mono mb-6 hover:bg-red-700 transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, "Attack"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); } } .hover\:bg-red-700:hover { animation-name: pulse; animation-duration: 1s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } `)); }