function MainComponent() { const GAME_WIDTH = 600; const GAME_HEIGHT = 400; const PLAYER_WIDTH = 50; const PLAYER_HEIGHT = 100; const [player1, setPlayer1] = React.useState({ x: 100, y: GAME_HEIGHT - PLAYER_HEIGHT, health: 100 }); const [player2, setPlayer2] = React.useState({ x: 450, y: GAME_HEIGHT - PLAYER_HEIGHT, health: 100 }); const [gameOver, setGameOver] = React.useState(false); const [winner, setWinner] = React.useState(null); React.useEffect(()=>{ const handleKeyDown = (e)=>{ if (gameOver) return; switch(e.key){ case 'a': setPlayer1((prev)=>({ ...prev, x: Math.max(0, prev.x - 10) })); break; case 'd': setPlayer1((prev)=>({ ...prev, x: Math.min(GAME_WIDTH - PLAYER_WIDTH, prev.x + 10) })); break; case 'w': if (Math.abs(player1.x - player2.x) < PLAYER_WIDTH) { setPlayer2((prev)=>({ ...prev, health: Math.max(0, prev.health - 10) })); } break; case 'ArrowLeft': setPlayer2((prev)=>({ ...prev, x: Math.max(0, prev.x - 10) })); break; case 'ArrowRight': setPlayer2((prev)=>({ ...prev, x: Math.min(GAME_WIDTH - PLAYER_WIDTH, prev.x + 10) })); break; case 'ArrowUp': if (Math.abs(player1.x - player2.x) < PLAYER_WIDTH) { setPlayer1((prev)=>({ ...prev, health: Math.max(0, prev.health - 10) })); } break; } }; window.addEventListener('keydown', handleKeyDown); return ()=>window.removeEventListener('keydown', handleKeyDown); }, [ player1.x, player2.x, gameOver ]); React.useEffect(()=>{ if (player1.health <= 0) { setGameOver(true); setWinner('Player 2'); } else if (player2.health <= 0) { setGameOver(true); setWinner('Player 1'); } }, [ player1.health, player2.health ]); const restartGame = ()=>{ setPlayer1({ x: 100, y: GAME_HEIGHT - PLAYER_HEIGHT, health: 100 }); setPlayer2({ x: 450, y: GAME_HEIGHT - PLAYER_HEIGHT, health: 100 }); setGameOver(false); setWinner(null); }; return /*#__PURE__*/ React.createElement("div", { className: "relative overflow-hidden", style: { width: GAME_WIDTH, height: GAME_HEIGHT, backgroundColor: '#87CEEB' }, __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 w-full", style: { height: '20%', backgroundColor: '#8B4513' }, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bg-red-500", style: { left: player1.x, top: player1.y, width: PLAYER_WIDTH, height: PLAYER_HEIGHT }, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-2 top-2 text-white", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, "Player 1 Health: ", player1.health), /*#__PURE__*/ React.createElement("div", { className: "absolute bg-blue-500", style: { left: player2.x, top: player2.y, width: PLAYER_WIDTH, height: PLAYER_HEIGHT }, __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute right-2 top-2 text-white", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, "Player 2 Health: ", player2.health), gameOver && /*#__PURE__*/ React.createElement("div", { className: "absolute text-white bg-[rgba(0,0,0,0.7)] p-5 text-center", style: { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Game Over"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, winner, " wins!"), /*#__PURE__*/ React.createElement("button", { onClick: restartGame, className: "mt-3 bg-white text-black p-2", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "Restart"))); }