Valentine's Day Invitation

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_179":180,"_181":182},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":85,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":120,"_121":122,"_123":25,"_124":125,"_126":57,"_127":-5,"_128":-5,"_129":130},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",32,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","019c23c1-9882-75e4-9694-43d6ea8ef9f2","name","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, {\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"Please? 🥺\",\n \"3omre mahansa ebesate wente ganbe ya agmal wahed fel denya💕\",\n \"Hafdl teol 3omre bahebk\",\n \"hatefdale feh dema8e el 3omr kolo\",\n \"Ole YES sad2ene el maradi\",\n \"elmarade ha3melha sah\",\n \"Aw3dk law sad2etene feh youm hatshofe da mene\",\n \"Law weselte leh hena fa e3rafe ene msh mefart feke youm feh hayati tany\",\n \"Ok last chance💔\",\n];\n\nfunction FloatingHearts() {\n const hearts = useMemo(() => {\n return Array.from({ length: 18 }).map((_, i) => ({\n id: i,\n left: Math.random() * 100,\n size: 14 + Math.random() * 22,\n delay: Math.random() * 3,\n duration: 5 + Math.random() * 4,\n opacity: 0.35 + Math.random() * 0.45,\n }));\n }, []);\n\n return (\n \n {hearts.map((h) => (\n \n 💗\n \n ))}\n \n );\n}\n\nfunction Confetti({ active }) {\n const pieces = useMemo(() => {\n return Array.from({ length: 120 }).map((_, i) => ({\n id: i,\n left: Math.random() * 100,\n delay: Math.random() * 0.3,\n duration: 1.8 + Math.random() * 1.2,\n rotate: Math.random() * 360,\n size: 6 + Math.random() * 8,\n }));\n }, []);\n\n if (!active) return null;\n\n return (\n \n {pieces.map((p) => (\n \n ))}\n \n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [confetti, setConfetti] = useState(false);\n\n const [noPos, setNoPos] = useState({ x: 0, y: 0 });\n const noBtnRef = useRef(null);\n\n const yesButtonSize = Math.min(68, 18 + noClicks * 6);\n\n const firstImg =\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n\n // Make \"No\" run away a bit 😭\n const maxMove = 120;\n const x = (Math.random() - 0.5) * 2 * maxMove;\n const y = (Math.random() - 0.5) * 2 * maxMove;\n setNoPos({ x, y });\n };\n\n const handleYes = () => {\n setIsValentine(true);\n setConfetti(true);\n setTimeout(() => setConfetti(false), 2500);\n };\n\n useEffect(() => {\n const onResize = () => setNoPos({ x: 0, y: 0 });\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n\n return (\n \n \n\n \n \n\n \n {!isValentine\n ? (\n <>\n \n\n \n 💌 A special question...\n \n\n \n Malak, will you be my Valentine? 💘\n \n\n \n I promise it’ll be the cutest YES you ever said 😭💗\n

\n\n \n (e.currentTarget.style.transform = \"scale(0.96)\")}\n onMouseUp={(\n e,\n ) => (e.currentTarget.style.transform = \"scale(1)\")}\n >\n YES 💖\n \n\n \n {noClicks === 0\n ? \"No 😭\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n \n\n {noClicks > 0 && (\n \n Attempts to escape love: {noClicks} 😭💘\n \n )}\n \n )\n : (\n <>\n \n\n \n SHE SAID YES 💖🎉\n \n\n \n Malak & Aly forever Valentine 💘\n \n\n \n 💞 Best couple energy unlocked 💞\n \n \n )}\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request) {\n return new Response(\n `\n \n \n Valentine's Day Invitation\n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, {\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"Please? 🥺\",\n \"3omre mahansa ebesate wente ganbe ya agmal wahed fel denya💕\",\n \"Hafdl teol 3omre bahebk\",\n \"hatefdale feh dema8e el 3omr kolo\",\n \"Ole YES sad2ene el maradi\",\n \"elmarade ha3melha sah\",\n \"Aw3dk law sad2etene feh youm hatshofe da mene\",\n \"Law weselte leh hena fa e3rafe ene msh mefart feke youm feh hayati tany\",\n \"Ok last chance💔\",\n];\n\nfunction FloatingHearts() {\n const hearts = useMemo(() => {\n return Array.from({ length: 18 }).map((_, i) => ({\n id: i,\n left: Math.random() * 100,\n size: 14 + Math.random() * 22,\n delay: Math.random() * 3,\n duration: 5 + Math.random() * 4,\n opacity: 0.35 + Math.random() * 0.45,\n }));\n }, []);\n\n return (\n \n {hearts.map((h) => (\n \n 💗\n \n ))}\n \n );\n}\n\nfunction Confetti({ active }) {\n const pieces = useMemo(() => {\n return Array.from({ length: 120 }).map((_, i) => ({\n id: i,\n left: Math.random() * 100,\n delay: Math.random() * 0.3,\n duration: 1.8 + Math.random() * 1.2,\n rotate: Math.random() * 360,\n size: 6 + Math.random() * 8,\n }));\n }, []);\n\n if (!active) return null;\n\n return (\n \n {pieces.map((p) => (\n \n ))}\n \n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [confetti, setConfetti] = useState(false);\n\n const [noPos, setNoPos] = useState({ x: 0, y: 0 });\n const noBtnRef = useRef(null);\n\n const yesButtonSize = Math.min(68, 18 + noClicks * 6);\n\n const firstImg =\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n\n // Make \"No\" run away a bit 😭\n const maxMove = 120;\n const x = (Math.random() - 0.5) * 2 * maxMove;\n const y = (Math.random() - 0.5) * 2 * maxMove;\n setNoPos({ x, y });\n };\n\n const handleYes = () => {\n setIsValentine(true);\n setConfetti(true);\n setTimeout(() => setConfetti(false), 2500);\n };\n\n useEffect(() => {\n const onResize = () => setNoPos({ x: 0, y: 0 });\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n\n return (\n \n \n\n \n \n\n \n {!isValentine\n ? (\n <>\n \n\n \n 💌 A special question...\n \n\n \n Malak, will you be my Valentine? 💘\n \n\n \n I promise it’ll be the cutest YES you ever said 😭💗\n

\n\n \n (e.currentTarget.style.transform = \"scale(0.96)\")}\n onMouseUp={(\n e,\n ) => (e.currentTarget.style.transform = \"scale(1)\")}\n >\n YES 💖\n \n\n \n {noClicks === 0\n ? \"No 😭\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n \n\n {noClicks > 0 && (\n \n Attempts to escape Aly: {noClicks} 😭💘\n \n )}\n \n )\n : (\n <>\n \n\n \n SHE SAID YES 💖🎉\n \n\n \n Malak & Aly forever Valentine 💘\n \n\n \n 💞 Best couple energy unlocked 💞\n \n \n )}\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request) {\n return new Response(\n `\n \n \n Valentine's Day Invitation\n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","createdAt",["D",1770128547314],"branchVersion","branchId","cdd38f48-0106-11f1-b21b-42dde27851f2","id","cdce2bb6-0106-11f1-b21b-42dde27851f2","valentineFinal",["D",1770126415889],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c2393-28a1-7119-b3d6-0071962ab0fc","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c2393-28a1-7119-b3d6-05e892a9f85a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":50,"_92":93,"_94":95,"_96":45,"_97":98},"isOwned",72,"main","projectId","forkedBranchId","fdd9b22e-27b0-11f0-aecd-569c3dd06744","forkedBranchVersion",11,"forkedProjectPrivacy","forkedProjectId","fdd966ca-27b0-11f0-aecd-569c3dd06744","forkedProjectOrgId","1ea2ca52-aecd-4993-8c60-cb61483dff1b","projectName","userHandle","acegg1","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zOUEwM1BUTnNYT1J5UEpjRDJCTFRGWkxJZE4ifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":175,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":176,"_79":177,"_81":178,"_83":25},"tree",[166,167],"files",[166,167],"counts",{"_156":61,"_157":152,"_158":61,"_159":160,"_161":162},"contents",[140,141],"upstreamProject",{"_43":93,"_32":137,"_52":-5,"_53":-5,"_49":50,"_77":138},"upstreamBranch",{"_43":88,"_38":131,"_132":133,"_32":85,"_86":93,"_13":90,"_87":-5,"_89":-5,"_134":135,"_47":-5,"_83":25,"_49":50,"_97":136,"_62":95,"_96":137},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],"updatedAt",["D",1739338420215],"lockfileKey","1767110342515-esm.town_v_mewtru_valentine@11-main","mewtru","valentine",{"_99":136,"_106":139},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_43":149,"_32":150,"_30":151,"_143":-5,"_41":42,"_40":152,"_144":57,"_38":153,"_13":61,"_33":20,"_35":154,"_24":25,"_147":-5,"_27":155},{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":145,"_13":146,"_33":34,"_35":37,"_24":25,"_147":-5,"_27":148},"c435c4ce-010b-11f1-bd9a-42dde27851f2","parentId","latest",["D",1770128547314],31,"label",[28],"cdd90b58-0106-11f1-b21b-42dde27851f2","README.md","019c23c1-9882-75e4-9694-3c8c82704136",1,["D",1770126415889],"Hello!!! \n\nFeel free to mess around with this val and make it your own :). Just click on \"Fork\" in the top right.\n\nYou can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!\n\nHave fun with it and hopefully your crush says yes hehe.",[150],"pulls","branches","forks","envVars",{"_163":61,"_165":61},"connections",{"_163":61,"_164":61},"count","unfilledCount","emptyCount",{"_43":149,"_32":150,"_30":151,"_143":-5,"_41":42,"_40":152,"_144":57,"_38":172,"_13":61,"_33":20,"_35":154,"_24":25,"_147":-5,"_169":173,"_27":174},{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":168,"_13":146,"_33":34,"_35":37,"_24":25,"_147":-5,"_169":170,"_27":171},["D",1770128547314],"children",[],[28],["D",1770126415889],[],[150],["D",1770126415889],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":54,"_103":104,"_105":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":88,"_89":90,"_91":50,"_92":93,"_94":95,"_96":45,"_97":98},"ctx",{"_77":-5,"_128":212,"_213":214,"_215":216,"_217":25,"_218":25,"_219":25,"_220":57,"_221":-5,"_222":-7,"_223":-7,"_224":61,"_225":25,"_226":25,"_227":-5,"_228":25,"_229":25,"_230":25,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":85,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v32