[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","boh","name","chaos-diner","path","frontend/components/Social.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":38,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/boh/chaos-diner/code/frontend/components/Social.tsx","extension","id","5699e25a-4fbc-46d2-9d4b-bca6a2533bdc","Social.tsx","fileId","a5e89bd8-9ed9-11f1-8915-1607ee4eb77e","parentId","01a02df6-016f-774c-911a-f4906e6fe59a","branchId","d37ffabd-ddb0-472a-8701-c0eef966a563","branchVersion",43,"latest",true,"createdAt",["D",1787479305337],"version",0,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n api,\n type Account,\n type ChatMessage,\n type Friend,\n type Notification,\n signup,\n login,\n} from \"../api.ts\";\n\n/* ------------------------------------------------ config helpers\nexport*/\nfunction classNames(...x: (string | undefined | false)[]) {\n return x.filter(Boolean).join(\" \");\n}\n\nconst inputCls =\n \"w-full rounded-lg bg-[#171a22] border border-[#2a2f3c] px-3 py-2 outline-none focus:border-[#c5b078] text-sm\";\nconst btnPrimary =\n \"rounded-lg bg-[#c5b078] hover:bg-[#d4c28a] text-[#1a1408] font-bold px-4 py-2 cursor-pointer text-sm\";\n\n// ------------------------------------------------------------------ AccountForm\nexport function AccountForm({ onAuthed }: { onAuthed: (a: Account) => void }) {\n const [mode, setMode] = useState<\"signup\" | \"login\">(\"signup\");\n const [username, setUsername] = useState(\"\");\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const [err, setErr] = useState(\"\");\n const [busy, setBusy] = useState(false);\n\n async function submit() {\n setBusy(true);\n setErr(\"\");\n const res = mode === \"signup\"\n ? await signup(username, email, password)\n : await login(email, password);\n if (!res || res.error || !res.token || !res.user) {\n setErr(res?.error ?? \"Errore\");\n setBusy(false);\n return;\n }\n onAuthed({ token: res.token, username: res.user.username });\n }\n\n return (\n

\n {([\"signup\", \"login\"] as const).map((m) => (\n { setMode(m); setErr(\"\"); }}\n className={classNames(\n \"flex-1 py-2 cursor-pointer border-b-2\",\n mode === m ? \"border-[#c5b078] text-[#c5b078]\" : \"border-transparent text-[#6b7180]\",\n )}\n >\n {m === \"signup\" ? \"Registrati\" : \"Accedi\"}\n \n ))}\n

\n\n {mode === \"signup\" && (\n \n Nome utente\n setUsername(e.target.value)} maxLength={20}\n placeholder=\"es. nonna\" className={`${inputCls} mt-1`} />\n \n )}\n \n Email\n setEmail(e.target.value)}\n placeholder=\"tu@email.it\" className={`${inputCls} mt-1`} />\n \n \n Password\n setPassword(e.target.value)}\n placeholder=\"••••••\" className={`${inputCls} mt-1`} />\n \n\n {err &&

{err}

}\n \n

\n );\n}\n\n// ------------------------------------------------------------------ ChatDrawer\nfunction ChatDrawer({ me, friend, onClose }: { me: string; friend: string; onClose: () => void }) {\n const [messages, setMessages] = useState([]);\n const [text, setText] = useState(\"\");\n const last = useRef(0);\n const box = useRef(null);\n\n useEffect(() => {\n let stopped = false;\n let timer: number | undefined;\n (async function poll() {\n const res = await api.chat(friend, last.current);\n if (stopped || !res) return;\n if (res.messages.length) {\n last.current = res.messages[res.messages.length - 1].id;\n setMessages((m) => [...m, ...res.messages]);\n box.current?.scrollTo({ top: 1e9 });\n }\n timer = setTimeout(poll, 1500);\n })();\n return () => { stopped = true; if (timer) clearTimeout(timer); };\n }, [friend]);\n\n return (\n

\n 💬 @{friend}\n \n

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

Ancora nessun messaggio.

}\n {messages.map((m) => (\n

\n \n {m.text}\n \n

\n ))}\n

