\n {words.map((word, i) => (\n \n {word}{i < words.length - 1 ? \"\\u00A0\" : \"\"}\n \n ))}\n

\n );\n}\n\nfunction GlowingParticles({ count = 25 }: { count?: number }) {\n const particles = useMemo(() =>\n Array.from({ length: count }, (_, i) => ({\n id: i, size: Math.random() * 8 + 3, x: Math.random() * 100, y: Math.random() * 100,\n duration: Math.random() * 10 + 8, delay: Math.random() * 8, opacity: Math.random() * 0.2 + 0.05,\n driftX: (Math.random() - 0.5) * 60, driftY: (Math.random() - 0.5) * 60,\n driftScale: Math.random() * 0.5 + 0.8, hue: Math.random() * 40 + 320,\n })), [count]);\n return (\n

\n {particles.map((p) => (\n

\n ))}\n

\n );\n}\n\nfunction HeartbeatButton({ onClick, fontSize, children }: {\n onClick: () => void; fontSize: number; children: React.ReactNode;\n}) {\n return (\n \n );\n}\n\nconst StaggeredEntrance = forwardRef(function StaggeredEntrance({ children, baseDelay = 0, staggerMs = 250, className = \"\" }, ref) {\n return (\n

\n {Children.map(children, (child, i) => (\n

\n {child}\n

\n ))}\n

\n );\n});\n\nfunction TremblingButton({ onClick, onMouseEnter, scale, position, top, left, intensity, children }: {\n onClick: () => void; onMouseEnter: () => void; scale: number;\n position: \"static\" | \"fixed\"; top: string; left: string; intensity: number; children: React.ReactNode;\n}) {\n const trembleClass = intensity >= 5 ? \"tremble-intense\" : intensity >= 3 ? \"tremble-strong\" : intensity >= 1 ? \"tremble-mild\" : \"\";\n return (\n \n );\n}\n\nfunction SoftGlowFrame({ children, className = \"\" }: { children: React.ReactNode; className?: string }) {\n return

{children}

;\n}\n\nfunction CelebrationOverlay({ message, gifSrc, gifAlt }: { message: string; gifSrc: string; gifAlt: string }) {\n const HEART_EMOJIS = [\"💖\", \"💕\", \"💗\", \"❤️\", \"💘\", \"🩷\"];\n const burstHearts = useMemo(() =>\n Array.from({ length: 14 }, (_, i) => {\n const angle = ((2 * Math.PI) / 14) * i;\n const distance = 100 + Math.random() * 60;\n return { id: i, x: Math.cos(angle) * distance, y: Math.sin(angle) * distance,\n delay: i * 50, size: Math.random() * 12 + 14, emoji: HEART_EMOJIS[i % HEART_EMOJIS.length] };\n }), []);\n const fallingHearts = useMemo(() =>\n Array.from({ length: 20 }, (_, i) => ({\n id: i, left: Math.random() * 100, delay: Math.random() * 3 + 0.3,\n duration: Math.random() * 3 + 4, size: Math.random() * 14 + 10,\n emoji: HEART_EMOJIS[i % HEART_EMOJIS.length],\n })), []);\n return (\n <>\n

\n {burstHearts.map((h) => (\n {h.emoji}\n ))}\n

\n \n {gifAlt}

\n \n

{message}

\n {fallingHearts.map((h) => (\n {h.emoji}\n ))}\n

\n \n );\n}\n\nfunction ThemeToggle() {\n const [dark, setDark] = useState(() => {\n try { const s = localStorage.getItem(\"valentine-theme\"); return s ? s === \"dark\" : true; } catch { return true; }\n });\n useEffect(() => {\n document.documentElement.setAttribute(\"data-theme\", dark ? \"dark\" : \"light\");\n try { localStorage.setItem(\"valentine-theme\", dark ? \"dark\" : \"light\"); } catch {}\n }, [dark]);\n return (\n \n );\n}\n\n// ============================================\n// MAIN APP\n// ============================================\n\nconst PHRASES = [\n \"No 💔\", \"Are you sure? 🥺\", \"Pretty please? 🎀\", \"Don't break my heart! 😭\",\n \"One more chance, pookie?\", \"But we'd be so cute together! 💕\", \"What about a maybe? 👉👈\",\n \"Please don't do this to me\", \"I'm gonna cry... 😿\", \"You're breaking my heart ;(\",\n];\n\nfunction App() {\n const [noCount, setNoCount] = useState(0);\n const [yesPressed, setYesPressed] = useState(false);\n const [noButtonPos, setNoButtonPos] = useState<{ top: string; left: string; position: \"static\" | \"fixed\" }>({\n top: \"auto\", left: \"auto\", position: \"static\",\n });\n const containerRef = useRef(null);\n const yesButtonSize = noCount * 20 + 16;\n const noButtonScale = Math.max(0.6, 1 - noCount * 0.1);\n const shouldMove = noCount >= 5;\n\n useEffect(() => {\n if (!yesPressed) return;\n const interval = setInterval(() => {\n confetti({ particleCount: 3, spread: 160, startVelocity: 12, gravity: 0.4,\n origin: { y: -0.1, x: Math.random() }, colors: [\"#ff6b6b\", \"#ffcccc\", \"#ffccd5\", \"#ff8fa3\", \"#ffc2d1\"],\n ticks: 400, shapes: [\"circle\"], scalar: 0.8 });\n }, 500);\n return () => clearInterval(interval);\n }, [yesPressed]);\n\n function moveNoButton() {\n if (!containerRef.current) return;\n const containerRect = containerRef.current.getBoundingClientRect();\n const buttonWidth = 150, buttonHeight = 60, padding = 30;\n const maxLeft = window.innerWidth - buttonWidth - padding;\n const maxTop = window.innerHeight - buttonHeight - padding;\n let newTop = padding, newLeft = padding, attempts = 0, validPosition = false;\n while (attempts < 30 && !validPosition) {\n newLeft = Math.random() * (maxLeft - padding) + padding;\n newTop = Math.random() * (maxTop - padding) + padding;\n const br = { left: newLeft, right: newLeft + buttonWidth, top: newTop, bottom: newTop + buttonHeight };\n const buffer = 20;\n const hit = !(br.right < containerRect.left - buffer || br.left > containerRect.right + buffer ||\n br.bottom < containerRect.top - buffer || br.top > containerRect.bottom + buffer);\n if (!hit) validPosition = true;\n attempts++;\n }\n newLeft = Math.max(padding, Math.min(newLeft, maxLeft));\n newTop = Math.max(padding, Math.min(newTop, maxTop));\n setNoButtonPos({ position: \"fixed\", top: `${newTop}px`, left: `${newLeft}px` });\n }\n\n function handleNoClick() { setNoCount(noCount + 1); if (noCount >= 4) moveNoButton(); }\n function handleNoHover() { if (shouldMove) moveNoButton(); }\n function getNoButtonText() { return PHRASES[Math.min(noCount, PHRASES.length - 1)]; }\n\n function handleYesClick() {\n setYesPressed(true);\n confetti({ particleCount: 120, spread: 70, origin: { y: 0.6 },\n colors: [\"#ff6b6b\", \"#ffcccc\", \"#ffccd5\", \"#ff8fa3\", \"#ffc2d1\"] });\n setTimeout(() => {\n confetti({ particleCount: 50, spread: 90, origin: { y: 0.5, x: 0.25 }, colors: [\"#ff6b6b\", \"#ff8fa3\", \"#ffc2d1\"] });\n confetti({ particleCount: 50, spread: 90, origin: { y: 0.5, x: 0.75 }, colors: [\"#ff6b6b\", \"#ff8fa3\", \"#ffc2d1\"] });\n }, 250);\n }\n\n return (\n

\n \n {yesPressed ? (\n \n ) : (\n \n \n $\"cute$ \n \n \n

\n \n {\"Yes 💖\"}\n \n \n {noCount === 0 ? \"No\" : getNoButtonText()}\n \n

\n \n )}\n \n

\n {[...Array(20)].map((_, i) => (\n

\n ))}\n

\n );\n}\n\n// ============================================\n// CLIENT BOOTSTRAP\n// ============================================\n\nfunction client() {\n createRoot(document.getElementById(\"root\")!).render();\n}\nif (typeof document !== \"undefined\") client();\n\n// ============================================\n// SERVER\n// ============================================\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n\n\n Valentine's Day 💘\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/eriteria/valentine/code/main.tsx","extension","actionData","errors"]