💝

\n \n Hey Beautiful ✨\n \n \n I've created something special just for you...\n

\n \n Before I ask you something important, let's take a little journey\n through our memories together 💕\n

\n e.target.style.transform = \"scale(1.05)\"}\n onMouseOut={(e) => e.target.style.transform = \"scale(1)\"}\n >\n Let's Begin 💖\n \n \n \n );\n}\n\nfunction PuzzlePage({ puzzle, puzzleNumber, totalPuzzles, onSolve }) {\n const [answer, setAnswer] = useState(\"\");\n const [attempts, setAttempts] = useState(0);\n const [hint, setHint] = useState(\"\");\n const [showOkieee, setShowOkieee] = useState(false);\n\n const handleSubmit = (e) => {\n e.preventDefault();\n\n // For open-ended questions, just show \"okieee\" page\n if (puzzle.type === \"open\") {\n if (answer.trim().length > 0) {\n setShowOkieee(true);\n }\n return;\n }\n\n // For regular questions with answers\n if (answer.toLowerCase().trim() === puzzle.answer.toLowerCase()) {\n onSolve();\n } else {\n setAttempts((prev) => prev + 1);\n if (attempts === 2) {\n setHint(puzzle.hint1);\n } else if (attempts >= 4) {\n setHint(puzzle.hint2);\n }\n }\n };\n\n const progress = (puzzleNumber / totalPuzzles) * 100;\n\n // Show \"okieee\" confirmation page for open-ended questions\n if (showOkieee) {\n return (\n \n \n

🥰

\n \n okieee 💕\n \n e.target.style.transform = \"scale(1.05)\"}\n onMouseOut={(e) => e.target.style.transform = \"scale(1)\"}\n >\n Next ✨\n \n \n \n \n );\n }\n\n return (\n \n \n

\n Question {puzzleNumber} of {totalPuzzles}\n

\n \n \n

\n \n\n \n 💭 Memory Lane\n \n\n \n {puzzle.question}\n \n\n