\n setText(e.target.value)}\n onKeyDown={(e) => { if (e.key === \"Enter\" && text.trim()) { api.sendChat(friend, text.trim()); setText(\"\"); } }}\n placeholder=\"Scrivi…\" className={`${inputCls} flex-1`} />\n { if (text.trim()) { api.sendChat(friend, text.trim()); setText(\"\"); } }}\n className=\"rounded-lg bg-[#2a2f3c] hover:bg-[#363c4c] px-3 cursor-pointer\"\n >➤\n

\n );\n}\n\n// ------------------------------------------------------------------ SocialPanel\nexport function SocialPanel({\n account,\n onLogout,\n onJoinRoom,\n onClose,\n}: {\n account: Account;\n onLogout: () => void;\n onJoinRoom: (roomId: string, notifId: number) => void;\n onClose: () => void;\n}) {\n const [friends, setFriends] = useState([]);\n const [invites, setInvites] = useState([]);\n const [addId, setAddId] = useState(\"\");\n const [err, setErr] = useState(\"\");\n const [chatWith, setChatWith] = useState(null);\n const lastNotif = useRef(0);\n\n async function refresh() {\n const f = await api.friends();\n if (f) setFriends(f.friends);\n const n = await api.notifications(lastNotif.current);\n if (n && n.notifications.length) {\n lastNotif.current = n.notifications[n.notifications.length - 1].id;\n setInvites((prev) => [\n ...prev,\n ...n.notifications.filter((x) => !prev.some((p) => p.id === x.id)),\n ]);\n }\n }\n\n useEffect(() => {\n refresh();\n const iv = setInterval(refresh, 5000);\n return () => clearInterval(iv);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n

\n e.stopPropagation()}\n >\n

\n 👥 Amici & Inviti\n \n

\n\n {/* invites */}\n

Inviti alle stanze

\n {invites.length === 0 &&

Nessun invito.

}\n {invites.map((n) => (\n

\n @{n.data.from} ha aperto una stanza!\n onJoinRoom(n.data.roomId, n.id)}\n className=\"block mt-2 w-full rounded-lg bg-[#ff6b5e] hover:bg-[#ff5a4f] text-white font-bold py-2 cursor-pointer\"\n >\n Vuoi entrarci senza codice? Clicca qui →\n \n

\n ))}\n

\n\n {/* friends + add */}\n

I tuoi amici

\n {friends.length === 0 &&

Aggiungi amici con il loro @username.

}\n

\n {friends.map((f) => (\n

\n \n { api.removeFriend(f.username); setFriends((fs) => fs.filter((x) => x.username !== f.username)); }}\n className=\"text-[#6b7180] hover:text-[#ff6b5e] cursor-pointer text-xs\"\n title=\"Rimuovi\"\n >🗑\n

\n ))}\n

\n setAddId(e.target.value)}\n placeholder=\"username o email\" className={`${inputCls} flex-1`} />\n {\n setErr(\"\");\n const res = await api.addFriend(addId);\n if (res && (res as { error?: string }).error) setErr((res as { error: string }).error);\n else setAddId(\"\");\n await refresh();\n }}\n className=\"rounded-lg bg-[#2a2f3c] hover:bg-[#363c4c] px-3 cursor-pointer text-xs\"\n >+ Amico\n

\n {err &&

{err}

}\n

\n\n {/* chat */}\n {chatWith && setChatWith(null)} />}\n\n

\n Ciao @{account.username} 👋\n \n

\n \n );\n}\n\n// ------------------------------------------------------------------ InviteToasts\nexport function InviteToasts({\n invites,\n onJoinRoom,\n onDismiss,\n}: {\n invites: Notification[];\n onJoinRoom: (roomId: string, notifId: number) => void;\n onDismiss: (id: number) => void;\n}) {\n return (\n

\n {invites.map((n) => (\n

\n @{n.data.from} ha aperto una stanza! 🍝\n

\n onJoinRoom(n.data.roomId, n.id)}\n className=\"mt-2 w-full rounded-lg bg-[#ff6b5e] hover:bg-[#ff5a4f] text-white font-bold py-2 cursor-pointer\"\n >\n Vuoi entrarci senza codice? Clicca qui →\n \n \n

\n ))}\n

\n );\n}\n","deleted",false,"label",[47,48,24],"frontend","components","f7417c8d-2e35-43cf-b2d5-043eaf93137e",["D",1787477491994],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Chaos Diner RPG – AI waiter, food fights & survival multiplayer","imageUrl","userId","86c0904a-df90-4b28-8be9-0d0cd34688de","pinnedFileId","01a02df6-016f-774c-911b-10e7600604d6","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","01a02515-3428-7129-a58d-ee30dee1111b","tursoName","f7417c8d2e3543cfb2d5043eaf93137e","tursoHostname","f7417c8d2e3543cfb2d5043eaf93137e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789476648181],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_109":105},"org",{"_9":10,"_102":103,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":92,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned",48,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","BCG Collaborazioni","avatar","https://lh3.googleusercontent.com/a/ACg8ocK88V05YV8HsO4yAaG3hTsa_rYvYnQ7JithXHAoBkrpvT9HmN8=s96-c","tier","free","canRestrictVals","profileImageUrl","ctx",{"_85":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":38,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":93,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]