function MainComponent() { const [combatLog, setCombatLog] = React.useState([]); const [player, setPlayer] = React.useState({ health: 100, character: "Knight" }); const [enemy, setEnemy] = React.useState({ health: 100, character: "Dragon" }); const [isPlayerTurn, setIsPlayerTurn] = React.useState(true); const applyPlayerAttack = ()=>{ const damage = Math.floor(Math.random() * 10) + 1; setEnemy((prev)=>({ ...prev, health: Math.max(prev.health - damage, 0) })); setCombatLog((prev)=>[ ...prev, `Player's ${player.character} hits Enemy's ${enemy.character} for ${damage} damage!` ]); setIsPlayerTurn(false); }; const applyEnemyAttack = ()=>{ const damage = Math.floor(Math.random() * 10) + 1; setPlayer((prev)=>({ ...prev, health: Math.max(prev.health - damage, 0) })); setCombatLog((prev)=>[ ...prev, `Enemy's ${enemy.character} hits Player's ${player.character} for ${damage} damage!` ]); setIsPlayerTurn(true); }; React.useEffect(()=>{ const timeoutId = enemy.health > 0 && !isPlayerTurn ? setTimeout(()=>{ applyEnemyAttack(); }, 1000) : null; return ()=>{ clearTimeout(timeoutId); }; }, [ isPlayerTurn, enemy.health ]); const gameEnd = player.health === 0 || enemy.health === 0; const attackButtonDisabled = !isPlayerTurn || gameEnd; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center gap-8 p-4 h-full bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Combat Game"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-8", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Player's ", player.character), /*#__PURE__*/ React.createElement("p", { className: "text-[#28a745] font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Health: ", player.health)), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Enemy's ", enemy.character), /*#__PURE__*/ React.createElement("p", { className: "text-[#dc3545] font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Health: ", enemy.health))), /*#__PURE__*/ React.createElement("button", { className: `px-6 py-2 text-white bg-[#007bff] rounded font-roboto ${attackButtonDisabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[#0069d9]'}`, onClick: applyPlayerAttack, disabled: attackButtonDisabled, __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, "Attack"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] max-h-[300px] overflow-auto bg-white border border-[#ced4da] p-3", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, combatLog.map((entry, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-2 last:mb-0 font-roboto", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, entry)))); }

Combat Game

Player's Knight

Enemy's Dragon

Combat Game

Player's Knight

Enemy's Dragon