function MainComponent() { const [score, setScore] = React.useState(0); const [gameOver, setGameOver] = React.useState(false); const [manPosition, setManPosition] = React.useState(0); const [robotPosition, setRobotPosition] = React.useState(0); React.useEffect(()=>{ const moveRobot = setInterval(()=>{ setRobotPosition((prev)=>prev >= window.innerWidth ? 0 : prev + 10); }, 100); return ()=>clearInterval(moveRobot); }, []); const handleJump = ()=>{ if (!gameOver) { setManPosition(150); setTimeout(()=>setManPosition(0), 500); setScore(score + 1); } }; const checkCollision = ()=>{ if (robotPosition > window.innerWidth / 2 - 50 && robotPosition < window.innerWidth / 2 + 50 && manPosition === 0) { handleGameOver(); } }; React.useEffect(()=>{ const game = setInterval(checkCollision, 100); return ()=>clearInterval(game); }, [ robotPosition, manPosition ]); const handleGameOver = ()=>{ setGameOver(true); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#e9ecef]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, gameOver ? /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl font-roboto text-[#121212] mb-4", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Game Over"), /*#__PURE__*/ React.createElement("div", { className: "text-lg font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Your score: ", score), /*#__PURE__*/ React.createElement("button", { className: "mt-6 px-4 py-2 bg-[#007bff] rounded text-white font-roboto", onClick: ()=>{ setScore(0); setGameOver(false); setRobotPosition(0); }, __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Restart")) : /*#__PURE__*/ React.createElement("div", { className: "relative flex-1 w-full h-[400px] bg-[#6c757d]", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "man absolute bottom-0 left-[50%] translate-x-[-50%]", style: { bottom: `${manPosition}px` }, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./man.png", alt: "Man jumping across rooftops", className: "h-[100px]", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "robot absolute bottom-0", style: { left: `${robotPosition}px` }, __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./robot.png", alt: "Robot chasing man across rooftops", className: "h-[150px]", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { className: "fixed bottom-10 bg-[#28a745] p-4 text-white font-roboto rounded-full shadow-lg", onClick: handleJump, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "Jump 🏃‍♂️")); }