Take Me Back, Mama

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_187":188,"_189":190},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_140":-5,"_20":141,"_22":142,"_143":144,"_145":146,"_25":147,"_24":-5,"_148":149,"_150":151,"_152":50,"_153":154,"_155":71,"_156":-5,"_157":-5,"_158":159},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":28,"_29":-5,"_30":31,"_32":33,"_34":-5},"handle","blandmula","name","take-me-back-mama","branchName","main","version","path","","project",{"_35":96,"_13":14,"_37":97,"_48":-5,"_98":50,"_51":52,"_99":52,"_100":101,"_102":-5,"_103":104,"_105":64,"_106":71,"_107":-5,"_108":-5,"_109":33,"_55":110,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":116,"_117":116,"_118":119,"_120":119,"_121":119,"_122":116,"_123":116,"_124":125,"_126":127,"_128":129,"_49":50},"tree",[87,88],"file","contents",[59,60],"upstream",{"_35":36,"_37":38,"_39":40,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"pull","ahead",19,"behind",0,"envVars","id","fdd9b22e-27b0-11f0-aecd-569c3dd06744","createdAt",["D",1746230157507],"updatedAt",["D",1739338420215],"projectId","fdd966ca-27b0-11f0-aecd-569c3dd06744",11,"forkedBranchId","forkedBranchVersion","lockfileKey","1767110342515-esm.town_v_mewtru_valentine@11-main","deletedAt","isOwned",false,"privacy","public","userHandle","mewtru","orgId","1ea2ca52-aecd-4993-8c60-cb61483dff1b","projectName","valentine",{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":84,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_18":86},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":72,"_17":31,"_73":74,"_75":76,"_77":50,"_78":14,"_18":79},"e32abb00-5a4d-495e-a4e8-acc4e5906316","main.tsx","fileId","01a03e62-e61b-7468-9492-92bb1d8751cd","parentId","branchId","637cd902-2aec-434e-b08d-0233698b5c8f","branchVersion",20,"latest",true,["D",1787761172136],"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, { useEffect, useState, useRef } from \"https://esm.sh/react@18.2.0\";\n\nconst SONG_URL =\n \"https://nu.vgmtreasurechest.com/soundtracks/yu-yu-hakusho-original-soundtrack-1/qfdzovmw/11.%20Romantic.mp3\";\n\nconst NO_PHRASES = [\n \"No 💔\",\n \"Pretty please? 🥺\",\n \"But we'd be so cute together! 💕\",\n \"One more chance, pookie?\",\n \"Don't break my heart :(\",\n \"What about a maybe?\",\n \"Please don't do this to me, been working on the mooscles\",\n \"The mooscles are getting bigger 🏋️\",\n];\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const audioRef = useRef(null);\n const yesButtonSize = (noClicks * 20) + 16;\n\n const firstImg = \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg = \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n // Try to start the music as soon as the page loads.\n // Browsers may block autoplay until the first click (Yes or No); the\n // handlers below also call startMusic so it kicks in on that first gesture.\n useEffect(() => {\n const timer = setTimeout(startMusic, 100);\n return () => clearTimeout(timer);\n }, []);\n\n const startMusic = () => {\n if (audioRef.current) {\n audioRef.current.volume = 0.5;\n audioRef.current.play().catch(() => {});\n }\n };\n\n const handleNo = () => {\n startMusic();\n setNoClicks(prev => prev + 1);\n };\n\n const handleYes = () => {\n startMusic();\n setIsValentine(true);\n };\n\n return (\n \n

Take me back, mama? 🙏

Code