Ο Δικός σου Αστερισμός ✨

\n {/* --- Background: Twinkling Stars --- */}\n

\n {[...Array(50)].map((_, i) => (\n \n ))}\n

\n\n {/* --- Interactive Constellation Layer (SVG) --- */}\n \n {/* Σχεδίαση Γραμμών */}\n {!isFinished ? renderLines(points) : renderFinalHeartLines()}\n\n {/* Σχεδίαση Αστεριών (Circles) */}\n {points.map((p, i) => {\n // Αν έχει τελειώσει, παίρνει τη θέση από targetHeartPoints, αλλιώς την τρέχουσα\n const target = isFinished ? targetHeartPoints[i] : p;\n return (\n \n );\n })}\n \n\n {/* --- UI Elements --- */}\n {/* Αρχικές οδηγίες */}\n {!isFinished && points.length < 3 && (\n

\n Άγγιξε την οθόνη για να δημιουργήσεις τον δικό σου αστερισμό...\n ✨
\n (Χρειάζεσαι τουλάχιστον 3 αστέρια)\n

\n )}\n\n {/* Κουμπί Ολοκλήρωσης */}\n {!isFinished && points.length >= 3 && (\n setIsFinished(true)}\n >\n Ολοκλήρωση Αστερισμού 🪄\n \n )}\n\n {/* Τελικό Μήνυμα & Εφέ */}\n {showFinishedUI && (\n

💖

{FINAL_MESSAGE}

\n )}\n

\n );\n}\n\n// --- CSS Styles (In JavaScript) ---\nconst styles: { [key: string]: React.CSSProperties } = {\n container: {\n width: \"100vw\",\n height: \"100vh\",\n backgroundColor: \"#030712\", // Πολύ σκούρο μπλε/μαύρο\n color: \"#fff\",\n fontFamily: \"'Courier New', Courier, monospace\", // \"Terminal\" style font\n overflow: \"hidden\",\n position: \"relative\",\n userSelect: \"none\",\n touchAction: \"none\",\n },\n svgLayer: {\n position: \"absolute\",\n top: 0,\n left: 0,\n zIndex: 10,\n cursor: \"crosshair\",\n },\n\n // Background Stars\n starsBg: { position: \"absolute\", width: \"100%\", height: \"100%\", zIndex: 1 },\n staticStar: {\n position: \"absolute\",\n width: \"2px\",\n height: \"2px\",\n backgroundColor: \"#fff\",\n borderRadius: \"50%\",\n opacity: 0.3,\n animation: \"twinkle 3s infinite ease-in-out\",\n },\n\n // UI Elements\n instruction: {\n position: \"absolute\",\n bottom: \"10%\",\n left: \"50%\",\n transform: \"translateX(-50%)\",\n textAlign: \"center\",\n width: \"80%\",\n color: \"rgba(255,255,255,0.7)\",\n fontSize: \"14px\",\n zIndex: 20,\n pointerEvents: \"none\",\n },\n finishBtn: {\n position: \"absolute\",\n bottom: \"5%\",\n right: \"5%\",\n padding: \"12px 24px\",\n backgroundColor: \"rgba(255,255,255,0.1)\",\n color: \"#fff\",\n border: \"1px solid rgba(255,255,255,0.3)\",\n borderRadius: \"50px\",\n cursor: \"pointer\",\n fontSize: \"14px\",\n zIndex: 20,\n transition: \"all 0.3s\",\n boxShadow: \"0 4px 15px rgba(0,0,0,0.2)\",\n },\n\n // Final State\n finalOverlay: {\n position: \"absolute\",\n top: 0,\n left: 0,\n width: \"100%\",\n height: \"100%\",\n backgroundColor: \"rgba(0,0,0,0.7)\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n zIndex: 30,\n animation: \"fadeIn 1s ease-in-out\",\n },\n finalCard: {\n backgroundColor: \"rgba(255, 255, 255, 0.1)\",\n backdropFilter: \"blur(10px)\",\n padding: \"2rem\",\n borderRadius: \"2rem\",\n textAlign: \"center\",\n maxWidth: \"80%\",\n border: `1px solid ${HEART_COLOR}`,\n boxShadow: `0 0 20px rgba(255, 77, 109, 0.3)`,\n },\n heartEmoji: {\n fontSize: \"50px\",\n marginBottom: \"1rem\",\n animation: \"heartBeat 1.5s infinite\",\n },\n finalText: { fontSize: \"18px\", lineHeight: \"1.6\", color: \"#fff\", margin: 0 },\n};\n\n// --- Client / Server Setup (Val Town) ---\nfunction client() {\n // Προσθήκη CSS animations στο head\n const styleSheet = document.createElement(\"style\");\n styleSheet.type = \"text/css\";\n styleSheet.innerText = `\n @keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.7; } }\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n @keyframes heartBeat {\n 0% { transform: scale(1); }\n 14% { transform: scale(1.1); }\n 28% { transform: scale(1); }\n 42% { transform: scale(1.1); }\n 70% { transform: scale(1); }\n }\n button:hover { backgroundColor: rgba(255,255,255,0.2); transform: scale(1.05); }\n button:active { transform: scale(0.95); }\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}","deleted","label",[103],"permalink","https://www.val.town/x/alexandrosgalazoulas96/G/code/main.tsx","extension","actionData","errors"]