function NewComponent({ style, children }) { return /*#__PURE__*/ React.createElement("div", { className: "absolute bg-[#FFFFFF] w-[80px] h-[320px]", style: { ...style, bottom: '0' }, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function NewComponentStory() { return /*#__PURE__*/ React.createElement("div", { className: "relative min-h-screen", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NewComponent, { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(NewComponent, { style: { backgroundColor: 'universe' }, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { const [pepeYPosition, setPepeYPosition] = React.useState(0); const [pepeVelocity, setPepeVelocity] = React.useState(0); const [pipes, setPipes] = React.useState([]); React.useEffect(()=>{ const handleSpacePress = (event)=>{ if (event.code === "Space") { setPepeVelocity(-12); } }; window.addEventListener("keydown", handleSpacePress); const pipeInterval = setInterval(()=>{ setPipes((currentPipes)=>{ if (currentPipes.length < 2) { const newPipe = { top: Math.random() * (window.innerHeight / 2), key: Math.random() }; return [ ...currentPipes, newPipe ]; } return currentPipes; }); }, 3000); return ()=>{ window.removeEventListener("keydown", handleSpacePress); clearInterval(pipeInterval); }; }, []); React.useEffect(()=>{ const interval = setInterval(()=>{ setPepeVelocity((v)=>v + 0.5); setPepeYPosition((y)=>y + pepeVelocity); setPipes((currentPipes)=>currentPipes.map((pipe)=>({ ...pipe, top: pipe.top - 2 })).filter((pipe)=>pipe.top + 320 > 0)); }, 1000 / 60); return ()=>clearInterval(interval); }, [ pepeVelocity ]); const pepeStyle = { transform: `translateY(${pepeYPosition}px)` }; return /*#__PURE__*/ React.createElement("div", { className: "bg-black w-full h-screen overflow-hidden flex justify-center items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, pipes.map((pipe)=>/*#__PURE__*/ React.createElement(NewComponent, { key: pipe.key, style: { left: '100%', top: `${pipe.top}px`, animation: 'pipeMove 2s linear infinite' }, __source: { fileName: "", lineNumber: 51, columnNumber: 26 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFFFFF] w-[80px] h-[320px]", __source: { fileName: "", lineNumber: 51, columnNumber: 144 }, __self: this }))), /*#__PURE__*/ React.createElement("img", { src: "pepe.png", alt: "Pepe avatar flying through a starry universe", className: "absolute", style: { ...pepeStyle, bottom: '50%', left: '50%', translateX: '-50%', translateY: '-50%' }, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, ` @keyframes pipeMove { from { transform: translateX(0); } to { transform: translateX(-100vw); } } `)); }