💘 For my baby!

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_180":181,"_182":183},"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",27,"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","019c36b8-25e5-700a-8de5-cf84e3123db6","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, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\n/* ---------- CONFIG ---------- */\n\nconst POLAROID_IMG =\n \"https://cdn.discordapp.com/attachments/752121520029171723/1469581469629415425/Screen_Shot_2026-02-07_at_1.55.42_PM.png\";\n\nconst YES_SOUND =\n \"https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3\";\nconst NO_SOUND =\n \"https://assets.mixkit.co/sfx/preview/mixkit-wrong-answer-fail-notification-946.mp3\";\n\nconst NO_PHRASES = [\n \"No💔\",\n \"Unsay no? 🥺\",\n \"pero wala namay uban!?\",\n \"ayawg no ba.. 😞\",\n \"gasakit akong dughan!!!\",\n \"Pleeeeeaasee\",\n \"muhilak ko ron!\",\n \"MAAAIIINNEEEE!!\",\n];\n\nconst FORTUNES = [\n \"Your partner will love you forever!\",\n \"You will receive hugs n kisses\",\n \"You will have a bright future together.\",\n];\n\n/* ---------- COMPONENTS ---------- */\n\n// Typewriter effect\nfunction Typewriter({ text, speed = 40 }) {\n const [displayed, setDisplayed] = useState(\"\");\n useEffect(() => {\n let i = 0;\n const interval = setInterval(() => {\n setDisplayed(text.slice(0, i + 1));\n i++;\n if (i === text.length) clearInterval(interval);\n }, speed);\n return () => clearInterval(interval);\n }, [text]);\n\n return

{displayed}

;\n}\n\n// Floating hearts for any screen\nfunction FloatingHearts() {\n const [hearts, setHearts] = useState([]);\n useEffect(() => {\n const interval = setInterval(() => {\n setHearts((prev) => [\n ...prev,\n {\n id: Date.now() + Math.random(),\n x: Math.random() * 100,\n size: 10 + Math.random() * 20,\n speed: 3 + Math.random() * 2,\n opacity: 0.4 + Math.random() * 0.6,\n },\n ]);\n }, 300);\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n {hearts.map((h) => (\n \\')',\n backgroundSize: \"contain\",\n backgroundRepeat: \"no-repeat\",\n opacity: h.opacity,\n animation: `floatUp ${h.speed + 2}s linear forwards`,\n }}\n />\n ))}\n \n \n );\n}\n\n// Love letter envelope\nfunction LoveLetter({ message, onNext }) {\n const [opened, setOpened] = useState(false);\n\n return (\n

\n \n {!opened\n ? (\n setOpened(true)}\n style={{\n cursor: \"pointer\",\n width: \"150px\",\n height: \"100px\",\n background: \"pink\",\n margin: \"0 auto\",\n borderRadius: \"8px\",\n boxShadow: \"0 4px 10px rgba(0,0,0,0.2)\",\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fontWeight: \"bold\",\n color: \"white\",\n fontSize: \"18px\",\n }}\n >\n 📩 Open\n

\n )\n : (\n

\n \n {message}\n

\n \n Next →\n \n \n )}\n\n \n \n );\n}\n\n// Step wrapper for transitions\nfunction StepWrapper({ children, step }) {\n const [visible, setVisible] = useState(false);\n useEffect(() => {\n setVisible(false);\n const timeout = setTimeout(() => setVisible(true), 50);\n return () => clearTimeout(timeout);\n }, [step]);\n\n return (\n \n {children}\n \n );\n}\n\n// Confetti\nfunction Confetti() {\n useEffect(() => {\n const canvas = document.createElement(\"canvas\");\n document.body.appendChild(canvas);\n canvas.style.position = \"fixed\";\n canvas.style.top = 0;\n canvas.style.left = 0;\n canvas.style.pointerEvents = \"none\";\n\n const ctx = canvas.getContext(\"2d\");\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n const pieces = Array.from({ length: 120 }).map(() => ({\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n r: Math.random() * 6 + 4,\n d: Math.random() * 2 + 1,\n c: `hsl(${Math.random() * 360},100%,70%)`,\n }));\n\n let frame;\n function draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n pieces.forEach((p) => {\n ctx.beginPath();\n ctx.fillStyle = p.c;\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\n ctx.fill();\n p.y += p.d;\n if (p.y > canvas.height) p.y = -10;\n });\n frame = requestAnimationFrame(draw);\n }\n draw();\n\n return () => {\n cancelAnimationFrame(frame);\n canvas.remove();\n };\n }, []);\n\n return null;\n}\n\n/* ---------- APP ---------- */\n\nfunction App() {\n const [loading, setLoading] = useState(true);\n const [step, setStep] = useState(0);\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [fortuneShown, setFortuneShown] = useState(\n Array(FORTUNES.length).fill(false),\n );\n const yesSize = 16 + noClicks * 18;\n const play = (src) => new Audio(src).play();\n\n const allFortunesRevealed = fortuneShown.every((v) => v);\n\n const resetApp = () => {\n setStep(0);\n setNoClicks(0);\n setIsValentine(false);\n setFortuneShown(Array(FORTUNES.length).fill(false));\n };\n\n // Loading screen timeout\n useEffect(() => {\n const timeout = setTimeout(() => setLoading(false), 5000);\n return () => clearTimeout(timeout);\n }, []);\n\n if (loading) {\n return (\n \n \n \n 💖\n \n Loading...\n \n \n );\n }\n\n return (\n \n {/* STEP 0 */}\n {step === 0 && (\n \n

