\n {row.map((cell, colIndex) => {\n if (cell === 0) {\n return (\n

\n );\n }\n const isDown = pinsDown[pinIndex];\n const key = `pin-${pinIndex}`;\n pinIndex++;\n return (\n \n {PIN_EMOJI}\n

\n );\n })}\n

\n ));\n };\n\n return (\n

Strike στην καρδιά μου 💖

\n Αύριο στο bowling μπορεί να νικήσω αλλά μπορεί και να χάσω. Σίγουρα\n όμως θα βγω κερδισμένος γιατί σε έχω στη ζωή μου!
\n (Γύρος: {frame} / 3)\n

\n\n {/* --- Responsive GAME AREA (Bowling Alley) --- */}\n \n

\n {renderPins()}\n

\n\n {/* 1. START SCREEN */}\n {gameState === \"START\" && (\n

Strike στην καρδιά μου 💖

\n Πάτησε το κουμπί για να ρίξεις την 'Μπάλα της Αγάπης' ❤️.
\n
\n Πρέπει να πετύχεις 3 Strikes{\" \"}\n για να ξεκλειδώσεις τον 'Τέλειο Αγώνα' της καρδιάς μου!\n

\n setGameState(\"PLAYING\")}\n style={styles.button}\n >\n Έναρξη 1ου Γύρου ✨\n \n

\n )}\n\n {/* 2. WON SCREEN (The Reward) */}\n {gameState === \"WON\" && (\n

🎉✨💖🏆✨🎉

{FINAL_LOVE_LETTER.title}

{FINAL_LOVE_LETTER.body}

\n )}\n\n {/* Μπάλα Bowling */}\n

🔴

❤️

\n\n {/* Μηνύματα Strike (Μετακινήθηκαν ΜΕΣΑ στον διάδρομο για να μην πέφτουν στο κουμπί!) */}\n {showStrikeMessage && gameState !== \"WON\" && (\n

{showStrikeMessage}

\n )}\n

