Haptic Tuner

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_181":182,"_183":184},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_107":89,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":25,"_125":-5,"_126":-5,"_127":128},"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":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_34":35,"_36":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","main.http.tsx","latestPath","fileId","ba6b72c0-ad88-11f1-81e2-1607ee4eb77e","name","main.tsx","fileType","script","content","/**\n * Haptic Tuner — a public poll for the nine semantic haptic names.\n *\n * The web has no semantic haptics: `navigator.vibrate` takes a list of\n * milliseconds and nothing else. This collects, per device, what each of\n * iOS's nine named haptics *should* feel like as one of those lists.\n *\n * Dedupe is two-layered, because neither layer is sufficient alone:\n * - device_id a random id kept in the browser; resubmitting REVISES that\n * row rather than adding one.\n * - ip_hash a salted hash of the client IP, capped at a few devices\n * per network. Never the raw address, and never sent to\n * clients — households and offices legitimately share one.\n */\nimport { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst HAPTICS = [\n \"selection\", \"light\", \"soft\", \"medium\", \"rigid\", \"heavy\",\n \"success\", \"warning\", \"error\",\n] as const;\n\nconst PULSE_MIN = 5, PULSE_MAX = 120;\nconst GAP_MIN = 10, GAP_MAX = 180;\nconst MAX_PULSES = 5;\nconst MAX_DEVICES_PER_IP = 3; /* one person, one phone + tablet + laptop */\nconst MAX_ROWS = 5000;\nconst NOTE_MAX = 140;\n\ntype Pattern = { pulses: number[]; gaps: number[] };\n\n/* ------------------------------------------------------------------ *\n * Schema\n * ------------------------------------------------------------------ */\nlet ready: Promise | null = null;\nfunction init(): Promise {\n if (!ready) {\n ready = (async () => {\n await sqlite.execute(`create table if not exists submissions (\n device_id text primary key,\n fp text not null,\n ip_hash text not null,\n device_json text not null,\n patterns_json text not null,\n tuned_json text not null,\n felt integer not null,\n note text not null default '',\n created_at text not null,\n updated_at text not null\n )`);\n await sqlite.execute(`create index if not exists submissions_ip on submissions(ip_hash)`);\n await sqlite.execute(`create index if not exists submissions_fp on submissions(fp)`);\n })();\n }\n return ready;\n}\n\n/* ------------------------------------------------------------------ *\n * Identity\n * ------------------------------------------------------------------ */\nfunction clientIp(req: Request): string {\n const h = (n: string) => req.headers.get(n) || \"\";\n const fwd = h(\"x-forwarded-for\").split(\",\")[0].trim();\n return h(\"cf-connecting-ip\") || fwd || h(\"x-real-ip\") || \"unknown\";\n}\n\nasync function hashIp(ip: string): Promise {\n const salt = Deno.env.get(\"IP_SALT\") || \"haptic-tuner-unsalted\";\n const bytes = new TextEncoder().encode(salt + \"|\" + ip);\n const digest = await crypto.subtle.digest(\"SHA-256\", bytes);\n return Array.from(new Uint8Array(digest))\n .map((b) => b.toString(16).padStart(2, \"0\")).join(\"\").slice(0, 32);\n}\n\n/* ------------------------------------------------------------------ *\n * Validation — the client is not trusted with any of this\n * ------------------------------------------------------------------ */\nfunction num(v: unknown): number | null {\n const n = Number(v);\n return Number.isFinite(n) ? Math.round(n) : null;\n}\n\nfunction validPattern(raw: unknown): Pattern | null {\n const p = raw as Pattern;\n if (!p || !Array.isArray(p.pulses) || !Array.isArray(p.gaps)) return null;\n if (p.pulses.length < 1 || p.pulses.length > MAX_PULSES) return null;\n if (p.gaps.length !== p.pulses.length - 1) return null;\n\n const pulses: number[] = [], gaps: number[] = [];\n for (const v of p.pulses) {\n const n = num(v);\n if (n === null || n < PULSE_MIN || n > PULSE_MAX) return null;\n pulses.push(n);\n }\n for (const v of p.gaps) {\n const n = num(v);\n if (n === null || n < GAP_MIN || n > GAP_MAX) return null;\n gaps.push(n);\n }\n return { pulses, gaps };\n}\n\nfunction str(v: unknown, max: number): string {\n return typeof v === \"string\" ? v.slice(0, max) : \"\";\n}\n\nconst DEVICE_FIELDS = [\n \"label\", \"platform\", \"browser\", \"model\", \"osVersion\",\n \"screen\", \"timezone\",\n] as const;\n\nfunction cleanDevice(raw: unknown) {\n const d = (raw || {}) as Record;\n const out: Record = {};\n for (const f of DEVICE_FIELDS) out[f] = str(d[f], 120);\n out.platform = [\"android\", \"ios\", \"desktop\", \"other\"].includes(String(out.platform))\n ? out.platform : \"other\";\n out.dpr = Math.min(8, Math.max(0, Number(d.dpr) || 0));\n out.cores = Math.min(256, Math.max(0, num(d.cores) ?? 0));\n out.memoryGb = Math.min(1024, Math.max(0, Number(d.memoryGb) || 0));\n out.touchPoints = Math.min(64, Math.max(0, num(d.touchPoints) ?? 0));\n out.vibrateApi = !!d.vibrateApi;\n return out;\n}\n\n/* ------------------------------------------------------------------ *\n * Routes\n * ------------------------------------------------------------------ */\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/index.html\", import.meta.url);\n return c.html(html);\n});\n\napp.post(\"/api/submit\", async (c) => {\n await init();\n\n let body: Record;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"invalid\", message: \"Body was not JSON.\" }, 400);\n }\n\n const deviceId = str(body.deviceId, 64);\n if (!/^[A-Za-z0-9_.:@+-]{8,64}$/.test(deviceId)) {\n return c.json({ error: \"invalid\", message: \"Missing or malformed device id.\" }, 400);\n }\n if (body.felt !== true) {\n return c.json({\n error: \"not_felt\",\n message: \"Only devices that actually vibrated can submit.\",\n }, 400);\n }\n\n const patterns: Record = {};\n const raw = (body.patterns || {}) as Record;\n for (const name of HAPTICS) {\n const p = validPattern(raw[name]);\n if (!p) {\n return c.json({\n error: \"invalid\",\n message: `The pattern for \"${name}\" is missing or out of range.`,\n }, 400);\n }\n patterns[name] = p;\n }\n\n const tuned = Array.isArray(body.tuned)\n ? (body.tuned as unknown[]).map(String).filter((n) => (HAPTICS as readonly string[]).includes(n))\n : [];\n\n const now = new Date().toISOString();\n const ipHash = await hashIp(clientIp(c.req.raw));\n\n const existing = await sqlite.execute({\n sql: `select device_id, created_at from submissions where device_id = ?`,\n args: [deviceId],\n });\n const revised = existing.rows.length > 0;\n\n if (!revised) {\n const perIp = await sqlite.execute({\n sql: `select count(*) as n from submissions where ip_hash = ?`,\n args: [ipHash],\n });\n if (Number(perIp.rows[0]?.n || 0) >= MAX_DEVICES_PER_IP) {\n return c.json({\n error: \"ip_limit\",\n message:\n `This network has already submitted ${MAX_DEVICES_PER_IP} devices, which is the cap. ` +\n `If that was you on another device, tune from that device instead — resubmitting there updates its row.`,\n }, 429);\n }\n const total = await sqlite.execute(`select count(*) as n from submissions`);\n if (Number(total.rows[0]?.n || 0) >= MAX_ROWS) {\n return c.json({\n error: \"full\",\n message: \"The poll has hit its row cap and is closed to new devices.\",\n }, 507);\n }\n }\n\n await sqlite.execute({\n sql: `insert into submissions\n (device_id, fp, ip_hash, device_json, patterns_json, tuned_json, felt, note, created_at, updated_at)\n values (?, ?, ?, ?, ?, ?, 1, ?, ?, ?)\n on conflict(device_id) do update set\n fp = excluded.fp,\n ip_hash = excluded.ip_hash,\n device_json = excluded.device_json,\n patterns_json = excluded.patterns_json,\n tuned_json = excluded.tuned_json,\n note = excluded.note,\n updated_at = excluded.updated_at`,\n args: [\n deviceId,\n str(body.fp, 32),\n ipHash,\n JSON.stringify(cleanDevice(body.device)),\n JSON.stringify(patterns),\n JSON.stringify(tuned),\n str(body.note, NOTE_MAX),\n String(existing.rows[0]?.created_at || now),\n now,\n ],\n });\n\n return c.json({ ok: true, revised });\n});\n\napp.get(\"/api/results\", async (c) => {\n await init();\n const res = await sqlite.execute(\n `select device_id, fp, ip_hash, device_json, patterns_json, tuned_json, note, created_at, updated_at\n from submissions order by updated_at desc limit 1000`,\n );\n\n /* Networks become opaque group numbers: enough to spot ballot-stuffing,\n not enough to identify anyone. The hash itself never leaves here. */\n const groups = new Map();\n const submissions = res.rows.map((r) => {\n const ip = String(r.ip_hash);\n if (!groups.has(ip)) groups.set(ip, groups.size + 1);\n return {\n id: String(r.device_id),\n fp: String(r.fp),\n ipGroup: groups.get(ip),\n device: JSON.parse(String(r.device_json)),\n patterns: JSON.parse(String(r.patterns_json)),\n tuned: JSON.parse(String(r.tuned_json)),\n note: String(r.note || \"\"),\n createdAt: String(r.created_at),\n updatedAt: String(r.updated_at),\n };\n });\n\n return c.json({ count: submissions.length, submissions }, 200, {\n \"cache-control\": \"no-store\",\n });\n});\n\napp.get(\"/api/export.csv\", async (c) => {\n await init();\n const res = await sqlite.execute(\n `select device_id, fp, device_json, patterns_json, tuned_json, note, updated_at\n from submissions order by updated_at desc limit 5000`,\n );\n const esc = (v: unknown) => `\"${String(v ?? \"\").replace(/\"/g, '\"\"')}\"`;\n const head = [\n \"device_id\", \"fingerprint\", \"device\", \"platform\", \"model\", \"browser\",\n ...HAPTICS.map((h) => `${h}_pattern`),\n ...HAPTICS.map((h) => `${h}_total_ms`),\n \"tuned\", \"note\", \"updated_at\",\n ];\n const lines = [head.join(\",\")];\n for (const r of res.rows) {\n const d = JSON.parse(String(r.device_json));\n const p = JSON.parse(String(r.patterns_json)) as Record;\n const flat = (h: string) => {\n const pat = p[h];\n if (!pat) return \"\";\n const out: number[] = [];\n pat.pulses.forEach((ms, i) => {\n out.push(ms);\n if (i < pat.gaps.length) out.push(pat.gaps[i]);\n });\n return out.join(\" \");\n };\n const totalOf = (h: string) => {\n const pat = p[h];\n if (!pat) return \"\";\n return String([...pat.pulses, ...pat.gaps].reduce((a, b) => a + b, 0));\n };\n lines.push([\n esc(r.device_id), esc(r.fp), esc(d.label), esc(d.platform), esc(d.model), esc(d.browser),\n ...HAPTICS.map((h) => esc(flat(h))),\n ...HAPTICS.map((h) => esc(totalOf(h))),\n esc(JSON.parse(String(r.tuned_json)).join(\" \")), esc(r.note), esc(r.updated_at),\n ].join(\",\"));\n }\n return new Response(lines.join(\"\\n\"), {\n headers: {\n \"content-type\": \"text/csv; charset=utf-8\",\n \"content-disposition\": 'attachment; filename=\"haptic-tuner.csv\"',\n \"cache-control\": \"no-store\",\n },\n });\n});\n\nexport default app.fetch;\n","createdAt",["D",1789093854586],"branchVersion","branchId","092e24ba-655f-4eaf-95a8-d4b1b3d6dad3","id","6e28f75c-cbcd-4bf7-895e-fe842aacf354","haptic-tuner",["D",1789093612980],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Crowdsourced navigator.vibrate patterns for iOS haptics","imageUrl","775b6fc5-77e3-4b7f-9e42-7d90dcc2ee2b","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","38f17bec-4f68-41c6-b2f6-47b6e76d6ac3","tursoName","6e28f75ccbcd4bf7895efe842aacf354","tursoHostname","6e28f75ccbcd4bf7895efe842aacf354-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789532458193],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_106":102},"org",{"_99":98,"_100":-5,"_101":102,"_18":55,"_103":104,"_105":25},"branch",{"_13":88,"_32":89,"_43":42,"_90":44,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":45,"_97":98},"isOwned",9,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","orta","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2TLdzT53pqqxz62skugdQ5kw4Is.jpeg","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":176,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":177,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":178,"_83":179,"_85":180,"_87":25},"tree",[163,164,165],"files",[163,164,165],"counts",{"_153":62,"_154":136,"_155":62,"_156":157,"_158":159},"contents",[129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":146,"_32":147,"_30":148,"_133":-5,"_41":42,"_40":149,"_134":25,"_38":150,"_13":62,"_34":20,"_36":151,"_24":25,"_137":-5,"_27":152},{"_43":139,"_32":140,"_30":141,"_133":-5,"_41":42,"_40":142,"_134":25,"_38":143,"_13":62,"_34":20,"_36":144,"_24":25,"_137":-5,"_27":145},{"_43":132,"_32":28,"_30":31,"_133":-5,"_41":42,"_40":14,"_134":25,"_38":135,"_13":136,"_34":35,"_36":37,"_24":25,"_137":-5,"_27":138},"837c0dd1-449b-44f3-8db2-9df8799c2574","parentId","latest",["D",1789093854586],1,"label",[28],"8bcde54d-57fd-4edc-aa6a-215e54a7bdbf","index.html","bade5574-ad88-11f1-ba89-1607ee4eb77e",3,["D",1789093818694],"\n\n\n\n\n\nHaptic Tuner\n\n\n\n\n\n\n\n\n\n\n\n\n\n

