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 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}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, {\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\n// --- Configuration & Content ---\nconst FONT_FAMILY = \"'Courier New', Courier, monospace\"; // Μινιμαλιστική γραμματοσειρά\nconst FINAL_MESSAGE =\n \"Αυτός είναι ο κήπος μας. Κάθε λουλούδι είναι μια σκέψη μου για εσένα, κάθε ανθός μια στιγμή μας. Δες πόσο όμορφα ανθίζει η αγάπη μας. Σ' αγαπώ.\";\n\n// --- Types ---\ninterface Plant {\n id: number;\n word: string;\n x: number;\n y: number;\n hue: number;\n stemHeight: number;\n petalCount: number;\n growth: number; // 0 to 1, για το animation ανάπτυξης\n chaos: number; // Μικρή τυχαιότητα για φυσικότητα\n}\n\n// --- Helpers ---\n\n// Μια απλή συνάρτηση hashing για να μετατρέψουμε μια λέξη σε έναν σταθερό αριθμό\n// Αυτό εξασφαλίζει ότι η ίδια λέξη θα παράγει πάντα το ίδιο λουλούδι (DNA)\nconst hashString = (str: string): number => {\n let hash = 0;\n if (str.length === 0) return hash;\n for (let i = 0; i < str.length; i++) {\n const char = str.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash |= 0; // Convert to 32bit integer\n }\n return Math.abs(hash);\n};\n\nfunction App() {\n const [inputText, setInputText] = useState(\"\");\n const [plants, setPlants] = useState([]);\n const canvasRef = useRef(null);\n const animationFrameId = useRef();\n const [time, setTime] = useState(0); // Χρόνος για το sway animation\n\n // Καθαρισμός του input text\n const cleanedInput = useMemo(() => inputText.trim().toUpperCase(), [\n inputText,\n ]);\n\n // Διαχείριση της φύτευσης\n const handlePlant = () => {\n if (cleanedInput.length === 0) return;\n\n const hash = hashString(cleanedInput);\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n // Καθορισμός \"γονιδίων\" του φυτού με βάση το hash (DNA)\n const newPlant: Plant = {\n id: Date.now(),\n word: cleanedInput,\n // Τυχαία θέση στο έδαφος (κάτω 1/3 του canvas)\n x: 50 + Math.random() * (canvas.width - 100),\n y: canvas.height - 20 - Math.random() * 40,\n\n // Χρώμα: hash % 360 (Hue στο HSL) -> εξασφαλίζει ποικιλία\n hue: hash % 360,\n\n // Ύψος μίσχου: Εξαρτάται από το μήκος της λέξης (50-150px)\n stemHeight: Math.min(150, 50 + cleanedInput.length * 10),\n\n // Αριθμός πετάλων: hash % 6 + 5 (5 έως 10 πέταλα)\n petalCount: 5 + (hash % 6),\n\n growth: 0, // Ξεκινάει από το 0 για το animation\n chaos: (hash % 100) / 100, // Μικρή τυχαιότητα (0-1)\n };\n\n setPlants((prev) => [...prev, newPlant]);\n setInputText(\"\"); // Καθαρισμός input\n };\n\n // --- Canvas Drawing Logic ---\n const drawBackground = (\n ctx: CanvasRenderingContext2D,\n width: number,\n height: number,\n ) => {\n // Ουρανός (Gradient)\n const skyGradient = ctx.createLinearGradient(0, 0, 0, height);\n skyGradient.addColorStop(0, \"#fdf2f8\"); // Pink 50\n skyGradient.addColorStop(1, \"#fff5f5\"); // Red 50\n ctx.fillStyle = skyGradient;\n ctx.fillRect(0, 0, width, height);\n\n // Έδαφος (Χώμα)\n ctx.fillStyle = \"#a16207\"; // Yellow 700\n ctx.beginPath();\n ctx.ellipse(width / 2, height, width * 0.8, 80, 0, 0, Math.PI, true);\n ctx.fill();\n };\n\n const drawPlant = (\n ctx: CanvasRenderingContext2D,\n plant: Plant,\n time: number,\n ) => {\n const { x, y, hue, stemHeight, petalCount, growth, chaos } = plant;\n if (growth < 0.1) return; // Μην ζωγραφίζεις αν δεν έχει μεγαλώσει καθόλου\n\n ctx.save();\n ctx.translate(x, y);\n\n // Εφέ λικνίσματος (Sway animation) με βάση το χρόνο\n const swayFactor = Math.sin(time * 0.002 + chaos * Math.PI * 2) * 5 *\n growth;\n ctx.rotate(swayFactor * (Math.PI / 180)); // Μετατροπή σε ακτίνια\n\n // --- 1. Ζωγραφική Μίσχου (Stem) ---\n ctx.strokeStyle = `hsl(120, 50%, ${30 + chaos * 10}%)`; // Πράσινο\n ctx.lineWidth = 3 * growth;\n ctx.beginPath();\n ctx.moveTo(0, 0);\n // Καμπύλη Bezier για φυσικό σχήμα μίσχου\n ctx.bezierCurveTo(\n 10 * chaos,\n -stemHeight * 0.3 * growth,\n -10 * chaos,\n -stemHeight * 0.6 * growth,\n 0,\n -stemHeight * growth,\n );\n ctx.stroke();\n\n // --- 2. Ζωγραφική Φύλλων ---\n ctx.fillStyle = `hsl(120, 60%, ${25 + chaos * 10}%)`;\n for (let i = 1; i <= 2; i++) {\n const leafY = -stemHeight * 0.3 * i * growth;\n const leafSide = (i % 2 === 0 ? 1 : -1) + (chaos * 0.2 - 0.1);\n ctx.beginPath();\n ctx.ellipse(\n 5 * leafSide * growth,\n leafY,\n 15 * growth,\n 6 * growth,\n (45 * leafSide + swayFactor) * (Math.PI / 180),\n 0,\n Math.PI * 2,\n );\n ctx.fill();\n }\n\n // --- 3. Ζωγραφική Λουλουδιού (Head) ---\n ctx.translate(0, -stemHeight * growth);\n\n // Κέντρο Λουλουδιού\n ctx.fillStyle = `hsl(45, 80%, ${50 + chaos * 10}%)`; // Κίτρινο/Πορτοκαλί\n ctx.beginPath();\n ctx.arc(0, 0, 8 * growth, 0, Math.PI * 2);\n ctx.fill();\n\n // Πέταλα\n ctx.fillStyle = `hsl(${hue}, 90%, ${60 + chaos * 10}%)`; // Το \"έξυπνο\" χρώμα\n for (let i = 0; i < petalCount; i++) {\n ctx.save();\n // Περιστροφή για κάθε πέταλο\n ctx.rotate(\n (i / petalCount) * Math.PI * 2 + swayFactor * 0.2 * (Math.PI / 180),\n );\n\n ctx.beginPath();\n //Procedural σχήμα πετάλου (ellipse)\n ctx.ellipse(15 * growth, 0, 12 * growth, 5 * growth, 0, 0, Math.PI * 2);\n ctx.fill();\n\n // Μικρή γραμμή στο πέταλο για λεπτομέρεια\n ctx.strokeStyle = `hsl(${hue}, 90%, 40%)`;\n ctx.lineWidth = 0.5;\n ctx.beginPath();\n ctx.moveTo(5 * growth, 0);\n ctx.lineTo(20 * growth, 0);\n ctx.stroke();\n ctx.restore();\n }\n\n // Ζωγραφική της λέξης πάνω από το λουλούδι (προαιρετικό, αλλά δείχνει το logic)\n if (plant.id === plants[plants.length - 1].id) {\n ctx.fillStyle = \"rgba(0,0,0,0.5)\";\n ctx.font = `10px ${FONT_FAMILY}`;\n ctx.textAlign = \"center\";\n ctx.fillText(plant.word, 0, -25 * growth);\n }\n\n ctx.restore();\n };\n\n // --- Animation Loop ---\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n // Responsive: Ρύθμιση διαστάσεων Canvas\n const updateCanvasSize = () => {\n canvas.width = window.innerWidth * 0.9;\n canvas.height = window.innerHeight * 0.6;\n };\n updateCanvasSize();\n window.addEventListener(\"resize\", updateCanvasSize);\n\n const animate = (timestamp: number) => {\n setTime(timestamp); // Ενημέρωση χρόνου για το sway animation\n\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n drawBackground(ctx, canvas.width, canvas.height);\n\n // Ενημέρωση και ζωγραφική κάθε φυτού\n setPlants((prev) => {\n const updatedPlants = prev.map((p) => {\n // Animation ανάπτυξης (Growth)\n if (p.growth < 1) {\n return { ...p, growth: Math.min(1, p.growth + 0.01) };\n }\n return p;\n });\n\n // Ζωγραφική\n updatedPlants.forEach((p) => drawPlant(ctx, p, timestamp));\n return updatedPlants;\n });\n\n animationFrameId.current = requestAnimationFrame(animate);\n };\n\n animationFrameId.current = requestAnimationFrame(animate);\n\n return () => {\n if (animationFrameId.current) {\n cancelAnimationFrame(animationFrameId.current);\n }\n window.removeEventListener(\"resize\", updateCanvasSize);\n };\n }, []); // Run once on mount\n\n return (\n

Ο Κήπος των Συναισθημάτων μας

\n Γράψε μια σκέψη ή συναίσθημα για εμάς και δες το να ανθίζει...\n

\n\n

\n setInputText(e.target.value)}\n placeholder=\"π.χ. ΑΓΑΠΗ, ΕΥΤΥΧΙΑ, ΤΟ ΓΕΛΙΟ ΣΟΥ\"\n style={styles.input}\n maxLength={20}\n />\n \n

