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",50,"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","019c2eff-c766-740d-b748-1843b45c8aa1","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 \"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, I'm fragile\",\n \"KARAAAAAAA\",\n \"You're enjoying this a bit too much 😑\",\n];\n\nfunction LineByLineLyrics({ lines, lineDelay = 3500 }) {\n const [index, setIndex] = React.useState(0);\n\n React.useEffect(() => {\n if (index >= lines.length) return;\n\n const timeout = setTimeout(() => {\n setIndex((i) => i + 1);\n }, lineDelay);\n\n return () => clearTimeout(timeout);\n }, [index, lines.length, lineDelay]);\n\n return (\n \n {lines.slice(0, index).map((line, i) => (\n \n {line}\n \n ))}\n \n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [noButtonPosition, setNoButtonPosition] = useState({\n top: \"50%\",\n left: \"50%\",\n });\n const [showConfetti, setShowConfetti] = useState(false);\n\n const yesButtonSize = (noClicks * 20) + 16;\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 customImage =\n \"https://lh3.googleusercontent.com/d/18hCsoP88m9FCE2N4p4K23mxH7xJdP3N6\";\n const secondCustomImage =\n \"https://lh3.googleusercontent.com/d/11D5lcRYcZvuT3szionlrsraWeZZJ1ZyJ\";\n\n const lyricLines = [\n \"Turn around\",\n \"Look at what you seeeeeeee\",\n \"In her face\",\n \"The mirror of her dreeeeeams\",\n\n \"Make believe I'm everywhere\",\n \"Given in the liiiiiight\",\n \"Written on the pages is\",\n \"The answer to our never ending storyyyyyyy\",\n \"Ah-ah-ah-ah-ah\",\n\n \"Reach the stars\",\n \"Fly a fantasyyyyyyy\",\n \"Dream a dream\",\n \"And what you see will beeeeeee\",\n\n \"Rhymes that keep their secrets will\",\n \"Unfold behind the clouds\",\n \"And there upon a rainbow is\",\n \"The answer to our never ending storyyyyyyyy\",\n\n \"Ah-ah-ah-ah-ah\",\n \"Stoooooryyyyyy\",\n \"Ah-ah-ah-ah-ah\",\n\n \"Thanks for being my best friend for all these years Kara 💖\",\n ];\n\n const handleNoHover = () => {\n if (noClicks >= NO_PHRASES.length) {\n const randomTop = Math.random() * 80 + 10;\n const randomLeft = Math.random() * 80 + 10;\n setNoButtonPosition({ top: `${randomTop}%`, left: `${randomLeft}%` });\n }\n };\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n };\n\n const handleYes = () => {\n setIsValentine(true);\n setShowConfetti(true);\n setTimeout(() => setShowConfetti(false), 5000);\n };\n\n const poemContent = (\n 0 ? \"14px\" : \"18px\",\n lineHeight: \"1.8\",\n color: \"#333\",\n maxWidth: noClicks > 0 ? \"300px\" : \"600px\",\n backgroundColor: \"#fff0f5\",\n padding: noClicks > 0 ? \"20px\" : \"30px\",\n borderRadius: \"15px\",\n boxShadow: \"0 4px 6px rgba(0,0,0,0.1)\",\n transition: \"all 0.5s ease\",\n }}\n >\n

Roses are red,

violets are blue,

I'd run up that hill,

To make a deal with God for you.

\n\n

My heart has no firewall,

\n Vecna's clock is starting to chime,\n

\n But your laugh is my \"favourite song,\"\n

That save me every single time.

\n\n

You're the Master of my Puppets,

The \"anchor\" in my dark,

I'm just the Steve to your Robin,

\n The guy who's lost without your spark.\n

\n\n

\n So, since I'm the Software Engineer,\n

And, you're the Cyber Queen,

\n Will you be my valentine, you short doughnut?\n

(Select 'Yes' to avoid a blue screen).

