Asset control

Arcade Scan Register

🎮

Scan, register and track arcade machines and equipment.

\n {message &&

{message}

}\n \n {showForm &&

{editing ? \"Edit record\" : \"New arcade record\"}

\n Barcode / Asset ID *

update(\"barcode\", e.target.value)} placeholder=\"Scan barcode or type ID\" className=\"flex-1 border rounded-xl px-3 py-3 text-lg\"/>

update(\"arcadeName\", v)} placeholder=\"e.g. Newbury\"/> update(\"gameName\", v)} placeholder=\"e.g. Pac-Man\"/> update(\"assetType\", v)} placeholder=\"Arcade machine\"/> update(\"serialNumber\", v)}/> update(\"location\", v)} placeholder=\"Room / bay / site\"/> update(\"status\", v)} options={[\"In stock\", \"Deployed\", \"Repair\", \"Quarantined\", \"Retired\"]}/> update(\"condition\", v)} options={[\"New\", \"Good\", \"Fair\", \"Damaged\"]}/>

\n Notes

update(\"notes\", e.target.value)} rows={3} className=\"w-full border rounded-xl px-3 py-2\" placeholder=\"Condition notes, accessories, faults...\"/>\n        <button className=\"w-full bg-emerald-600 text-white font-bold py-3 rounded-xl mt-4\">{editing ? \"Update record\" : \"Save record\"}</button>\n      </form>}\n      <div className=\"relative mb-4\"><input value={query} onChange={e => setQuery(e.target.value)} placeholder=\"Search barcode, game, site, serial...\" className=\"w-full bg-white border rounded-xl px-4 py-3 pl-10 shadow-sm\"/><span className=\"absolute left-3 top-3\">⌕</span></div>\n      <div className=\"space-y-3\">{assets.length === 0 ? <div className=\"text-center py-12 text-slate-500 bg-white rounded-2xl\">No records yet. Scan your first arcade machine.</div> : assets.map(a => <article key={a.id} className=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-4\"><div className=\"flex justify-between gap-3\"><div><div className=\"font-bold text-lg\">{a.game_name || a.asset_type || \"Arcade asset\"}</div><div className=\"text-sm text-slate-500\">{a.arcade_name || \"No site\"} · {a.location || \"No location\"}</div></div><span className={`text-xs font-bold px-2 py-1 rounded-full h-fit ${a.status === \"Deployed\" ? \"bg-blue-100 text-blue-700\" : a.status === \"Repair\" ? \"bg-amber-100 text-amber-700\" : \"bg-emerald-100 text-emerald-700\"}`}>{a.status}</span></div><div className=\"grid grid-cols-2 gap-2 text-sm mt-3 text-slate-600\"><div><b>Barcode:</b> {a.barcode}</div><div><b>Serial:</b> {a.serial_number || \"—\"}</div><div><b>Condition:</b> {a.condition || \"—\"}</div><div><b>Updated:</b> {a.updated_at ? new Date(a.updated_at).toLocaleDateString() : \"—\"}</div></div>{a.notes && <p className=\"text-sm mt-2 bg-slate-50 rounded-lg p-2\">{a.notes}</p>}<div className=\"flex gap-2 mt-3\"><button onClick={() => edit(a)} className=\"flex-1 border border-slate-300 rounded-lg py-2 text-sm font-semibold\">Edit</button><button onClick={() => remove(a.id)} className=\"border border-red-200 text-red-600 rounded-lg px-4 py-2 text-sm\">Delete</button></div></article>)}</div>\n      <p className=\"text-center text-xs text-slate-400 mt-8\"><a href=\"/source\" className=\"underline\">View source</a> · Data is stored in this Val Town app's database.</p>\n    </div>\n  </div>;\n}\n\nfunction Stat({label, value}: {label:string; value:number}) { return <div className=\"bg-white rounded-xl p-3 text-center shadow-sm\"><div className=\"text-xl font-bold\">{value}</div><div className=\"text-xs text-slate-500\">{label}</div></div> }\nfunction Field({label,value,onChange,placeholder}: {label:string;value:string;onChange:(v:string)=>void;placeholder?:string}) { return <label className=\"block text-sm font-semibold\">{label}<input value={value} onChange={e=>onChange(e.target.value)} placeholder={placeholder} className=\"w-full border rounded-xl px-3 py-2 mt-1 font-normal\"/></label> }\nfunction SelectField({label,value,onChange,options}: {label:string;value:string;onChange:(v:string)=>void;options:string[]}) { return <label className=\"block text-sm font-semibold\">{label}<select value={value} onChange={e=>onChange(e.target.value)} className=\"w-full border rounded-xl px-3 py-2 mt-1 font-normal\">{options.map(o=><option key={o}>{o}</option>)}</select></label> }\n","label",[192,193,73],"frontend","components","pulls","branches","forks","envVars",{"_201":26,"_203":26},"connections",{"_201":26,"_202":26},"count","unfilledCount","emptyCount",{"_36":275,"_13":192,"_71":240,"_46":-5,"_38":39,"_185":43,"_186":122,"_40":276,"_42":26,"_74":272,"_188":-5,"_76":24,"_190":-5,"_220":277,"_17":278},{"_36":270,"_13":193,"_71":184,"_46":240,"_38":39,"_185":43,"_186":122,"_40":271,"_42":26,"_74":272,"_188":-5,"_76":24,"_190":-5,"_220":273,"_17":274},{"_36":183,"_13":73,"_71":72,"_46":184,"_38":39,"_185":104,"_186":122,"_40":267,"_42":82,"_74":75,"_188":189,"_76":24,"_190":-5,"_220":268,"_17":269},{"_36":260,"_13":261,"_71":262,"_46":184,"_38":39,"_185":43,"_186":122,"_40":263,"_42":26,"_74":75,"_188":264,"_76":24,"_190":-5,"_220":265,"_17":266},{"_36":253,"_13":254,"_71":255,"_46":240,"_38":39,"_185":43,"_186":122,"_40":256,"_42":26,"_74":21,"_188":257,"_76":24,"_190":-5,"_220":258,"_17":259},{"_36":246,"_13":247,"_71":248,"_46":240,"_38":39,"_185":43,"_186":122,"_40":249,"_42":26,"_74":75,"_188":250,"_76":24,"_190":-5,"_220":251,"_17":252},{"_36":237,"_13":238,"_71":239,"_46":240,"_38":39,"_185":241,"_186":122,"_40":242,"_42":43,"_74":75,"_188":243,"_76":24,"_190":-5,"_220":244,"_17":245},{"_36":230,"_13":231,"_71":232,"_46":-5,"_38":39,"_185":43,"_186":122,"_40":233,"_42":26,"_74":21,"_188":234,"_76":24,"_190":-5,"_220":235,"_17":236},{"_36":223,"_13":224,"_71":225,"_46":-5,"_38":39,"_185":43,"_186":122,"_40":226,"_42":26,"_74":21,"_188":227,"_76":24,"_190":-5,"_220":228,"_17":229},{"_36":214,"_13":215,"_71":120,"_46":-5,"_38":39,"_185":216,"_186":122,"_40":217,"_42":43,"_74":218,"_188":219,"_76":24,"_190":-5,"_220":221,"_17":222},"bc8b13bc-6ba1-4a26-8b6c-1ee729308b5a","index.ts",2,["D",1789155673735],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS arcade_assets (\n  id INTEGER PRIMARY KEY AUTOINCREMENT,\n  barcode TEXT NOT NULL,\n  arcade_name TEXT,\n  game_name TEXT,\n  asset_type TEXT NOT NULL DEFAULT 'Arcade machine',\n  serial_number TEXT,\n  location TEXT,\n  status TEXT NOT NULL DEFAULT 'In stock',\n  condition TEXT,\n  notes TEXT,\n  scanned_at TEXT NOT NULL,\n  updated_at TEXT NOT NULL\n)`);\n\nconst app = new Hono();\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/assets\", async (c) => {\n  const q = c.req.query(\"q\")?.trim() ?? \"\";\n  const result = q\n    ? await sqlite.execute({\n        sql: `SELECT * FROM arcade_assets\n              WHERE barcode LIKE ? OR arcade_name LIKE ? OR game_name LIKE ? OR serial_number LIKE ? OR location LIKE ?\n              ORDER BY updated_at DESC`,\n        args: Array(5).fill(`%${q}%`),\n      })\n    : await sqlite.execute(\"SELECT * FROM arcade_assets ORDER BY updated_at DESC\");\n  return c.json(result.rows);\n});\n\napp.post(\"/api/assets\", async (c) => {\n  const data = await c.req.json();\n  if (!data?.barcode) return c.json({ error: \"Barcode is required\" }, 400);\n  const now = new Date().toISOString();\n  const result = await sqlite.execute({\n    sql: `INSERT INTO arcade_assets\n      (barcode, arcade_name, game_name, asset_type, serial_number, location, status, condition, notes, scanned_at, updated_at)\n      VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,\n    args: [\n      String(data.barcode),\n      data.arcadeName ?? null,\n      data.gameName ?? null,\n      data.assetType ?? \"Arcade machine\",\n      data.serialNumber ?? null,\n      data.location ?? null,\n      data.status ?? \"In stock\",\n      data.condition ?? null,\n      data.notes ?? null,\n      now,\n      now,\n    ],\n  });\n  return c.json({ id: Number(result.lastInsertRowid) }, 201);\n});\n\napp.put(\"/api/assets/:id\", async (c) => {\n  const id = Number(c.req.param(\"id\"));\n  const data = await c.req.json();\n  await sqlite.execute({\n    sql: `UPDATE arcade_assets SET barcode=?, arcade_name=?, game_name=?, asset_type=?, serial_number=?, location=?, status=?, condition=?, notes=?, updated_at=? WHERE id=?`,\n    args: [\n      String(data.barcode ?? \"\"), data.arcadeName ?? null, data.gameName ?? null,\n      data.assetType ?? \"Arcade machine\", data.serialNumber ?? null, data.location ?? null,\n      data.status ?? \"In stock\", data.condition ?? null, data.notes ?? null,\n      new Date().toISOString(), id,\n    ],\n  });\n  return c.json({ ok: true });\n});\n\napp.delete(\"/api/assets/:id\", async (c) => {\n  const id = Number(c.req.param(\"id\"));\n  await sqlite.execute({ sql: \"DELETE FROM arcade_assets WHERE id=?\", args: [id] });\n  return c.json({ ok: true });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","children",[],[215],"eae8ce1c-9752-45e7-9a34-c85e34a561d3","README.md","01a091fc-5b40-76b9-bbae-c983918ee673",["D",1789155629770],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n    Browser -->|\"GET /\"| Hono[\"index.ts<br/>(Hono server)\"]\n    Hono -->|serves| HTML[\"root.tsx\"]\n    HTML -->|loads| Entry[\"index.tsx\"]\n    Entry -->|renders| App[\"App.tsx\"]\n    App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts              ← Hono backend (serves frontend + API routes)\nfrontend/\n  root.tsx            ← HTML shell (stamps immutable asset URLs)\n  index.tsx           ← React entrypoint (mounts <App />)\n  favicon.svg         ← App icon\n  components/\n    App.tsx            ← Root component (layout + view source link)\n    Counter.tsx        ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n   frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n   immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n   alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n   replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n  [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n  a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[],[224],"e69284f8-f11b-4014-9828-66e65e2d5f46","CHANGELOG.md","01a091fc-5b40-76b9-bbae-c7e6bc5d2706",["D",1789155629770],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n  shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n  `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n  serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the `<title>`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <title>React Hono Val Town Starter</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"font-sans text-gray-800 p-6\">\n          <main>\n            <div id=\"root\" />\n          </main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n```\n\n2. In your Hono entrypoint, import `Root` and `serveImmutableFile`, and replace\n   your `/` and frontend file routes with:\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n```\n\n3. Delete `frontend/index.html` (and any now-unused `serveFile` import).\n",[],[231],"e08b0651-8ad7-45e5-b4fd-c73ffaec80c5","root.tsx","01a091fc-5b40-76b9-bbae-be0140ce1fdc","01a091fc-5b40-76b9-bbae-c1496d975065",3,["D",1789155678985],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n  return (\n    <>\n      {raw(\"<!DOCTYPE html>\")}\n      <html lang=\"en\">\n        <head>\n          <meta charSet=\"UTF-8\" />\n          <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n          <meta name=\"theme-color\" content=\"#0f172a\" />\n          <title>Arcade Scan Register</title>\n          <script src=\"https://cdn.twind.style\" crossOrigin=\"\" />\n          <link rel=\"icon\" href={immutableFileUrl(\"/frontend/favicon.svg\")} type=\"image/svg+xml\" />\n        </head>\n        <body className=\"bg-slate-100 text-slate-900\">\n          <main><div id=\"root\" /></main>\n          <script src=\"https://esm.town/v/std/catch\" />\n          <script src={immutableFileUrl(\"/frontend/index.tsx\")} type=\"module\" />\n        </body>\n      </html>\n    </>\n  );\n}\n",[],[192,238],"a955618b-7245-4f47-8408-d0f7b4e88cee","index.tsx","01a091fc-5b40-76b9-bbae-bb2e2ad20aad",["D",1789155629770],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n  throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render(<App />);",[],[192,247],"31a5e506-28c2-4572-b16e-7bfe9b455325","favicon.svg","01a091fc-5b40-76b9-bbae-b7ee1b20c265",["D",1789155629770],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[192,254],"b5e06bc5-5bfe-4656-af5a-068ca44d47e5","Counter.tsx","01a091fc-5b40-76b9-bbae-ac89a9940c6f",["D",1789155629770],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n  const [count, setCount] = useState(0);\n  return (\n    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => setCount((c) => c + 1)}\n        class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n      >\n        {count}\n      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[],[192,193,261],["D",1789155705917],[],[192,193,73],"198f539a-55ff-4a74-8a1a-78994ebbf55b",["D",1789155629770],"directory",[206,207],[192,193],"aa0394ce-54ca-4951-9d06-ef89ac8d79d9",["D",1789155629770],[205,208,209,210],[192],["D",1789155629770],["D",1789503703835],{"_11":12,"_161":79},{"_11":12,"_156":157,"_78":79,"_30":77,"_158":159,"_160":24},{"_42":104,"_13":16,"_36":39,"_148":110,"_149":-5,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":14,"_155":12},"ctx",{"_57":-5,"_180":317,"_318":319,"_320":321,"_322":24,"_323":24,"_324":24,"_325":122,"_326":-5,"_327":-7,"_328":-7,"_329":26,"_330":24,"_331":24,"_332":-5,"_333":24,"_334":24,"_335":24,"_336":-5},"ENV",{"_288":289,"_290":291,"_292":16,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316},"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"]
</article></body></html>

History · App.tsx