Valentine's Day Invitation

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_178":179,"_180":181},"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",47,"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","019c4977-1f5f-73a8-a064-daa2636528c9","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 useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"Howw coulddd youuuuu\",\n \"Againnnnnnnn\",\n \"But babyyyjaan I loveee youu\",\n \"Did I do sumfinkk wrongg\",\n \"i'm sorryyyy\",\n \"plss just this oncee i cant live wivout uu\",\n \"babyyy u being a big meaniee just click yes\",\n];\n\nfunction useInViewOnce(\n options?: IntersectionObserverInit,\n) {\n const ref = useRef(null);\n const [isVisible, setIsVisible] = useState(false);\n\n function useInViewOnceList(\n count: number,\n options?: IntersectionObserverInit,\n ) {\n const refs = useRef<(T | null)[]>([]);\n const [visible, setVisible] = useState(() =>\n Array(count).fill(false)\n );\n\n useEffect(() => {\n const observer = new IntersectionObserver((entries) => {\n setVisible((prev) => {\n const next = [...prev];\n for (const entry of entries) {\n if (entry.isIntersecting) {\n const idx = Number((entry.target as HTMLElement).dataset.idx);\n if (!Number.isNaN(idx)) next[idx] = true;\n observer.unobserve(entry.target);\n }\n }\n return next;\n });\n }, options);\n\n refs.current.forEach((el) => el && observer.observe(el));\n return () => observer.disconnect();\n }, [count, options]);\n\n const setRef = (idx: number) => (el: T | null) => {\n refs.current[idx] = el;\n };\n\n return { setRef, visible };\n }\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n const observer = new IntersectionObserver(([entry]) => {\n if (entry.isIntersecting) {\n setIsVisible(true);\n observer.unobserve(entry.target); // fade once\n }\n }, options);\n\n observer.observe(el);\n return () => observer.disconnect();\n }, [options]);\n\n return { ref, isVisible };\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const yesButtonSize = (noClicks * 20) + 16;\n\n const firstImg = \"https://c.tenor.com/kutFNFXxSIsAAAAC/tenor.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\n const handleYes = () => {\n setIsValentine(true);\n };\n\n const p1 = useInViewOnce({ threshold: 0.2 });\n const p2 = useInViewOnce({ threshold: 0.2 });\n const p3 = useInViewOnce({ threshold: 0.2 });\n const p4 = useInViewOnce({ threshold: 0.2 });\n const p5 = useInViewOnce({ threshold: 0.2 });\n const p6 = useInViewOnce({ threshold: 0.2 });\n\n const yesInView = useInViewOnceList(\n YES_LINES.length,\n { threshold: 0.2 },\n );\n\n const fadeStyle = (visible: boolean) => ({\n opacity: visible ? 1 : 0,\n transform: visible ? \"translateY(0)\" : \"translateY(16px)\",\n transition: \"opacity 700ms ease, transform 700ms ease\",\n });\n\n const YES_LINES = [\n \"heheheh thankk youu my babyjaaaaann\",\n \"i loveee youu sooo soo soooo muchhh my beautifull cutiepieee 😘😘😘😘😘😘\",\n \"thankkk youu for being mineee i'm so so so so luckyyy and honoureddd to havee such an adorable beautifull gorgeouss princesss to call mineee\",\n \"i hopee you enjoyedd your wittle websiteee!! i didn't wanna get you a physicall card or anythingg coj babii can't holdd onto it but thiss you can keeeep forever and ever and everr heheheh\",\n \"thankkk youuu my amazinngg sansweetieee i lovee youu sooo muchhh\",\n \"- created with all the lovee in the worldd by Bubbiee, hameshaa and forever yourss ❤️\",\n ];\n\n const [revealCount, setRevealCount] = useState(0);\n\n useEffect(() => {\n if (!isValentine) return;\n\n setRevealCount(0);\n const t = setInterval(() => {\n setRevealCount((c) => {\n if (c >= YES_LINES.length) {\n clearInterval(t);\n return c;\n }\n return c + 1;\n });\n }, 900);\n\n return () => clearInterval(t);\n }, [isValentine]);\n\n useEffect(() => {\n if (!isValentine) return;\n\n setRevealCount(0);\n const t = setInterval(() => {\n setRevealCount((c) => {\n if (c >= YES_LINES.length) {\n clearInterval(t);\n return c;\n }\n return c + 1;\n });\n }, 900); // timing between lines\n\n return () => clearInterval(t);\n }, [isValentine]);\n\n return (\n

