"use client"; "use client"; function MainComponent() { const [player1Score, setPlayer1Score] = React.useState(0); const [player2Score, setPlayer2Score] = React.useState(0); const [ballPosition, setBallPosition] = React.useState({ x: 400, y: 300 }); const [ballVelocity, setBallVelocity] = React.useState({ x: 2, y: 2 }); const [paddle1Position, setPaddle1Position] = React.useState(250); const [paddle2Position, setPaddle2Position] = React.useState(250); const paddleVelocity = 2; const [isPaused, setIsPaused] = React.useState(false); React.useEffect(()=>{ const handleKeyPress = (e)=>{ if (e.key === "w") setPaddle1Position((prev)=>Math.max(0, prev - paddleVelocity * 10)); if (e.key === "s") setPaddle1Position((prev)=>Math.min(500, prev + paddleVelocity * 10)); if (e.key === "i") setPaddle2Position((prev)=>Math.max(0, prev - paddleVelocity * 10)); if (e.key === "k") setPaddle2Position((prev)=>Math.min(500, prev + paddleVelocity * 10)); if (e.key === " ") setIsPaused((prev)=>!prev); }; window.addEventListener("keydown", handleKeyPress); return ()=>window.removeEventListener("keydown", handleKeyPress); }, []); React.useEffect(()=>{ if (isPaused) return; const gameLoop = setInterval(()=>{ setBallPosition((prev)=>{ let newX = prev.x + ballVelocity.x; let newY = prev.y + ballVelocity.y; if (newY <= 0 || newY >= 600) { setBallVelocity((prev)=>({ ...prev, y: -prev.y })); } if (newX <= 20 && newY >= paddle1Position && newY <= paddle1Position + 60) { setBallVelocity((prev)=>({ ...prev, x: -prev.x })); } else if (newX >= 760 && newY >= paddle2Position && newY <= paddle2Position + 60) { setBallVelocity((prev)=>({ ...prev, x: -prev.x })); } if (newX <= 0) { setPlayer2Score((prev)=>prev + 1); return { x: 400, y: 300 }; } else if (newX >= 800) { setPlayer1Score((prev)=>prev + 1); return { x: 400, y: 300 }; } return { x: newX, y: newY }; }); }, 16); return ()=>clearInterval(gameLoop); }, [ ballVelocity, paddle1Position, paddle2Position, isPaused ]); return /*#__PURE__*/ React.createElement("div", { className: "h-screen w-screen bg-gradient-to-r from-blue-900 to-black flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[800px] h-[600px] border-4 border-white relative", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-4", style: { top: `${paddle1Position}px` }, __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "🟩"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "🟩"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "🟩")), /*#__PURE__*/ React.createElement("div", { className: "absolute right-4", style: { top: `${paddle2Position}px` }, __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, "🟥"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, "🟥"), /*#__PURE__*/ React.createElement("div", { className: "text-4xl", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "🟥")), /*#__PURE__*/ React.createElement("div", { className: "absolute text-4xl", style: { left: `${ballPosition.x}px`, top: `${ballPosition.y}px`, transform: "translate(-50%, -50%)" }, __source: { fileName: "", lineNumber: 94, columnNumber: 9 }, __self: this }, "🎾")), /*#__PURE__*/ React.createElement("div", { className: "text-white mt-4 text-2xl", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, "Score: ", player1Score, " - ", player2Score), /*#__PURE__*/ React.createElement("div", { className: "text-white mt-2 text-lg", __source: { fileName: "", lineNumber: 108, columnNumber: 7 }, __self: this }, "Player 1: W/S keys", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 110, columnNumber: 9 }, __self: this }), "Player 2: I/K keys", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }), "Space to pause")); }