function MainComponent() { const [isGameActive, setIsGameActive] = React.useState(false); const [score, setScore] = React.useState(0); const [yellowCarPosition, setYellowCarPosition] = React.useState(100); const [redCarPosition, setRedCarPosition] = React.useState(0); const handleStart = ()=>{ setIsGameActive(true); setScore(0); setYellowCarPosition(100); setRedCarPosition(0); gameLoop(); }; const gameLoop = ()=>{ if (!isGameActive) return; setYellowCarPosition((prevPosition)=>prevPosition > -120 ? prevPosition - 5 : 100); setRedCarPosition((prevPosition)=>prevPosition < 120 ? prevPosition + 5 : 0); setScore((prevScore)=>prevScore + 1); setTimeout(()=>{ requestAnimationFrame(gameLoop); }, 100); }; const handleStop = ()=>{ setIsGameActive(false); }; React.useEffect(()=>{ const handleKeyPress = (e)=>{ if (e.key === "Escape") { handleStop(); } }; window.addEventListener('keydown', handleKeyPress); return ()=>window.removeEventListener('keydown', handleKeyPress); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "Two-Way Traffic Game"), /*#__PURE__*/ React.createElement("div", { className: "h-[400px] w-[90%] max-w-[900px] relative bg-[#fff] border-2 border-[#000]", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-[49.5%] w-[1%] h-full bg-[#000]", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-x-0 top-0 h-[50px] flex justify-between px-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-[#4CAF50] text-white font-semibold rounded", onClick: handleStart, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Start"), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Score: ", score)), /*#__PURE__*/ React.createElement("div", { className: "car-lane flex justify-end items-center h-[50%] pr-4", style: { transform: `translateY(${yellowCarPosition}px)` }, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[50px] h-[100px] bg-[#FFC107]", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "car-lane flex justify-start items-center h-[50%] pt-[50%] pl-4", style: { transform: `translateY(${redCarPosition}px)` }, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[50px] h-[100px] bg-[#F44336]", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this })))); }