valentine.tsx

/** @jsxImportSource https://esm.sh/react@18.2.0 */ import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; import React, { useState } from "https://esm.sh/react@18.2.0";

const NO_PHRASES = [ "No 💔", "Pretty please? 🥺", "But we'd be so cute together! 💕", "One more chance, pookie?", "Don't break my heart :(", "What about a maybe?", "Please don't do this to me, I'm fragile", ];

function App() { const [noClicks, setNoClicks] = useState(0); const [isValentine, setIsValentine] = useState(false); const [noPos, setNoPos] = useState({ x: 50, y: 60 });

const yesButtonSize = Math.min((noClicks * 20) + 16, 80);

const firstImg = "https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif"; const secondImg = "https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif";

const runAway = () => { setNoPos({ x: Math.random() * 70, y: Math.random() * 70, }); };

return ( <div style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", fontFamily: "Arial, sans-serif", textAlign: "center", position: "relative", overflow: "hidden", }} > {!isValentine ? ( <>

Will you be my Valentine? 💘

      <button
        onClick={() => setIsValentine(true)}
        style={{
          fontSize: `${yesButtonSize}px`,
          margin: "10px",
          padding: "10px 20px",
          backgroundColor: "green",
          color: "white",
          border: "none",
          borderRadius: "5px",
          cursor: "pointer",
          transition: "font-size 0.3s ease",
        }}
      >
        Yes
      </button>

      <button
        onMouseEnter={runAway}
        onClick={() => setNoClicks((p) => p + 1)}
        style={{
          position: "absolute",
          left: `${noPos.x}%`,
          top: `${noPos.y}%`,
          fontSize: "16px",
          padding: "10px 20px",
          backgroundColor: "red",
          color: "white",
          border: "none",
          borderRadius: "5px",
          cursor: "pointer",
          transition: "left 0.2s ease, top 0.2s ease",
        }}
      >
        {noClicks === 0
          ? "No"
          : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}
      </button>
    </>
  ) : (
    <>
      <img src={secondImg} />
      <div
        style={{
          fontSize: "48px",
          color: "pink",
          fontWeight: "bold",
        }}
      >
        Yay!!! 💖🎉
      </div>
    </>
  )}
</div>

); }

function client() { createRoot(document.getElementById("root")).render(); }

if (typeof document !== "undefined") { client(); }

export default async function server() { return new Response( <html> <head> <title>Valentine 💘</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="root"></div> <script src="https://esm.town/v/std/catch"></script> <script type="module" src="${import.meta.url}"></script> </body> </html>, { headers: { "content-type": "text/html" } }, ); }