\n\n {/* Κουμπί Ρίψης */}\n {gameState === \"PLAYING\" && frame < 3 && (\n \n {ballRolling ? \"Ρίχνει...\" : \"ΡΙΞΕ ΤΗ ΜΠΑΛΑ ❤️\"}\n \n )}\n \n );\n}\n\n// --- CSS Styles (In JavaScript) ---\nconst styles: { [key: string]: React.CSSProperties } = {\n page: {\n fontFamily: FONT_FAMILY,\n backgroundColor: \"#fff5f5\",\n minHeight: \"100vh\",\n width: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n margin: 0,\n userSelect: \"none\",\n },\n header: { textAlign: \"center\", padding: \"10px\", width: \"100%\" },\n mainTitle: {\n fontSize: \"24px\",\n color: BASE_COLOR,\n margin: \"0 0 10px 0\",\n fontWeight: \"700\",\n },\n subtitle: {\n fontSize: \"13px\",\n color: \"#666\",\n lineHeight: \"1.5\",\n margin: 0,\n fontStyle: \"italic\",\n padding: \"0 10px\",\n },\n\n alleyContainer: {\n position: \"relative\",\n width: \"90%\",\n maxWidth: \"400px\",\n height: \"55vh\",\n backgroundColor: \"#fff\",\n backgroundImage:\n \"linear-gradient(rgba(226,232,240,0.5) 2px, transparent 2px)\",\n backgroundSize: \"20px 20px\",\n boxShadow: \"0 10px 30px rgba(214, 51, 132, 0.15)\",\n borderRadius: \"20px\",\n overflow: \"hidden\",\n touchAction: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"flex-start\",\n paddingTop: \"30px\",\n boxSizing: \"border-box\",\n },\n\n pinArea: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: \"8px\",\n zIndex: 2,\n },\n pinRow: { display: \"flex\", gap: \"10px\", justifyContent: \"center\" },\n pin: {\n fontSize: \"26px\",\n transition: \"all 0.4s ease-in-out\",\n transformOrigin: \"bottom center\",\n },\n pinEmpty: { width: \"26px\" },\n\n ballContainer: {\n position: \"absolute\",\n bottom: \"20px\",\n left: \"50%\",\n transform: \"translateX(-50%)\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n zIndex: 5,\n transition: \"transform 2s ease-in-out, scale 2s ease-in-out\",\n },\n ball: {\n fontSize: \"40px\",\n filter: \"drop-shadow(0px 5px 10px rgba(0,0,0,0.2))\",\n },\n ballHeart: {\n fontSize: \"12px\",\n color: \"#fff\",\n position: \"absolute\",\n zIndex: 6,\n transform: \"translateY(-5px)\",\n },\n\n overlay: {\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"rgba(255,255,255,0.95)\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n zIndex: 10,\n padding: \"20px\",\n boxSizing: \"border-box\",\n textAlign: \"center\",\n },\n gameTitle: { fontSize: \"28px\", color: BASE_COLOR, marginBottom: \"15px\" },\n instructions: {\n fontSize: \"14px\",\n color: \"#555\",\n lineHeight: \"1.6\",\n marginBottom: \"30px\",\n },\n button: {\n padding: \"12px 25px\",\n fontSize: \"16px\",\n backgroundColor: BASE_COLOR,\n color: \"white\",\n border: \"none\",\n borderRadius: \"50px\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n fontFamily: FONT_FAMILY,\n boxShadow: \"0 5px 15px rgba(214, 51, 132, 0.3)\",\n transition: \"transform 0.2s\",\n },\n\n confetti: {\n fontSize: \"35px\",\n marginBottom: \"15px\",\n animation: \"bounce 2s infinite\",\n },\n loveLetterCard: {\n backgroundColor: \"#fff0f6\",\n padding: \"20px\",\n borderRadius: \"15px\",\n boxShadow: \"0 10px 25px rgba(214, 51, 132, 0.1)\",\n border: `2px solid ${BASE_COLOR}`,\n textAlign: \"center\",\n maxWidth: \"320px\",\n maxHeight: \"75vh\",\n overflowY: \"auto\",\n },\n successTitle: { fontSize: \"18px\", color: \"#e11d48\", marginBottom: \"10px\" },\n loveText: {\n fontSize: \"14px\",\n lineHeight: \"1.6\",\n color: \"#4a4a4a\",\n margin: 0,\n fontStyle: \"italic\",\n },\n\n strikeCard: {\n position: \"absolute\",\n bottom: \"30%\", // Τοποθετημένο ψηλά, ακριβώς στη μέση του διαδρόμου!\n left: \"50%\",\n transform: \"translateX(-50%)\",\n backgroundColor: \"white\",\n padding: \"10px 20px\",\n borderRadius: \"15px\",\n boxShadow: \"0 10px 25px rgba(214, 51, 132, 0.2)\",\n border: `2px solid ${BASE_COLOR}`,\n zIndex: 15,\n animation: \"fadeInUp 0.5s ease-out forwards\",\n width: \"80%\",\n textAlign: \"center\",\n },\n strikeText: {\n fontSize: \"14px\",\n color: BASE_COLOR,\n fontWeight: \"bold\",\n margin: 0,\n },\n\n throwButton: {\n marginTop: \"15px\",\n padding: \"12px 30px\",\n fontSize: \"16px\",\n backgroundColor: \"#ec4899\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"50px\",\n cursor: \"pointer\",\n fontWeight: \"bold\",\n fontFamily: FONT_FAMILY,\n boxShadow: \"0 5px 15px rgba(214, 51, 132, 0.2)\",\n transition: \"transform 0.2s\",\n },\n};\n\n// --- Client / Server Setup ---\nfunction client() {\n const styleSheet = document.createElement(\"style\");\n styleSheet.type = \"text/css\";\n styleSheet.innerText = `\n @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&display=swap');\n body { margin: 0; display: block; min-height: 100vh; } \n #root { display: block; width: 100%; min-height: 100vh; }\n button:hover { transform: scale(1.05); }\n button:active { transform: scale(0.95); }\n button:disabled { opacity: 0.6; cursor: not-allowed; transform: scale(1) !important; }\n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-10px); }\n }\n @keyframes fadeInUp {\n 0% { opacity: 0; transform: translate(-50%, 20px); }\n 100% { opacity: 1; transform: translate(-50%, 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 Strike στην Καρδιά 💖\n \n \n \n \n

\n \n \n \n `,\n { headers: { \"content-type\": \"text/html; charset=UTF-8\" } },\n );\n}","label",[84],"88e57d5e-2edf-11f1-b1f4-42dde27851f2",["D",1775167303300],"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.",[74],"pulls","branches","forks","envVars",{"_80":20,"_223":20},"connections",{"_80":20,"_222":20},"unfilledCount","emptyCount",{"_32":211,"_13":74,"_72":73,"_42":-5,"_34":35,"_204":39,"_205":130,"_36":230,"_38":20,"_75":53,"_207":213,"_76":24,"_209":-5,"_227":231,"_168":232},{"_32":203,"_13":84,"_72":83,"_42":-5,"_34":35,"_204":115,"_205":130,"_36":226,"_38":108,"_75":85,"_207":208,"_76":24,"_209":-5,"_227":228,"_168":229},["D",1775168309907],"children",[],[84],["D",1775167303300],[],[74],["D",1775167303300],{"_11":12,"_167":79},{"_11":12,"_163":-5,"_78":79,"_25":77,"_164":165,"_166":24},{"_38":115,"_13":16,"_32":35,"_153":120,"_154":69,"_155":70,"_156":124,"_157":158,"_159":160,"_161":14,"_162":12},"ctx",{"_51":-5,"_189":270,"_271":272,"_273":274,"_275":24,"_276":24,"_277":24,"_278":130,"_279":-5,"_280":-7,"_281":-7,"_282":20,"_283":24,"_284":24,"_285":-5,"_286":24,"_287":24,"_288":24,"_289":-5},"ENV",{"_241":242,"_243":244,"_245":16,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269},"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"]

History