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",8,"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","019c52f8-dfec-730f-8c1c-5422e7a41b0a","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, { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"No 💔\",\n \"Pretty please? 🥺\",\n \"You're Rude 🙅🏽‍♂️\",\n \"Urm Emmeline...\",\n \"This is your last chance girly\",\n \"Lol. As if you had a choice 😏\",\n \"Ops. Try again 🤪\",\n \"😡 (You're a loser)\",\n \"Press here if you're an idiot\",\n];\n\nconst REJECTION_IMAGES = [\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\",\n \"https://media.tenor.com/UJCnZ5Naw74AAAAi/bubu-yier-iklog.gif\",\n \"https://media.tenor.com/Q9VuGIKQqEMAAAAi/love-bear.gif\",\n \"https://media.tenor.com/z7ZABFfLkn8AAAAi/kh%C3%B3c.gif\",\n \"https://media.tenor.com/xUWuCwMMhMMAAAAi/madebychie-mocha-and-milk.gif\",\n \"https://media.tenor.com/yPZm4Cp6Es0AAAAi/milk-mocha-cry.gif\",\n \"https://media.tenor.com/H54FRBUP7QkAAAAi/tkthao219-bear.gif\",\n \"https://media.tenor.com/ik3TBoVkDC4AAAAi/mimibubu.gif\",\n \"https://media.tenor.com/MN70fG-X1jcAAAAi/angry-dudu-dudu-kill.gif\",\n \"https://media.tenor.com/I0A4JG4CK4kAAAAi/bubu-dudu.gif\",\n];\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [noButtonPos, setNoButtonPos] = useState({ top: null, left: null });\n\n const yesButtonSize = (noClicks * 20) + 16;\n const currentImage =\n REJECTION_IMAGES[Math.min(noClicks, REJECTION_IMAGES.length - 1)];\n const secondImg = \"https://media.tenor.com/mKr-KcMW9RcAAAAi/cute-bears.gif\";\n\n // Heading logic: shows phrases after first click\n const currentHeading = noClicks === 0\n ? \"Hey Emme, Will you be my Valentine? 🫣\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)];\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n\n // Generate random position for the No button\n const randomTop = Math.floor(Math.random() * 80) + 10; // 10% to 90%\n const randomLeft = Math.floor(Math.random() * 80) + 10;\n setNoButtonPos({ top: `${randomTop}%`, left: `${randomLeft}%` });\n };\n\n const handleYes = () => {\n setIsValentine(true);\n };\n\n return (\n \n {!isValentine\n ? (\n <>\n \n \n {currentHeading}\n \n\n \n Yes\n \n\n \n No 💔\n \n \n )\n : (\n <>\n

\n \n Yay! See you soon bubs xx 💖🎉\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: Request): Promise {\n return new Response(\n `\n \n \n Valentine's Day Invitation\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, { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"No? 💔\",\n \"Pretty please? 🥺\",\n \"You're Rude 🙅🏽‍♂️\",\n \"Urm Emmeline...\",\n \"This is your last chance girly\",\n \"Lol. As if you had a choice 😏\",\n \"Ops. Try again 🤪\",\n \"😡 (You're a loser)\",\n \"Press here if you're an idiot\",\n];\n\nconst REJECTION_IMAGES = [\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\",\n \"https://media.tenor.com/UJCnZ5Naw74AAAAi/bubu-yier-iklog.gif\",\n \"https://media.tenor.com/Q9VuGIKQqEMAAAAi/love-bear.gif\",\n \"https://media.tenor.com/z7ZABFfLkn8AAAAi/kh%C3%B3c.gif\",\n \"https://media.tenor.com/xUWuCwMMhMMAAAAi/madebychie-mocha-and-milk.gif\",\n \"https://media.tenor.com/yPZm4Cp6Es0AAAAi/milk-mocha-cry.gif\",\n \"https://media.tenor.com/H54FRBUP7QkAAAAi/tkthao219-bear.gif\",\n \"https://media.tenor.com/ik3TBoVkDC4AAAAi/mimibubu.gif\",\n \"https://media.tenor.com/MN70fG-X1jcAAAAi/angry-dudu-dudu-kill.gif\",\n \"https://media.tenor.com/I0A4JG4CK4kAAAAi/bubu-dudu.gif\",\n];\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [noButtonPos, setNoButtonPos] = useState({ top: null, left: null });\n\n const yesButtonSize = (noClicks * 20) + 16;\n const currentImage =\n REJECTION_IMAGES[Math.min(noClicks, REJECTION_IMAGES.length - 1)];\n const secondImg = \"https://media.tenor.com/mKr-KcMW9RcAAAAi/cute-bears.gif\";\n\n const currentHeading = noClicks === 0\n ? \"Hey Emme, Will you be my Valentine? 🫣\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)];\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n\n // Logic to stay away from the center (where the main content is)\n // We pick a random side: Top, Bottom, Left, or Right edge\n const side = Math.floor(Math.random() * 4);\n let top, left;\n\n switch (side) {\n case 0: // Top edge\n top = Math.random() * 20 + 5;\n left = Math.random() * 90 + 5;\n break;\n case 1: // Bottom edge\n top = Math.random() * 20 + 75;\n left = Math.random() * 90 + 5;\n break;\n case 2: // Left edge\n top = Math.random() * 90 + 5;\n left = Math.random() * 20 + 5;\n break;\n case 3: // Right edge\n top = Math.random() * 90 + 5;\n left = Math.random() * 20 + 75;\n break;\n }\n\n setNoButtonPos({ top: `${top}%`, left: `${left}%` });\n };\n\n const handleYes = () => {\n setIsValentine(true);\n };\n\n return (\n \n {!isValentine\n ? (\n <>\n

\n \n \n {currentHeading}\n \n

\n\n \n Yes\n \n\n \n No 💔\n \n \n )\n : (\n

\n $\"Happy$ \n \n Yay! See you soon bubs xx 💖🎉\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: Request): Promise {\n return new Response(\n `\n \n \n For Emme 💖\n \n \n \n \n

\n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","createdAt",["D",1770921275700],"branchVersion","branchId","2d29e254-083b-11f1-87f2-42dde27851f2","id","2d240f14-083b-11f1-87f2-42dde27851f2","valentine_em",["D",1770918567780],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c2e01-0914-7087-8c59-6b46bec6398f","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c2e01-0914-7087-8c59-6e90d93bfa7f","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",12,"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","tpn11","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5RmloNjdWWkZmcjg0dDVTcWgyQUlZU21NMSJ9","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},"7b244a98-0841-11f1-ba84-42dde27851f2","parentId","latest",["D",1770921275700],7,"label",[28],"2d2e43c6-083b-11f1-87f2-42dde27851f2","README.md","019c52f8-dfec-730f-8c1c-5013609e158e",1,["D",1770918567780],"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",1770921275700],"children",[],[28],["D",1770918567780],[],[150],["D",1770918567780],{"_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 · v8