\n \n \n \n\n",[],[90,122],"88ceb9ca-5680-11f1-ad78-ee650bb23af1","favicon.svg","019e53ec-d349-7646-9450-132e38c5c2e6",["D",1779524547616],"\n\n",[],[90,129],"6680d7c2-5680-11f1-ab0b-ee650bb23af1","components","019e53ec-d349-7646-9450-0c610207137f",["D",1779524490014],[141,142,143],[90,136],{"_35":160,"_13":161,"_64":162,"_66":137,"_67":68,"_69":163,"_71":72,"_37":164,"_17":74,"_75":117,"_77":165,"_79":50,"_80":-5,"_100":166,"_18":167},{"_35":152,"_13":153,"_64":154,"_66":137,"_67":68,"_69":155,"_71":72,"_37":156,"_17":93,"_75":117,"_77":157,"_79":50,"_80":-5,"_100":158,"_18":159},{"_35":144,"_13":145,"_64":146,"_66":137,"_67":68,"_69":147,"_71":72,"_37":148,"_17":93,"_75":117,"_77":149,"_79":50,"_80":-5,"_100":150,"_18":151},"7a7cd4ce-5680-11f1-ab0b-ee650bb23af1","JoinScreen.tsx","7a7cd5be-5680-11f1-ab0b-ee650bb23af1",5,["D",1779524523587],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function JoinScreen({ onJoin }: { onJoin: (name: string) => void }) {\n const [name, setName] = useState(\"\");\n\n const handleSubmit = (e: Event) => {\n e.preventDefault();\n const trimmed = name.trim();\n if (trimmed.length > 0 && trimmed.length <= 30) {\n onJoin(trimmed);\n }\n };\n\n return (\n

💬

Real-Time Chat

Enter a username to join the conversation

\n );\n}\n",[],[90,136,145],"855874f2-5680-11f1-ad78-ee650bb23af1","ChatRoom.tsx","855875a6-5680-11f1-ad78-ee650bb23af1",6,["D",1779524541809],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface Message {\n id: number;\n username: string;\n content: string;\n created_at: string;\n}\n\nexport function ChatRoom({ username, onLeave }: { username: string; onLeave: () => void }) {\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [sending, setSending] = useState(false);\n const bottomRef = useRef(null);\n const lastIdRef = useRef(0);\n\n // Scroll to bottom\n const scrollToBottom = useCallback(() => {\n bottomRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, []);\n\n // Load initial messages\n useEffect(() => {\n fetch(\"/api/messages\")\n .then((r) => r.json())\n .then((msgs: Message[]) => {\n setMessages(msgs);\n if (msgs.length > 0) {\n lastIdRef.current = msgs[msgs.length - 1].id;\n }\n setTimeout(scrollToBottom, 100);\n });\n }, []);\n\n // Poll for new messages every 1.5s\n useEffect(() => {\n const interval = setInterval(async () => {\n try {\n const res = await fetch(`/api/messages?after=${lastIdRef.current}`);\n const newMsgs: Message[] = await res.json();\n if (newMsgs.length > 0) {\n lastIdRef.current = newMsgs[newMsgs.length - 1].id;\n setMessages((prev) => [...prev, ...newMsgs]);\n setTimeout(scrollToBottom, 100);\n }\n } catch {}\n }, 1500);\n return () => clearInterval(interval);\n }, [scrollToBottom]);\n\n const sendMessage = async (e: Event) => {\n e.preventDefault();\n const content = input.trim();\n if (!content || sending) return;\n\n setSending(true);\n setInput(\"\");\n try {\n await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, content }),\n });\n } catch (err) {\n console.error(\"Failed to send:\", err);\n setInput(content);\n } finally {\n setSending(false);\n }\n };\n\n const formatTime = (dateStr: string) => {\n const d = new Date(dateStr + \"Z\");\n return d.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n };\n\n // Generate consistent color from username\n const getColor = (name: string) => {\n const colors = [\n \"text-blue-400\", \"text-green-400\", \"text-yellow-400\", \"text-pink-400\",\n \"text-purple-400\", \"text-cyan-400\", \"text-orange-400\", \"text-red-400\",\n ];\n let hash = 0;\n for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);\n return colors[Math.abs(hash) % colors.length];\n };\n\n return (\n

\n {/* Header */}\n

\n 💬\n

Chat Room

\n \n Logged in as {username}\n \n \n Leave\n \n

\n\n {/* Messages */}\n

\n {messages.length === 0 && (\n

🎉

No messages yet. Say hello!

\n )}\n {messages.map((msg) => {\n const isMe = msg.username === username;\n return (\n

\n {!isMe && (\n

\n {msg.username}\n

\n )}\n

{msg.content}

\n {formatTime(msg.created_at)}\n

\n );\n })}\n

\n\n {/* Input */}\n

