Shared Cat Care Game

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_176":177,"_178":179},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_101":84,"_27":36,"_13":14,"_102":-5,"_11":103,"_104":105,"_106":107,"_108":109,"_110":111,"_20":-5,"_112":-5,"_113":-5,"_114":25,"_115":116,"_117":25,"_118":-5,"_119":-5,"_120":121},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",12,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","index.tsx","latestPath","fileId","0f68d3fa-33ac-11f1-9c0e-42b51c65c3df","name","fileType","script","content","","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useMemo,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\nfunction clamp(value: number, min = 0, max = 100) {\n return Math.max(min, Math.min(max, value));\n}\n\ntype CareAction = \"feed\" | \"shower\" | \"pat\" | \"play\" | \"rest\";\n\nfunction App() {\n const [catName, setCatName] = useState(\"Mochi\");\n const [draftName, setDraftName] = useState(\"Mochi\");\n const [caretakers, setCaretakers] = useState(\"Ethan & Amal\");\n\n const [hunger, setHunger] = useState(78);\n const [cleanliness, setCleanliness] = useState(74);\n const [happiness, setHappiness] = useState(84);\n const [energy, setEnergy] = useState(69);\n const [lastAction, setLastAction] = useState(null);\n const [logs, setLogs] = useState([\n \"Your cat arrived warm, safe, and curious.\",\n \"Take care of it together.\",\n ]);\n\n useEffect(() => {\n const saved = localStorage.getItem(\"shared-cat-save\");\n if (!saved) return;\n const data = JSON.parse(saved);\n\n setCatName(data.catName ?? \"Mochi\");\n setDraftName(data.catName ?? \"Mochi\");\n setCaretakers(data.caretakers ?? \"Ethan & Amal\");\n setHunger(data.hunger ?? 78);\n setCleanliness(data.cleanliness ?? 74);\n setHappiness(data.happiness ?? 84);\n setEnergy(data.energy ?? 69);\n setLogs(\n data.logs ?? [\n \"Your cat arrived warm, safe, and curious.\",\n \"Take care of it together.\",\n ],\n );\n }, []);\n\n useEffect(() => {\n localStorage.setItem(\n \"shared-cat-save\",\n JSON.stringify({\n catName,\n caretakers,\n hunger,\n cleanliness,\n happiness,\n energy,\n logs,\n }),\n );\n }, [catName, caretakers, hunger, cleanliness, happiness, energy, logs]);\n\n useEffect(() => {\n const timer = setInterval(() => {\n setHunger((v) => clamp(v - 2));\n setCleanliness((v) => clamp(v - 1));\n setHappiness((v) => clamp(v - 1));\n setEnergy((v) => clamp(v - 1));\n }, 6000);\n\n return () => clearInterval(timer);\n }, []);\n\n const mood = useMemo(() => {\n const avg = (hunger + cleanliness + happiness + energy) / 4;\n if (avg >= 85) {\n return {\n label: \"Thriving\",\n text: \"Your cat feels safe, loved, and spoiled.\",\n };\n }\n if (avg >= 70) {\n return { label: \"Content\", text: \"Your cat is doing really well.\" };\n }\n if (avg >= 50) {\n return {\n label: \"Okay\",\n text: \"Your cat is alright, but needs more attention.\",\n };\n }\n if (avg >= 30) {\n return { label: \"Needy\", text: \"Your cat wants care right now.\" };\n }\n return { label: \"Unhappy\", text: \"Your cat needs urgent love.\" };\n }, [hunger, cleanliness, happiness, energy]);\n\n const catFace = useMemo(() => {\n if (mood.label === \"Thriving\") return \"(=^･ω･^=)\";\n if (mood.label === \"Content\") return \"(=^･^=)\";\n if (mood.label === \"Okay\") return \"(=•.•=)\";\n if (mood.label === \"Needy\") return \"(= ; ;=)\";\n return \"(=ＴェＴ=)\";\n }, [mood.label]);\n\n function addLog(text: string) {\n setLogs((prev) => [text, ...prev].slice(0, 8));\n }\n\n function doAction(action: CareAction) {\n setLastAction(action);\n\n if (action === \"feed\") {\n setHunger((v) => clamp(v + 18));\n setEnergy((v) => clamp(v + 5));\n addLog(\n `${caretakers} fed ${catName}. Tiny happy chewing noises followed.`,\n );\n }\n\n if (action === \"shower\") {\n setCleanliness((v) => clamp(v + 22));\n setHappiness((v) => clamp(v - 4));\n addLog(`${catName} got a warm shower. Slight betrayal. Very clean now.`);\n }\n\n if (action === \"pat\") {\n setHappiness((v) => clamp(v + 16));\n setEnergy((v) => clamp(v + 2));\n addLog(`${caretakers} patted ${catName}. Purring level increased.`);\n }\n\n if (action === \"play\") {\n setHappiness((v) => clamp(v + 14));\n setEnergy((v) => clamp(v - 10));\n setCleanliness((v) => clamp(v - 3));\n addLog(`${catName} chased a toy around and looked proud after.`);\n }\n\n if (action === \"rest\") {\n setEnergy((v) => clamp(v + 20));\n setHappiness((v) => clamp(v + 4));\n addLog(`${catName} curled up and took a peaceful nap.`);\n }\n }\n\n return (\n