\n\n {plants.length >= 3 && (\n \n )}\n

\n );\n}\n\n// --- CSS Styles (In JavaScript) ---\nconst styles: { [key: string]: React.CSSProperties } = {\n container: {\n fontFamily: FONT_FAMILY,\n color: \"#4a4a4a\",\n margin: 0,\n padding: 0,\n minHeight: \"100vh\",\n backgroundColor: \"#fff5f5\", // Red 50\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n },\n header: {\n textAlign: \"center\",\n padding: \"40px 20px\",\n width: \"100%\",\n maxWidth: \"800px\",\n },\n title: {\n fontSize: \"32px\",\n color: \"#d63384\", // Deep pink\n margin: \"0 0 10px 0\",\n fontWeight: \"700\",\n letterSpacing: \"2px\",\n textTransform: \"uppercase\",\n },\n subtitle: {\n fontSize: \"16px\",\n color: \"#888\",\n margin: 0,\n fontStyle: \"italic\",\n },\n main: {\n width: \"90%\",\n maxWidth: \"1000px\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: \"20px\",\n flex: 1,\n },\n canvas: {\n background: \"#fff\",\n borderRadius: \"20px\",\n boxShadow: \"0 10px 30px rgba(214, 51, 132, 0.1)\",\n border: \"2px solid rgba(214, 51, 132, 0.05)\",\n cursor: \"default\",\n },\n controls: {\n display: \"flex\",\n gap: \"10px\",\n width: \"100%\",\n maxWidth: \"500px\",\n padding: \"10px\",\n background: \"rgba(255,255,255,0.8)\",\n borderRadius: \"50px\",\n backdropFilter: \"blur(5px)\",\n boxShadow: \"0 4px 15px rgba(0,0,0,0.05)\",\n },\n input: {\n flex: 1,\n padding: \"12px 20px\",\n fontSize: \"16px\",\n border: \"1px solid #ddd\",\n borderRadius: \"50px\",\n outline: \"none\",\n fontFamily: FONT_FAMILY,\n textTransform: \"uppercase\",\n },\n button: {\n padding: \"12px 24px\",\n fontSize: \"16px\",\n backgroundColor: \"#d63384\", // Deep pink\n color: \"white\",\n border: \"none\",\n borderRadius: \"50px\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n fontFamily: FONT_FAMILY,\n transition: \"all 0.3s\",\n boxShadow: \"0 4px 10px rgba(214, 51, 132, 0.3)\",\n },\n footer: {\n textAlign: \"center\",\n padding: \"40px 20px\",\n width: \"100%\",\n maxWidth: \"700px\",\n marginTop: \"auto\",\n },\n finalText: {\n fontSize: \"16px\",\n color: \"#555\",\n lineHeight: \"1.8\",\n fontStyle: \"italic\",\n background: \"#fff\",\n padding: \"20px\",\n borderRadius: \"15px\",\n boxShadow: \"0 5px 15px rgba(0,0,0,0.05)\",\n animation: \"fadeInUp 1s ease-out forwards\",\n },\n};\n\n// --- Client/Server Setup & Global Styles ---\nfunction client() {\n // Προσθήκη CSS animations στο head\n const styleSheet = document.createElement(\"style\");\n styleSheet.type = \"text/css\";\n styleSheet.innerText = `\n body { margin: 0; }\n button:hover { background-color: #bc2a72 !important; transform: scale(1.05); }\n button:active { transform: scale(0.95); }\n \n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n `;\n document.head.appendChild(styleSheet);\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 Ο Κήπος των Συναισθημάτων μας ✨🌸\n \n \n \n

