[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_116":-5,"_20":117,"_22":118,"_119":120,"_121":122,"_25":123,"_24":-5,"_124":-5,"_125":-5,"_126":53,"_127":128,"_129":44,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","si_ayo","name","will-u-be-my-val","branchName","main","version","path","","project",{"_33":62,"_13":14,"_45":63,"_64":-5,"_65":53,"_66":67,"_68":67,"_69":-5,"_70":-5,"_71":72,"_73":-5,"_74":53,"_75":-5,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":95,"_96":97,"_98":99,"_100":53},"tree",[57],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":56},"id","208ba3e8-0688-11f1-9855-42dde27851f2","main.ts","fileId","2f4ba0ee-0684-11f1-8e8e-42dde27851f2","parentId","branchId","2f47ea8a-0684-11f1-8e8e-42dde27851f2","branchVersion",15,"latest",true,"createdAt",["D",1770731715639],14,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport confetti from \"https://esm.sh/canvas-confetti@1.6.0\";\n\nconst NO_PHRASES = [\n \"No 💔\",\n \"Wait, wrong button! 😱\",\n \"Try again wifey! 😂\",\n \"Nice try! 🏃‍♂️\",\n \"Almost got it! 💨\",\n \"Can't touch this! ✨\",\n \"Just say Yes! 🥰\",\n];\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [started, setStarted] = useState(false);\n const [noButtonPos, setNoButtonPos] = useState({ top: \"auto\", left: \"auto\" });\n const audioRef = useRef(null);\n\n const handleStart = () => {\n setStarted(true);\n if (audioRef.current) {\n audioRef.current.volume = 0.5;\n audioRef.current.play().catch((e) => console.log(\"Audio block\", e));\n }\n };\n\n const moveButton = () => {\n // Generate random position within the viewport (staying away from edges)\n const top = Math.random() * 70 + 15; // 15% to 85% of screen height\n const left = Math.random() * 70 + 15; // 15% to 85% of screen width\n\n setNoButtonPos({ top: `${top}%`, left: `${left}%` });\n setNoClicks((prev) => prev + 1);\n };\n\n const handleYes = () => {\n setIsValentine(true);\n confetti({\n particleCount: 150,\n spread: 70,\n origin: { y: 0.6 },\n colors: [\"#ff69b4\", \"#ff1493\", \"#ffffff\"],\n });\n };\n\n if (!started) {\n return (\n

A Surprise for Maria Zarina Perez ✨

\n I made something special for you wifey...\n

\n \n

Code