\n \n

✨ Shared Cat Care Game

\n \n Take care of your cat together\n \n

\n A simple modern cat game where you and Amal can feed, shower, pat,\n play with, and name your shared little cat.\n

\n\n

\n \n Mood\n

\n {mood.label}\n

{mood.text}

\n\n

\n Caretakers\n

\n setCaretakers(e.target.value)}\n style={{\n ...inputStyle,\n marginTop: 8,\n background: \"rgba(255,255,255,0.06)\",\n color: \"white\",\n border: \"1px solid rgba(255,255,255,0.1)\",\n }}\n />\n

\n\n \n

\n \n

🐾 {catName}

\n Indoor Cat\n

\n\n \n \n

🐈

\n \n {catFace}\n \n

\n A clean, cozy, modern little cat room.\n

\n \n {lastAction\n ? `Last action: ${lastAction}`\n : \"Waiting for care\"}\n \n \n \n\n \n \n \n \n \n \n \n\n

Name your cat

\n setDraftName(e.target.value)}\n style={inputStyle}\n placeholder=\"Enter cat name\"\n />\n {\n const trimmed = draftName.trim();\n if (!trimmed) return;\n setCatName(trimmed);\n addLog(`Your cat is now named ${trimmed}.`);\n }}\n >\n Save\n \n

\n\n

Care actions

\n \n \n \n \n \n doAction(\"rest\")}\n >\n Let the cat nap\n \n

\n\n

Activity log

\n {logs.map((log, i) => (\n \n {log}\n

\n ))}\n

\n \n \n \n \n \n );\n}\n\nfunction Stat(\n { label, value, emoji }: { label: string; value: number; emoji: string },\n) {\n return (\n \n \n {emoji} {label}\n {value}%\n \n \n \n \n \n );\n}\n\nconst card: React.CSSProperties = {\n background: \"rgba(255,255,255,0.78)\",\n backdropFilter: \"blur(10px)\",\n borderRadius: 30,\n boxShadow: \"0 20px 50px rgba(15,23,42,0.08)\",\n padding: 22,\n};\n\nconst pill: React.CSSProperties = {\n display: \"inline-block\",\n padding: \"8px 14px\",\n borderRadius: 999,\n background: \"#eef2ff\",\n color: \"#475569\",\n fontSize: 13,\n fontWeight: 600,\n};\n\nconst inputStyle: React.CSSProperties = {\n width: \"100%\",\n padding: \"12px 14px\",\n borderRadius: 16,\n border: \"1px solid #dbe3ef\",\n outline: \"none\",\n fontSize: 15,\n background: \"white\",\n color: \"#0f172a\",\n};\n\nconst buttonStyle: React.CSSProperties = {\n padding: \"12px 16px\",\n borderRadius: 16,\n border: \"none\",\n background: \"#0f172a\",\n color: \"white\",\n fontSize: 15,\n fontWeight: 600,\n cursor: \"pointer\",\n};\n\ncreateRoot(document.getElementById(\"root\")!).render();","createdAt",["D",1775695025637],"branchVersion","branchId","4a0d74ea-33aa-11f1-97c8-42b51c65c3df","id","4a0cae84-33aa-11f1-97c8-42b51c65c3df","untitled-6272",["D",1775694190499],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","61721e65-40b6-45c8-885f-776e6578358d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d6f9d-f34e-7149-bf57-292642ffd597","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_100":36},"org",{"_94":93,"_95":-5,"_96":36,"_18":54,"_97":98,"_99":25},"branch",{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned",24,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","ethansalve990_b86130e2","handle","displayName","avatar","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":172,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":173,"_78":174,"_80":175,"_82":25},"tree",[159,160,161],"files",[159,160,161],"counts",{"_148":60,"_149":150,"_151":60,"_152":153,"_154":155},"contents",[122,123,124],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":140,"_32":141,"_30":142,"_128":-5,"_41":42,"_40":143,"_130":25,"_38":144,"_13":145,"_33":20,"_35":146,"_24":25,"_134":-5,"_27":147},{"_43":136,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_130":25,"_38":137,"_13":138,"_33":34,"_35":37,"_24":25,"_134":-5,"_27":139},{"_43":125,"_32":126,"_30":127,"_128":-5,"_41":42,"_40":129,"_130":25,"_38":131,"_13":132,"_33":34,"_35":133,"_24":25,"_134":-5,"_27":135},"21e4a216-33ac-11f1-aecc-42b51c65c3df","main.http.tsx","4a0fc5a6-33aa-11f1-97c8-42b51c65c3df","parentId",10,"latest",["D",1775694982108],4,"import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default staticHTTPServer(import.meta.url);","label",[126],"3bd69044-33ac-11f1-a4aa-42b51c65c3df",["D",1775695025637],2,[28],"2a8dae08-33ac-11f1-8235-42b51c65c3df","index.html","c94c3010-33ab-11f1-a397-42b51c65c3df",11,["D",1775694996638],3,"\n\n \n \n \n Shared Cat Care Game\n \n \n \n