\n \n );\n\n return (\n \n {/* Confetti */}\n {showConfetti && (\n \n {[...Array(50)].map((_, i) => (\n \n {[\"❤️\", \"💕\", \"💖\", \"💗\", \"💝\"][Math.floor(Math.random() * 5)]}\n \n ))}\n \n )}\n\n {/* Moving No button */}\n {noClicks >= NO_PHRASES.length && !isValentine && (\n \n {NO_PHRASES[NO_PHRASES.length - 1]}\n \n )}\n\n {!isValentine\n ? (\n <>\n

\n\n {noClicks > 0\n ? (\n \n {poemContent}\n \n \n {noClicks >= 2 && (\n \n )}\n {noClicks >= 3 && (\n \n You have to admit that we look really cute together 💕\n

\n )}\n \n \n )\n : (\n

\n {poemContent}\n

\n )}\n\n

\n \n Yes\n \n {noClicks < NO_PHRASES.length && (\n \n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n )}\n

\n \n )\n : (\n <>\n

\n \n Yay!!! 💖🎉\n \n \n You're a 🍩\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\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 `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\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 \"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, I'm fragile\",\n \"KARAAAAAAA\",\n \"You're enjoying this a bit too much 😑\",\n];\n\nfunction LineByLineLyrics({ lines, lineDelay = 3500 }) {\n const [index, setIndex] = React.useState(0);\n\n React.useEffect(() => {\n if (index >= lines.length) return;\n\n const timeout = setTimeout(() => {\n setIndex((i) => i + 1);\n }, lineDelay);\n\n return () => clearTimeout(timeout);\n }, [index, lines.length, lineDelay]);\n\n return (\n \n {lines.slice(0, index).map((line, i) => (\n \n {line}\n \n ))}\n \n );\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [noButtonPosition, setNoButtonPosition] = useState({\n top: \"50%\",\n left: \"50%\",\n });\n const [showConfetti, setShowConfetti] = useState(false);\n\n const yesButtonSize = (noClicks * 20) + 16;\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 customImage =\n \"https://lh3.googleusercontent.com/d/18hCsoP88m9FCE2N4p4K23mxH7xJdP3N6\";\n const secondCustomImage =\n \"https://lh3.googleusercontent.com/d/11D5lcRYcZvuT3szionlrsraWeZZJ1ZyJ\";\n\n const lyricLines = [\n \"Turn around\",\n \"Look at what you seeeeeeee\",\n \"In her face\",\n \"The mirror of her dreeeeeams\",\n\n \"Make believe I'm everywhere\",\n \"Given in the liiiiiight\",\n \"Written on the pages is\",\n \"The answer to our never ending storyyyyyyy\",\n \"Ah-ah-ah-ah-ah\",\n\n \"Reach the stars\",\n \"Fly a fantasyyyyyyy\",\n \"Dream a dream\",\n \"And what you see will beeeeeee\",\n\n \"Rhymes that keep their secrets will\",\n \"Unfold behind the clouds\",\n \"And there upon a rainbow is\",\n \"The answer to our never ending storyyyyyyyy\",\n\n \"Ah-ah-ah-ah-ah\",\n \"Stoooooryyyyyy\",\n \"Ah-ah-ah-ah-ah\",\n\n \"Thanks for being my best friend for all these years Kara 💖\",\n ];\n\n const handleNoHover = () => {\n if (noClicks >= NO_PHRASES.length) {\n const randomTop = Math.random() * 80 + 10;\n const randomLeft = Math.random() * 80 + 10;\n setNoButtonPosition({ top: `${randomTop}%`, left: `${randomLeft}%` });\n }\n };\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n };\n\n const handleYes = () => {\n setIsValentine(true);\n setShowConfetti(true);\n setTimeout(() => setShowConfetti(false), 5000);\n };\n\n const poemContent = (\n 0 ? \"14px\" : \"18px\",\n lineHeight: \"1.8\",\n color: \"#333\",\n maxWidth: noClicks > 0 ? \"300px\" : \"600px\",\n backgroundColor: \"#fff0f5\",\n padding: noClicks > 0 ? \"20px\" : \"30px\",\n borderRadius: \"15px\",\n boxShadow: \"0 4px 6px rgba(0,0,0,0.1)\",\n transition: \"all 0.5s ease\",\n }}\n >\n

Roses are red,

Violets are blue,

I'd run up that hill,

To make a deal with God for you.

\n\n

My heart has no firewall,

\n Vecna's clock is starting to chime,\n

\n But your laugh is my \"favourite song,\"\n

That saves me every single time.

\n\n

You're the Master of my Puppets,

The \"anchor\" in my dark,

I'm just the Steve to your Robin,

\n The guy who's lost without your spark.\n

\n\n

\n So, since I'm the Software Engineer,\n

And, you're the Cyber Queen,

\n Will you be my valentine, you short doughnut?\n

(Select 'Yes' to avoid a blue screen).

\n\n {noClicks > 0\n ? (\n \n {poemContent}\n \n \n {noClicks >= 2 && (\n \n )}\n {noClicks >= 3 && (\n \n You have to admit that we look really cute together 💕\n

\n )}\n \n \n )\n : (\n

\n {poemContent}\n

\n )}\n\n

\n \n Yes\n \n {noClicks < NO_PHRASES.length && (\n \n {noClicks === 0\n ? \"No\"\n : NO_PHRASES[Math.min(noClicks - 1, NO_PHRASES.length - 1)]}\n \n )}\n

\n \n )\n : (\n <>\n

\n \n Yay!!! 💖🎉\n \n \n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\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 `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","createdAt",["D",1770330094027],"branchVersion","branchId","fadafb26-02bd-11f1-b37e-42dde27851f2","id","fad42648-02bd-11f1-b37e-42dde27851f2","valentine",["D",1770315040464],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c2efc-1317-72a6-ae04-b491a37e7d17","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c2efc-1317-72a6-ae04-b904b04c1563","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",76,"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","dilz786","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zOUdHMnlnenBlMlFBdDl2dVg3MVRzcGFibDUifQ","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",[139,140],"upstreamProject",{"_43":93,"_32":45,"_52":-5,"_53":-5,"_49":50,"_77":137},"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":45},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],"updatedAt",["D",1739338420215],"lockfileKey","1767110342515-esm.town_v_mewtru_valentine@11-main","mewtru",{"_99":136,"_106":138},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_43":149,"_32":150,"_30":151,"_142":-5,"_41":42,"_40":152,"_143":57,"_38":153,"_13":61,"_33":20,"_35":154,"_24":25,"_146":-5,"_27":155},{"_43":141,"_32":28,"_30":31,"_142":-5,"_41":42,"_40":14,"_143":25,"_38":144,"_13":145,"_33":34,"_35":37,"_24":25,"_146":147,"_27":148},"0767fcd6-02e1-11f1-8466-42dde27851f2","parentId","latest",["D",1770330094027],41,"label","dilz-my-best-fwend-kara",[28],"fae0817c-02bd-11f1-b37e-42dde27851f2","README.md","019c2eff-c766-740d-b748-153b7e7dd32f",1,["D",1770315040464],"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,"_142":-5,"_41":42,"_40":152,"_143":57,"_38":172,"_13":61,"_33":20,"_35":154,"_24":25,"_146":-5,"_169":173,"_27":174},{"_43":141,"_32":28,"_30":31,"_142":-5,"_41":42,"_40":14,"_143":25,"_38":168,"_13":145,"_33":34,"_35":37,"_24":25,"_146":147,"_169":170,"_27":171},["D",1770330094027],"children",[],[28],["D",1770315040464],[],[150],["D",1770315040464],{"_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 · v50