{displayed}

;\n}\n\nfunction Confetti() {\n useEffect(() => {\n const canvas = document.createElement(\"canvas\");\n document.body.appendChild(canvas);\n canvas.style.position = \"fixed\";\n canvas.style.top = 0;\n canvas.style.left = 0;\n canvas.style.pointerEvents = \"none\";\n\n const ctx = canvas.getContext(\"2d\");\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n const pieces = Array.from({ length: 120 }).map(() => ({\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n r: Math.random() * 6 + 4,\n d: Math.random() * 2 + 1,\n c: `hsl(${Math.random() * 360},100%,70%)`,\n }));\n\n let frame;\n function draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n pieces.forEach((p) => {\n ctx.beginPath();\n ctx.fillStyle = p.c;\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\n ctx.fill();\n p.y += p.d;\n if (p.y > canvas.height) p.y = -10;\n });\n frame = requestAnimationFrame(draw);\n }\n draw();\n\n return () => {\n cancelAnimationFrame(frame);\n canvas.remove();\n };\n }, []);\n\n return null;\n}\n\nfunction FloatingHearts() {\n const [hearts, setHearts] = useState([]);\n useEffect(() => {\n const interval = setInterval(() => {\n setHearts((prev) => [\n ...prev,\n {\n id: Date.now() + Math.random(),\n x: Math.random() * 100,\n size: 10 + Math.random() * 20,\n speed: 1 + Math.random() * 2,\n opacity: 0.5 + Math.random() * 0.5,\n },\n ]);\n }, 300);\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n {hearts.map((h) => (\n \\')',\n backgroundSize: \"contain\",\n backgroundRepeat: \"no-repeat\",\n opacity: h.opacity,\n animation: `floatUp ${h.speed + 2}s linear forwards`,\n }}\n />\n ))}\n\n \n \n );\n}\n\nfunction LoveLetter({ message, onNext }) {\n const [opened, setOpened] = useState(false);\n\n return (\n

\n \n {!opened\n ? (\n setOpened(true)}\n style={{\n cursor: \"pointer\",\n width: \"150px\",\n height: \"100px\",\n background: \"pink\",\n margin: \"0 auto\",\n borderRadius: \"8px\",\n boxShadow: \"0 4px 10px rgba(0,0,0,0.2)\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontWeight: \"bold\",\n color: \"white\",\n fontSize: \"18px\",\n }}\n >\n 📩 hehe gotcha! ;)\n

\n )\n : (\n

\n \n {message}\n

\n \n Next →\n \n \n )}\n\n \n \n );\n}\n\nfunction StepWrapper({ children, step }) {\n const [visible, setVisible] = useState(false);\n useEffect(() => {\n setVisible(false);\n const timeout = setTimeout(() => setVisible(true), 50);\n return () => clearTimeout(timeout);\n }, [step]);\n\n return (\n \n {children}\n \n );\n}\n\n/* ---------- APP ---------- */\n\nfunction App() {\n const [loading, setLoading] = useState(true);\n const [step, setStep] = useState(0);\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [fortuneShown, setFortuneShown] = useState(\n Array(FORTUNES.length).fill(false),\n );\n\n const yesSize = 16 + noClicks * 18;\n const play = (src) => new Audio(src).play();\n const allFortunesRevealed = fortuneShown.every((v) => v);\n\n const resetApp = () => {\n setStep(0);\n setNoClicks(0);\n setIsValentine(false);\n setFortuneShown(Array(FORTUNES.length).fill(false));\n };\n\n useEffect(() => {\n const timer = setTimeout(() => setLoading(false), 2000);\n return () => clearTimeout(timer);\n }, []);\n\n // ---------- LOADING SCREEN ----------\n if (loading) {\n return (\n \n

\n Hi MAINNEEEEE - mady 💖\n

\n Loading...\n

\n setLoading(false)}\n >\n Hi baby :P\n \n\n \n \n );\n }\n\n // ---------- MAIN APP ----------\n return (\n \n {/* All your existing steps from STEP 0 → STEP 5 stay here exactly as in your original code */}\n {/* STEP 0 */}\n {step === 0 && (\n \n

\n \n \n \n

\n \n \n \n )}\n\n {/* STEP 1 */}\n {step === 1 && (\n \n \n setStep(2)}\n style={{ ...btnStyle, marginTop: \"20px\" }}\n >\n Unsa man...?\n \n \n )}\n\n {/* STEP 2 */}\n {step === 2 && (\n \n \n setStep(3)}\n style={{ ...btnStyle, marginTop: \"20px\" }}\n >\n k?\n \n \n )}\n\n {/* STEP 3 */}\n {step === 3 && (\n \n \n setStep(4)}\n style={{ ...btnStyle, marginTop: \"20px\" }}\n >\n what!?\n \n \n )}\n\n {/* STEP 4 */}\n {step === 4 && (\n \n {!isValentine\n ? (\n

\n \n \n

\n Will you be my Valentine, Maine? 💘\n

\n {\n play(YES_SOUND);\n setIsValentine(true);\n }}\n style={{\n ...btnStyle,\n fontSize: `${yesSize}px`,\n background: \"green\",\n color: \"white\",\n position: \"relative\",\n zIndex: 1,\n }}\n >\n Yes\n \n
\n {\n play(NO_SOUND);\n setNoClicks((n) => n + 1);\n }}\n style={{\n ...btnStyle,\n background: \"red\",\n color: \"white\",\n fontSize: \"14px\",\n position: \"relative\",\n zIndex: 1,\n }}\n >\n {NO_PHRASES[Math.min(noClicks, NO_PHRASES.length - 1)]}\n \n

\n )\n : (\n setStep(5)}\n />\n )}\n \n )}\n\n {/* STEP 5 */}\n {step === 5 && (\n \n \n

Click a fortune cookie 🍪

\n \n {FORTUNES.map((f, i) => (\n

\n \n setFortuneShown((prev) =>\n prev.map((v, idx) =>\n idx === i ? true : v\n )\n )}\n style={{\n width: \"80px\",\n height: \"80px\",\n borderRadius: \"50%\",\n background: \"sandybrown\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n cursor: \"pointer\",\n boxShadow: \"0 4px 8px rgba(0,0,0,0.2)\",\n fontSize: \"30px\",\n }}\n >\n 🍪\n

\n {fortuneShown[i] && (\n \n {f}\n \n )}\n \n ))}\n \n\n {allFortunesRevealed && (\n \n Restart 💖\n \n )}\n\n \n \n )}\n \n );\n}\n\n/* ---------- STYLES ---------- */\nconst btnStyle = {\n padding: \"10px 24px\",\n borderRadius: \"20px\",\n border: \"none\",\n background: \"pink\",\n cursor: \"pointer\",\n fontSize: \"16px\",\n margin: \"10px\",\n};\n\n/* ---------- CLIENT ---------- */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\n/* ---------- SERVER ---------- */\nexport default async function server() {\n return new Response(\n `\n \n \n 💘 For my baby!\n \n \n \n \n

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