\n {elements.map((el) => (\n \n {el.type}\n

\n ))}\n \n );\n}\n\nfunction Clouds() {\n return (\n

\n );\n}\n\n// NEW COMPONENT: Swaying Sunflowers at the bottom\nfunction SunflowersBottom() {\n // We repeat the sunflower image 6 times to fill the width\n const flowers = Array(8).fill(0);\n\n return (\n

\n {flowers.map((_, i) => (\n \n ))}\n

\n );\n}\n\nfunction MinionWalkers() {\n const [minions, setMinions] = useState([]);\n\n useEffect(() => {\n const interval = setInterval(() => {\n if (Math.random() > 0.3) {\n const direction = Math.random() > 0.5 ? \"left\" : \"right\";\n setMinions((prev) => [\n ...prev,\n {\n id: Date.now(),\n direction: direction,\n gif: MINION_GIFS[Math.floor(Math.random() * MINION_GIFS.length)],\n speed: Math.random() * 5 + 8,\n bottom: Math.random() * 20,\n },\n ]);\n }\n }, 2500);\n return () => clearInterval(interval);\n }, []);\n\n useEffect(() => {\n const cleanup = setInterval(() => {\n setMinions((prev) => prev.filter((m) => Date.now() - m.id < 15000));\n }, 1000);\n return () => clearInterval(cleanup);\n }, []);\n\n return (\n

\n {minions.map((minion) => (\n \n ))}\n

\n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [stage, setStage] = useState(0);\n const [selectedMemory, setSelectedMemory] = useState(null);\n\n // Audio Ref\n const audioRef = useRef(null);\n const [isMusicPlaying, setIsMusicPlaying] = useState(false);\n\n const yesButtonSize = (noClicks * 20) + 16;\n\n // --- MUSIC FIX ---\n // Try to play music on the VERY FIRST click anywhere on the screen\n useEffect(() => {\n const handleFirstClick = () => {\n if (audioRef.current && !isMusicPlaying) {\n audioRef.current.play()\n .then(() => {\n setIsMusicPlaying(true);\n console.log(\"Music started!\");\n })\n .catch((error) => {\n console.log(\n \"Music autoplay blocked, waiting for interaction\",\n error,\n );\n });\n }\n };\n\n window.addEventListener(\"click\", handleFirstClick, { once: true });\n return () => window.removeEventListener(\"click\", handleFirstClick);\n }, [isMusicPlaying]);\n // ----------------\n\n useEffect(() => {\n const img = new Image();\n img.src = YOUR_GIRLFRIEND_IMAGE_URL;\n }, []);\n\n const firstImg = \"https://media.giphy.com/media/5bdhq6YF0szPaCEk9Y/giphy.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n const catCafeImg = \"https://media.giphy.com/media/YZOsKxJfmvzG0/giphy.gif\";\n\n const getStageZeroImage = () => {\n if (noClicks === 0) return firstImg;\n const index = (noClicks - 1) % NO_GIFS.length;\n return NO_GIFS[index];\n };\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n };\n\n const handleYes = () => {\n setStage((prev) => prev + 1);\n setNoClicks(0);\n };\n\n const toggleMusic = (e) => {\n e.stopPropagation(); // Prevent triggering other clicks\n if (audioRef.current) {\n if (isMusicPlaying) {\n audioRef.current.pause();\n setIsMusicPlaying(false);\n } else {\n audioRef.current.play();\n setIsMusicPlaying(true);\n }\n }\n };\n\n const closeMemory = () => {\n setSelectedMemory(null);\n };\n\n const renderButtons = (yesText) => (\n

\n \n {yesText}\n \n \n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n

\n );\n\n return (\n

\n {/* Hidden Audio Player */}\n

\n\n {/* Music Toggle Button */}\n \n\n \n \n\n {/* NEW SUNFLOWERS COMPONENT */}\n \n\n \n\n {/* MODAL / POPUP FOR PHOTOS */}\n {selectedMemory && (\n

e.stopPropagation()}>\n

{selectedMemory.caption}

\n \n

\n )}\n\n {/* MAIN CARD / CONTAINER */}\n \n {stage === 0 && (\n <>\n

\n\n

\n Will youuuu beee myyy valentineee paooo? 💙\n

\n {renderButtons(\"Yes\")}\n \n )}\n\n {stage === 1 && (\n <>\n

\n soooooo me you feb 17 Megaaaamaalllll????? 🌻\n

\n {renderButtons(\"Yes\")}\n \n )}\n\n {stage === 2 && (\n <>\n

\n \n

i loveee youuuu talagaaa paooo 💙

\n \n \n )}\n\n {stage === 3 && (\n <>\n

Yay!!! 💙🎉

\n Wait... I have one more thing...\n

\n \n Click Me 🌻\n \n \n )}\n\n {/* STAGE 4: COLLAGE */}\n {stage === 4 && (\n

Our Memories 🌻💙

\n\n

\n {MEMORIES.map((memory, index) => (\n setSelectedMemory(memory)}\n >\n {`Memory

Click me

\n ))}\n

\n\n

{COLLAGE_MESSAGE}

\n\n {/* FIXED BUTTON CONTAINER FOR STAGE 4 */}\n

\n \n setStage(5)}\n className=\"yes-button\"\n style={{ fontSize: \"16px\", margin: 0 }}\n >\n Next ➡️\n \n

\n )}\n\n {/* STAGE 5: MAILBOX */}\n {stage === 5 && (\n <>\n

You have 1 new message! 💌

\n setStage(6)}\n className=\"mailbox-container\"\n title=\"Click to open\"\n >\n \n

✨ Open Me! ✨

\n \n \n )}\n\n {/* STAGE 6: THE LETTER */}\n {stage === 6 && (\n

\n {LETTER_MESSAGE.split(\"\\n\").map((line, i) => (\n \n {line}\n
\n \n ))}\n

\n \n

\n )}\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Blue Valentine\n \n \n \n \n \n\n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","deleted","label",[100],"permalink","https://www.val.town/x/dsadsasad/valentine/code/main.tsx","extension","actionData","errors"]