\n {puzzle.type === \"open\"\n ? (\n setAnswer(e.target.value)}\n placeholder=\"Share your thoughts... 💭\"\n rows={5}\n style={{\n width: \"100%\",\n padding: \"18px\",\n fontSize: \"16px\",\n border: \"2px solid #ddd\",\n borderRadius: \"12px\",\n marginBottom: \"20px\",\n boxSizing: \"border-box\",\n fontFamily: \"Arial, sans-serif\",\n resize: \"vertical\",\n }}\n />\n )\n : (\n setAnswer(e.target.value)}\n placeholder=\"Type your answer here...\"\n style={{\n width: \"100%\",\n padding: \"18px\",\n fontSize: \"16px\",\n border: \"2px solid #ddd\",\n borderRadius: \"12px\",\n marginBottom: \"20px\",\n boxSizing: \"border-box\",\n }}\n />\n )}\n e.target.style.transform = \"scale(1.02)\"}\n onMouseOut={(e) => e.target.style.transform = \"scale(1)\"}\n >\n {puzzle.type === \"open\" ? \"Continue 💕\" : \"Submit Answer 💝\"}\n \n \n\n {hint && puzzle.type !== \"open\" && (\n \n 💡 {hint}\n \n )}\n\n {attempts > 0 && !hint && puzzle.type !== \"open\" && (\n

\n Not quite... but you're doing amazing! 💕\n

\n )}\n \n \n );\n}\n\nfunction MemoryPage({ memory, onNext, memoryNumber, totalMemories }) {\n return (\n \n \n

\n {memory.emoji}\n

\n \n \"{memory.text}\"\n

\n e.target.style.transform = \"scale(1.05)\"}\n onMouseOut={(e) => e.target.style.transform = \"scale(1)\"}\n >\n {memoryNumber < totalMemories ? \"Continue 💕\" : \"Next ✨\"}\n \n \n \n );\n}\n\nfunction TransitionPage({ onContinue }) {\n const [dots, setDots] = useState(\".\");\n\n React.useEffect(() => {\n const interval = setInterval(() => {\n setDots((prev) => prev.length >= 3 ? \".\" : prev + \".\");\n }, 500);\n return () => clearInterval(interval);\n }, []);\n\n return (\n \n \n

💌

\n \n I have a question to ask you{dots}\n \n \n Thank you for going through this journey with me. Every moment we've\n shared has been precious, and I want to make even more beautiful\n memories with you 💕\n

\n e.target.style.transform = \"scale(1.05)\"}\n onMouseOut={(e) => e.target.style.transform = \"scale(1)\"}\n >\n I'm Ready 💖\n \n \n \n \n );\n}\n\nfunction ValentinePage({ onYes, onNo, noClicks, yesButtonSize }) {\n const firstImg =\n \"https://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n\n return (\n \n $\"Cute$ \n

\n Will you be my Valentine? 💘\n

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

\n \n );\n}\n\nfunction SuccessPage() {\n const secondImg =\n \"https://media.tenor.com/f1xnRxTRxLAAAAAj/bears-with-kisses-bg.gif\";\n\n return (\n \n $\"Happy$ \n \n Yay!!! 💖🎉\n \n

\n You just made me the happiest person alive! 🥰\n

\n \n );\n}\n\nfunction App() {\n const [stage, setStage] = useState(\"welcome\"); // welcome, puzzle, memory, transition, valentine, success\n const [currentPuzzle, setCurrentPuzzle] = useState(0);\n const [currentMemory, setCurrentMemory] = useState(0);\n const [noClicks, setNoClicks] = useState(0);\n const yesButtonSize = (noClicks * 20) + 16;\n\n const handleStart = () => {\n setStage(\"puzzle\");\n };\n\n const handlePuzzleSolve = () => {\n if (currentPuzzle < PUZZLES.length - 1) {\n setCurrentPuzzle((prev) => prev + 1);\n } else {\n setStage(\"memory\");\n }\n };\n\n const handleMemoryNext = () => {\n if (currentMemory < MEMORIES.length - 1) {\n setCurrentMemory((prev) => prev + 1);\n } else {\n setStage(\"transition\");\n }\n };\n\n const handleTransitionContinue = () => {\n setStage(\"valentine\");\n };\n\n const handleNo = () => {\n setNoClicks((prev) => prev + 1);\n };\n\n const handleYes = () => {\n setStage(\"success\");\n };\n\n if (stage === \"welcome\") {\n return ;\n }\n\n if (stage === \"puzzle\") {\n return (\n \n );\n }\n\n if (stage === \"memory\") {\n return (\n \n );\n }\n\n if (stage === \"transition\") {\n return ;\n }\n\n if (stage === \"valentine\") {\n return (\n \n );\n }\n\n return ;\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 A Special Question ✨\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"content-type\": \"text/html\" },\n },\n );\n}","label","children",[72],"contentHash","e93339086b008477c43094805787a5eb86ebae4db55a1ab3c4e0dfa01d285e0c","98a4b9bc-0225-11f1-ad46-42dde27851f2","019c2b19-1dec-70d8-b16c-ef2bbb6247b3",["D",1770249592192],"/** @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];\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://media.tenor.com/VIChDQ6ejRQAAAAj/jumping-bear-hearts-no-png.gif\";\n const secondImg = \"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 return (\n \n {!isValentine\n ? (\n <>\n

Will you be my Valentine? 💘

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

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

\n \n Yay!!! 💖🎉\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 headers: { \"content-type\": \"text/html\" },\n },\n );\n}",[72],"219db6de0cde9d99ab623850153b424bf310bc4ca153e580028ccbf8fe9f9954",["D",1770249622614],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","019c2b18-3f3e-704e-a124-3ffa979c47c5","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_136":132},"org",{"_11":12,"_130":-5,"_131":132,"_105":106,"_133":134,"_135":50},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zOUU3bHp4Y0s5NkNPQlI3S2tNaTBMM09laFcifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":60,"_13":14,"_34":191,"_48":-5,"_101":50,"_51":52,"_102":52,"_103":-5,"_104":-5,"_105":106,"_107":79,"_108":26,"_109":-5,"_110":-5,"_111":41,"_54":55,"_112":-5,"_113":-5,"_114":-5,"_115":-5,"_116":117,"_118":117,"_119":120,"_121":120,"_122":120,"_123":117,"_124":117,"_125":192,"_127":193,"_129":194,"_49":50},"tree",[184,185],"files",[184,185],"counts",{"_174":22,"_175":41,"_176":22,"_177":178,"_179":180},"contents",[164,165],"file","upstreamProject",{"_32":39,"_13":57,"_103":-5,"_104":-5,"_51":52,"_125":163},"upstreamBranch",{"_32":33,"_34":161,"_36":162,"_13":16,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":12,"_54":55,"_56":57},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1770249592192],["D",1770249592192],{"_11":12,"_136":132},{"_32":168,"_13":169,"_78":170,"_80":-5,"_81":59,"_82":41,"_83":26,"_34":171,"_40":22,"_85":148,"_87":172,"_66":50,"_89":-5,"_71":173},{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":59,"_82":58,"_83":26,"_34":166,"_40":20,"_85":86,"_87":88,"_66":50,"_89":-5,"_71":167},["D",1770421834517],[72],"aaba84b0-0225-11f1-a80d-42dde27851f2","README.md","019c2b19-9477-74aa-b72a-2a162860abef",["D",1770249622614],"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.",[169],"pulls","branches","forks","envVars",{"_181":22,"_183":22},"connections",{"_181":22,"_182":22},"count","unfilledCount","emptyCount",{"_32":168,"_13":169,"_78":170,"_80":-5,"_81":59,"_82":41,"_83":26,"_34":188,"_40":22,"_85":148,"_87":172,"_66":50,"_89":-5,"_90":189,"_71":190},{"_32":77,"_13":72,"_78":79,"_80":-5,"_81":59,"_82":58,"_83":26,"_34":84,"_40":20,"_85":86,"_87":88,"_66":50,"_89":-5,"_90":186,"_71":187},[],[72],["D",1770249622614],[],[169],["D",1770249622614],{"_11":12,"_136":132},{"_11":12,"_130":-5,"_131":132,"_105":106,"_133":134,"_135":50},{"_40":58,"_13":16,"_32":59,"_38":60,"_42":33,"_44":41,"_61":52,"_62":39,"_63":55,"_56":14,"_53":12},"ctx",{"_125":-5,"_158":228,"_229":230,"_231":232,"_233":50,"_234":50,"_235":50,"_236":26,"_237":-5,"_238":-7,"_239":-7,"_240":22,"_241":50,"_242":50,"_243":-5,"_244":50,"_245":50,"_246":50,"_247":-5},"ENV",{"_199":200,"_201":202,"_203":16,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227},"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"]

Compare

MergeaskVal/mainintovalentine/main

Hmain.tsx+699-63