function MainComponent() { const [currency, setCurrency] = React.useState(100); const [redFactionPower, setRedFactionPower] = React.useState(1); const [blueFactionPower, setBlueFactionPower] = React.useState(1); const [redFactionHealth, setRedFactionHealth] = React.useState(100); const [blueFactionHealth, setBlueFactionHealth] = React.useState(100); const [redFactionCharacter, setRedFactionCharacter] = React.useState('Knight'); const [blueFactionCharacter, setBlueFactionCharacter] = React.useState('Sorcerer'); const [isBlueAttacking, setIsBlueAttacking] = React.useState(false); const upgradeRedFaction = ()=>{ if (currency >= 20 && redFactionHealth > 0) { setRedFactionPower(redFactionPower + 1); setCurrency(currency - 20); } }; const upgradeBlueFaction = ()=>{ if (currency >= 20 && blueFactionHealth > 0) { setBlueFactionPower(blueFactionPower + 1); setCurrency(currency - 20); } }; const attackRedFaction = ()=>{ setIsBlueAttacking(true); setRedFactionHealth(redFactionHealth - blueFactionPower); setTimeout(()=>setIsBlueAttacking(false), 1000); }; const attackBlueFaction = ()=>{ setBlueFactionHealth(blueFactionHealth - redFactionPower); }; const changeRedFactionCharacter = (event)=>{ setRedFactionCharacter(event.target.value); }; const changeBlueFactionCharacter = (event)=>{ setBlueFactionCharacter(event.target.value); }; const characterOptions = [ { label: 'Knight', value: 'Knight' }, { label: 'Wizard', value: 'Wizard' }, { label: 'Archer', value: 'Archer' }, { label: 'Healer', value: 'Healer' } ]; const characterSelection = (faction)=>/*#__PURE__*/ React.createElement("select", { className: "bg-gray-200 text-gray-700 font-roboto p-2 rounded", value: faction === 'red' ? redFactionCharacter : blueFactionCharacter, onChange: faction === 'red' ? changeRedFactionCharacter : changeBlueFactionCharacter, name: faction === 'red' ? 'redFactionCharacter' : 'blueFactionCharacter', __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, characterOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, option.label))); const attackButtonStyle = isBlueAttacking ? "animate-blue-attack" : ""; return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col items-center justify-center space-y-4", __source: { fileName: "", lineNumber: 68, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, "Red vs Blue Game"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center w-full", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-[#FF0000] font-roboto", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Red Faction Health: ", redFactionHealth), /*#__PURE__*/ React.createElement("div", { className: "text-[#0000FF] font-roboto", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "Blue Faction Health: ", blueFactionHealth)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center w-full", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/red-faction-character.png", alt: "Red Faction Character", className: "w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), characterSelection('red')), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 80, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/blue-faction-character.png", alt: "Blue Faction Character", className: "w-[100px] h-[100px]", __source: { fileName: "", lineNumber: 81, columnNumber: 13 }, __self: this }), characterSelection('blue'))), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#FF0000] text-white px-4 py-2", onClick: attackBlueFaction, disabled: redFactionHealth <= 0, __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Attack as ", redFactionCharacter), /*#__PURE__*/ React.createElement("button", { className: `bg-[#0000FF] text-white px-4 py-2 ${attackButtonStyle}`, onClick: attackRedFaction, disabled: blueFactionHealth <= 0, __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, "Attack as ", blueFactionCharacter))), /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 7 }, __self: this }, "Currency: ", currency), /*#__PURE__*/ React.createElement("div", { className: "space-x-4", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2", onClick: upgradeRedFaction, disabled: currency < 20 || redFactionHealth <= 0, __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "Upgrade Red Faction"), /*#__PURE__*/ React.createElement("button", { className: "bg-green-500 text-white px-4 py-2", onClick: upgradeBlueFaction, disabled: currency < 20 || blueFactionHealth <= 0, __source: { fileName: "", lineNumber: 111, columnNumber: 9 }, __self: this }, "Upgrade Blue Faction")), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, ` @keyframes blueAttack { from { transform: translateX(0); } to { transform: translateX(10px); } } .animate-blue-attack { animation: blueAttack 0.5s alternate infinite; } `)); }