\n {!isValentine\n ? (\n <>\n \n \n Hiiii my yummyyy babyjaaaan!!!\n

\n\n \n I hope you are doingg welllll 😘😘\n

\n\n \n I just have something very very veryyyy important to ask you\n

\n\n \n Make sure you answer honestly.\n

\n\n $\"First$ \n\n \n Will you be bubbie's valentine my yummyy wummy sansweetiee?\n

\n\n \n Don't click no.\n

\n\n {/* Buttons inside the card */}\n

\n \n Yes 💗\n \n\n \n

\n \n )\n : (\n <>\n $\"Celebration$ \n\n \n Yay!!! 💖🎉\n

\n\n \n {YES_LINES.slice(0, revealCount).map((text, i) => (\n \n {text}\n

\n ))}\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: 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 `,\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, {\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"Howw coulddd youuuuu\",\n \"Againnnnnnnn\",\n \"But babyyyjaan I loveee youu\",\n \"Did I do sumfinkk wrongg\",\n \"i'm sorryyyy\",\n \"plss just this oncee i cant live wivout uu\",\n \"babyyy u being a big meaniee just click yes\",\n];\n\n// Fade-in once (single element)\nfunction useInViewOnce(\n options?: IntersectionObserverInit,\n) {\n const ref = useRef(null);\n const [isVisible, setIsVisible] = useState(false);\n\n useEffect(() => {\n const el = ref.current;\n if (!el) return;\n\n const observer = new IntersectionObserver(([entry]) => {\n if (entry.isIntersecting) {\n setIsVisible(true);\n observer.unobserve(entry.target);\n }\n }, options);\n\n observer.observe(el);\n return () => observer.disconnect();\n }, [options]);\n\n return { ref, isVisible };\n}\n\n// Fade-in once (list of elements)\nfunction useInViewOnceList(\n count: number,\n options?: IntersectionObserverInit,\n) {\n const refs = useRef<(T | null)[]>([]);\n const [visible, setVisible] = useState(() =>\n Array(count).fill(false)\n );\n\n useEffect(() => {\n const observer = new IntersectionObserver((entries) => {\n setVisible((prev) => {\n const next = [...prev];\n for (const entry of entries) {\n if (entry.isIntersecting) {\n const idx = Number((entry.target as HTMLElement).dataset.idx);\n if (!Number.isNaN(idx)) next[idx] = true;\n observer.unobserve(entry.target);\n }\n }\n return next;\n });\n }, options);\n\n refs.current.forEach((el) => el && observer.observe(el));\n return () => observer.disconnect();\n }, [count, options]);\n\n const setRef = (idx: number) => (el: T | null) => {\n refs.current[idx] = el;\n };\n\n return { setRef, visible };\n}\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const yesButtonSize = (noClicks * 20) + 16;\n\n const firstImg = \"https://c.tenor.com/kutFNFXxSIsAAAAC/tenor.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const YES_LINES = [\n \"heheheh thankk youu my babyjaaaaann\",\n \"i loveee youu sooo soo soooo muchhh my beautifull cutiepieee 😘😘😘😘😘😘\",\n \"thankkk youu for being mineee i'm so so so so luckyyy and honoureddd to havee such an adorable beautifull gorgeouss princesss to call mineee\",\n \"i hopee you enjoyedd your wittle websiteee!! i didn't wanna get you a physicall card or anythingg coj babii can't holdd onto it but thiss you can keeeep forever and ever and everr heheheh\",\n \"thankkk youuu my amazinngg sansweetieee i lovee youu sooo muchhh\",\n \"- created with all the lovee in the worldd by Bubbiee, hameshaa and forever yourss ❤️\",\n ];\n\n const handleNo = () => setNoClicks((prev) => prev + 1);\n const handleYes = () => setIsValentine(true);\n\n // First page fades\n const p1 = useInViewOnce({ threshold: 0.2 });\n const p2 = useInViewOnce({ threshold: 0.2 });\n const p3 = useInViewOnce({ threshold: 0.2 });\n const p4 = useInViewOnce({ threshold: 0.2 });\n const p5 = useInViewOnce({ threshold: 0.2 });\n const p6 = useInViewOnce({ threshold: 0.2 });\n\n const fadeStyle = (visible: boolean) => ({\n opacity: visible ? 1 : 0,\n transform: visible ? \"translateY(0)\" : \"translateY(16px)\",\n transition: \"opacity 700ms ease, transform 700ms ease\",\n });\n\n // YES page: unlock lines over time\n const [revealCount, setRevealCount] = useState(0);\n\n useEffect(() => {\n if (!isValentine) return;\n\n setRevealCount(0);\n const t = setInterval(() => {\n setRevealCount((c) => {\n if (c >= YES_LINES.length) {\n clearInterval(t);\n return c;\n }\n return c + 1;\n });\n }, 900);\n\n return () => clearInterval(t);\n }, [isValentine, YES_LINES.length]);\n\n // YES page: fade on scroll\n const yesInView = useInViewOnceList(\n YES_LINES.length,\n { threshold: 0.2 },\n );\n\n return (\n

\n {!isValentine\n ? (\n <>\n \n \n Hiiii my yummyyy babyjaaaan!!!\n

\n\n \n I hope you are doingg welllll 😘😘\n

\n\n \n I just have something very very veryyyy important to ask you\n

\n\n \n Make sure you answer honestly.\n

\n\n $\"First$ \n\n \n Will you be bubbie's valentine my yummyy wummy sansweetiee?\n

\n\n \n Don't click no.\n

\n\n

\n \n Yes 💗\n \n\n \n

\n \n )\n : (\n <>\n $\"Celebration$ \n\n \n Yay!!! 💖🎉\n

\n\n \n {YES_LINES.slice(0, revealCount).map((text, i) => (\n \n {text}\n

\n ))}\n\n {/* spacer so you can scroll and see the fades */}\n

\n \n )}\n \n \n );\n}\n\nfunction client() {\n const el = document.getElementById(\"root\");\n if (!el) return;\n\n // Using createElement avoids JSX parsing quirks in some esm.town setups\n createRoot(el).render(React.createElement(App) as any);\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 { headers: { \"content-type\": \"text/html\" } },\n );\n}","createdAt",["D",1770841518927],"branchVersion","branchId","d0b8c7ac-06c7-11f1-a650-42dde27851f2","id","d0b25714-06c7-11f1-a650-42dde27851f2","valentine",["D",1770759069379],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c4976-cba7-72d9-8903-0b7940e9e1ac","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c4976-cba7-72d9-8903-0ea9e81d3a71","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",55,"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","t4nvirul","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zOVVtVXdIdTZtRmhzcHQ3ZVQ5ZUpJSWZWYksifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":174,"_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":175,"_79":176,"_81":177,"_83":25},"tree",[165,166],"files",[165,166],"counts",{"_155":61,"_156":151,"_157":61,"_158":159,"_160":161},"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":148,"_32":149,"_30":150,"_142":-5,"_41":42,"_40":151,"_143":57,"_38":152,"_13":61,"_33":20,"_35":153,"_24":25,"_146":-5,"_27":154},{"_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":-5,"_27":147},"c8720c1e-0787-11f1-a2af-42dde27851f2","parentId","latest",["D",1770841518927],46,"label",[28],"d0be145a-06c7-11f1-a650-42dde27851f2","README.md","019c4977-1f5f-73a8-a064-d56718f8268a",1,["D",1770759069379],"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.",[149],"pulls","branches","forks","envVars",{"_162":61,"_164":61},"connections",{"_162":61,"_163":61},"count","unfilledCount","emptyCount",{"_43":148,"_32":149,"_30":150,"_142":-5,"_41":42,"_40":151,"_143":57,"_38":171,"_13":61,"_33":20,"_35":153,"_24":25,"_146":-5,"_168":172,"_27":173},{"_43":141,"_32":28,"_30":31,"_142":-5,"_41":42,"_40":14,"_143":25,"_38":167,"_13":145,"_33":34,"_35":37,"_24":25,"_146":-5,"_168":169,"_27":170},["D",1770841518927],"children",[],[28],["D",1770759069379],[],[149],["D",1770759069379],{"_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":211,"_212":213,"_214":215,"_216":25,"_217":25,"_218":25,"_219":57,"_220":-5,"_221":-7,"_222":-7,"_223":61,"_224":25,"_225":25,"_226":-5,"_227":25,"_228":25,"_229":25,"_230":-5},"ENV",{"_182":183,"_184":185,"_186":85,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210},"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 · v47