\n \n

First — can this device actually buzz?

\n identifying device…\n

\n Desktop Chrome exposes navigator.vibrate and then does nothing with it, and iOS\n Safari has no Vibration API at all. So the API answering “yes” proves nothing —\n only your hand does. Play the test buzz and tell us the truth.\n

\n \n \n \n \n

\n\n

0 of 9 tuned

\n \n \n

Play the test buzz first — submissions are only useful from a device that can actually vibrate.

\n\n \n \n

\n\n\n\n\n\n\n\n",[140],"02e9b496-2d9f-4a49-b6d7-15cf5e8d3182","README.md","bac60672-ad88-11f1-bd74-1607ee4eb77e",2,["D",1789093818581],"# Haptic Tuner\n\nA public poll for the nine semantic haptic names iOS gives you and the web does not.\nVisitors tune each name as a `navigator.vibrate` pattern on their own device; the\nresults page pools the answers per device and emits a drop-in `vibrationPatterns`\nrecord for `packages/shared/haptics.ts`.\n\n## Files\n\n- `main.tsx` — Hono app. Serves the UI, plus `/api/submit`, `/api/results`, `/api/export.csv`.\n- `index.html` — the whole UI. No build step, no dependencies, no framework.\n\n## Data\n\nOne SQLite table, `submissions`, one row per device, upserted on `device_id`.\n\n| column | notes |\n|---|---|\n| `device_id` | random id kept in the visitor's browser; resubmitting revises this row |\n| `fp` | fingerprint hash of device/screen/cores/timezone — catches cleared storage |\n| `ip_hash` | salted SHA-256 of the client IP. Never stored raw, never sent to clients |\n| `patterns_json` | `{name: {pulses: number[], gaps: number[]}}` for all nine names |\n| `tuned_json` | which names the visitor actually moved — the rest are defaults, not votes |\n\nSet `IP_SALT` in the val's environment variables. Without it the hash uses a\nknown constant, which still dedupes but is guessable.\n\n## Dedupe\n\nTwo layers, because neither is enough alone:\n\n1. **Device** — resubmitting from the same browser revises its row.\n2. **Network** — at most `MAX_DEVICES_PER_IP` (3) *new* devices per IP hash.\n Existing devices can always revise, so the cap never locks anyone out of\n correcting their own answer. Three, not one, because a phone, a tablet and a\n laptop behind one router are exactly the spread this poll wants.\n\nNeither stops a determined person with a VPN and a fresh browser profile. The\nresults page surfaces shared fingerprints so stuffing is at least visible.\n\n## Vocabulary\n\n`selection light soft medium rigid heavy success warning error` — mirrors\n`availableHaptics` in `packages/shared/haptics.ts`. Adding a name means editing\n`HAPTICS` in both `main.tsx` (validation) and `index.html` (UI).\n\nNote that `soft` and `rigid` describe attack, not intensity — UIKit varies the\nsharpness of the tap, and `navigator.vibrate` can only vary its length. Duration\nis a crude proxy for those two, which is worth remembering when reading the results.\n",[147],"pulls","branches","forks","envVars",{"_160":149,"_162":62},"connections",{"_160":62,"_161":62},"count","unfilledCount","emptyCount",{"_43":146,"_32":147,"_30":148,"_133":-5,"_41":42,"_40":149,"_134":25,"_38":173,"_13":62,"_34":20,"_36":151,"_24":25,"_137":-5,"_167":174,"_27":175},{"_43":139,"_32":140,"_30":141,"_133":-5,"_41":42,"_40":142,"_134":25,"_38":170,"_13":62,"_34":20,"_36":144,"_24":25,"_137":-5,"_167":171,"_27":172},{"_43":132,"_32":28,"_30":31,"_133":-5,"_41":42,"_40":14,"_134":25,"_38":166,"_13":136,"_34":35,"_36":37,"_24":25,"_137":-5,"_167":168,"_27":169},["D",1789093854586],"children",[],[28],["D",1789093818694],[],[140],["D",1789093818581],[],[147],["D",1789093612980],["D",1789532458193],{"_99":98,"_106":102},{"_99":98,"_100":-5,"_101":102,"_18":55,"_103":104,"_105":25},{"_13":88,"_32":89,"_43":42,"_90":44,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":45,"_97":98},"ctx",{"_81":-5,"_126":214,"_215":216,"_217":218,"_219":25,"_220":25,"_221":25,"_222":58,"_223":-5,"_224":-7,"_225":-7,"_226":62,"_227":25,"_228":25,"_229":-5,"_230":25,"_231":25,"_232":25,"_233":-5},"ENV",{"_185":186,"_187":188,"_189":89,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213},"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"]

Haptic Tuner

First — can this device actually buzz?

Submitted durations

Recommended patterns

Per device

Diff · v4