🐟 AI Memory Fish Tank

\nClick a fish to interact — they remember you. Type an idea and add a new fish.\n

\n \n \n

\n\n\n`;\n","label",[61],"ff5f2950-ccb8-4b46-be01-53b7b40587e9",["D",1781859085491],"const canvas = document.getElementById(\"tank\");\nconst ctx = canvas.getContext(\"2d\");\nconst log = document.getElementById(\"log\");\n\nlet fishList = []; // server data\nlet sprites = []; // animated positions keyed to fish ids\n\nfunction resize() {\n canvas.width = canvas.clientWidth;\n canvas.height = canvas.clientHeight;\n}\nwindow.addEventListener(\"resize\", resize);\nresize();\n\nfunction logMsg(name, text) {\n const div = document.createElement(\"div\");\n div.innerHTML = `${name}: ${text}`;\n log.prepend(div);\n}\n\nfunction syncSprites() {\n for (const f of fishList) {\n if (!sprites.find((s) => s.id === f.id)) {\n sprites.push({\n id: f.id,\n x: Math.random() * canvas.width,\n y: 60 + Math.random() * (canvas.height - 120),\n vx: (Math.random() < 0.5 ? -1 : 1) * (0.6 + Math.random()),\n vy: (Math.random() - 0.5) * 0.4,\n size: 18 + Math.random() * 16,\n color: f.color,\n name: f.name,\n wiggle: Math.random() * Math.PI * 2,\n flash: 0,\n });\n }\n }\n sprites = sprites.filter((s) => fishList.find((f) => f.id === s.id));\n}\n\nfunction drawFish(s) {\n s.wiggle += 0.2;\n const dir = s.vx >= 0 ? 1 : -1;\n ctx.save();\n ctx.translate(s.x, s.y);\n ctx.scale(dir, 1);\n const tail = Math.sin(s.wiggle) * s.size * 0.4;\n\n // glow when recently interacted\n if (s.flash > 0) {\n ctx.shadowColor = s.color;\n ctx.shadowBlur = 25 * s.flash;\n s.flash -= 0.02;\n }\n\n // body\n ctx.fillStyle = s.color;\n ctx.beginPath();\n ctx.ellipse(0, 0, s.size, s.size * 0.6, 0, 0, Math.PI * 2);\n ctx.fill();\n // tail\n ctx.beginPath();\n ctx.moveTo(-s.size, 0);\n ctx.lineTo(-s.size - s.size * 0.7, -s.size * 0.5 + tail);\n ctx.lineTo(-s.size - s.size * 0.7, s.size * 0.5 + tail);\n ctx.closePath();\n ctx.fill();\n // eye\n ctx.shadowBlur = 0;\n ctx.fillStyle = \"#fff\";\n ctx.beginPath();\n ctx.arc(s.size * 0.5, -s.size * 0.15, s.size * 0.18, 0, Math.PI * 2);\n ctx.fill();\n ctx.fillStyle = \"#02131f\";\n ctx.beginPath();\n ctx.arc(s.size * 0.55, -s.size * 0.15, s.size * 0.08, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n\n // name label\n ctx.fillStyle = \"rgba(255,255,255,0.7)\";\n ctx.font = \"12px system-ui\";\n ctx.textAlign = \"center\";\n ctx.fillText(s.name, s.x, s.y - s.size - 6);\n}\n\nconst bubbles = Array.from({ length: 30 }, () => ({\n x: Math.random() * 1000,\n y: Math.random() * 1000,\n r: 1 + Math.random() * 3,\n s: 0.3 + Math.random() * 0.8,\n}));\n\nfunction tick() {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n\n // bubbles\n ctx.fillStyle = \"rgba(255,255,255,0.15)\";\n for (const b of bubbles) {\n b.y -= b.s;\n if (b.y < 0) { b.y = canvas.height; b.x = Math.random() * canvas.width; }\n ctx.beginPath();\n ctx.arc(b.x % canvas.width, b.y, b.r, 0, Math.PI * 2);\n ctx.fill();\n }\n\n for (const s of sprites) {\n s.x += s.vx;\n s.y += s.vy;\n if (s.x < 40 || s.x > canvas.width - 40) s.vx *= -1;\n if (s.y < 50 || s.y > canvas.height - 30) s.vy *= -1;\n if (Math.random() < 0.01) s.vy = (Math.random() - 0.5) * 0.6;\n drawFish(s);\n }\n requestAnimationFrame(tick);\n}\n\ncanvas.addEventListener(\"click\", async (e) => {\n const rect = canvas.getBoundingClientRect();\n const mx = e.clientX - rect.left, my = e.clientY - rect.top;\n const hit = sprites.find((s) => Math.hypot(s.x - mx, s.y - my) < s.size + 14);\n if (!hit) return;\n hit.flash = 1;\n logMsg(hit.name, \"thinking…\");\n try {\n const r = await fetch(\"/api/interact\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ id: hit.id, note: \"the visitor tapped on the glass to say hi\" }),\n });\n const data = await r.json();\n log.firstChild?.remove();\n logMsg(hit.name, data.reply || \"*blub*\");\n } catch {\n log.firstChild?.remove();\n logMsg(hit.name, \"*blub* (couldn't reach the AI)\");\n }\n});\n\ndocument.getElementById(\"add\").addEventListener(\"click\", async () => {\n const input = document.getElementById(\"prompt\");\n const prompt = input.value.trim() || \"a magical fish\";\n input.value = \"\";\n logMsg(\"Tank\", \"hatching a new fish…\");\n const r = await fetch(\"/api/spawn\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt }),\n });\n const f = await r.json();\n fishList.push(f);\n syncSprites();\n log.firstChild?.remove();\n logMsg(\"Tank\", `🐣 ${f.name} the ${f.species} appeared! ${f.personality}`);\n});\n\nasync function init() {\n const r = await fetch(\"/api/tank\");\n fishList = await r.json();\n if (fishList.length === 0) {\n // seed one fish so the tank isn't empty\n const sr = await fetch(\"/api/spawn\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ prompt: \"a friendly welcoming starter fish\" }),\n });\n fishList = [await sr.json()];\n }\n syncSprites();\n logMsg(\"Tank\", \"Welcome! Click any fish to chat — they'll remember you.\");\n tick();\n}\ninit();\n",[76],"38d13047-ff5a-4ca9-840f-6d9338cd2a3f",["D",1781859117306],"import { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\n// Serves the browser-side fish tank script as static JavaScript.\nexport default async function (req: Request): Promise {\n const js = await readFile(\"/client.js\", import.meta.url);\n return new Response(js, {\n headers: {\n \"Content-Type\": \"text/javascript; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n}\n",[86],"pulls","branches","forks","envVars",{"_184":20,"_186":20},"connections",{"_184":20,"_185":20},"count","unfilledCount","emptyCount",{"_29":173,"_13":86,"_59":85,"_39":-5,"_31":32,"_162":80,"_163":99,"_33":197,"_35":20,"_62":63,"_165":175,"_64":24,"_167":-5,"_191":198,"_136":199},{"_29":169,"_13":76,"_59":75,"_39":-5,"_31":32,"_162":70,"_163":99,"_33":194,"_35":20,"_62":77,"_165":171,"_64":24,"_167":-5,"_191":195,"_136":196},{"_29":161,"_13":61,"_59":60,"_39":-5,"_31":32,"_162":36,"_163":99,"_33":190,"_35":20,"_62":63,"_165":166,"_64":24,"_167":-5,"_191":192,"_136":193},["D",1781859060388],"children",[],[61],["D",1781859085491],[],[76],["D",1781859117306],[],[86],["D",1781859029479],{"_11":12,"_135":67},{"_11":12,"_130":131,"_66":67,"_25":65,"_132":133,"_134":24},{"_35":80,"_13":16,"_29":32,"_122":87,"_123":-5,"_124":-5,"_125":-5,"_126":-5,"_127":-5,"_128":14,"_129":12},"ctx",{"_48":-5,"_155":237,"_238":239,"_240":241,"_242":24,"_243":24,"_244":24,"_245":99,"_246":-5,"_247":-7,"_248":-7,"_249":20,"_250":24,"_251":24,"_252":-5,"_253":24,"_254":24,"_255":24,"_256":-5},"ENV",{"_208":209,"_210":211,"_212":16,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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