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