\n Το Ψηφιακό μας Σκυλάκι 🐾\n

\n\n {/* Στατιστικά (Μπάρες) */}\n

\n \n \n \n \n

\n\n {/* Κεντρική Οθόνη Παιχνιδιού */}\n \n {/* Μήνυμα Σκύλου */}\n

\n {message}\n

\n\n {/* Ακαθαρσίες */}\n {poops.map((p) => (\n

💩

\n ))}\n\n {/* --- INTERACTIVE MINI-GAMES RENDER --- */}\n {activeMiniGame === \"feed\" && (\n

\n \n 🍖\n \n

\n )}\n\n {activeMiniGame === \"play\" && (\n \n \n 🎾\n \n \n )}\n\n {activeMiniGame === \"potty\" && (\n

\n \n 🚪\n \n

\n )}\n\n {activeMiniGame === \"sleep_switch\" && (\n \n \n 💡\n \n \n )}\n\n {activeMiniGame === \"sleeping_active\" && (\n \n \n ☀️\n \n \n )}\n\n {/* Το Σκυλάκι */}\n

\n {/* Αν είναι χαρούμενο/κοιμάται, προσθέτουμε εφέ γύρω του! */}\n {stats.happiness > 80 && actionState === \"idle\" && (\n

💖

\n )}\n {activeMiniGame === \"sleeping_active\" && (\n

💤

\n )}\n\n

{petEmoji}

\n\n {/* Σκιά */}\n

\n\n {/* Κουμπιά Ελέγχου */}\n

\n {poops.length > 0\n ? (\n \n 🧹 Καθάρισε τα κακά!\n \n )\n : (\n <>\n \n 🍖 Τάισε\n \n \n 🎾 Παίξε\n \n \n 🚪 Βόλτα\n \n \n 💤 Ύπνος\n \n \n )}\n

\n \n );\n}\n\n// Υπο-component για τις μπάρες\nfunction StatBar(\n { label, value, color, inverted = false }: {\n label: string;\n value: number;\n color: string;\n inverted?: boolean;\n },\n) {\n return (\n

{label}

\n \n

