Take Me Back, Mama

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_182":183,"_184":185},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_136":-5,"_20":137,"_22":138,"_139":140,"_141":142,"_26":143,"_24":144,"_145":146,"_147":148,"_149":51,"_150":151,"_152":78,"_153":-5,"_154":-5,"_155":156},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","blandmula","name","take-me-back-mama","branchName","main","version","path","main.tsx","project",{"_36":92,"_13":14,"_38":93,"_49":-5,"_94":51,"_52":53,"_95":53,"_96":97,"_98":-5,"_99":100,"_101":64,"_102":78,"_103":-5,"_104":-5,"_105":34,"_56":106,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":112,"_113":112,"_114":115,"_116":115,"_117":115,"_118":112,"_119":112,"_120":121,"_122":123,"_124":125,"_50":51},"tree",[75,76],"file",{"_36":60,"_61":62,"_63":64,"_13":19,"_65":66,"_67":68,"_17":32,"_69":-5,"_38":70,"_71":72,"_73":14,"_18":74},"contents",[],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"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","e32abb00-5a4d-495e-a4e8-acc4e5906316","branchId","637cd902-2aec-434e-b08d-0233698b5c8f","fileId","01a03e62-e61b-7468-9492-92bb1d8751cd","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? 🙏