\n \n \n \n `,\n { headers: { \"content-type\": \"text/html\" } },\n );\n}","createdAt",["D",1774201327940],"branchVersion","branchId","661a1c16-2616-11f1-85e9-42dde27851f2","id","66126c5a-2616-11f1-85e9-42dde27851f2","Garden",["D",1774201306750],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019c201a-c6d5-73df-9c72-e5a567918c20","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c201a-c6d5-73df-9c72-eb12f876751d","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",3,"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","alexandrosgalazoulas96","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5ODYyMzhDV3h6QnVKc2dNaFN0akxjMUJSaCJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":174,"_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":175,"_79":176,"_81":177,"_83":25},"tree",[165,166],"files",[165,166],"counts",{"_155":61,"_156":146,"_157":61,"_158":159,"_160":161},"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":146,"_144":57,"_38":152,"_13":61,"_33":20,"_35":153,"_24":25,"_147":-5,"_27":154},{"_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},"72ae97f4-2616-11f1-b17a-42dde27851f2","parentId","latest",["D",1774201327940],1,"label",[28],"661f81b0-2616-11f1-85e9-42dde27851f2","README.md","019d16a3-7f42-727a-8a39-2be376c975c0",["D",1774201306750],"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",{"_162":61,"_164":61},"connections",{"_162":61,"_163":61},"count","unfilledCount","emptyCount",{"_43":149,"_32":150,"_30":151,"_143":-5,"_41":42,"_40":146,"_144":57,"_38":171,"_13":61,"_33":20,"_35":153,"_24":25,"_147":-5,"_168":172,"_27":173},{"_43":142,"_32":28,"_30":31,"_143":-5,"_41":42,"_40":14,"_144":25,"_38":167,"_13":146,"_33":34,"_35":37,"_24":25,"_147":-5,"_168":169,"_27":170},["D",1774201327940],"children",[],[28],["D",1774201306750],[],[150],["D",1774201306750],{"_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":211,"_212":213,"_214":215,"_216":25,"_217":25,"_218":25,"_219":57,"_220":-5,"_221":-7,"_222":-7,"_223":61,"_224":25,"_225":25,"_226":-5,"_227":25,"_228":25,"_229":25,"_230":-5},"ENV",{"_182":183,"_184":185,"_186":85,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210},"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 · v2