\n );\n}\n\n// --- CSS Styles ---\nconst styles: { [key: string]: React.CSSProperties } = {\n page: {\n fontFamily: FONT_FAMILY,\n minHeight: \"100vh\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n padding: \"20px\",\n boxSizing: \"border-box\",\n userSelect: \"none\",\n WebkitUserSelect: \"none\",\n touchAction: \"manipulation\",\n },\n title: {\n fontSize: \"26px\",\n marginBottom: \"20px\",\n textShadow: \"0 2px 4px rgba(0,0,0,0.1)\",\n textAlign: \"center\",\n },\n\n statsGrid: {\n display: \"grid\",\n gridTemplateColumns: \"1fr 1fr\",\n gap: \"15px\",\n width: \"100%\",\n maxWidth: \"400px\",\n marginBottom: \"20px\",\n backgroundColor: \"rgba(255,255,255,0.5)\",\n padding: \"15px\",\n borderRadius: \"15px\",\n boxShadow: \"0 4px 6px rgba(0,0,0,0.05)\",\n },\n statItem: {\n display: \"flex\",\n flexDirection: \"column\",\n },\n statLabel: {\n fontSize: \"14px\",\n fontWeight: \"bold\",\n color: \"#475569\",\n marginBottom: \"5px\",\n },\n barBg: {\n height: \"12px\",\n backgroundColor: \"#e2e8f0\",\n borderRadius: \"6px\",\n overflow: \"hidden\",\n },\n barFill: {\n height: \"100%\",\n borderRadius: \"6px\",\n transition: \"width 0.3s ease, background-color 0.3s ease\",\n },\n\n gameScreen: {\n width: \"100%\",\n maxWidth: \"400px\",\n height: \"300px\",\n borderRadius: \"20px\",\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"flex-end\",\n paddingBottom: \"30px\",\n boxShadow: \"inset 0 0 20px rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.1)\",\n border: \"4px solid #cbd5e1\",\n overflow: \"hidden\",\n transition: \"background-color 1s ease\",\n },\n\n speechBubble: {\n position: \"absolute\",\n top: \"20px\",\n backgroundColor: \"rgba(255, 255, 255, 0.95)\",\n padding: \"10px 20px\",\n borderRadius: \"20px\",\n fontSize: \"15px\",\n fontWeight: \"bold\",\n color: \"#334155\",\n boxShadow: \"0 4px 10px rgba(0,0,0,0.1)\",\n zIndex: 5,\n border: \"2px solid #e2e8f0\",\n textAlign: \"center\",\n },\n\n interactiveItem: {\n position: \"absolute\",\n zIndex: 20,\n animation: \"breathe 1s infinite\",\n padding: \"10px\",\n },\n\n petContainer: {\n zIndex: 5,\n transformOrigin: \"bottom center\",\n position: \"relative\",\n },\n petEmoji: {\n fontSize: \"100px\",\n filter: \"drop-shadow(0 10px 10px rgba(0,0,0,0.2))\",\n },\n floatingHeart: {\n position: \"absolute\",\n top: \"-20px\",\n right: \"-20px\",\n fontSize: \"30px\",\n animation: \"floatUp 1.5s infinite\",\n },\n shadow: {\n width: \"80px\",\n height: \"15px\",\n backgroundColor: \"rgba(0,0,0,0.1)\",\n borderRadius: \"50%\",\n marginTop: \"5px\",\n zIndex: 1,\n },\n poop: {\n position: \"absolute\",\n bottom: \"20px\",\n fontSize: \"30px\",\n zIndex: 2,\n animation: \"popIn 0.3s ease-out\",\n },\n\n controls: {\n display: \"grid\",\n gridTemplateColumns: \"1fr 1fr\",\n gap: \"10px\",\n width: \"100%\",\n maxWidth: \"400px\",\n marginTop: \"20px\",\n },\n button: {\n padding: \"15px\",\n fontSize: \"16px\",\n fontWeight: \"bold\",\n backgroundColor: \"#fff\",\n border: \"2px solid #cbd5e1\",\n borderRadius: \"15px\",\n cursor: \"pointer\",\n boxShadow: \"0 4px 0 #cbd5e1\",\n transition: \"transform 0.1s, box-shadow 0.1s, opacity 0.3s\",\n fontFamily: FONT_FAMILY,\n color: \"#475569\",\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=Nunito:wght@700;900&display=swap');\n body { margin: 0; background-color: #f0fdf4; } \n \n button:active:not(:disabled) { \n transform: translateY(4px); \n box-shadow: 0 0 0 transparent !important; \n }\n button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* Animations */\n @keyframes breathe {\n 0%, 100% { transform: scale(1) translateY(0); }\n 50% { transform: scale(1.05) translateY(-5px); }\n }\n @keyframes bounce {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-20px); }\n }\n @keyframes jump {\n 0% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-30px) rotate(10deg); }\n 100% { transform: translateY(0) rotate(-10deg); }\n }\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-5px) rotate(-5deg); }\n 75% { transform: translateX(5px) rotate(5deg); }\n }\n @keyframes popIn {\n 0% { transform: scale(0); }\n 80% { transform: scale(1.2); }\n 100% { transform: scale(1); }\n }\n @keyframes floatUp {\n 0% { transform: translateY(0); opacity: 1; }\n 100% { transform: translateY(-30px); opacity: 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 \n `,\n { headers: { \"content-type\": \"text/html; charset=UTF-8\" } },\n );\n}","deleted","label",[62],"fde84568-4597-11f1-9532-42b51c65c3df","README.md","019de51e-2ab1-76b8-8643-62914436b90a",1,["D",1777665452647],"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.",[81],{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":93,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_90":94,"_18":95},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":89,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_90":91,"_18":92},["D",1777666052432],"children",[],[62],["D",1777665452647],[],[81],"fddba916-4597-11f1-9532-42b51c65c3df",["D",1777665452647],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","019c201a-c6d5-73df-9c72-e5a567918c20","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019c201a-c6d5-73df-9c72-eb12f876751d","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_138":134},"org",{"_11":12,"_132":-5,"_133":134,"_102":103,"_135":136,"_137":50},"branch",{"_17":69,"_13":16,"_35":67,"_41":96,"_44":36,"_45":43,"_129":52,"_130":42,"_131":56,"_57":14,"_53":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM5ODYyMzhDV3h6QnVKc2dNaFN0akxjMUJSaCJ9","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":96,"_13":14,"_37":182,"_48":-5,"_98":50,"_51":52,"_99":52,"_100":-5,"_101":-5,"_102":103,"_104":64,"_105":71,"_106":-5,"_107":-5,"_108":33,"_55":109,"_110":-5,"_111":-5,"_112":-5,"_113":-5,"_114":115,"_116":115,"_117":118,"_119":118,"_120":118,"_121":115,"_122":115,"_123":183,"_125":184,"_127":185,"_49":50},[176,177],"files",[176,177],"counts",{"_167":33,"_168":83,"_169":33,"_34":170,"_171":172},[163,164],"upstreamProject",{"_35":42,"_13":58,"_100":-5,"_101":-5,"_51":52,"_123":161},"upstreamBranch",{"_35":36,"_37":159,"_39":160,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746230157507],["D",1739338420215],{"_11":54,"_138":162},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaWlEbWhXRTJ3Y3kwcTR0VjZYZEdyYmZFZVkifQ",{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":84,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_18":166},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":72,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_18":165},[62],[81],"pulls","branches","forks",{"_173":33,"_175":33},"connections",{"_173":33,"_174":33},"count","unfilledCount","emptyCount",{"_35":80,"_13":81,"_63":82,"_65":-5,"_66":67,"_68":83,"_70":71,"_37":93,"_17":33,"_73":24,"_75":85,"_77":50,"_78":-5,"_90":180,"_18":181},{"_35":61,"_13":62,"_63":64,"_65":-5,"_66":67,"_68":69,"_70":71,"_37":89,"_17":31,"_73":74,"_75":76,"_77":50,"_78":-5,"_90":178,"_18":179},[],[62],[],[81],["D",1777665452647],{"_11":12,"_138":134},{"_11":12,"_132":-5,"_133":134,"_102":103,"_135":136,"_137":50},{"_17":69,"_13":16,"_35":67,"_41":96,"_44":36,"_45":43,"_129":52,"_130":42,"_131":56,"_57":14,"_53":12},"ctx",{"_123":-5,"_156":219,"_220":221,"_222":223,"_224":50,"_225":50,"_226":50,"_227":71,"_228":-5,"_229":-7,"_230":-7,"_231":33,"_232":50,"_233":50,"_234":-5,"_235":50,"_236":50,"_237":50,"_238":-5},"ENV",{"_190":191,"_192":193,"_194":16,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Code