\n );\n}\n",[],[90,136,153],"74d59f38-5680-11f1-ab0b-ee650bb23af1","App.tsx","019e53ec-d349-7646-9450-0588b658e5b6",4,["D",1779524514097],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { JoinScreen } from \"./JoinScreen.tsx\";\nimport { ChatRoom } from \"./ChatRoom.tsx\";\n\nexport function App() {\n const [username, setUsername] = useState(null);\n\n if (!username) {\n return ;\n }\n\n return setUsername(null)} />;\n}\n",[],[90,136,161],"66797a04-5680-11f1-ab0b-ee650bb23af1",["D",1779524490014],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","503383bb-44d6-4aa6-a014-21f330fe6e5b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e53b7-d26f-77df-a9a5-b27ea7159f07","tursoName","66797a04568011f1ab0bee650bb23af1","tursoHostname","66797a04568011f1ab0bee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789469441210],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_216":212},"org",{"_11":12,"_209":210,"_211":212,"_175":176,"_213":214,"_215":50},"branch",{"_17":85,"_13":16,"_35":68,"_41":168,"_44":36,"_45":205,"_206":52,"_207":42,"_208":56,"_57":14,"_53":12},88,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Ümid Mustafayev","avatar","https://lh3.googleusercontent.com/a/ACg8ocIjsW0Zjpdz3dC0a7SrfiqmDfm5UCtbRYO9GWjwTapf8dgSoQ=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":168,"_13":14,"_37":287,"_48":-5,"_170":50,"_51":52,"_171":52,"_172":173,"_174":-5,"_175":176,"_177":65,"_178":72,"_179":-5,"_180":-5,"_181":93,"_55":182,"_183":184,"_185":186,"_187":288,"_189":-5,"_190":191,"_192":191,"_193":194,"_195":194,"_196":194,"_197":191,"_198":191,"_199":289,"_201":290,"_203":291,"_49":50},[257,265,266],"files",[257,258,259,260,261,262,263,264,265,266],"counts",{"_248":93,"_249":74,"_250":93,"_34":251,"_252":253},[242,243,244],"upstreamProject",{"_35":42,"_13":58,"_172":173,"_174":239,"_51":52,"_199":240},"upstreamBranch",{"_35":36,"_37":237,"_39":238,"_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",1740674013689],["D",1785420707976],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789563599&sig=c3b06339283e4bc07165fa54c09036aa25cea7ac6108dec2f68b1acc60fad95f",{"_11":54,"_216":241},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789563599&sig=a969511699ef574c42d646a130422bcd8ffa020e1e59bd8fb5bde6db2cea72c1",{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":74,"_71":72,"_37":92,"_17":93,"_75":94,"_77":-5,"_79":50,"_80":-5,"_18":247},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":86,"_17":74,"_75":24,"_77":87,"_79":50,"_80":-5,"_18":246},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":73,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_18":245},[63],[83],[90],"pulls","branches","forks",{"_254":93,"_256":93},"connections",{"_254":93,"_255":93},"count","unfilledCount","emptyCount",{"_35":89,"_13":90,"_64":91,"_66":-5,"_67":68,"_69":74,"_71":72,"_37":106,"_17":93,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":285,"_18":286},{"_35":135,"_13":136,"_64":137,"_66":91,"_67":68,"_69":74,"_71":72,"_37":138,"_17":93,"_75":94,"_77":-5,"_79":50,"_80":-5,"_100":283,"_18":284},{"_35":160,"_13":161,"_64":162,"_66":137,"_67":68,"_69":163,"_71":72,"_37":164,"_17":74,"_75":117,"_77":165,"_79":50,"_80":-5,"_100":281,"_18":282},{"_35":152,"_13":153,"_64":154,"_66":137,"_67":68,"_69":155,"_71":72,"_37":156,"_17":93,"_75":117,"_77":157,"_79":50,"_80":-5,"_100":279,"_18":280},{"_35":144,"_13":145,"_64":146,"_66":137,"_67":68,"_69":147,"_71":72,"_37":148,"_17":93,"_75":117,"_77":149,"_79":50,"_80":-5,"_100":277,"_18":278},{"_35":128,"_13":129,"_64":130,"_66":91,"_67":68,"_69":31,"_71":72,"_37":131,"_17":74,"_75":24,"_77":132,"_79":50,"_80":-5,"_100":275,"_18":276},{"_35":121,"_13":122,"_64":123,"_66":91,"_67":68,"_69":33,"_71":72,"_37":124,"_17":74,"_75":24,"_77":125,"_79":50,"_80":-5,"_100":273,"_18":274},{"_35":113,"_13":114,"_64":115,"_66":91,"_67":68,"_69":74,"_71":72,"_37":116,"_17":93,"_75":117,"_77":118,"_79":50,"_80":-5,"_100":271,"_18":272},{"_35":82,"_13":83,"_64":84,"_66":-5,"_67":68,"_69":85,"_71":72,"_37":103,"_17":74,"_75":24,"_77":87,"_79":50,"_80":-5,"_100":269,"_18":270},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":70,"_71":72,"_37":99,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_100":267,"_18":268},[],[63],[],[83],[],[90,114],[],[90,122],[],[90,129],[],[90,136,145],[],[90,136,153],[],[90,136,161],[259,260,261],[90,136],[258,262,263,264],[90],["D",1779524490014],["D",1789469441210],{"_11":12,"_216":212},{"_11":12,"_209":210,"_211":212,"_175":176,"_213":214,"_215":50},{"_17":85,"_13":16,"_35":68,"_41":168,"_44":36,"_45":205,"_206":52,"_207":42,"_208":56,"_57":14,"_53":12},"ctx",{"_199":-5,"_234":325,"_326":327,"_328":329,"_330":50,"_331":50,"_332":50,"_333":72,"_334":-5,"_335":-7,"_336":-7,"_337":93,"_338":50,"_339":50,"_340":-5,"_341":50,"_342":50,"_343":50,"_344":-5},"ENV",{"_296":297,"_298":299,"_300":16,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324},"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","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]