\n \n \n \n \n

\n \n \n \n )}\n\n {/* Steps 1-5 can be reused from previous code, adding FloatingHearts wherever desired */}\n \n );\n}\n\n/* ---------- STYLES ---------- */\nconst btnStyle = {\n padding: \"10px 24px\",\n borderRadius: \"20px\",\n border: \"none\",\n background: \"pink\",\n cursor: \"pointer\",\n fontSize: \"16px\",\n margin: \"10px\",\n};\n\n/* ---------- CLIENT ---------- */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\n/* ---------- CONFIG ---------- */\n\nconst POLAROID_IMG =\n \"https://cdn.discordapp.com/attachments/752121520029171723/1469581469629415425/Screen_Shot_2026-02-07_at_1.55.42_PM.png\";\n\nconst YES_SOUND =\n \"https://assets.mixkit.co/sfx/preview/mixkit-achievement-bell-600.mp3\";\nconst NO_SOUND =\n \"https://assets.mixkit.co/sfx/preview/mixkit-wrong-answer-fail-notification-946.mp3\";\n\nconst NO_PHRASES = [\n \"No💔\",\n \"Unsay no? 🥺\",\n \"pero wala namay uban!?\",\n \"ayawg no ba.. 😞\",\n \"gasakit akong dughan!!!\",\n \"Pleeeeeaasee\",\n \"muhilak ko ron!\",\n \"MAAAIIINNEEEE!!\",\n];\n\nconst FORTUNES = [\n \"Your partner will love you forever!\",\n \"You will receive hugs n kisses\",\n \"You will have a bright future together.\",\n];\n\n/* ---------- COMPONENTS ---------- */\n\nfunction Typewriter({ text, speed = 40 }) {\n const [displayed, setDisplayed] = useState(\"\");\n useEffect(() => {\n let i = 0;\n const interval = setInterval(() => {\n setDisplayed(text.slice(0, i + 1));\n i++;\n if (i === text.length) clearInterval(interval);\n }, speed);\n return () => clearInterval(interval);\n }, [text]);\n\n return

{displayed}

;\n}\n\n// Confetti\nfunction Confetti() {\n useEffect(() => {\n const canvas = document.createElement(\"canvas\");\n document.body.appendChild(canvas);\n canvas.style.position = \"fixed\";\n canvas.style.top = 0;\n canvas.style.left = 0;\n canvas.style.pointerEvents = \"none\";\n\n const ctx = canvas.getContext(\"2d\");\n canvas.width = window.innerWidth;\n canvas.height = window.innerHeight;\n\n const pieces = Array.from({ length: 120 }).map(() => ({\n x: Math.random() * canvas.width,\n y: Math.random() * canvas.height,\n r: Math.random() * 6 + 4,\n d: Math.random() * 2 + 1,\n c: `hsl(${Math.random() * 360},100%,70%)`,\n }));\n\n let frame;\n function draw() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n pieces.forEach((p) => {\n ctx.beginPath();\n ctx.fillStyle = p.c;\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\n ctx.fill();\n p.y += p.d;\n if (p.y > canvas.height) p.y = -10;\n });\n frame = requestAnimationFrame(draw);\n }\n draw();\n\n return () => {\n cancelAnimationFrame(frame);\n canvas.remove();\n };\n }, []);\n\n return null;\n}\n\n// Floating hearts\nfunction FloatingHearts() {\n const [hearts, setHearts] = useState([]);\n useEffect(() => {\n const interval = setInterval(() => {\n setHearts((prev) => [\n ...prev,\n {\n id: Date.now() + Math.random(),\n x: Math.random() * 100,\n size: 10 + Math.random() * 20,\n speed: 1 + Math.random() * 2,\n opacity: 0.5 + Math.random() * 0.5,\n },\n ]);\n }, 300);\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n {hearts.map((h) => (\n \\')',\n backgroundSize: \"contain\",\n backgroundRepeat: \"no-repeat\",\n opacity: h.opacity,\n animation: `floatUp ${h.speed + 2}s linear forwards`,\n }}\n />\n ))}\n\n \n \n );\n}\n\n// Love letter envelope\nfunction LoveLetter({ message, onNext }) {\n const [opened, setOpened] = useState(false);\n\n return (\n

