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",48,"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","019c43ff-95fa-761d-8817-ad897eef91c8","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, { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"No 💔\",\n \"Really? 🥺\",\n \"That feels illegal\",\n \"One more chance, honey\",\n \"The green button is the winning move 🟢\",\n \"Don't break my heart :(\",\n \"System suggests pressing green 😏\",\n \"Are you testing me? 😄\",\n \"Bold choice... but wrong one\",\n \"This is a red flag (literally)\",\n \"Green is lucky, you know 🍀\",\n \"Plot twist: green wins\",\n \"The algorithm is crying 😢\",\n \"Love.exe stopped working\",\n \"Mission failed, try green\",\n \"I believe in you — press green\",\n \"You were so close 😌\",\n \"Press green for good ending\",\n \"Red leads to side quest\",\n \"Main story is behind green\",\n \"Are you speedrunning rejection? 😭\",\n \"Okay but… what if green?\",\n];\n\nfunction randBetween(min: number, max: number) {\n return Math.random() * (max - min) + min;\n}\n\ntype Pos = { leftPct: number; topPct: number };\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n\n // 0 = first screen (Yes/No)\n // 1 = quiz intro\n // 2 = Who do you love? (5 taps)\n // 3 = Who do I love? (5 taps)\n // 4 = Love is... (random reveal)\n const [step, setStep] = useState<0 | 1 | 2 | 3 | 4>(0);\n\n const yesButtonSize = (noClicks * 20) + 16;\n\n const firstImg = \"https://i.imgur.com/t0tM440.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const bgFirst = \"https://i.imgur.com/4XXAus0.jpeg\";\n const bgSecond = \"https://i.imgur.com/f46ZpLo.png\";\n\n // Screen 2: Who do you love? (5 taps)\n const loveYouImages = useMemo(\n () => [\n \"https://i.imgur.com/B3aYXLp.jpeg\",\n \"https://i.imgur.com/wK7TUFK.jpeg\",\n \"https://i.imgur.com/ik8WolF.jpeg\",\n \"https://i.imgur.com/Jm0Mksi.png\",\n \"https://i.imgur.com/RXEt1jF.png\",\n ],\n [],\n );\n\n // Screen 3: Who do I love? (5 taps) — different images\n const loveMeImages = useMemo(\n () => [\n \"https://i.imgur.com/9Q9ZQ9Q.png\",\n \"https://i.imgur.com/4mQm4mQ.png\",\n \"https://i.imgur.com/7p7p7p7.png\",\n \"https://i.imgur.com/2k2k2k2.png\",\n \"https://i.imgur.com/5n5n5n5.png\",\n ],\n [],\n );\n\n const loveIsPool = useMemo(\n () => [\n {\n text: \"Love is choosing each other — again and again.\",\n img: \"https://i.imgur.com/6d7Qp8p.png\",\n },\n {\n text: \"Love is laughing at the same stupid joke.\",\n img: \"https://i.imgur.com/8aVQnYw.png\",\n },\n {\n text: \"Love is a safe place to land.\",\n img: \"https://i.imgur.com/2cY8mQn.png\",\n },\n {\n text: \"Love is small acts that mean everything.\",\n img: \"https://i.imgur.com/3wLkQ5t.png\",\n },\n {\n text: \"Love is being a team, not a battle.\",\n img: \"https://i.imgur.com/4pR9x2B.png\",\n },\n {\n text: \"Love is patience with a soft voice.\",\n img: \"https://i.imgur.com/5bT3nKQ.png\",\n },\n {\n text: \"Love is ‘I’m here’ — especially on hard days.\",\n img: \"https://i.imgur.com/7sH2mQp.png\",\n },\n {\n text: \"Love is the comfort of being understood.\",\n img: \"https://i.imgur.com/9uJ4kQe.png\",\n },\n {\n text: \"Love is the little adventures together.\",\n img: \"https://i.imgur.com/1xP7qQm.png\",\n },\n {\n text: \"Love is a home you build with someone.\",\n img: \"https://i.imgur.com/0zN6qQv.png\",\n },\n ],\n [],\n );\n\n // Tap-quest state\n const [tapIndex, setTapIndex] = useState(0);\n const [tapPos, setTapPos] = useState({ leftPct: 50, topPct: 35 });\n\n // Wider spread (more distance from edges + allow larger jumps)\n const randomTapPos = (): Pos => ({\n leftPct: randBetween(8, 92),\n topPct: randBetween(10, 78),\n });\n\n const resetTapQuest = () => {\n setTapIndex(0);\n setTapPos(randomTapPos());\n };\n\n const advanceTap = (imagesLen: number, nextStep: 3 | 4) => {\n setTapIndex((prev) => {\n const next = prev + 1;\n if (next >= imagesLen) {\n setStep(nextStep);\n if (nextStep === 3) resetTapQuest();\n return 0;\n }\n setTapPos(randomTapPos());\n return next;\n });\n };\n\n // Love is... reveal (now repeatable)\n const [loveIsPick, setLoveIsPick] = useState<\n { text: string; img: string } | null\n >(\n null,\n );\n\n const handleNo = () => setNoClicks((prev) => prev + 1);\n\n const handleYes = () => {\n setStep(1);\n setTapIndex(0);\n setLoveIsPick(null);\n };\n\n const startQuiz = () => {\n setStep(2);\n resetTapQuest();\n };\n\n const revealLoveIs = () => {\n const pick = loveIsPool[Math.floor(Math.random() * loveIsPool.length)];\n setLoveIsPick(pick);\n };\n\n const isValentine = step !== 0;\n\n return (\n \n {step === 0\n ? (\n <>\n \n\n \n Will you be my Valentine? 💘\n \n\n

\n \n Yes\n \n\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 {step === 1 && (\n <>\n \n Yay!!! 💖🎉 But quick quiz first\n \n\n \n Let's go\n \n \n )}\n\n {step === 2 && (\n <>\n \n Who do you love? 💘\n \n\n \n advanceTap(loveYouImages.length, 3)}\n style={{\n position: \"absolute\",\n left: `${tapPos.leftPct}%`,\n top: `${tapPos.topPct}%`,\n transform: \"translate(-50%, -50%)\",\n width: \"clamp(70px, 18vw, 130px)\",\n height: \"auto\",\n cursor: \"pointer\",\n filter: \"drop-shadow(0 12px 28px rgba(0,0,0,0.35))\",\n userSelect: \"none\",\n WebkitUserDrag: \"none\",\n }}\n />\n \n \n )}\n\n {step === 3 && (\n <>\n \n Who do I love? 💞\n \n\n \n advanceTap(loveMeImages.length, 4)}\n style={{\n position: \"absolute\",\n left: `${tapPos.leftPct}%`,\n top: `${tapPos.topPct}%`,\n transform: \"translate(-50%, -50%)\",\n width: \"clamp(70px, 18vw, 130px)\",\n height: \"auto\",\n cursor: \"pointer\",\n filter: \"drop-shadow(0 12px 28px rgba(0,0,0,0.35))\",\n userSelect: \"none\",\n WebkitUserDrag: \"none\",\n }}\n />\n \n \n )}\n\n {step === 4 && (\n <>\n \n Love is...\n \n\n \n Find out\n \n\n {loveIsPick && (\n \n \n \n {loveIsPick.text}\n \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(): 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}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst NO_PHRASES = [\n \"No 💔\",\n \"Really? 🥺\",\n \"That feels illegal\",\n \"One more chance, honey\",\n \"The green button is the winning move 🟢\",\n \"Don't break my heart :(\",\n \"System suggests pressing green 😏\",\n \"Are you testing me? 😄\",\n \"Bold choice... but wrong one\",\n \"This is a red flag (literally)\",\n \"Green is lucky, you know 🍀\",\n \"Plot twist: green wins\",\n \"The algorithm is crying 😢\",\n \"Love.exe stopped working\",\n \"Mission failed, try green\",\n \"I believe in you — press green\",\n \"You were so close 😌\",\n \"Press green for good ending\",\n \"Red leads to side quest\",\n \"Main story is behind green\",\n \"Are you speedrunning rejection? 😭\",\n \"Okay but… what if green?\",\n];\n\nfunction randBetween(min: number, max: number) {\n return Math.random() * (max - min) + min;\n}\n\ntype Pos = { leftPct: number; topPct: number };\n\nfunction App() {\n const [noClicks, setNoClicks] = useState(0);\n\n // 0 = first screen (Yes/No)\n // 1 = quiz intro\n // 2 = Who do you love? (5 taps)\n // 3 = Who do I love? (5 taps)\n // 4 = Love is... (random reveal)\n const [step, setStep] = useState<0 | 1 | 2 | 3 | 4>(0);\n\n const yesButtonSize = (noClicks * 20) + 16;\n\n const firstImg = \"https://i.imgur.com/t0tM440.gif\";\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n const bgFirst = \"https://i.imgur.com/4XXAus0.jpeg\";\n const bgSecond = \"https://i.imgur.com/f46ZpLo.png\";\n\n // Screen 2: Who do you love? (5 taps)\n const loveYouImages = useMemo(\n () => [\n \"https://i.imgur.com/B3aYXLp.png\",\n \"https://i.imgur.com/wK7TUFK.png\",\n \"https://i.imgur.com/ik8WolF.png\",\n \"https://i.imgur.com/Jm0Mksi.png\",\n \"https://i.imgur.com/RXEt1jF.png\",\n ],\n [],\n );\n\n // Screen 3: Who do I love? (5 taps) — different images\n const loveMeImages = useMemo(\n () => [\n \"https://i.imgur.com/9Q9ZQ9Q.png\",\n \"https://i.imgur.com/4mQm4mQ.png\",\n \"https://i.imgur.com/7p7p7p7.png\",\n \"https://i.imgur.com/2k2k2k2.png\",\n \"https://i.imgur.com/5n5n5n5.png\",\n ],\n [],\n );\n\n const loveIsPool = useMemo(\n () => [\n {\n text: \"Love is choosing each other — again and again.\",\n img: \"https://i.imgur.com/6d7Qp8p.png\",\n },\n {\n text: \"Love is laughing at the same stupid joke.\",\n img: \"https://i.imgur.com/8aVQnYw.png\",\n },\n {\n text: \"Love is a safe place to land.\",\n img: \"https://i.imgur.com/2cY8mQn.png\",\n },\n {\n text: \"Love is small acts that mean everything.\",\n img: \"https://i.imgur.com/3wLkQ5t.png\",\n },\n {\n text: \"Love is being a team, not a battle.\",\n img: \"https://i.imgur.com/4pR9x2B.png\",\n },\n {\n text: \"Love is patience with a soft voice.\",\n img: \"https://i.imgur.com/5bT3nKQ.png\",\n },\n {\n text: \"Love is ‘I’m here’ — especially on hard days.\",\n img: \"https://i.imgur.com/7sH2mQp.png\",\n },\n {\n text: \"Love is the comfort of being understood.\",\n img: \"https://i.imgur.com/9uJ4kQe.png\",\n },\n {\n text: \"Love is the little adventures together.\",\n img: \"https://i.imgur.com/1xP7qQm.png\",\n },\n {\n text: \"Love is a home you build with someone.\",\n img: \"https://i.imgur.com/0zN6qQv.png\",\n },\n ],\n [],\n );\n\n // Tap-quest state\n const [tapIndex, setTapIndex] = useState(0);\n const [tapPos, setTapPos] = useState({ leftPct: 50, topPct: 35 });\n\n // Wider spread (more distance from edges + allow larger jumps)\n const randomTapPos = (): Pos => ({\n leftPct: randBetween(8, 92),\n topPct: randBetween(10, 78),\n });\n\n const resetTapQuest = () => {\n setTapIndex(0);\n setTapPos(randomTapPos());\n };\n\n const advanceTap = (imagesLen: number, nextStep: 3 | 4) => {\n setTapIndex((prev) => {\n const next = prev + 1;\n if (next >= imagesLen) {\n setStep(nextStep);\n if (nextStep === 3) resetTapQuest();\n return 0;\n }\n setTapPos(randomTapPos());\n return next;\n });\n };\n\n // Love is... reveal (now repeatable)\n const [loveIsPick, setLoveIsPick] = useState<\n { text: string; img: string } | null\n >(\n null,\n );\n\n const handleNo = () => setNoClicks((prev) => prev + 1);\n\n const handleYes = () => {\n setStep(1);\n setTapIndex(0);\n setLoveIsPick(null);\n };\n\n const startQuiz = () => {\n setStep(2);\n resetTapQuest();\n };\n\n const revealLoveIs = () => {\n const pick = loveIsPool[Math.floor(Math.random() * loveIsPool.length)];\n setLoveIsPick(pick);\n };\n\n const isValentine = step !== 0;\n\n return (\n \n {step === 0\n ? (\n <>\n \n\n \n Will you be my Valentine? 💘\n \n\n

\n \n Yes\n \n\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 { headers: { \"content-type\": \"text/html\" } },\n );\n}","createdAt",["D",1770740742534],"branchVersion","branchId","43524576-05f2-11f1-b9fa-42dde27851f2","id","434c5dfa-05f2-11f1-b9fa-42dde27851f2","valentine2",["D",1770667349378],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c43f7-c56c-735d-89dc-ea26e9bf01f7","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c43f7-c56c-735d-89dc-ee51f49356e4","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","MariiaStepanova","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5UmxhaDA2Y1MyMjZOM2ZHVkJ1dTkxSWxDNyJ9","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},"24fef604-069d-11f1-96fa-42dde27851f2","parentId","latest",["D",1770740742534],47,"label",[28],"435661f6-05f2-11f1-b9fa-42dde27851f2","README.md","019c43ff-95fa-761d-8817-a9a49608e59a",1,["D",1770667349378],"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",1770740742534],"children",[],[28],["D",1770667349378],[],[150],["D",1770667349378],{"_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","fdb67791413f4386b4dbf18f354029a617f6160f","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 · v48