function MainComponent() { const [characterCreated, setCharacterCreated] = React.useState(false); const [characterPrompt, setCharacterPrompt] = React.useState(''); const [characterImage, setCharacterImage] = React.useState(''); const [characterLoading, setCharacterLoading] = React.useState(false); const [level, setLevel] = React.useState(1); const [gold, setGold] = React.useState(0); const [upgrades, setUpgrades] = React.useState({ strength: 0, agility: 0, intelligence: 0, stamina: 0, charisma: 0, fortitude: 0, arcana: 0, dexterity: 0, vitality: 0, luck: 0 }); const handleUpgradeClick = (type)=>{ const upgradeCost = Math.ceil(Math.pow(1.2, upgrades[type])) * 10; if (gold >= upgradeCost) { setGold((prevGold)=>prevGold - upgradeCost); setUpgrades((prevUpgrades)=>({ ...prevUpgrades, [type]: prevUpgrades[type] + 1 })); } }; const getUpgradeCost = (type)=>Math.ceil(Math.pow(1.2, upgrades[type])) * 10; const upgradeButtons = Object.entries(upgrades).map(([type, value])=>/*#__PURE__*/ React.createElement("button", { key: type, className: `mx-2 my-1 px-3 py-2 bg-[#6b7280] text-white font-bold rounded ${gold >= getUpgradeCost(type) ? 'hover:bg-[#4b5563]' : 'opacity-50 cursor-not-allowed'}`, onClick: ()=>handleUpgradeClick(type), disabled: gold < getUpgradeCost(type), __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, `Upgrade ${type.charAt(0).toUpperCase() + type.slice(1)} (${value}) for ${getUpgradeCost(type)} gold`)); const handleCombatClick = ()=>{ const rewardGold = level * 5 + upgrades.luck; setGold((prevGold)=>prevGold + rewardGold); setLevel((prevLevel)=>prevLevel + 1); }; const handleCreateCharacter = async ()=>{ setCharacterLoading(true); const fullBodyPrompt = 'full body ' + characterPrompt; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(fullBodyPrompt)}&batch_size=1`, { method: 'GET' }); const data = await response.json(); setCharacterImage(data.data[0]); setCharacterCreated(true); setCharacterLoading(false); }; const characterCreationForm = /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-center", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Create Your Character")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: characterPrompt, placeholder: "Enter character description", onChange: (e)=>setCharacterPrompt(e.target.value.replace(/[^a-zA-Z0-9 ]/g, '')), className: "w-full mb-4 px-3 py-2 border border-[#d1d5db] rounded", name: "character-prompt", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: `px-6 py-3 font-bold rounded ${characterLoading ? 'bg-[#d97706]' : 'bg-[#16a34a] hover:bg-[#15803d]'} text-white`, onClick: handleCreateCharacter, disabled: characterLoading, __source: { fileName: "", lineNumber: 79, columnNumber: 9 }, __self: this }, characterLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner animate-spin", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }) : 'Create'))); const gameInterface = /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto", __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6 text-center", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, "RPG Game"), characterImage && /*#__PURE__*/ React.createElement("div", { className: "w-[200px] h-[200px] mx-auto my-4", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: characterImage, alt: characterPrompt, style: { animation: 'rotateCharacter 10s infinite linear' }, className: "w-full h-full object-contain", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-center", __source: { fileName: "", lineNumber: 107, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, "Level:"), " ", level), /*#__PURE__*/ React.createElement("div", { className: "mb-8 text-center", __source: { fileName: "", lineNumber: 110, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, "Gold:"), " ", gold), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center mb-6", __source: { fileName: "", lineNumber: 113, columnNumber: 7 }, __self: this }, upgradeButtons), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 116, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-8 py-3 bg-[#16a34a] text-white font-bold rounded hover:bg-[#15803d]", onClick: handleCombatClick, __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, "Combat"))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#111827] text-[#f9fafb] p-4 font-roboto", __source: { fileName: "", lineNumber: 128, columnNumber: 5 }, __self: this }, characterCreated ? gameInterface : characterCreationForm, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, ` body { animation: fadeIn 1s ease-in-out; } @keyframes rotateCharacter { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } `)); }