Driftboard

\n\n\n\n\n\n

Nothing's drifted in yet

Add a photo and it'll float onto the board for everyone to see.

\n\n

\n \n

Decorate the board

\n\n

\n Board title\n \n

\n\n

\n Header font\n \n

\n\n

\n Header text color\n

\n Applies to the title above\n \n

\n\n

\n Background\n

✎

Background top

Background bottom

Accent

Buttons / frames-2

Card paper

Body text

\n\n

\n Frame style\n

Polaroid

Round

Torn edge

\n\n \n\n

This board is shared — the title, font, colors, frame style, every photo, and every wish are stored globally, so everyone who opens this page sees the exact same thing. The board also checks for new photos and wishes every few seconds, so uploads from others appear without needing to reload.

\n\n\n\n

\n\n\n\n\n","label",[18],"pulls","branches","forks","envVars",{"_232":26,"_234":26},"connections",{"_232":26,"_233":26},"count","unfilledCount","emptyCount",{"_39":217,"_13":18,"_73":74,"_49":-5,"_41":42,"_218":127,"_219":145,"_43":246,"_45":113,"_75":21,"_221":222,"_76":24,"_223":-5,"_243":247,"_17":248},{"_39":237,"_13":238,"_73":143,"_49":-5,"_41":42,"_218":239,"_219":145,"_43":240,"_45":46,"_75":241,"_221":242,"_76":24,"_223":14,"_243":244,"_17":245},"5db9a5d7-f173-4c2e-83af-04277336e23d","main.ts",4,["D",1788932847886],"http","import { readFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst JSON_HEADERS = { \"content-type\": \"application/json\" };\n\n// Each photo is stored as its own row, so new uploads ADD to the board instead\n// of overwriting the whole list (which made photos mysteriously disappear when\n// two people uploaded around the same time).\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS photos (\n id TEXT PRIMARY KEY,\n dataUrl TEXT NOT NULL,\n aspect TEXT NOT NULL DEFAULT 'square',\n caption TEXT NOT NULL DEFAULT '',\n posX REAL NOT NULL DEFAULT 0,\n posY REAL NOT NULL DEFAULT 0,\n dur REAL NOT NULL DEFAULT 5,\n delay REAL NOT NULL DEFAULT 0,\n rot REAL NOT NULL DEFAULT 0\n)`);\n\n// Wishes/notes: each note or greeting card is its own row, with authorId so a\n// note can only be removed by the person who wrote it.\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS notes (\n id TEXT PRIMARY KEY,\n authorId TEXT NOT NULL,\n kind TEXT NOT NULL DEFAULT 'note',\n color TEXT NOT NULL DEFAULT 'yellow',\n text TEXT NOT NULL DEFAULT '',\n posX REAL NOT NULL DEFAULT 0,\n posY REAL NOT NULL DEFAULT 0,\n dur REAL NOT NULL DEFAULT 5,\n delay REAL NOT NULL DEFAULT 0,\n rot REAL NOT NULL DEFAULT 0\n)`);\n\nfunction rowToPhoto(r: Record) {\n return {\n id: r.id,\n dataUrl: r.dataUrl,\n aspect: r.aspect,\n caption: r.caption,\n left: r.posX,\n top: r.posY,\n dur: r.dur,\n delay: r.delay,\n rot: r.rot,\n };\n}\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n // Theme stays a single shared blob (only one person edits it at a time).\n if (path === \"/api/theme\") {\n if (req.method === \"GET\") {\n let value = null;\n try { value = await (await blob.get(\"wall:theme\")).text(); } catch { /* absent */ }\n return new Response(JSON.stringify({ value }), { headers: JSON_HEADERS });\n }\n if (req.method === \"PUT\" || req.method === \"POST\") {\n await blob.set(\"wall:theme\", await req.text());\n return new Response(JSON.stringify({ ok: true }), { headers: JSON_HEADERS });\n }\n }\n\n // Photos: per-photo rows, merged instead of overwritten.\n if (path === \"/api/photos\") {\n if (req.method === \"GET\") {\n const res = await sqlite.execute(\"SELECT * FROM photos\");\n const photos = res.rows.map(rowToPhoto);\n return new Response(JSON.stringify({ value: JSON.stringify(photos) }), {\n headers: JSON_HEADERS,\n });\n }\n if (req.method === \"PUT\" || req.method === \"POST\") {\n let incoming: any[] = [];\n try { incoming = JSON.parse(await req.text()); } catch { /* ignore */ }\n // Upsert each incoming photo by id; existing ones from other people are\n // left untouched so nothing gets lost.\n await sqlite.batch(incoming.map((p) => ({\n sql: `INSERT INTO photos (id, dataUrl, aspect, caption, posX, posY, dur, delay, rot)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)\n ON CONFLICT(id) DO UPDATE SET\n dataUrl=excluded.dataUrl, aspect=excluded.aspect, caption=excluded.caption,\n posX=excluded.posX, posY=excluded.posY, dur=excluded.dur,\n delay=excluded.delay, rot=excluded.rot`,\n args: [p.id, p.dataUrl, p.aspect || \"square\", p.caption || \"\",\n p.left ?? 0, p.top ?? 0, p.dur ?? 5, p.delay ?? 0, p.rot ?? 0],\n })));\n return new Response(JSON.stringify({ ok: true }), { headers: JSON_HEADERS });\n }\n if (req.method === \"DELETE\") {\n const id = url.searchParams.get(\"id\");\n if (id) {\n await sqlite.execute(\"DELETE FROM photos WHERE id = ?\", [id]);\n }\n return new Response(JSON.stringify({ ok: true }), { headers: JSON_HEADERS });\n }\n }\n\n // Notes / wishes: add is an upsert of ONLY the new note(s) sent by the client;\n // deletion requires matching authorId so nobody can remove someone else's note.\n if (path === \"/api/notes\") {\n if (req.method === \"GET\") {\n const res = await sqlite.execute(\"SELECT * FROM notes ORDER BY id\");\n const rows = res.rows.map((n) => ({\n id: n.id, authorId: n.authorId, kind: n.kind, color: n.color, text: n.text,\n left: n.posX, top: n.posY, dur: n.dur, delay: n.delay, rot: n.rot,\n }));\n return new Response(JSON.stringify({ value: JSON.stringify(rows) }), {\n headers: JSON_HEADERS,\n });\n }\n if (req.method === \"PUT\" || req.method === \"POST\") {\n let incoming: any[] = [];\n try { incoming = JSON.parse(await req.text()); } catch { /* ignore */ }\n await sqlite.batch(incoming.map((n) => ({\n sql: `INSERT INTO notes (id, authorId, kind, color, text, posX, posY, dur, delay, rot)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n ON CONFLICT(id) DO UPDATE SET\n authorId=excluded.authorId, kind=excluded.kind, color=excluded.color,\n text=excluded.text, posX=excluded.posX, posY=excluded.posY,\n dur=excluded.dur, delay=excluded.delay, rot=excluded.rot`,\n args: [n.id, n.authorId, n.kind || \"note\", n.color || \"yellow\", n.text || \"\",\n n.left ?? 0, n.top ?? 0, n.dur ?? 5, n.delay ?? 0, n.rot ?? 0],\n })));\n return new Response(JSON.stringify({ ok: true }), { headers: JSON_HEADERS });\n }\n if (req.method === \"DELETE\") {\n const id = url.searchParams.get(\"id\");\n const authorId = url.searchParams.get(\"authorId\");\n if (id && authorId) {\n await sqlite.execute(\n \"DELETE FROM notes WHERE id = ? AND authorId = ?\", [id, authorId]);\n }\n return new Response(JSON.stringify({ ok: true }), { headers: JSON_HEADERS });\n }\n }\n\n // Owner drag-to-move: update just ONE item's position without touching the\n // rest, so two people moving things around at the same time can't clobber\n // each other's board.\n if (path === \"/api/move\" && (req.method === \"POST\" || req.method === \"PUT\")) {\n let body: any = {};\n try { body = JSON.parse(await req.text()); } catch { /* ignore */ }\n if (body.table === \"photos\") {\n await sqlite.execute(\"UPDATE photos SET posX = ?, posY = ? WHERE id = ?\", [body.left ?? 0, body.top ?? 0, body.id]);\n } else if (body.table === \"notes\") {\n await sqlite.execute(\"UPDATE notes SET posX = ?, posY = ? WHERE id = ?\", [body.left ?? 0, body.top ?? 0, body.id]);\n }\n return new Response(JSON.stringify({ ok: true }), { headers: JSON_HEADERS });\n }\n\n // Everything else: the board itself\n const html = await readFile(\"index.html\");\n return new Response(html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n","children",[],[238],["D",1788932864143],[],[18],["D",1788931513837],["D",1789452068287],{"_11":12,"_185":79},{"_11":12,"_180":181,"_78":79,"_30":77,"_182":183,"_184":24},{"_45":127,"_13":16,"_39":42,"_171":133,"_172":70,"_173":71,"_174":137,"_175":176,"_177":48,"_178":14,"_179":12},"ctx",{"_59":-5,"_206":287,"_288":289,"_290":291,"_292":24,"_293":24,"_294":24,"_295":145,"_296":-5,"_297":-7,"_298":-7,"_299":26,"_300":24,"_301":24,"_302":-5,"_303":24,"_304":24,"_305":24,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":16,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286},"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"]

Decorate the board

💌 Write a wish

History · index.html