Sprite Forge — sprite sheet animator

\n\n\n\n

Sample · walk cycle

\n \n \n \n

\n\n

\n \n frame 0 / 0\n — px\n

\n\n

\n Frames\n

\n \n \n

Click a frame to play that row.

\n\n \n

\n\n\n\n\n\n\n",2,["D",1780375128646],"branchVersion","label",[18],"pulls","branches",1,"forks","envVars",{"_174":26,"_176":26},"connections",{"_174":26,"_175":26},"count","unfilledCount","emptyCount",{"_34":223,"_13":224,"_63":225,"_44":-5,"_36":37,"_163":121,"_187":153,"_38":226,"_40":168,"_65":21,"_159":227,"_66":24,"_164":-5,"_191":228,"_17":229},{"_34":215,"_13":216,"_63":217,"_44":-5,"_36":37,"_163":218,"_187":153,"_38":219,"_40":168,"_65":211,"_159":220,"_66":24,"_164":-5,"_191":221,"_17":222},{"_34":206,"_13":207,"_63":208,"_44":-5,"_36":37,"_163":209,"_187":153,"_38":210,"_40":161,"_65":211,"_159":212,"_66":24,"_164":-5,"_191":213,"_17":214},{"_34":158,"_13":18,"_63":64,"_44":-5,"_36":37,"_163":80,"_187":153,"_38":203,"_40":161,"_65":21,"_159":160,"_66":24,"_164":-5,"_191":204,"_17":205},{"_34":194,"_13":195,"_63":196,"_44":-5,"_36":37,"_163":197,"_187":153,"_38":198,"_40":168,"_65":199,"_159":200,"_66":24,"_164":-5,"_191":201,"_17":202},{"_34":183,"_13":184,"_63":185,"_44":-5,"_36":37,"_163":186,"_187":153,"_38":188,"_40":189,"_65":21,"_159":190,"_66":24,"_164":-5,"_191":192,"_17":193},"f52f2636-5e3c-11f1-8b91-1607ee4eb77e","style.css","fa062fd2-5e38-11f1-bf27-1607ee4eb77e",17,"latest",["D",1780375132965],5,":root {\n --bg: #0b0e17;\n --panel: #141a2b;\n --panel-2: #0f1422;\n --border: #2a3450;\n --border-bright: #3a4a6e;\n --ink: #e7ecf6;\n --ink-dim: #8b97b5;\n --green: #5be38b;\n --green-deep: #2f8f59;\n --magenta: #ff5da2;\n --shadow: #05070d;\n}\n\n* { box-sizing: border-box; }\n\nhtml, body {\n margin: 0;\n background:\n radial-gradient(1200px 600px at 80% -10%, #1a2238 0%, transparent 60%),\n var(--bg);\n color: var(--ink);\n font-family: \"IBM Plex Mono\", ui-monospace, monospace;\n font-size: 14px;\n line-height: 1.5;\n min-height: 100vh;\n}\n\n/* CRT scanline overlay */\n.scanlines {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 9999;\n background: repeating-linear-gradient(\n to bottom,\n rgba(0, 0, 0, 0) 0,\n rgba(0, 0, 0, 0) 2px,\n rgba(0, 0, 0, 0.06) 3px,\n rgba(0, 0, 0, 0.06) 3px\n );\n mix-blend-mode: multiply;\n}\n\nimg, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }\n.frame-cell, .sheet-thumb { image-rendering: pixelated; }\n\n/* ---------- buttons ---------- */\n.btn {\n font-family: \"Press Start 2P\", monospace;\n font-size: 9px;\n letter-spacing: 0.5px;\n color: var(--ink);\n background: var(--panel);\n border: 2px solid var(--border);\n border-radius: 6px;\n padding: 10px 12px;\n cursor: pointer;\n box-shadow: 3px 3px 0 var(--shadow);\n transition: transform 0.05s ease, box-shadow 0.05s ease, background 0.12s ease;\n text-decoration: none;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n line-height: 1.4;\n}\n.btn:hover { background: #1b2236; }\n.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shadow); }\n.btn.full { width: 100%; justify-content: center; }\n.btn-accent { color: #06210f; background: var(--green); border-color: var(--green-deep); }\n.btn-accent:hover { background: #6ff0a0; }\n.btn-ghost { background: transparent; color: var(--ink-dim); }\n.btn-ghost:hover { color: var(--ink); background: #161d2f; }\n\n/* ---------- topbar ---------- */\n.topbar {\n display: flex;\n justify-content: space-between;\n align-items: flex-end;\n gap: 16px;\n padding: 22px clamp(16px, 4vw, 40px) 14px;\n border-bottom: 2px solid var(--border);\n flex-wrap: wrap;\n animation: fade 0.4s both;\n}\n.brand h1 {\n font-family: \"Press Start 2P\", monospace;\n font-size: clamp(18px, 3.4vw, 30px);\n margin: 0;\n color: var(--green);\n text-shadow: 0 0 10px rgba(91, 227, 139, 0.35), 3px 3px 0 var(--shadow);\n}\n.brand h1 span { color: var(--magenta); text-shadow: 0 0 10px rgba(255, 93, 162, 0.35), 3px 3px 0 var(--shadow); }\n.tagline { margin: 8px 0 0; color: var(--ink-dim); font-size: 12px; }\n.topbar-actions { display: flex; gap: 10px; }\n\n/* ---------- layout ---------- */\n.layout {\n display: grid;\n grid-template-columns: minmax(0, 1fr) 320px;\n gap: 18px;\n padding: 18px clamp(16px, 4vw, 40px) 48px;\n align-items: start;\n}\n@media (max-width: 820px) {\n .layout { grid-template-columns: 1fr; }\n}\n\n.panel {\n background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);\n border: 2px solid var(--border);\n border-radius: 12px;\n padding: 16px;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);\n animation: fade 0.5s both;\n}\n.side-panel { animation-delay: 0.08s; }\n\n.panel-head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n margin-bottom: 14px;\n flex-wrap: wrap;\n}\n.panel-head h2 {\n font-family: \"Press Start 2P\", monospace;\n font-size: 11px;\n margin: 0;\n color: var(--ink);\n}\n\n/* ---------- segmented toggles ---------- */\n.seg { display: inline-flex; border: 2px solid var(--border); border-radius: 6px; overflow: hidden; }\n.seg.full { display: flex; width: 100%; margin-bottom: 14px; }\n.seg.full .seg-btn { flex: 1; }\n.seg-btn {\n font-family: \"Press Start 2P\", monospace;\n font-size: 8px;\n color: var(--ink-dim);\n background: var(--panel-2);\n border: 0;\n border-right: 2px solid var(--border);\n padding: 8px 10px;\n cursor: pointer;\n transition: background 0.12s, color 0.12s;\n}\n.seg-btn:last-child { border-right: 0; }\n.seg-btn:hover { color: var(--ink); }\n.seg-btn.is-on { color: #06210f; background: var(--green); }\n\n/* ---------- stage ---------- */\n.stage {\n position: relative;\n display: grid;\n place-items: center;\n min-height: 320px;\n border: 2px solid var(--border);\n border-radius: 10px;\n padding: 24px;\n overflow: hidden;\n}\n.stage[data-bg=\"checker\"] {\n background:\n repeating-conic-gradient(#1b2236 0% 25%, #232d46 0% 50%) 50% / 22px 22px;\n}\n.stage[data-bg=\"dark\"] { background: #0c1018; }\n.stage[data-bg=\"light\"] { background: #d9dee8; }\n#canvas {\n display: block;\n filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45));\n max-width: 100%;\n}\n\n/* ---------- transport ---------- */\n.transport {\n display: flex;\n align-items: center;\n gap: 14px;\n margin: 14px 0 4px;\n flex-wrap: wrap;\n}\n.readout {\n font-size: 12px;\n color: var(--ink-dim);\n background: var(--panel-2);\n border: 1px solid var(--border);\n border-radius: 5px;\n padding: 5px 9px;\n}\n.readout.dim { color: var(--green); }\n\n/* ---------- frame strip ---------- */\n.strip-wrap { margin-top: 14px; }\n.strip-head {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: 12px;\n margin-bottom: 10px;\n flex-wrap: wrap;\n}\n.strip-label { font-family: \"Press Start 2P\", monospace; font-size: 9px; color: var(--ink-dim); }\n.strip {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: 54px;\n gap: 8px;\n overflow-x: auto;\n padding: 6px 2px 12px;\n scrollbar-width: thin;\n scrollbar-color: var(--border) transparent;\n}\n.frame-cell {\n position: relative;\n width: 54px;\n height: 54px;\n border: 2px solid var(--border);\n border-radius: 6px;\n background-color: #0c1018;\n background-repeat: no-repeat;\n cursor: pointer;\n transition: border-color 0.1s, transform 0.1s, box-shadow 0.1s;\n}\n.frame-cell:hover { transform: translateY(-2px); border-color: #44557a; }\n.frame-cell.in-row { border-color: rgba(91, 227, 139, 0.5); }\n.frame-cell.current {\n border-color: var(--magenta);\n box-shadow: 0 0 0 2px rgba(255, 93, 162, 0.35), 0 0 14px rgba(255, 93, 162, 0.45);\n}\n.frame-cell .idx {\n position: absolute;\n bottom: 2px;\n right: 3px;\n font-size: 9px;\n color: var(--ink-dim);\n background: rgba(8, 11, 20, 0.7);\n padding: 0 3px;\n border-radius: 3px;\n}\n.hint { color: var(--ink-dim); font-size: 11px; margin: 2px 0 0; }\n\n/* ---------- side controls ---------- */\n.control-block { margin-bottom: 20px; }\n.control-block:last-child { margin-bottom: 0; }\n.control-block h3 {\n font-family: \"Press Start 2P\", monospace;\n font-size: 9px;\n color: var(--magenta);\n margin: 0 0 12px;\n letter-spacing: 0.5px;\n}\n\n.stepper-row { display: flex; gap: 12px; }\n.stepper-label { flex: 1; font-size: 11px; color: var(--ink-dim); display: block; }\n.stepper {\n display: flex;\n margin-top: 6px;\n border: 2px solid var(--border);\n border-radius: 6px;\n overflow: hidden;\n}\n.stepper button {\n width: 30px;\n border: 0;\n background: var(--panel-2);\n color: var(--green);\n font-size: 16px;\n cursor: pointer;\n font-family: \"IBM Plex Mono\", monospace;\n}\n.stepper button:hover { background: #1b2236; }\n.stepper input {\n flex: 1;\n width: 0;\n text-align: center;\n border: 0;\n border-left: 2px solid var(--border);\n border-right: 2px solid var(--border);\n background: #0c1018;\n color: var(--ink);\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 14px;\n padding: 7px 0;\n}\n.stepper input::-webkit-outer-spin-button,\n.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }\n.stepper input { -moz-appearance: textfield; }\n\n.slider { display: block; margin-bottom: 14px; }\n.slider:last-child { margin-bottom: 0; }\n.slider span {\n display: flex;\n justify-content: space-between;\n font-size: 11px;\n color: var(--ink-dim);\n margin-bottom: 7px;\n}\n.slider b { color: var(--green); font-weight: 600; }\ninput[type=\"range\"] {\n width: 100%;\n accent-color: var(--green);\n height: 6px;\n cursor: pointer;\n}\n\n.save-status { display: block; margin-top: 8px; font-size: 11px; color: var(--green); min-height: 14px; }\n\n/* ---------- gallery ---------- */\n.gallery { display: flex; flex-direction: column; gap: 8px; }\n.sheet-card {\n position: relative;\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px;\n border: 2px solid var(--border);\n border-radius: 8px;\n background: var(--panel-2);\n cursor: pointer;\n transition: border-color 0.12s, background 0.12s;\n}\n.sheet-card:hover { background: #1b2236; }\n.sheet-card.active { border-color: var(--green); box-shadow: 0 0 0 1px rgba(91, 227, 139, 0.4) inset; }\n.sheet-thumb {\n width: 40px;\n height: 40px;\n flex: 0 0 40px;\n border: 1px solid var(--border);\n border-radius: 4px;\n background-color: #0c1018;\n background-repeat: no-repeat;\n}\n.sheet-info { min-width: 0; flex: 1; }\n.sheet-name {\n font-size: 12px;\n color: var(--ink);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.sheet-meta { font-size: 10px; color: var(--ink-dim); }\n.sheet-del {\n border: 0;\n background: transparent;\n color: var(--ink-dim);\n cursor: pointer;\n font-size: 14px;\n padding: 4px 6px;\n border-radius: 4px;\n}\n.sheet-del:hover { color: var(--magenta); background: rgba(255, 93, 162, 0.12); }\n.sheet-tag {\n font-size: 8px;\n font-family: \"Press Start 2P\", monospace;\n color: var(--green);\n border: 1px solid var(--green-deep);\n border-radius: 4px;\n padding: 2px 4px;\n}\n\n/* ---------- modal ---------- */\n.modal {\n position: fixed;\n inset: 0;\n z-index: 1000;\n display: grid;\n place-items: center;\n padding: 20px;\n background: rgba(5, 7, 13, 0.78);\n backdrop-filter: blur(3px);\n animation: fade 0.18s both;\n}\n.modal[hidden] { display: none; }\n.modal-card {\n width: min(560px, 100%);\n background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);\n border: 2px solid var(--border);\n border-radius: 14px;\n padding: 18px;\n box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);\n}\n.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }\n.modal-head h2 { font-family: \"Press Start 2P\", monospace; font-size: 12px; margin: 0; color: var(--green); }\n.x { border: 0; background: transparent; color: var(--ink-dim); font-size: 16px; cursor: pointer; }\n.x:hover { color: var(--magenta); }\n\n.drop {\n display: grid;\n place-items: center;\n min-height: 180px;\n border: 2px dashed var(--border);\n border-radius: 10px;\n padding: 16px;\n cursor: pointer;\n text-align: center;\n transition: border-color 0.12s, background 0.12s;\n}\n.drop:hover, .drop.dragging { border-color: var(--green); background: rgba(91, 227, 139, 0.06); }\n.drop-text { color: var(--ink-dim); font-size: 12px; }\n.preview-wrap { position: relative; display: inline-block; line-height: 0; }\n.preview-wrap img { max-width: 100%; max-height: 220px; border-radius: 6px; }\n.preview-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }\n\n.modal-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin: 16px 0 4px;\n}\n.modal-grid label { font-size: 11px; color: var(--ink-dim); display: flex; flex-direction: column; gap: 6px; }\n.modal-grid input {\n background: #0c1018;\n border: 2px solid var(--border);\n border-radius: 6px;\n color: var(--ink);\n font-family: \"IBM Plex Mono\", monospace;\n font-size: 14px;\n padding: 8px 10px;\n}\n.modal-grid input:focus { outline: none; border-color: var(--green); }\n.m-error { color: var(--magenta); font-size: 12px; min-height: 16px; margin: 8px 0 0; }\n.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }\n\n@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }\n","children",[],[184],"f2e4f438-5e3b-11f1-880a-1607ee4eb77e","main.ts","a0f721e0-5e37-11f1-b6c6-1607ee4eb77e",10,["D",1780374699593],"http","// Sprite Forge — server.\n// Serves the static frontend and a small JSON API for sprite sheets.\n// Uploaded sheets are stored in std/blob; the built-in sample is embedded.\n\nimport { Hono } from \"npm:hono@4\";\nimport { serveFile, parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { decodeBase64, encodeBase64 } from \"jsr:@std/encoding@1/base64\";\nimport { SAMPLE_B64, SAMPLE_META } from \"./default-sprite.js\";\n\ntype SheetMeta = {\n id: string;\n name: string;\n cols: number;\n rows: number;\n fps: number;\n contentType: string;\n builtin?: boolean;\n createdAt: number;\n};\n\nconst INDEX_KEY = \"sprite:index\";\nconst metaKey = (id: string) => `sprite:meta:${id}`;\nconst imgKey = (id: string) => `sprite:img:${id}`;\n\nasync function getIndex(): Promise {\n try {\n const v = await blob.getJSON(INDEX_KEY);\n return Array.isArray(v) ? v : [];\n } catch {\n return [];\n }\n}\nconst setIndex = (ids: string[]) => blob.setJSON(INDEX_KEY, ids);\n\nasync function listSheets(): Promise {\n const ids = await getIndex();\n const out: SheetMeta[] = [];\n for (const id of ids) {\n try {\n const m = (await blob.getJSON(metaKey(id))) as SheetMeta | null;\n if (m) out.push(m);\n } catch {\n /* skip a missing/corrupt entry */\n }\n }\n out.sort((a, b) => b.createdAt - a.createdAt);\n return [SAMPLE_META as SheetMeta, ...out];\n}\n\nfunction clampInt(v: unknown, lo: number, hi: number, dflt: number): number {\n const n = parseInt(String(v ?? \"\"), 10);\n if (Number.isNaN(n)) return dflt;\n return Math.min(hi, Math.max(lo, n));\n}\n\nconst IMG_HEADERS = { \"cache-control\": \"public, max-age=31536000, immutable\" };\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\napp.get(\"/api/sheets\", async (c) => c.json(await listSheets()));\n\napp.get(\"/api/sheets/:id/image\", async (c) => {\n const id = c.req.param(\"id\");\n if (id === \"sample\") {\n return new Response(decodeBase64(SAMPLE_B64), {\n headers: { ...IMG_HEADERS, \"content-type\": SAMPLE_META.contentType },\n });\n }\n try {\n const [meta, stored] = await Promise.all([\n blob.getJSON(metaKey(id)) as Promise,\n blob.getJSON(imgKey(id)) as Promise<{ b64: string } | null>,\n ]);\n if (!meta || !stored?.b64) return c.notFound();\n return new Response(decodeBase64(stored.b64), {\n headers: { ...IMG_HEADERS, \"content-type\": meta.contentType },\n });\n } catch {\n return c.notFound();\n }\n});\n\napp.post(\"/api/sheets\", async (c) => {\n let form: FormData;\n try {\n form = await c.req.formData();\n } catch {\n return c.json({ error: \"Expected multipart form data with a file\" }, 400);\n }\n const file = form.get(\"file\");\n if (!(file instanceof File)) return c.json({ error: \"No image file provided\" }, 400);\n\n const bytes = new Uint8Array(await file.arrayBuffer());\n if (bytes.byteLength === 0) return c.json({ error: \"That file is empty\" }, 400);\n if (bytes.byteLength > 8 * 1024 * 1024) {\n return c.json({ error: \"Image too large (8 MB max)\" }, 413);\n }\n\n const meta: SheetMeta = {\n id: crypto.randomUUID().slice(0, 8),\n name: String(form.get(\"name\") ?? \"\").trim() || file.name || \"Untitled sheet\",\n cols: clampInt(form.get(\"cols\"), 1, 64, 4),\n rows: clampInt(form.get(\"rows\"), 1, 64, 4),\n fps: clampInt(form.get(\"fps\"), 1, 60, 6),\n contentType: file.type || \"image/png\",\n createdAt: Date.now(),\n };\n\n await blob.setJSON(imgKey(meta.id), { b64: encodeBase64(bytes) });\n await blob.setJSON(metaKey(meta.id), meta);\n await setIndex([meta.id, ...(await getIndex())]);\n return c.json(meta, 201);\n});\n\napp.patch(\"/api/sheets/:id\", async (c) => {\n const id = c.req.param(\"id\");\n if (id === \"sample\") return c.json({ error: \"The sample sheet can't be edited\" }, 400);\n const meta = (await blob.getJSON(metaKey(id))) as SheetMeta | null;\n if (!meta) return c.notFound();\n const body = await c.req.json().catch(() => ({} as Record));\n const next: SheetMeta = {\n ...meta,\n name: typeof body.name === \"string\" && body.name.trim() ? body.name.trim() : meta.name,\n cols: body.cols != null ? clampInt(body.cols, 1, 64, meta.cols) : meta.cols,\n rows: body.rows != null ? clampInt(body.rows, 1, 64, meta.rows) : meta.rows,\n fps: body.fps != null ? clampInt(body.fps, 1, 60, meta.fps) : meta.fps,\n };\n await blob.setJSON(metaKey(id), next);\n return c.json(next);\n});\n\napp.delete(\"/api/sheets/:id\", async (c) => {\n const id = c.req.param(\"id\");\n if (id === \"sample\") return c.json({ error: \"The sample sheet can't be deleted\" }, 400);\n await Promise.all([\n blob.delete(imgKey(id)).catch(() => {}),\n blob.delete(metaKey(id)).catch(() => {}),\n ]);\n await setIndex((await getIndex()).filter((x) => x !== id));\n return c.json({ ok: true });\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal(import.meta.url).links.self.val));\n\n// static assets\napp.get(\"/\", () => serveFile(\"/index.html\"));\napp.get(\"/app.js\", () => serveFile(\"/app.js\"));\napp.get(\"/style.css\", () => serveFile(\"/style.css\"));\n\nexport default app.fetch;\n",[],[195],["D",1780375128646],[],[18],"b96c395a-5e3b-11f1-9366-1607ee4eb77e","default-sprite.js","e689993a-5e38-11f1-8147-1607ee4eb77e",9,["D",1780374603199],"script","// Built-in sample sprite sheet.\n// A 64x96 PNG: 4 columns x 4 rows (16x24 px cells) walk cycle, recovered to\n// native pixel resolution and embedded as base64 so the app works on first\n// load with no upload required.\n// Rows (top -> bottom): walk-down, walk-up, walk-side, walk-side(alt).\n\nexport const SAMPLE_META = {\n id: \"sample\",\n name: \"Sample \\u00b7 walk cycle\",\n cols: 4,\n rows: 4,\n fps: 6,\n contentType: \"image/png\",\n builtin: true,\n createdAt: 0,\n};\n\nexport const SAMPLE_B64 =\n \"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\";\n",[],[207],"ed7c8fe6-5e3c-11f1-bec0-1607ee4eb77e","app.js","2c0cc892-5e39-11f1-a35a-1607ee4eb77e",15,["D",1780375120044],"// Sprite Forge — client. Vanilla JS, canvas-based sprite-sheet animation.\n// Talks to the JSON API in main.ts; sheets (incl. the built-in sample) come\n// from /api/sheets and their pixels from /api/sheets/:id/image.\n\nconst $ = (id) => document.getElementById(id);\nconst clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));\n\n// ---- DOM refs ----\nconst canvas = $(\"canvas\");\nconst ctx = canvas.getContext(\"2d\");\nconst stage = $(\"stage\");\nconst stageTitle = $(\"stage-title\");\nconst playBtn = $(\"play-btn\");\nconst frameReadout = $(\"frame-readout\");\nconst dimsReadout = $(\"dims-readout\");\nconst strip = $(\"strip\");\nconst gallery = $(\"gallery\");\n\nconst colsInput = $(\"cols\");\nconst rowsInput = $(\"rows\");\nconst fpsInput = $(\"fps\");\nconst fpsVal = $(\"fps-val\");\nconst scaleInput = $(\"scale\");\nconst scaleVal = $(\"scale-val\");\n\nconst modeToggle = $(\"mode-toggle\");\nconst dirToggle = $(\"dir-toggle\");\nconst bgToggle = $(\"bg-toggle\");\n\nconst saveRow = $(\"save-row\");\nconst saveBtn = $(\"save-btn\");\nconst saveStatus = $(\"save-status\");\nconst uploadBtn = $(\"upload-btn\");\n\n// modal\nconst modal = $(\"modal\");\nconst mClose = $(\"m-close\");\nconst mCancel = $(\"m-cancel\");\nconst mAdd = $(\"m-add\");\nconst drop = $(\"drop\");\nconst fileInput = $(\"file\");\nconst previewWrap = $(\"preview-wrap\");\nconst previewImg = $(\"preview\");\nconst previewGrid = $(\"preview-grid\");\nconst dropText = $(\"drop-text\");\nconst mName = $(\"m-name\");\nconst mCols = $(\"m-cols\");\nconst mRows = $(\"m-rows\");\nconst mFps = $(\"m-fps\");\nconst mError = $(\"m-error\");\n\n// ---- state ----\nconst state = {\n sheets: [],\n sheet: null,\n img: null,\n imgW: 0,\n imgH: 0,\n cols: 4,\n rows: 4,\n fps: 6,\n scale: 4,\n mode: \"row\", // \"row\" | \"all\"\n dir: \"loop\", // \"loop\" | \"pingpong\"\n row: 0,\n bg: \"checker\",\n playing: true,\n seq: [], // global frame indices to play, in order\n pos: 0, // index into seq\n cur: 0, // current global frame index\n lastTs: 0,\n};\n\nconst imageUrl = (s) => `/api/sheets/${s.id}/image?v=${s.createdAt}`;\nconst frameW = () => Math.max(1, Math.floor(state.imgW / state.cols));\nconst frameH = () => Math.max(1, Math.floor(state.imgH / state.rows));\n\n// ---- sequence / drawing ----\nfunction baseSeq() {\n const total = state.cols * state.rows;\n if (state.mode === \"all\") return Array.from({ length: total }, (_, i) => i);\n const start = clamp(state.row, 0, state.rows - 1) * state.cols;\n const out = [];\n for (let i = 0; i < state.cols && start + i < total; i++) out.push(start + i);\n return out;\n}\n\nfunction buildSeq() {\n const base = baseSeq();\n state.seq =\n state.dir === \"pingpong\" && base.length > 2\n ? base.concat(base.slice(1, -1).reverse())\n : base;\n if (state.pos >= state.seq.length) state.pos = 0;\n}\n\nfunction setupCanvas() {\n canvas.width = frameW() * state.scale;\n canvas.height = frameH() * state.scale;\n ctx.imageSmoothingEnabled = false;\n}\n\nfunction drawFrame(idx) {\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n if (!state.img) return;\n const fw = frameW();\n const fh = frameH();\n const sx = (idx % state.cols) * fw;\n const sy = Math.floor(idx / state.cols) * fh;\n ctx.drawImage(state.img, sx, sy, fw, fh, 0, 0, fw * state.scale, fh * state.scale);\n}\n\nfunction updateReadout() {\n frameReadout.textContent = state.seq.length\n ? `frame ${state.pos + 1} / ${state.seq.length}`\n : \"frame 0 / 0\";\n dimsReadout.textContent = state.img ? `${frameW()}×${frameH()} px` : \"— px\";\n}\n\n// Restart on anything that changes geometry or the sequence.\nfunction restart() {\n buildSeq();\n setupCanvas();\n if (state.pos >= state.seq.length) state.pos = 0;\n state.cur = state.seq.length ? state.seq[state.pos] : 0;\n state.lastTs = 0;\n drawFrame(state.cur);\n highlightStrip();\n updateReadout();\n}\n\n// rAF loop — reads fps & playing live, so changing them never restarts.\nfunction loop(ts) {\n requestAnimationFrame(loop);\n if (!state.seq.length) return;\n if (!state.playing) {\n state.lastTs = ts;\n return;\n }\n if (!state.lastTs) state.lastTs = ts;\n if (ts - state.lastTs >= 1000 / state.fps) {\n state.lastTs = ts;\n state.pos = (state.pos + 1) % state.seq.length;\n state.cur = state.seq[state.pos];\n drawFrame(state.cur);\n highlightStrip();\n updateReadout();\n }\n}\n\n// ---- frame strip (shows the whole grid) ----\nfunction renderStrip() {\n strip.innerHTML = \"\";\n if (!state.img || !state.sheet) return;\n const total = state.cols * state.rows;\n const url = imageUrl(state.sheet);\n for (let i = 0; i < total; i++) {\n const col = i % state.cols;\n const r = Math.floor(i / state.cols);\n const cell = document.createElement(\"div\");\n cell.className = \"frame-cell\";\n cell.dataset.idx = i;\n cell.style.backgroundImage = `url(\"${url}\")`;\n cell.style.backgroundSize = `${state.cols * 100}% ${state.rows * 100}%`;\n cell.style.backgroundPosition = `${state.cols > 1 ? (col / (state.cols - 1)) * 100 : 0}% ${\n state.rows > 1 ? (r / (state.rows - 1)) * 100 : 0\n }%`;\n const tag = document.createElement(\"span\");\n tag.className = \"idx\";\n tag.textContent = i;\n cell.appendChild(tag);\n cell.addEventListener(\"click\", () => {\n state.mode = \"row\";\n reflectMode();\n state.row = r;\n state.playing = true;\n reflectPlay();\n restart();\n const local = state.seq.indexOf(i);\n if (local >= 0) {\n state.pos = local;\n state.cur = i;\n drawFrame(i);\n highlightStrip();\n updateReadout();\n }\n });\n strip.appendChild(cell);\n }\n highlightStrip();\n}\n\nfunction highlightStrip() {\n for (const cell of strip.children) {\n const i = +cell.dataset.idx;\n const r = Math.floor(i / state.cols);\n cell.classList.toggle(\"current\", i === state.cur);\n cell.classList.toggle(\"in-row\", state.mode === \"row\" && r === state.row);\n }\n}\n\n// ---- gallery ----\nfunction renderGallery() {\n gallery.innerHTML = \"\";\n for (const s of state.sheets) {\n const card = document.createElement(\"div\");\n card.className = \"sheet-card\" + (state.sheet && s.id === state.sheet.id ? \" active\" : \"\");\n\n const thumb = document.createElement(\"div\");\n thumb.className = \"sheet-thumb\";\n thumb.style.backgroundImage = `url(\"${imageUrl(s)}\")`;\n thumb.style.backgroundSize = `${s.cols * 100}% ${s.rows * 100}%`;\n thumb.style.backgroundPosition = \"0% 0%\";\n\n const info = document.createElement(\"div\");\n info.className = \"sheet-info\";\n const name = document.createElement(\"div\");\n name.className = \"sheet-name\";\n name.textContent = s.name;\n const meta = document.createElement(\"div\");\n meta.className = \"sheet-meta\";\n meta.textContent = `${s.cols}×${s.rows} · ${s.fps} fps`;\n info.append(name, meta);\n\n card.append(thumb, info);\n\n if (s.builtin) {\n const tag = document.createElement(\"span\");\n tag.className = \"sheet-tag\";\n tag.textContent = \"SAMPLE\";\n card.appendChild(tag);\n } else {\n const del = document.createElement(\"button\");\n del.className = \"sheet-del\";\n del.type = \"button\";\n del.textContent = \"✕\";\n del.title = \"Delete sheet\";\n del.addEventListener(\"click\", (e) => {\n e.stopPropagation();\n deleteSheet(s);\n });\n card.appendChild(del);\n }\n\n card.addEventListener(\"click\", () => selectSheet(s.id));\n gallery.appendChild(card);\n }\n}\n\nasync function selectSheet(id) {\n const s = state.sheets.find((x) => x.id === id);\n if (!s) return;\n state.sheet = s;\n state.cols = s.cols;\n state.rows = s.rows;\n state.fps = s.fps;\n state.row = 0;\n state.pos = 0;\n\n colsInput.value = s.cols;\n rowsInput.value = s.rows;\n fpsInput.value = clamp(s.fps, 1, 60);\n fpsVal.textContent = `${s.fps} fps`;\n stageTitle.textContent = s.name;\n saveRow.hidden = !!s.builtin;\n saveStatus.textContent = \"\";\n\n renderGallery();\n await loadImage(s);\n renderStrip();\n restart();\n}\n\nfunction loadImage(s) {\n return new Promise((resolve) => {\n const img = new Image();\n img.onload = () => {\n state.img = img;\n state.imgW = img.naturalWidth;\n state.imgH = img.naturalHeight;\n resolve();\n };\n img.onerror = () => {\n state.img = null;\n state.imgW = 0;\n state.imgH = 0;\n resolve();\n };\n img.src = imageUrl(s);\n });\n}\n\nasync function refreshSheets() {\n const res = await fetch(\"/api/sheets\");\n state.sheets = await res.json();\n renderGallery();\n}\n\n// ---- save / delete ----\nasync function saveGrid() {\n if (!state.sheet || state.sheet.builtin) return;\n saveStatus.textContent = \"Saving…\";\n try {\n const res = await fetch(`/api/sheets/${state.sheet.id}`, {\n method: \"PATCH\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ cols: state.cols, rows: state.rows, fps: state.fps }),\n });\n if (!res.ok) throw new Error();\n const updated = await res.json();\n const i = state.sheets.findIndex((x) => x.id === updated.id);\n if (i >= 0) state.sheets[i] = updated;\n state.sheet = updated;\n saveStatus.textContent = \"Saved ✓\";\n renderGallery();\n } catch {\n saveStatus.textContent = \"Save failed\";\n }\n}\n\nasync function deleteSheet(s) {\n if (s.builtin) return;\n if (!confirm(`Delete \"${s.name}\"?`)) return;\n await fetch(`/api/sheets/${s.id}`, { method: \"DELETE\" });\n const wasCurrent = state.sheet && state.sheet.id === s.id;\n await refreshSheets();\n if (wasCurrent) await selectSheet(\"sample\");\n}\n\n// ---- upload modal ----\nlet pendingFile = null;\nlet pendingUrl = null;\n\nfunction openModal() {\n modal.hidden = false;\n mError.textContent = \"\";\n}\n\nfunction closeModal() {\n modal.hidden = true;\n pendingFile = null;\n if (pendingUrl) {\n URL.revokeObjectURL(pendingUrl);\n pendingUrl = null;\n }\n fileInput.value = \"\";\n previewWrap.hidden = true;\n previewImg.removeAttribute(\"src\");\n dropText.textContent = \"Drop an image here · click to browse · or paste\";\n mError.textContent = \"\";\n mName.value = \"\";\n}\n\nfunction setPreviewFile(file) {\n if (!file || !file.type.startsWith(\"image/\")) {\n mError.textContent = \"Please choose an image file.\";\n return;\n }\n mError.textContent = \"\";\n pendingFile = file;\n if (pendingUrl) URL.revokeObjectURL(pendingUrl);\n pendingUrl = URL.createObjectURL(file);\n previewImg.onload = () => {\n previewWrap.hidden = false;\n dropText.textContent = file.name;\n drawPreviewGrid();\n };\n previewImg.src = pendingUrl;\n if (!mName.value.trim()) mName.value = file.name.replace(/\\.[^.]+$/, \"\");\n}\n\nfunction drawPreviewGrid() {\n if (!previewImg.naturalWidth || previewWrap.hidden) return;\n previewGrid.width = previewImg.clientWidth;\n previewGrid.height = previewImg.clientHeight;\n const g = previewGrid.getContext(\"2d\");\n g.clearRect(0, 0, previewGrid.width, previewGrid.height);\n const cols = clamp(parseInt(mCols.value) || 1, 1, 64);\n const rows = clamp(parseInt(mRows.value) || 1, 1, 64);\n g.strokeStyle = \"rgba(91,227,139,0.85)\";\n g.lineWidth = 1;\n for (let i = 1; i < cols; i++) {\n const x = Math.round((i * previewGrid.width) / cols) + 0.5;\n g.beginPath();\n g.moveTo(x, 0);\n g.lineTo(x, previewGrid.height);\n g.stroke();\n }\n for (let j = 1; j < rows; j++) {\n const y = Math.round((j * previewGrid.height) / rows) + 0.5;\n g.beginPath();\n g.moveTo(0, y);\n g.lineTo(previewGrid.width, y);\n g.stroke();\n }\n}\n\nasync function addSheet() {\n if (!pendingFile) {\n mError.textContent = \"Pick an image first.\";\n return;\n }\n const fd = new FormData();\n fd.append(\"file\", pendingFile);\n fd.append(\"name\", mName.value.trim());\n fd.append(\"cols\", mCols.value);\n fd.append(\"rows\", mRows.value);\n fd.append(\"fps\", mFps.value);\n mAdd.disabled = true;\n mError.textContent = \"\";\n try {\n const res = await fetch(\"/api/sheets\", { method: \"POST\", body: fd });\n if (!res.ok) {\n const e = await res.json().catch(() => ({}));\n throw new Error(e.error || \"Upload failed\");\n }\n const meta = await res.json();\n await refreshSheets();\n await selectSheet(meta.id);\n closeModal();\n } catch (err) {\n mError.textContent = err.message || \"Upload failed\";\n } finally {\n mAdd.disabled = false;\n }\n}\n\n// ---- reflect UI state ----\nfunction reflectPlay() {\n playBtn.textContent = state.playing ? \"⏸ Pause\" : \"▶ Play\";\n}\nfunction setSeg(group, attr, val) {\n for (const b of group.querySelectorAll(\".seg-btn\")) b.classList.toggle(\"is-on\", b.dataset[attr] === val);\n}\nfunction reflectMode() {\n setSeg(modeToggle, \"mode\", state.mode);\n}\nfunction reflectDir() {\n setSeg(dirToggle, \"dir\", state.dir);\n}\n\nfunction applyGrid() {\n state.cols = clamp(parseInt(colsInput.value) || 1, 1, 64);\n state.rows = clamp(parseInt(rowsInput.value) || 1, 1, 64);\n colsInput.value = state.cols;\n rowsInput.value = state.rows;\n if (state.row >= state.rows) state.row = state.rows - 1;\n renderStrip();\n restart();\n}\n\n// ---- bindings ----\nfunction bindControls() {\n for (const btn of document.querySelectorAll(\"[data-step]\")) {\n btn.addEventListener(\"click\", () => {\n const input = btn.dataset.step === \"cols\" ? colsInput : rowsInput;\n input.value = clamp((parseInt(input.value) || 1) + +btn.dataset.delta, 1, 64);\n applyGrid();\n });\n }\n colsInput.addEventListener(\"change\", applyGrid);\n rowsInput.addEventListener(\"change\", applyGrid);\n\n fpsInput.addEventListener(\"input\", () => {\n state.fps = clamp(parseInt(fpsInput.value) || 1, 1, 60);\n fpsVal.textContent = `${state.fps} fps`;\n });\n scaleInput.addEventListener(\"input\", () => {\n state.scale = clamp(parseInt(scaleInput.value) || 1, 1, 12);\n scaleVal.textContent = `${state.scale}×`;\n restart();\n });\n\n playBtn.addEventListener(\"click\", () => {\n state.playing = !state.playing;\n reflectPlay();\n });\n\n for (const b of modeToggle.querySelectorAll(\".seg-btn\"))\n b.addEventListener(\"click\", () => {\n state.mode = b.dataset.mode;\n reflectMode();\n restart();\n });\n for (const b of dirToggle.querySelectorAll(\".seg-btn\"))\n b.addEventListener(\"click\", () => {\n state.dir = b.dataset.dir;\n reflectDir();\n restart();\n });\n for (const b of bgToggle.querySelectorAll(\".seg-btn\"))\n b.addEventListener(\"click\", () => {\n state.bg = b.dataset.bg;\n stage.dataset.bg = state.bg;\n setSeg(bgToggle, \"bg\", state.bg);\n });\n\n saveBtn.addEventListener(\"click\", saveGrid);\n uploadBtn.addEventListener(\"click\", openModal);\n}\n\nfunction bindModal() {\n fileInput.addEventListener(\"change\", () => {\n if (fileInput.files[0]) setPreviewFile(fileInput.files[0]);\n });\n mCols.addEventListener(\"input\", drawPreviewGrid);\n mRows.addEventListener(\"input\", drawPreviewGrid);\n mClose.addEventListener(\"click\", closeModal);\n mCancel.addEventListener(\"click\", closeModal);\n mAdd.addEventListener(\"click\", addSheet);\n modal.addEventListener(\"click\", (e) => {\n if (e.target === modal) closeModal();\n });\n\n drop.addEventListener(\"dragover\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n drop.classList.add(\"dragging\");\n });\n drop.addEventListener(\"dragleave\", (e) => {\n e.stopPropagation();\n drop.classList.remove(\"dragging\");\n });\n drop.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n e.stopPropagation();\n drop.classList.remove(\"dragging\");\n const f = e.dataTransfer?.files?.[0];\n if (f) setPreviewFile(f);\n });\n}\n\nfunction bindGlobal() {\n window.addEventListener(\"dragover\", (e) => e.preventDefault());\n window.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n if (!modal.hidden) return;\n const f = e.dataTransfer?.files?.[0];\n if (f && f.type.startsWith(\"image/\")) {\n openModal();\n setPreviewFile(f);\n }\n });\n window.addEventListener(\"paste\", (e) => {\n const item = [...(e.clipboardData?.items || [])].find((i) => i.type.startsWith(\"image/\"));\n if (!item) return;\n const f = item.getAsFile();\n if (f) {\n openModal();\n setPreviewFile(f);\n }\n });\n window.addEventListener(\"keydown\", (e) => {\n if (e.code !== \"Space\") return;\n const t = e.target;\n if (t && (t.tagName === \"INPUT\" || t.tagName === \"TEXTAREA\" || t.isContentEditable)) return;\n if (!modal.hidden) return;\n e.preventDefault();\n state.playing = !state.playing;\n reflectPlay();\n });\n}\n\n// ---- init ----\nfunction init() {\n bindControls();\n bindModal();\n bindGlobal();\n refreshSheets().then(() => selectSheet(\"sample\"));\n requestAnimationFrame(loop);\n}\ninit();\n",[],[216],"02753c90-5e3d-11f1-ad24-1607ee4eb77e","README.md","79a2feda-5e3b-11f1-b956-1607ee4eb77e",["D",1780375155226],"# 🎞️ sprite-animator\n\n**Sprite Forge** — a browser sprite-sheet animator. Loads a built-in sample sheet,\nlets you set the grid (columns × rows), pick a row to play, scrub frames, and tune\nspeed/zoom. Upload, drag-drop, or paste any other sheet to animate it instead;\nuploaded sheets persist and show up in the gallery.\n\n**Live:** \n\n## Use it\n- **Columns / Rows** — match the sheet's grid. Frame size is derived automatically.\n- **Single row / All frames** — play just one row, or every frame left-to-right, top-to-bottom.\n- **Loop / Ping-pong** — ping-pong bounces back through the frames (nice for short cycles).\n- **Speed / Zoom** — fps and nearest-neighbour scale, so pixels stay crisp.\n- **Upload / drag-drop / paste** an image to add a sheet. Click any frame in the strip to play that row.\n- **Save grid to sheet** stores the columns/rows/fps you dialled in for an uploaded sheet.\n\nThe bundled sample is a 4×4 sheet — rows are **down / up / side / side**.\n\n## How it works\n\nThe server is static + a small JSON API. The sample sheet is embedded as base64 and\nserved like any other sheet; uploads live in blob storage. All animation happens\nclient-side on a `

Sample · walk cycle

Add a sprite sheet

History · index.html