💝

\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}","deleted","label",[100],"permalink","https://www.val.town/x/deltar/askVal/code/main.tsx","extension","actionData","errors"]