function MainComponent() { const [isChaseStarted, setIsChaseStarted] = React.useState(false); const [safePosition, setSafePosition] = React.useState({ x: 4, y: 4 }); const [thiefPosition, setThiefPosition] = React.useState({ x: 4, y: 296 }); const moveThief = ()=>{ setThiefPosition((prevPos)=>({ x: prevPos.x + (Math.random() < 0.5 ? -50 : 50), y: prevPos.y + (Math.random() < 0.5 ? -50 : 50) })); }; React.useEffect(()=>{ let interval; if (isChaseStarted) { interval = setInterval(moveThief, 500); } return ()=>{ clearInterval(interval); }; }, [ isChaseStarted ]); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gray-200", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-8 text-gray-800", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, "💎 Jewel Thief Chase Game"), /*#__PURE__*/ React.createElement("div", { className: "relative w-full max-w-sm h-[300px] bg-white rounded-lg shadow-md p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { top: `${safePosition.y}px`, left: `${safePosition.x}px` }, className: "absolute", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block bg-[#F1C40F] rounded-full w-10 h-10", __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-700 mt-1", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Jewelry Safe")), /*#__PURE__*/ React.createElement("div", { style: { bottom: `${thiefPosition.y}px`, right: `${thiefPosition.x}px` }, className: "absolute animate-pulse", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block bg-[#E74C3C] rounded-full w-10 h-10", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-700 mt-1", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Thief"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsChaseStarted(!isChaseStarted), className: "mt-10 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, isChaseStarted ? 'Stop Chase' : 'Start Chase'), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.7; } 100% { transform: scale(1); opacity: 1; } } .animate-pulse { animation: pulse 1s infinite; } `)); }