[{"_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",5,"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","019c369a-40f5-709d-b1e3-942111b5ab8f","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?ex=69882de5&is=6986dc65&hm=f619a374a66a7c7aa6ae31373dc5db326c23eea901cbda8b4f16b9184593ca13\";\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\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 effect for the final Valentine\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// Wrapper to add smooth fade/slide transitions\nfunction StepWrapper({ children, step }) {\n const [visible, setVisible] = useState(false);\n\n useEffect(() => {\n setVisible(false);\n const timeout = setTimeout(() => setVisible(true), 50); // slight delay to trigger transition\n return () => clearTimeout(timeout);\n }, [step]);\n\n return (\n \n {children}\n \n );\n}\n\n/* ---------- APP ---------- */\n\nfunction App() {\n const [step, setStep] = useState(0);\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n\n const yesSize = 16 + noClicks * 18;\n const play = (src) => new Audio(src).play();\n\n return (\n \n {/* STEP 0 */}\n {step === 0 && (\n \n

\n \n \n \n

\n\n \n \n \n )}\n\n {/* STEP 1 */}\n {step === 1 && (\n \n \n setStep(2)}\n style={{ ...btnStyle, marginTop: \"20px\" }}\n >\n Unsa man...?\n \n \n )}\n\n {/* STEP 2 */}\n {step === 2 && (\n \n \n setStep(3)}\n style={{ ...btnStyle, marginTop: \"20px\" }}\n >\n okay okay…\n \n \n )}\n\n {/* STEP 3 */}\n {step === 3 && (\n \n \n setStep(4)}\n style={{ ...btnStyle, marginTop: \"20px\" }}\n >\n oo na lagi!\n \n \n )}\n\n {/* STEP 4 - VALENTINE */}\n {step === 4 && (\n \n {!isValentine\n ? (\n

\n \n

Will you be my Valentine? 💘

\n\n {\n play(YES_SOUND);\n setIsValentine(true);\n }}\n style={{\n ...btnStyle,\n fontSize: `${yesSize}px`,\n background: \"green\",\n color: \"white\",\n transform: \"scale(1)\",\n transition: \"transform 0.4s ease\",\n }}\n >\n Yes\n \n\n
\n\n {\n play(NO_SOUND);\n setNoClicks((n) => n + 1);\n }}\n style={{\n ...btnStyle,\n background: \"red\",\n color: \"white\",\n fontSize: \"14px\",\n }}\n >\n {NO_PHRASES[Math.min(noClicks, NO_PHRASES.length - 1)]}\n \n

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

\n Yey!! I’m really happy it’s you 💖\n

\n \n )}\n \n )}\n \n );\n}\n\n/* ---------- STYLES ---------- */\n\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 ---------- */\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\n/* ---------- SERVER ---------- */\n\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 { 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, { 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?ex=69882de5&is=6986dc65&hm=f619a374a66a7c7aa6ae31373dc5db326c23eea901cbda8b4f16b9184593ca13\";\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\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 effect for the final Valentine\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 for Valentine step\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, // percentage of width\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\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\n// Wrapper to add smooth fade/slide transitions\nfunction StepWrapper({ children, step }) {\n const [visible, setVisible] = useState(false);\n\n useEffect(() => {\n setVisible(false);\n const timeout = setTimeout(() => setVisible(true), 50); // slight delay to trigger transition\n return () => clearTimeout(timeout);\n }, [step]);\n\n return (\n \n {children}\n \n );\n}\n\n/* ---------- APP ---------- */\n\nfunction App() {\n const [step, setStep] = useState(0);\n const [noClicks, setNoClicks] = useState(0);\n const [isValentine, setIsValentine] = useState(false);\n\n const yesSize = 16 + noClicks * 18;\n const play = (src) => new Audio(src).play();\n\n return (\n \n {/* STEP 0 */}\n {step === 0 && (\n \n

\n \n \n \n

\n \n \n

\n Will you be my Valentine? 💘\n

\n\n {\n play(YES_SOUND);\n setIsValentine(true);\n }}\n style={{\n ...btnStyle,\n fontSize: `${yesSize}px`,\n background: \"green\",\n color: \"white\",\n transform: \"scale(1)\",\n transition: \"transform 0.4s ease\",\n position: \"relative\",\n zIndex: 1,\n }}\n >\n Yes\n \n\n
\n\n {\n play(NO_SOUND);\n setNoClicks((n) => n + 1);\n }}\n style={{\n ...btnStyle,\n background: \"red\",\n color: \"white\",\n fontSize: \"14px\",\n position: \"relative\",\n zIndex: 1,\n }}\n >\n {NO_PHRASES[Math.min(noClicks, NO_PHRASES.length - 1)]}\n \n

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

\n Yey!! I’m really happy it’s you 💖\n

\n \n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","createdAt",["D",1770447519847],"branchVersion","branchId","fd09576a-03e6-11f1-8d8f-42dde27851f2","id","fd0403f0-03e6-11f1-8d8f-42dde27851f2","valentine",["D",1770442604669],"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",24,"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":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},"6ea76154-03f2-11f1-94b2-42dde27851f2","parentId","latest",["D",1770447519847],4,"label","iloveyoumaine",[28],"fd0d1b52-03e6-11f1-8d8f-42dde27851f2","README.md","019c369a-40f5-709d-b1e3-92ef3a74ce82",1,["D",1770442604669],"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",1770447519847],"children",[],[28],["D",1770442604669],[],[150],["D",1770442604669],{"_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 · v5