\n \n \n",[141],"pulls","branches",1,"forks","envVars",{"_156":60,"_158":60},"connections",{"_156":60,"_157":60},"count","unfilledCount","emptyCount",{"_43":140,"_32":141,"_30":142,"_128":-5,"_41":42,"_40":143,"_130":25,"_38":169,"_13":145,"_33":20,"_35":146,"_24":25,"_134":-5,"_163":170,"_27":171},{"_43":136,"_32":28,"_30":31,"_128":-5,"_41":42,"_40":14,"_130":25,"_38":166,"_13":138,"_33":34,"_35":37,"_24":25,"_134":-5,"_163":167,"_27":168},{"_43":125,"_32":126,"_30":127,"_128":-5,"_41":42,"_40":129,"_130":25,"_38":162,"_13":132,"_33":34,"_35":133,"_24":25,"_134":-5,"_163":164,"_27":165},["D",1775694982108],"children",[],[126],["D",1775695025637],[],[28],["D",1775694996638],[],[141],["D",1775694190499],{"_94":93,"_100":36},{"_94":93,"_95":-5,"_96":36,"_18":54,"_97":98,"_99":25},{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_76":-5,"_119":209,"_210":211,"_212":213,"_214":25,"_215":25,"_216":25,"_217":218,"_219":-5,"_220":-7,"_221":-7,"_222":60,"_223":25,"_224":25,"_225":-5,"_226":25,"_227":25,"_228":25,"_229":-5},"ENV",{"_180":181,"_182":183,"_184":84,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208},"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",true,"preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v12