\n )\n : (\n

\n \n {message}\n

\n \n Next →\n \n \n )}\n\n \n \n );\n}\n\n// Wrapper for transitions\nfunction StepWrapper({ children, step }) {\n const [visible, setVisible] = useState(false);\n useEffect(() => {\n setVisible(false);\n const timeout = setTimeout(() => setVisible(true), 50);\n return () => clearTimeout(timeout);\n }, [step]);\n\n return (\n \n {children}\n \n );\n}\n\n/* ---------- APP ---------- */\n\nfunction App() {\n const [loading, setLoading] = useState(true);\n const [step, setStep] = useState(0);\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n const [fortuneShown, setFortuneShown] = useState(\n Array(FORTUNES.length).fill(false),\n );\n const yesSize = 16 + noClicks * 18;\n const play = (src) => new Audio(src).play();\n\n const allFortunesRevealed = fortuneShown.every((v) => v);\n\n const resetApp = () => {\n setStep(0);\n setNoClicks(0);\n setIsValentine(false);\n setFortuneShown(Array(FORTUNES.length).fill(false));\n };\n\n // Loading screen timeout\n useEffect(() => {\n const timeout = setTimeout(() => setLoading(false), 5000);\n return () => clearTimeout(timeout);\n }, []);\n\n if (loading) {\n return (\n \n \n 💖\n \n Loading...\n \n \n );\n }\n\n return (\n \n {/* STEP 0 */}\n {step === 0 && (\n \n

\n \n \n \n \n

\n \n \n \n )}\n\n {/* Continue with steps 1-5, same as previous code, using FloatingHearts wherever needed */}\n {/* For brevity, reuse the previous code for steps 1-5 from earlier, but now STEP 0 has floating hearts and there is a loading screen */}\n \n );\n}\n\n/* ---------- STYLES ---------- */\nconst btnStyle = {\n padding: \"10px 24px\",\n borderRadius: \"20px\",\n border: \"none\",\n background: \"pink\",\n cursor: \"pointer\",\n fontSize: \"16px\",\n margin: \"10px\",\n};\n\n/* ---------- CLIENT ---------- */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\n/* ---------- SERVER ---------- */\nexport default async function server() {\n return new Response(\n `\n \n \n 💘 For my baby!\n \n \n \n \n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","createdAt",["D",1770449066574],"branchVersion","branchId","8cc79926-03eb-11f1-b4d7-42dde27851f2","id","8cc1b22c-03eb-11f1-b4d7-42dde27851f2","IloveMaine",["D",1770444563812],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c3699-5452-75bd-955a-d32368bdcb45","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c3699-5452-75bd-955a-d477a0765f2e","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",46,"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","Madi","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5S1F5bjE4dlJ2Mld1dk9WV3c4OTZ2VFF0SyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":176,"_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":177,"_79":178,"_81":179,"_83":25},"tree",[167,168],"files",[167,168],"counts",{"_157":61,"_158":153,"_159":61,"_160":161,"_162":163},"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":150,"_32":151,"_30":152,"_143":-5,"_41":42,"_40":153,"_144":57,"_38":154,"_13":61,"_33":20,"_35":155,"_24":25,"_147":-5,"_27":156},{"_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":148,"_27":149},"0892f758-03f6-11f1-9088-42dde27851f2","parentId","latest",["D",1770449066574],26,"label","iloveumaine",[28],"8ccbec56-03eb-11f1-b4d7-42dde27851f2","README.md","019c36b8-25e5-700a-8de5-cac126340948",1,["D",1770444563812],"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.",[151],"pulls","branches","forks","envVars",{"_164":61,"_166":61},"connections",{"_164":61,"_165":61},"count","unfilledCount","emptyCount",{"_43":150,"_32":151,"_30":152,"_143":-5,"_41":42,"_40":153,"_144":57,"_38":173,"_13":61,"_33":20,"_35":155,"_24":25,"_147":-5,"_170":174,"_27":175},{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":169,"_13":146,"_33":34,"_35":37,"_24":25,"_147":148,"_170":171,"_27":172},["D",1770449066574],"children",[],[28],["D",1770444563812],[],[151],["D",1770444563812],{"_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":213,"_214":215,"_216":217,"_218":25,"_219":25,"_220":25,"_221":57,"_222":-5,"_223":-7,"_224":-7,"_225":61,"_226":25,"_227":25,"_228":-5,"_229":25,"_230":25,"_231":25,"_232":-5},"ENV",{"_184":185,"_186":187,"_188":85,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212},"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 · v27